2.11. Add a User Interface Optimized for Mobile Devices

Procedure 2.11. Add a User Interface Optimized for Mobile Devices

1. In the Project Explorer view, expand ticket-monster→src→main.
2. Right-click webapp and click New→HTML file.
3. Complete the information about the file as follows:

   • In the Enter or select the parent folder field, type ticket-monster/src/main/webapp.
   • In the File name field, type mobile.html.
   

   Figure 2.20. New HTML File using the New HTML File Wizard

4. Click Next.
5. From the Templates list, select HTML5 jQuery Mobile Page (1.4) and click Finish. This creates a mobile.html file that is automatically opened in the Visual/Source tab of the Visual Page Editor.
   

   Figure 2.21. Selected HTML5 jQuery Mobile Page (1.4) Template in New HTML File Wizard

6. List the events returned by the web service in the mobile user interface by adding the following lines immediately after the alert("Ready To Go"); line

   $.getJSON("rest/events", function(events) {
   	// console.log("returned are " + events);
   	var listOfEvents = $("#listOfItems");
   	listOfEvents.empty();
   	$.each(events, function(index, event) {
   		// console.log(event.name);
   		listOfEvents.append("<li><a href='#'>" + event.name + "</a>");
       });
       listOfEvents.listview("refresh");
   });
   

   

   Figure 2.22. Completed mobile.html File

7. Save the mobile.html file.