This is an old revision of the document!

Lab 10. User Interface and User Experience

In this laboratory we will try to see different ways we can interact interact programmatically with the interface from javascript.

In order to do these exercises you will need a new phoengap project and the IoT template. Also, in order to make builds, you will need an adobe account to access phonegap build.

For starters we will need the following pages:

  • news (which will display some news)
  • chat (will allow the IoT app users to chat)
  • images (display a gallery of images uploaded by IoT App users)
  • sensors (interact with your boards)
  • templates (a page that should never be shown to the users which will contain copies of the HTML elements you need to use in the code)

Don't forget to give each page and ID and for testing purposes also write the name of the page inside the page. Eg:

<div id="news" data-role="page">

Now that you've created the pages start linking them to the menu by creating buttons as shown in the course: Eg:

  <a href="#news">
    <i class="fa fa-newspaper-o"></i> News

In your template you will find the close button already defined, so start creating your own buttons after that. Also try assigning a relevant icon to each menu item.

You should achieve an end result similar with the one presented in the course.

2) Inputs, buttons and message boxes

Alerts and Timing

The standard way to display a message box on the web is alert() for a notification base message box, confirm() for a yes/no answer message box.

The normal usage for the 2 is

if( confirm('Are you human?') ){
  //code for yes
  //code for no

There is a problem with apple phones where they need a delay of at least 0ms (a delay of 0 might not make sense but it actually waits 1 event loop cycle which can be less than 1ms) in order to show alerts. This problem exist for more elements not just alerts. In javascript there are 2 main timing methods: setTimeout which delays a function and setInterval which run a function at set intervals.

var id_of_timer = setTimeout(callback, time); //  to create a delay
clearTimeout(id_of_timer); // to delete the delay before it actually runs

var id_of_timer = setInterval(callback, time); //  to create an interval
clearInterval(id_of_timer); // to delete the interval

the callback can be the name of a function,method created before or an anonymous function crated in place:




This is true for any callbacks in javascript. You can always either point to a method/function or create a new one on the spot.

CSS selectors,input boxes and values

jQuery (and javascript in general, we use jQuery for simplification) allows us to access elements by providing a css selector towards them. The selection can result 0,1 or more elements.

A css selector can select elements based on tag,id,class,attributes and many other constraints, but we will stick to tag id and class here. An html/xml node in general looks like

<tag_name id="id" class="class1 class2 class3" attr1="attr1 value" attr2="attr2 value">
  html content

Even if browsers allow you to give the same id to multiple elements, each id needs to be unique for things to work properly. In order to select a certain element the selector can be:


but each part can be omitted. In this case for example since the id is already unique there is no need to mention the tag_name and the class so


should suffice.

In order to select an element from javascript

$(cssSelector as string); // EG $("#username")

This call returns a jQuery object on which we can use jQuery methods to modify the HTML node.

In order to retrieve or change the contents of a javascript element we can muse the .html() jQuery method.

<div id="example">

For the above code:

$("#example").html(); //would return  <p>Example</p>
/* would change the node too
   <div id="example">

Now, let's go to the chat page and create some interactive input boxes and buttons.

iot/labs/10.1435563005.txt.gz ยท Last modified: 2015/06/29 10:30 by avner.solomon
CC Attribution-Share Alike 3.0 Unported Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0