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.

ConsoleWidget_00

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.

ConsoleWidget_01

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

ConsoleWidget_02

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

ConsoleWidget_03

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.

ConsoleWidget_04

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.

ConsoleWidget_05

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

ConsoleWidget_06

One last example. Insert the following code in the text  of eval button and hit eval button.

ConsoleWidget_07x

Now click eval.

The emulator now displays the New URL as shown.

ConsoleWidget_08

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

TAB BAR Control in App Framework 7 here:
http://hodentekmobile.blogspot.com/2016/08/intel-xdk-controls-9-tab-bar-control-in.html