Defining Container Page Element Properties
This topic provides an overview of container page element properties.
Many properties that you can define for container page elements are also available to define for other page elements. These common properties are described in the topic Common Layout Page Element Properties
This topic discusses using the properties that are unique to container page elements only.
This topic describes how to:
Define collapsible content areas.
Define accordion content areas.
This section also provides an example of creating collapsible content areas and an example of creating accordion content areas.
Understanding Collapsible Content
Collapsible content can be hidden and revealed by tapping a title or button. When you create collapsible content, a header is created based on the value in the Label Text field for the mapcont_start field in the Layout grid on the Layout Designer – Layout page. The header acts as the control that users touch to expand and collapse the content area.
To create collapsible content areas and accordion content areas in the Mobile Application Platform, you create nest containers within a container.
The collapsible content area properties determine how content is initially displayed, collapsed, not collapsed, or as an accordion.
Defining Collapsible Content Areas
Use the Collapsible Content section on the Container Properties page to define collapsible content. To access the page select
Field or Control |
Definition |
---|---|
Collapsible |
Select the property to create collapsible content. |
Initially Collapsed |
This field is enabled by default when you select the Collapsible property and indicates that the content appears collapsed by default. Clear the field to display content areas expanded by default. |
Collapse Set |
Use this property to create an accordion. Select the property on the top-level element for the accordion. See the following section for more information about creating accordions. |
Defining Accordions Content Areas
An accordion allows you to group components of collapsible content so that only one panel is visible at a time, and so that when you are viewing one panel (content area) the others are closed.
To define an accordion, in the Collapsible Content section in the Container Properties page, select the Collapse Set check box for the top-level container of the set that you want to appear collapsed by default. Note that the top-level container does not display in an accordion.
Example: Defining Collapsible Content
This section provides a simple example of defining a shell for collapsible content for a top-level container and five (5) nested level 2 containers.
This example shows the finished top-level container as it appears in generated HTML.
The following example shows the top-level container expanded to reveal additional containers/levels of information.
To build this example create a top-level container and then create five (5) containers inside the top-level container. The following example shows the Layout grid with the containers for the example created.
For each container define a value in the Label Text field that will become the label for the content header in the generated HTML. Notice that each container has two page element IDs, a start ID and an end ID. These IDs are similar to open and close tags in HTML and in practice you insert other page elements between the tags to build out the content for each container. So for example, in the Corporate Travel container you could insert an HTML Area page element and define HTML code, insert buttons that link to information on your company’s web site concerning corporate travel, and much more. This example shows only how to create the shell containers for the collapsible content.
The Mobile Application Platform assigns all page elements system-generated IDs. You can use these IDs to reference the elements in any JavaScript you construct for your application. For any element ID that displays in hyperlink text, you can click the link to display the Alternate Label page and rename the ID. If you decide to rename any or all page element IDs it is your responsibility to ensure that they remain unique across your application.
The following example shows the element IDs renamed for this example. Adding alternate IDs is also a means for giving elements more descriptive and meaningful names, as well as making them easier to identify on the Layout grid.
Now that the page element IDs are renamed, it’s easier to see how the Travel Resources container has five containers nested inside of it. The beginning of the Travel Resources container is indicated by the large blue arrow three rows from the top of the grid. The end of the Travel Resources container is three rows from the bottom of the grid. And within the Travel_Resources_Container_Start element ID and the Travel_Resources_Container_End element ID are the other containers that appear nested within the collapsible content.
The next step is to define properties for each container so that they will appear as collapsible content. But first, let’s take a look at how the application renders given what has been developed so far.
(To preview a Mobile Application Platform application click the View Initialization URL link at the top of the Layout Designer — Layout page and copy the URL that displays into a browser.)
Note: The previous example originally opened full-screen in a browser window. In the image shown, the width has been manually adjusted/reduced to roughly simulate how the content might appear in a mobile device.
To set the properties for the containers in the application, in the Layout grid, click the Properties link next to a container name. The Container Properties page appears. The properties to set for this example are in the Collapsible Content section.
To enable collapsed content for a container, you must select the Collapsible control in the Collapsible Content section of the Container Properties page. When you select the option, by default the system also selects the Initially Collapsed option so that the content in the container appears collapsed by default.
If you try this example on your own, you’ll notice that when you select the Collapsible box a message appears on the screen reminding you to make sure to enter a label in the Label Text field for the container on the Layout grid. As mentioned earlier, the system uses that label for the header label in the generated HTML, so it’s important that you enter a value in the field.
These properties must be set as shown for each container in the example.
After the properties for each container are set and the application is saved, if you preview the application, the collapsed content should appear as shown in the examples at the beginning of this section.
Example: Defining Accordion Content
This section provides a simple example of defining a shell for an accordion. This example uses and builds off the containers used in the previous example.
The information in this section describes how to build the following accordion.
In this example, you use the same container structure as in the previous example for defining collapsible content. The only difference is in the properties you set for the containers.
To define accordion collapsible content, for the top-level container only, set the Collapse Set property in the Collapsible Content section on the Container Properties page.
For all other containers defined for accordion collapsible content, at a minimum you must set the Collapsible property for each container. To display the content initially collapsed, as shown in the first example in this section, select the Initially Collapsed property for each container as well.
After the properties for each container are set and the application is saved, if you preview the application, the accordion collapsed content should appear as shown in the first example of this section.
When you define a container as a pop-up, the entire container acts as a pop-up with the content appearing on top of other content on the page. You typically invoke a pop-up container using a push button page element or a URL page element.
Use the Popup Options section on the Container Properties page to enable/define the container as a pop-up container, define where the pop-up appears on the page, whether to invoke the pop-up with a button or link, and so on.
To access the Container Properties page select Properties link for the container you want to define as pop-up content.
and in the Layout grid click theNote: You cannot define a pop-up for a container that contains collapsible content.
As you select properties in the Popup Options section of the Container Properties page, additional properties appear.
The following table describes the fields and controls that appear in the Popup Options section on the Container Properties page and are listed alphabetical order:
Field or Control |
Definition |
---|---|
Button Theme |
This drop-down list becomes enabled after you select the Enable Popup control. Choose a jQuery theme from the drop-down list to apply to the button. See Defining jQuery Mobile Theme Properties for more information about defining themes and the values that appear in the list. |
Class |
Enter the name of a custom CSS3 class to apply to the pop-up. The class must be defined in the Layout Designer – CSS page or in the layout template if a template is applied to the layout. |
Close Button Position |
This control appears after you select the Close Popup Button control. Select the position of the Close button. The values are:
|
Close Popup Button |
Select the box to insert a close button for the pop-up content. After you select this control, the Close Button Position drop-down list appears for selecting the position of the close button in the pop-up. |
Enable Popup |
Select the control to enable a pop-up. After you select this control, the Popup Position, Overlay Theme, and Button Theme fields become enabled. In addition, the Image Properties section appears at the bottom of the Container Properties page for you to optionally define images for the pop-up button. |
Inline Button |
Select this box to use an inline button to invoke the pop-up content. Inline buttons do not use the whole width of the viewport. |
Mini |
Create a more compact version of the button element. |
Overlay Theme |
Choose a jQuery theme from the drop-down list to use as the background for the pop-up content. The theme covers the entire window behind the pop-up content. See Defining jQuery Mobile Theme Properties for more information about defining themes and the values that appear in the list. |
Popup Position |
By default, pop-up content opens centered vertically and horizontally over the page element/component/object selected (also known as the origin). The Mobile Application Platform framework also applies some basic collision detection rules to ensure that pop-up content appears on-screen, so the ultimate position may not always be centered over the origin. To change the default position of pop-up content, the options are:
|
Remove Corners |
By default buttons appear with rounded corners. Select this property to remove the rounded corners. |
Remove Icon Shadow |
By default icons appear with a shadow effect. Select this property to remove the shadow. |
Remove Shadow |
By default buttons and icons appear with a shadow effect. This option removes the shadow. |
Show as Link |
Select the option to invoke the pop-up with an image link. When you select this option the Image Properties section appears on the Container Properties page. You can define a static of dynamic link to invoke the pop-up container. |
Style |
Enter HTML5 styles for the pop-up container. Use a semi-colon (;) to separate multiple style entries. |
Example: Defining Pop-Up Containers
This example illustrates defining a pop-up container in the Mobile Application Platform framework.
The following example illustrates the button that will invoke the pop-up container.
While the example in this section illustrates using a push button page element to invoke the contents of the container, you can define a URL page element as a link or image to invoke the container contents.
In the example in this section, selecting the button will pop-up a container that contains some text and a group of buttons.
The previous example shows a title, some text, and eight (8) buttons. The title is from the container Label Text field as entered on the Layout grid on the Layout Designer – Layouts page. The display text was created by inserting an HTML Area page element into the container and entering the text in HTML tags. And the buttons were created by inserting a p button page element into the container and then creating a group of eight (8) buttons. After the page elements were defined, properties in the Popup Options section of the Container Properties page were set to enable the pop-up action and to define several display parameters.
As noted in the example for creating collapsible content, some people may find that defining alternate IDs for page elements can help to more easily identify and manage page elements in the Layout grid. The following example shows the same layout, but with alternate IDs defined for the page element IDs.
As a reminder, you can define an alternate page element ID for any page element that displays in the Layout grid with a hyperlinked ID value. To define the alternate ID, click the hyperlinked ID to access the Add Alternate Label page and define the alternate ID. Also remember that if you change system-defined page element IDs, you are responsible for ensuring that they remain unique within the application.
The steps to create the layout in the example are:
Insert a Container element into the Layout grid after the mapheader_end element (or end tag of the MAP header).
In the Label Text field enter Weather Forecasts. This is the label that appears on the button that invokes the pop-up container contents, and that also appears at the top of the page when the container content opens.
Insert an HTML Area page element inside the Weather Forecasts container. After you insert the element, the HTML page appears where you enter the following HTML:
<p>Here are links to weather forecasts for select cities around the globe.</p>
Note that after you define the HTML element you can easily and quickly modify the HTML by clicking the Properties link for the element in the Layout grid to access the HTML Area Properties page. The page features an HTML Area section where you can modify the HTML that displays on the page.
Define the button elements.
Insert a push button element after the HTML Area element in the Layout grid.
When you insert the element, the “Do you want to create a group?” page appears as shown the following example:
In the Number of Group Items field, enter 8 and click the Yes button.
The Select Button Type page appears for the first button.
Note the Group field at the above the Button Type section. It shows which button in the group with which you are working. For example, Item 1 of 8.
Click the URL radio button and click the OK button.
The Select Button URL page appears.
In the URL radio button.
A long edit box appears on the page.
In the URL field enter the URL to the target content. For this example you could enter a URL to a weather web site or any other site of your choosing.
The URL you enter must be fully-qualified and entered in the following format:
http://www.example.com
. Click the OK button.
The Select Button Type page appears and the Group field above the Button Type section displays the next item in the group. For example, Item 2 of 8.
Repeat Step c and Step f until all eight (8) items (URLs for the buttons) in the group are defined.
After you define the last item in the group and click the OK button.
The Layout Designer – Layout page appears.
Define the label to appear on each button at runtime.
Access the Layout grid and for each button enter the text you want to appear in the Label Text field next to the button element ID.
If you need to remind yourself of the URL you entered when you defined a button, click the Properties link in the Layout grid to access the Button Properties page. The URL Properties section on the page displays the URL. Notice how you can also click the Modify URL Mappings link to modify the URL if needed.
The next step is to define properties for the Weather Forecasts container so it appears as a pop-up container. But first, let’s take a look at how the application renders given what has been developed so far.
(To preview a Mobile Application Platform application click the View Initialization URL link at the top of the Layout Designer — Layout page and copy the URL that displays into a browser.)
Note: The previous example originally opened full-screen in a browser window. In the example shown, the width was adjusted/reduced to roughly simulate how the content might appear in a mobile device.
To set the properties for the container, in the Layout grid, click the Properties link next the container’s label text, Weather Forecasts. The Container Properties page appears. The properties to set for this example are in the Popup Options section.
After you set these properties for the container and save the layout, the content should appear as shown in the first two example in this section when you preview the application.
By default any value you define in the Label Text field for a container in the Layout grid on the Layout Designer – Layouts page displays as a title for the container in the generated HTML.
The Container Properties page features a No Content Label control at the bottom of the page. Select this control to not display the label text defined on the Container. The label text can then be used simply as a reference during development to identify the of the container in the Layout grid.
By default, containers that you create in the Mobile Application Platform contain the following element:
<div data-role="content">...</div>
The following attribute and value in the element are specific to jQuery Mobile:
data-role="content"
jQuery Mobile can insert styles and/or modify HTML for content contained within this element. This is most evident when working with nested containers.
You can omit the attribute and value from Mobile Application Platform containers by selecting the No Content property at the bottom of the Container Properties page for a container element.
If you select the No Content property the element becomes a basic HTML5 Division element, as shown in the following example:
<div>...</div>