74 Creating Templates for Mobile Websites Using Developer Tools
When you’re creating templates for mobile websites, in the Sites view you can see templates under each asset type. And, the template variants that you create show up under each template. In the Device Groups (suffixes) view, you can view asset types under each device group instead. These views offer you a convenient development experience.
Topics:
About Mobility Support in Developer Tools
The Mobility feature in Developer Tools allows you to create websites for mobile devices.
Creating Mobile Templates from the Sites Workspace Tab
The templates (default and mobile) you exported from your WebCenter Sites instance to Eclipse show under the Workspace tab. You can recognize mobile templates by their developer-defined suffix. For example, a template that you created for a touchscreen device may include the _Touch suffix.
You can create mobile templates from an existing template. To create a template for mobile websites:
- In either the Sites Workspace Elements tab (located in the left panel), expand the node of the site for which you want to create a mobile template.
Note:
A mobile template is associated with one or more device groups (that is, a group of devices with similar features) by a developer-defined suffix.
This figure shows the expanded MarketingSite tree containing the
Home.jsptemplate for the default device group (for desktop and laptop devices):Figure 74-1 Home.jsp Template Element Displayed Under the MarketingSite Node
Description of "Figure 74-1 Home.jsp Template Element Displayed Under the MarketingSite Node" - Right-click the template on which you want to base the mobile template. From the context menu, choose Create Device Group Template and then choose the name of the device group for which you want to create the template (see the next figure).
Note:
Multiple device groups can share the same suffix. If you do not see the device group in the list, a template defined by the same suffix as that device group may have been created. For more information about developer-defined suffixes, see Configuring WebCenter Sites to Support Mobile Websites.
Figure 74-2 Create Device Group Template Context Menu
Description of "Figure 74-2 Create Device Group Template Context Menu"The Create New Template dialog opens showing fields with fixed and modifiable property values that the template wizard copied from the source template (the Home_Touch template of the MarketingSite in this example).
- Edit the properties in the modifiable fields according to your mobile template requirements, and then click Finish .
Figure 74-3 Create New Template Form for the Home_Touch Mobile Template
Description of "Figure 74-3 Create New Template Form for the Home_Touch Mobile Template"The file name of the mobile template is listed in the Sites Workspace Elements tab.
Figure 74-4 Home_Touch.jsp Displayed in the Sites Workspace Elements Tab
Description of "Figure 74-4 Home_Touch.jsp Displayed in the Sites Workspace Elements Tab"The mobile template is named Home_Touch, where Home is the name of the template and _Touch is the suffix defined for the device group for which this template was created.
Creating Mobile Templates in Sites and Device Groups Views
You can view template variants by grouping templates by sites or suffixes. In the Sites view, templates are shown under each asset type and template variants under each template. This view is especially useful when you and other developers are working on different templates. This view lets you can create template variants anytime you want, without waiting for others to complete their work. In the Device Groups (suffixes) view, asset types are available under each device group so that developers of each suffix or device group can work simultaneously on their template variants.
To create template variants in Sites view:
-
On the toolbar, click the down arrow, then choose Group by, then Sites from the context menu.
-
Under your site, expand template for which you wish to create variants. For example, if you wish to create a template variant for non-touch device group, you may choose the Touch template which may be quite similar to non-touch and create its variant. You can then edit this new variant for non-touch as required.
Figure 74-6 Site Tree Expanded to Show Suffixes
Description of "Figure 74-6 Site Tree Expanded to Show Suffixes" -
Do one of the following, as required:
-
To create a template variant for a single device group, right-click a similar variant under the template, then choose Create Device Group Template, and then the device group for which you wish to create a template variant.
The Create New Template dialog pre-populated with corresponding values for the target variant is displayed.
Make your changes, if any, then click Finish. The new variant is displayed under the template for which you created it.
-
To create template variants for multiple device groups, right-click the template, then choose Bulk Generate Device Group Template. In the multiple selection dialog, choose the device groups to create their template variants for the corresponding suffixes.
Click OK. The new variants are displayed under the template for which you created them.
-
-
Edit the template code as required, and save your changes.
To create template variants for device groups:
- Under the asset type for which you wish to create a template, do one of the following, as required:
-
To create a variant of a template, right-click the template under the asset type node, then choose Create Device Group Template , and then choose the device group for which you wish to create a template variant.
Figure 74-10 Template Variant Context Menu
Description of "Figure 74-10 Template Variant Context Menu "The Create New Template dialog pre-populated with corresponding values for the target variant is displayed.
-
To create multiple variants of a template, right-click the template, choose Bulk Generate Device Group Template. In the multiple selection dialog, choose the device groups to create their template variants for the corresponding suffixes.
-