Oracle by Example brandingOracle Application Express 18: jQuery Mobile to Universal Theme (2 of 4) - Updating Attributes

section 0Before You Begin

This 15 minute tutorial describes how to update attributes on the new mobile Task pages you created in the previous tutorial.

This is the second tutorial in the series, Oracle Application Express 18: jQuery Mobile to Universal Theme. Read the tutorials in the following sequence:

Background

In this tutorial, you update attributes on the new mobile pages, 547 - New Mobile Tasks and 542 - New Mobile Maintain Tasks. Then, you create a new region and update buttons attributes. In Oracle Application Express, you update page attributes by viewing the page in Page Designer. The Page Designer window features three panes: a left pane, a central pane, and a right pane. You select a component in the left pane and then edit the component’s attributes in the Property Editor located in the right pane.

What Do You Need?

To complete this tutorial you need:

  • Complete the preceding tutorial in this series.

section 1Update Attributes on Page 547

Update attributes on page 547 - New Mobile Tasks:

  1. In App Builder, navigate to the Sample Projects application you imported in the previous tutorial.
  2. On the Application home page, find page 547 - New Mobile Tasks.
  3. In the left pane (called the Rendering tab), select the Tasks region.
    Tasks region in Page Designer
    Description of the illustration pd_tasks_region.png

    A region is an area on a page that serves as a container for content. In the previous illustration, the Tasks region is a List View report based on a SQL query.

  4. Change the template. Templates control the appearance of a region. In the Property Editor, update the following:
    • Appearance: Template - Select Blank with Attributes (No Grid).
  5.  In the Rendering tab under Content Body, Tasks, select Attributes.
    Attributes
    Description of the illustration pd_tasks_attributes.png

    Attributes control how the report works.

  6. Update the target page that is called when the user clicks a list entry from 42 to 542:
    • Click OK.
  7. In Page Designer, click Save.

section 2Update Attributes on Page 542

To update attributes on page 542 - New Mobile Maintain Tasks:

  1. View page 542 in Page Designer:
    • In Page Designer, enter 542 in the Page Selector and click Go.
    Page Selector
    Description of the illustration page_selector_542.png

    Page 542 - New Mobile Maintain Tasks appears. By default, Page 542: New Mobile Maintain Tasks page is selected in the Rendering tab.

    New Mobile Maintain Tasks page
    Description of the illustration pd_maintain_tasks.png
  2. In the Property Editor, update the following page attributes.
    • Identification: Title - Update to Task.
    • Appearance: Page Mode - Select Modal Dialog.
  3. In the Rendering tab, select the Maintain Task region. In the Property Editor, edit the template:
    • Appearance: Template - Select Blank with Attributes.
    • Deselect the Maintain Task region.
  4. Update some of the form items to use the Required - Floating template:
    • Select the items. In the Rendering tab, press CTRL and select the following items: P542_PROJECT_ID, P242_NAME, P242_START_DATE, and P242_END_DATE.
    • In the Property Editor, enter Template in the Search field and click the Pin Filter.
      Pin Filter
      Description of the illustration item_template.png

      Only attributes that contain the keyword "template" display in the Property Editor.

    • In the Property Editor, for Appearance: Template - Select Required - Floating.
      This label template displays a red asterisk next to the label. Use this template for form items where user input is required.
    • Deselect the selected items.
  5. Update the remaining form items to use the Optional - Floating template:
    • In the Rendering tab, press CTRL and select P542_MILESTONE_ID, P542_ASSIGNEE, P542_DESCRIPTION, and P542_IS_COMPLETE_YN.
    • In the Property Editor, for Appearance: Template - Select Optional - Floating.
      Use this label template for form items that are optional. The label displays inside of the input item and automatically shrinks once the input field has a value.
      Optional - Floating template
      Description of the illustration item_template2.png
    • Click the Pin Filter again and then delete the keyword template from the Search field.
    • Click Save.

section 3Move and Update Buttons

In this step, you change where and how the buttons display by creating a new region that uses a template called Buttons Container and then moving the existing buttons to that region.

To move and update buttons:

  1. Create a new region to contain buttons. In the Rendering tab, right-click Region and select Create Region.
    Create Region
    Description of the illustration new_region.png

    A new region appears.

  2. In the Property Editor, update the following region attributes:
    • Identification: Title - Enter Buttons.
    • Layout: Position - Select Dialog Footer. The Buttons region now displays under the Dialog Footer position in the Rendering tab.
    •  Appearance: Template - Select Buttons Container.
  3. Update the Attributes for the new Buttons region:
  4. Move the Create, Delete, and Save buttons to the new Buttons region:
    • In the Rendering tab, scroll up and find Region Buttons.
    • Press CTRL and select the Delete, Save, Create buttons.
    • In the Property Editor, update the following attributes:
      • Layout: Region - Select Buttons.
      • Layout: Button Position - Select Create.
      • Appearance: Button Template - Select Text.
    Button attributes
    Description of the illustration move_buttons.png
  5. Click Save.

section 4Review the New Mobile Pages

Next, run the revised pages to view your changes. Because page 542 is a dialog page, you cannot run it directly from Page Designer. Instead, you must return to page 547, run it, and then link to page 542.

To review the new mobile pages:

  1. View page 547 in Page Designer. In Page Designer, enter 547 in the Page Selector and click Go. Page 547 appears.
  2. Click Save and Run Page.
  3. If a Login dialog appears, enter your workspace username and password.
    A rendered version of page appears.
    Rendered version of page 547
    Description of the illustration 547_run_page.png
  4. Click a list item. Page 542: New Mobile Maintain Tasks appears.
    New Mobile Maintain Tasks form
    Description of the illustration 542_run_page.png
  5. Return to the Application home page. Click the Edit Page ID in the Runtime Developer toolbar at the bottom of the window.
  6. Click the Application ID breadcrumb.
    7. Application ID breadcrumb
    Description of the illustration app_id_breadcrumb.png

    The Application home page appears.

This ends the second tutorial in this series.

next stepNext Tutorial

Oracle Application Express 18: jQuery Mobile to Universal Theme (3 of 4) - Creating Navigation

more informationWant to Learn More?