Creating mobile pattern projects
The UI Pattern is a container for mobile patterns. You can add mobile patterns to either a Dojo or jQuery app. You can also add your own mobile patterns into the tool.
Procedure
- Use the UI Pattern Project wizard
to create your own pattern project.
- Click File > New > Project.
- Expand the Web folder and select UI Pattern Project.
- Click Next.
- Give your UI Pattern Project a name.
- Optional: You can click include
jQuery and add jQuery Resources to
the project. Note: Files are jQuery Mobile (JS and CSS files) and jQuery JS Core so you can properly preview the app by using the Rich Page Editor.
- Click Finish. A UI Pattern Project is created.
- Right-click your UI Pattern Project and select New > UI Pattern. Note: Your project must contain either Dojo framework or jQuery framework, or both, for you to be able to continue in the UI Pattern wizard. For instructions, see Adding Dojo framework to a UI Pattern Project and Adding jQuery framework to a UI Pattern Project.
- Define the name of your pattern and click Finish. A folder with the name of your new pattern is added to the WebContent folder. This folder contains the pattern's resources.
- Open the pattern.html file that is
found in one of the following locations: WebContent/pattern_name/Dojo or WebContent/pattern_name/jQuery.
- Adding widgets in the view for Dojo.
- Adding widgets in the page for jQuery.
Note: If you are creating a Dojo pattern, ensure that the following two script tags are included in the pattern.html file under the Dojo folder.<script type="text/javascript" pattern.discardNode="true"> require([ "dojox/mobile/parser", "dojox/mobile/compat" ]); </script>
This script tag is required to preview the pattern in the Mobile Pattern Browser. The pattern.discardNode attribute is used by patterns to identify when an element is discarded from pattern insertion.
<script type="text/javascript"> require([ /*START_DEPENDENCIES*/ "dojox/mobile/ScrollableView" /*END_DEPENDENCIES*/ ]); </script>
In the second script tag, when a pattern is added to a mobile page, the require elements between the START_DEPENDENCIES comment and the END_DEPENDENCIES comment are translated to Dojo module requests. Then, they are inserted into the Dojo require section in the final application. The require elements outside the DEPENDENCIES comments are not added to the final application. When you add a Dojo widget to your mobile pattern, add the necessary modules for that widget between the DEPENDENCIES comments
- Save your UI Pattern project. You can add the mobile pattern to a Dojo or jQuery project by creating or opening a MobileFirst hybrid project with Dojo or jQuery support. Open the index.html file that is found under apps/app_name/common in Rich Page Editor.
- Click (+) from the Mobile
Navigation view. Use the following figure for
guidance: Figure 1. Mobile Navigation viewIf the Mobile Navigation view is not visible, click Window > Show view > Other, expand the Web folder, select Mobile Navigation, and click OK.
- Complete the Add jQuery Mobile Page or Add
Dojo Mobile Page wizard.
- Type the name of your UI Pattern in the ID field.
- Select the Create from UI pattern option.
- From the Pattern Set menu, select UI_Pattern_project_name. Your mobile pattern is displayed in the Mobile Pattern Browser.
- Select your mobile pattern and click Finish.
- Save your Dojo or jQuery project where the pattern was added.
Results
What to do next

