55 Developer Tools: Creating Templates for Mobile Websites

Developer Tools enables you to create templates for mobile sites.

This chapter contains the following sections:

55.1 Overview of Mobility Support in Developer Tools

Developer Tools supports the WebCenter Sites: Mobility framework. The Mobility feature allows you to create websites for mobile devices. For detailed information about the Mobility feature, see Chapter 68, "Configuring Oracle WebCenter Sites: Mobility to Support Mobile Websites."

55.2 Mobile Template Development with Developer Tools

In the "Oracle WebCenter Sites" perspective, templates are displayed as nodes in the Sites Workspace Elements tab. The workspace displays the templates (default and mobile) you exported from your WebCenter Sites instance to Eclipse. You can recognize mobile templates by their developer-defined suffix. (For example, a template created for a touchscreen device would be _Touch.)

If you need to develop a mobile template you must create it from an existing template. The rest of this section provides steps for creating a mobile template.

To create a template for mobile websites

  1. In 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. For more information about device groups, see Chapter 68, "Configuring Oracle WebCenter Sites: Mobility to Support Mobile Websites."

    Figure 55-1 shows the expanded MarketingSite tree containing the Home.jsp template for the default device group (for desktop and laptop devices).

    Figure 55-1 Home.jsp Template Element Displayed Under the 'MarketingSite' Node

    Description of Figure 55-1 follows
    Description of "Figure 55-1 Home.jsp Template Element Displayed Under the 'MarketingSite' Node"

  2. Right-click the template off which you want to base the mobile template. In the context menu, select Create Device Group Template and then select the name of the device group for which you want to create the template.

    Note:

    Multiple device groups can share the same suffix. If you do not see the desired device group in the list, a template defined by the same suffix as that device group may have already been created. For more information about developer-defined suffixes, see Chapter 68, "Configuring Oracle WebCenter Sites: Mobility to Support Mobile Websites"

    Figure 55-2 Create Device Group Template Context Menu

    Description of Figure 55-2 follows
    Description of "Figure 55-2 Create Device Group Template Context Menu"

    The "New Template" window opens (as shown in Figure 55-3) displaying fields with fixed and modifiable property values which the template wizard copied from the source template ("Home" template of the MarketingSite in this example).

  3. In the "New Template" window, edit the properties in the modifiable fields according to your mobile template requirements, and then click Finish.

    Figure 55-3 'New Template' Form for the 'Home_Touch' Mobile Template

    Description of Figure 55-3 follows
    Description of "Figure 55-3 'New Template' Form for the 'Home_Touch' Mobile Template"

    The file name (defined in the Storage path field in the "New Template" form) of the mobile template is listed in the Sites Workspace Elements tab, as shown in Figure 55-4.

    Figure 55-4 Home_Touch.jsp Displayed in the 'Sites Workspace Elements' tab

    Description of Figure 55-4 follows
    Description of "Figure 55-4 Home_Touch.jsp Displayed in the 'Sites Workspace Elements' tab"

    In Figure 55-4, 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.

  4. Modify the code of your new mobile template in the native Eclipse JSP editor. (For information, see Chapter 54, "Developer Tools: Developing JSPs").