Intel XDK: Controls 7: Using the Console Widget

Sometimes you want to display what is written to the Console and you can use this widget. It is quite simple to use.

The Console widget is here in Intel XDK. It is in the 'Other' category.


Start a new blank, Standard HTML5 project in Intel XDK (version 3400 used in this post). Enable the Use App Designer checkbox.

Add a button to the page by dragging and dropping a Button from the 'Buttons' category. Use the Go button widget.

The button's Label is 'Button'. Place check mark for ID and provide an ID, herein bt1.


Add a Console widget below the button as shown by dragging and dropping.


This and the button adds the following HML fragment to the index.html page.


The eval button evaluates the string expression and sends it to the textarea in the above fragment.

Test this control using some expressions after bringing up the page in the emulator. Use any emulator.

In the box left of eval button enter the following ans hit eval.

x=2; y=3; z=4;  x+y+z

The response will appear in the textarea below the button as shown.

Here is another example. We shall change the Button's name to something else.

Insert this code in the eval's text area as shown. Presently the textarea is displaying result from the previous click action.

Now click the eval button and notice that the 'Button' is changed to 'Hello World'.

One last example. Insert the following code in the text  of eval button and hit eval button.
Now click eval.
The emulator now displays the New URL as shown.


You can use the top left button to return to your original page.

Post a Comment

Popular posts from this blog

Develop a Side Menu App using Intel XDK - Part 1

UWP: XAML's ListView Control and its SelectionChanged event - Part 1

Setting up Kid's Corner on Windows 10 Phone