Red Hat JBoss Developer Studio 10.2 Getting Started with JBoss

Red Hat JBoss Developer Studio 10.2 Getting Started with JBoss

CHAPTER 2. DEVELOPING FIRST APPLICATIONS WITH JBOSS DEVELOPER STUDIO TOOLS

You can also enable LiveReload for already opened BrowserSim simulated devices. After starting the LiveReload server, right-click the BrowserSim simulated device frame and click

Enable LiveReload.

2.6. GENERATING A HTML5 WEB APPLICATION USING THE

MOBILE WEB PALETTE

The IDE provides the Mobile Web palette that allows the user to make interactive web applications.

This palette offers a wide range of features including drag-and-drop widgets for adding common web interface framework features such as HTML5, jQuery Mobile, and Ionic tags to html files. It also contains widgets like Panels, Pages, Lists, Buttons to make the applications more user friendly and efficient.

Use the instructions to complete the following steps:

1.

Section 2.6.1, “Adding a New HTML5 jQuery Mobile File to a Project”

2.

Section 2.6.2, “Adding New Pages to the Web Application”

3.

Section 2.6.3, “Customizing the Home Page of the Web Application”

4.

Section 2.6.7, “Running and Testing the HTML5 Mobile Application Using BrowserSim”

2.6.1. Adding a New HTML5 jQuery Mobile File to a Project

The HTML5 jQuery Mobile file template consists of JavaScript and CSS library references that are inserted in the file’s HTML header. The template also inserts a skeleton of the jQuery Mobile page and listview widgets in the file’s HTML body. The following procedure details the steps to insert the template into your project.

To create a new HTML5 jQuery Mobile file in an existing project:

1. In the Project Explorer view, expand [project name] → srcmain.

2. Right-click webapp and click NewHTML File.

3. Complete the fields about the html file as follows: a. Ensure the parent folder field shows [project name]/src/main/webapp. b. In the File name field, type a name for the HTML5 file.

4. Click Next.

5. From the Templates table, select HTML5 jQuery Mobile Page (1.4) and click

Finish.

Figure 2.24. Select HTML5 jQuery Mobile Page (1.4)

73

Red Hat JBoss Developer Studio 10.2 Getting Started with JBoss Developer Studio Tools

74

Result: The new file is listed in the Project Explorer view under the project webapp directory and the file opens in the editor.

2.6.2. Adding New Pages to the Web Application

Use the jQuery Mobile Page widget to add pages to your mobile web application as follows:

1. In the Project Explorer view, expand [project name] → srcmainwebapp.

2. Right-click the new html file and click Open WithJBoss Tools HTML Editor.

3. In the Palette view, click the jQuery Mobile tab to view the available widgets and click

Page.

4. Complete the fields about the page as follows: a. In the Header field, type a name for the page header. b. In the Footer field, type a name for the page footer.

5. Click Finish.

Figure 2.25. Adding a New Page

CHAPTER 2. DEVELOPING FIRST APPLICATIONS WITH JBOSS DEVELOPER STUDIO TOOLS

6. Save the changes to the file by clicking the Save icon.

Result: A page is added to the html file. JS and CSS references are also automatically added to the file by the Page widget wizard.

Figure 2.26. New Page Added to the HTML File

2.6.3. Customizing the Home Page of the Web Application

Use the widgets in the jQuery Mobile palette to customize the page. Use the instructions to add a menu to the page. This menu links to three other pages: Home, Search, and the Add Contacts page.

To create and add the menu to your application page:

75

Red Hat JBoss Developer Studio 10.2 Getting Started with JBoss Developer Studio Tools

1.

Section 2.6.4, “Adding a Panel to the Page”

2.

Section 2.6.5, “Adding a List to the Panel”

3.

Section 2.6.6, “Adding a Button in the Header of the Page to Display the List”

2.6.4. Adding a Panel to the Page

1. Place the cursor where you want the panel, in the html file.

2. In the Palette view, in the jQuery Mobile tab, click Panel.

3. Complete the fields about the Panel as follows: a. In the ID field, type my_panel_ID. b. Clear the Add Menu check box.

4. Click Finish.

5. Save the html file.

Figure 2.27. Adding a New Panel

76

Result: A corresponding code snippet, for the newly added panel, is added to the html file where you had placed the cursor.

2.6.5. Adding a List to the Panel

1. Within the panel’s code snippet, place your cursor at the desired location for the new list.

2. In the Palette view, in the jQuery Mobile tab, click ListView.

3. Complete the fields about the ListView as follows:

CHAPTER 2. DEVELOPING FIRST APPLICATIONS WITH JBOSS DEVELOPER STUDIO TOOLS

a. In the Items section, 1 tab, in the Label field, type the name for the first list item

on the page.

b. In the URL (href) field, type a URL identifier for the label.

Figure 2.28. New Listitem Added to the Panel

1. Click Finish.

2. Save the html file.

Result: The new list item name appears in the code snippet.

Figure 2.29. Code for the New Listitem in the Panel Added

77

Red Hat JBoss Developer Studio 10.2 Getting Started with JBoss Developer Studio Tools

78

2.6.6. Adding a Button in the Header of the Page to Display the List

1. Place the cursor within the header at the desired location for the new button.

2. In the Palette view, in the jQuery Mobile tab, click Button.

3. Complete the fields about the button as follows: a. In the Label field, type Menu. b. In the URL (href) field, type # followed by the panel ID (#my_panel_ID, in this

case).

c. In the Icon list, select an icon. d. In the Icon position list, select a desired value. e. Select the Icon only check-box.

4. Click Finish.

5. Save the html file.

Figure 2.30. Adding a Button

CHAPTER 2. DEVELOPING FIRST APPLICATIONS WITH JBOSS DEVELOPER STUDIO TOOLS

Result: The following code is added to the body of the html file.

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

<div data-role= "panel" id= "my_panel_ID" >

<ul data-role= "listview" id= "listview-1" >

<li><a href= "1st_item.html" > 1st_item </a></li>

<li><a href= "item2.html" > Item 2 </a></li>

<li><a href= "item3.html" > Item 3 </a></li>

</ul>

</div>

<div data-role= "header" >

<h1> This is the Page Header </h1>

<a href= "#my_panel_ID" id= "button-1" class= "ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all" > Menu </a>

</div>

<div data-role= "content" >

<p> Page content goes here.

</p>

</div>

<div data-role= "footer" >

<h4> This is the Page Footer </h4>

</div>

</div>

2.6.7. Running and Testing the HTML5 Mobile Application Using BrowserSim

Test the newly added elements to the application by navigating to the interface on BrowserSim as follows:

79

Red Hat JBoss Developer Studio 10.2 Getting Started with JBoss Developer Studio Tools

1. In the Project Explore view, expand [project name] → srcmainwebapp.

2. Right-click the changed html file and click Open WithBrowserSim.

Result: A simulated device appears and displays the application.

Figure 2.31. The Changes Made to the HTML File Displayed on BrowserSim

80

Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertisement

Table of contents