- 6.1. Overview of Mobile Web Tools
- 6.2. Features of Mobile Web Tools
- 6.2.1. Features Overview
- 6.2.2. Create a Mobile Web Project
- 6.2.3. Use a HTML5 jQuery Mobile File Template
- 6.2.4. Access the jQuery Mobile Palette
- 6.2.5. Insert a jQuery Mobile Palette Widget into a HTML5 File
- 6.2.6. Get Assistance with jQuery Mobile Programming
- 6.2.7. View jQuery Mobile Pages in a Browser
- 6.3. Customizing Mobile Web Tools
Mobile Web Tools provides tooling for developing mobile web applications within the IDE. It simplifies the process of getting started with HTML5 and jQuery Mobile technologies that are used for these types of applications and provides efficient workflows for developing with them on a daily basis.
Mobile Web Tools consists of project wizards, file templates, the jQuery Mobile palette, and actions for developing with HTML5 and jQuery Mobile:
The HTML5 project wizards and HTML5 jQuery Mobile file template enable you to quickly generate the foundations of mobile web applications and to view mobile web application programming in action.
The jQuery Mobile palette offers a visual reference of the available HTML5 and jQuery Mobile user interface widgets, which can be effortlessly inserted into your project files with drag-and-drop functionality. In conjunction with the jQuery Mobile palette, widget wizards allow you to easily customize HTML5 and jQuery Mobile widgets when inserting them into your project.
Code assistance and one-click action for viewing jQuery Mobile pages in browsers enable you to work more efficiently when developing mobile web applications in the IDE.
The aim of this section is to guide you in using Mobile Web Tools:
Generate the foundations of web applications with the project wizards and file templates
Access the jQuery Mobile palette and add customized widgets to your mobile web application with the aid of the widget wizards
Use code completion to assist in programming
View pages of the application in various browsers
Project wizards are available to assist you in generating new mobile web applications. The project wizards are listed in the JBoss Central tab:
HTML5 Project, under Start from scratch
kitchensink-html5-mobile, under Start from a sample
Important
In order to deploy the applications created by these wizards, JBoss Application Server 7.1 must be defined for use in the IDE. You can define a server using runtime detection from within a project wizard. From the Requirements table on the first page of the project wizard, select server/runtime and click or and follow the instructions. Alternatively, before starting a wizard click →, expand JBoss Tools and select JBoss Runtime Detection. Click and follow the instructions.
Procedure 6.1. Create a HTML5 Project with the HTML5 Project Wizard
In the JBoss Central tab under Start from scratch, click HTML5 Project.
From the Target Runtime list, select an existing JBoss Application Server 7.1 server runtime environment or select <none>. When <none> is selected, a non-enterprise server runtime environment is assumed.
Click .
In the Project name field, type a name for the project.
In the Package field, type a package name for the project resources.
To create the project in a different location to the Workspace default, clear the Use default Workspace location and type the path in the field or click to navigate to the location.
Click .
Check the Maven details for the project to be created and click .
During project creation, the wizard imports project dependencies. When the HTML5 Project wizard displays 'HTML5 Project' Project is now ready, click to close the wizard. A
README.mdfile for the project automatically opens for viewing.
Procedure 6.2. Create a HTML5 Project with the kitchensink-html5-mobile Wizard
In the JBoss Central tab under Start from a sample, hover the mouse over Mobile Applications and click kitchensink-html5-mobile.
Click .
To create the project in a different location to the Workspace default, clear the Use default Workspace location and type the path in the field or click to navigate to the location.
Click .
During project creation, the wizard imports project dependencies. When the kitchensink-html5-mobile wizard displays 'kitchensink-html5-mobile' Project is now ready, click to close the wizard. A
README.mdfile for the project automatically opens for viewing.
Mobile Web Tools provides a HTML5 jQuery Mobile file template to assist in creating mobile web applications. The template inserts the necessary JavaScript and CSS library references into the HTML header and includes skeleton jQuery Mobile page and listview widgets in the HTML body. The procedure below details how to insert the template into your project.
Procedure 6.3. Use a HTML5 jQuery Mobile File Template
In the Project Explorer tab, right-click a project and click →.
In the Enter or select the parent folder field, type a project path or expand the project folder tree and select the parent folder for the new file.
In the File name field, type the name for the new file. It is not essential to include the file extension in the name as this is automatically appended if it is found to be missing.
Click .
Ensure the Use HTML Template check box is selected.
From the Templates table, select HTML5 jQuery Mobile Page.
Click . The new HTML5 file is listed in the Project Explorer tab and automatically opened in the JBoss Tools HTML Editor.
Mobile Web Tools offers a jQuery Mobile palette, with wizards for adding jQuery Mobile and HTML5 widgets to your project. It is available for use with HTML5 files in the JBoss Tools HTML Editor. The jQuery Mobile palette is available in the Palette tab, which is part of the JBoss perspective.
The jQuery Mobile palette is automatically displayed in the Palette tab when a HTML5 file is opened in the JBoss Tools HTML Editor. To open a file in this editor, in the Project Explorer tab right-click a HTML5 file and click →JBoss Tools HTML Editor. Alternatively, if JBoss Tools HTML Editor is the default option for Open With, double-click the HTML5 file to open it in the editor. The file opens in the editor and the Mobile Web palette is displayed in the Palette tab.
Note
The Palette tab must be visible in order to see the jQuery Mobile palette. To open the tab, click →→, expand General and select Palette.
To show or hide an individual palette in the Palette tab, click the name of the individual palette.
To search for a palette element within the jQuery Mobile palette, in the search field type a search term or phrase. The elements displayed in the jQuery Mobile palette are filtered as you type in the search field.
The jQuery Mobile palette contains wizards for the HTML5 and jQuery Mobile user interface widgets commonly used in mobile web applications. The widgets are grouped in the palette by functionality, with tooltips providing widget descriptions.
To insert a palette widget into a file open in the JBoss Tools HTML Editor, drag the widget icon to the appropriate place in the file. Alternatively, ensure the text cursor is located at the desired insertion point in the file and click the widget icon. For widgets with no attributes that can be customized, such as JS/CSS and Field Container, the code snippets are immediately inserted into the file. For widgets with attributes that can be customized, a widget wizard opens allowing you to input attribute information. Once complete, click and the code snippet is inserted into the file.
The widget wizards have three common aspects:
- Design fields
These fields are unique to each widget. They allow you to customize the attributes of the widget by providing names, actions, numbers of elements, and styling themes. All widget wizards assign automatically generated values to the ID attribute in the case that you do not specify a value. Content assist is available for the URL (href) field by placing the text cursor in the field and pressing Ctrl+Space.
- Add references to JS/CSS
This check box provides the ability to automatically add any missing library references to the HTML5 file that are required by the widget.
- Preview Panes
These panes show previews of the code snippet for the widget and of the rendered widget. The preview panes can be shown and hidden by clicking the and button, respectively.
Mobile Web Tools offers code assist to help you when working with jQuery Mobile. Code assist lists available options for attributes and attribute values. Code assist is available for use in files and in the URL (href) field of widget wizards.
To view code assist in a file, ensure the text cursor is located at the desired insertion point in the file and press Ctrl+Space. Repeatedly press Ctrl+Space to cycle through HTML and JSF EL completion options. To view more information about a listed item, select the item. To insert a listed item into the code, double-click the item.
To view code assist in a widget wizard, ensure the text cursor is located in the URL (href) field and press Ctrl+Space. To view more information about a listed item, select the item. To insert a listed item into the code, double-click the item.
Mobile Web Tools provides an action to easily and quickly open jQuery Mobile pages in web browsers for viewing.
To open a jQuery Mobile page from a file open in the JBoss Tools HTML Editor, press Ctrl and move the mouse over the <div> tag corresponding to the page widget. Continue to press Ctrl and from the menu select one of the options:
, which shows the page in the default browser of the IDE
, which shows the page in BrowserSim
The aim of this section is to guide you in customizing Mobile Web Tools:
Customize the HTML5 jQuery Mobile templates available in the IDE
The HTML5 jQuery Mobile Page template for new HTML files is provided by Mobile Tools. You can customize this template and add more jQuery Mobile templates to the IDE.
To customize the jQuery Mobile templates available in the IDE, click →. Expand Web→HTML Files→Editor and select Templates.
There are a number of available actions:
- Add a template
There are several options for adding templates:
To create a new template, click . In the Name and Description fields, type a name and description of the template, respectively. In the Pattern field, type the code for the template. From the Context list, select the instance in which the IDE should make the template available. Click to close the window.
To restore all templates that have been deleted, click .
To load an existing template into the IDE, click and select the file. The file must be an XML file, with appropriate file headers and the HTML5 and jQuery Mobile content written in XML syntax and contained between XML
templateandtemplatestags.
- Edit a template
From the table, select a template and click . You can modify the name, description, code content and context in which the IDE makes the template available. Click to close the window.
- Remove a template
From the table, select a template and click .