Create mobile pattern projects

The UI Pattern is a container for mobile patterns. We can add mobile patterns to either a Dojo or jQuery app. We can also add our own mobile patterns into the tool.

1. Use the UI Pattern Project wizard to create our own pattern project.

   1. Click File > New > Project.

   2. Expand the Web folder and select UI Pattern Project.

   3. Click Next.

   4. Give the UI Pattern Project a name.

   5. Optional: We can click include jQuery and add jQuery Resources to the project.

      Files are jQuery Mobile (JS and CSS files) and jQuery JS Core so we can properly preview the app using the Rich Page Editor.

   6. Click Finish. A UI Pattern Project is created.

2. Right-click the UI Pattern Project and select New > UI Pattern.

   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 Add Dojo framework to a UI Pattern Project and Add jQuery framework to a UI Pattern Project.

3. Define the name of the pattern and click Finish. A folder with the name of the new pattern is added to the WebContent folder. This folder contains the pattern's resources.

4. Open the pattern.html file found in one of the following locations: WebContent/pattern_name/Dojo or WebContent/pattern_name/jQuery.

   • Add widgets in the view for Dojo.

   • Add widgets in the page for jQuery.

   If we 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 we add a Dojo widget to the mobile pattern, add the necessary modules for that widget between the DEPENDENCIES comments

5. Save the UI Pattern project. We 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 found under apps/app_name/common in Rich Page Editor.

6. 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 Window > Show view > Other, expand the Web folder, select Mobile Navigation, and click OK.

7. Complete the Add jQuery Mobile Page or Add Dojo Mobile Page wizard.

   1. Type the name of the UI Pattern in the Id field.

   2. Select the Create from UI pattern option.

   3. From the Pattern Set menu, select UI_Pattern_project_name. Your mobile pattern is displayed in the Mobile Pattern Browser.

   4. Select the mobile pattern and click Finish.
   Your new UI Pattern is displayed in the preview.

8. Save the 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.

What to do next

To add a mobile pattern to an application, see Add a mobile pattern to an application.

Parent topic: Mobile patterns