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 .
- 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 .
- 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.
You can create your pattern by editing this file in Rich
Page Editor in either of the following ways:
- 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 view
If the Mobile Navigation view is not visible,
click , 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.
Your new UI Pattern is displayed in the preview.
- Save your Dojo or jQuery project where the pattern was
added.
Results
The new pattern is available for you to use with other Dojo
and jQuery projects in the workspace.