Rendered code reflects the same CSS class names that rely on the tags, such as div or table. If the ID value is set it is not removed by Multi-Channel Server. There are cases where an element with ID attributes is modified when the MCS converts XDIME code to the device-specific code. For example:
<table id=”testID” ….> ….</table>
<div id=”testID”><table class=”a”>…</table></div>
Elements with IDs
It is recommended to use tags such as div and table that have a set ID value.
The HTML DOM tree changes depending on the device that is accessing IBM
® Mobile Portal Accelerator. MCS optimizes the markup based on the device.
Most elements with ID values do not get deleted by MCS to preserve some functions. For example, in this nested region, id="2"
is not deleted:
<span (or div) id="2">
</span (or div >
However, if the ID is on a div or span element to begin, and there is an ID at a after, the later ID is deleted. For example:
<div (or span) id="1">
<span (or div) id="2">
</span (or div)>
</div or (or span)>
In this example, id="2"
is deleted by the MCS during rendering.
Tagging approaches adopted
Class names are renamed by MCS. The class name is stored as a part of the element such as <span id=”classname” class=”sampleclass”>
. At client side, the element can be referred by ID and the corresponding classname can be extracted, which enables changing styles and functions at client side.
The HTML DOM tree at client varies. Div
tags can be replaced with table
tags depending on the device. The element is retrieved in the Mobile Portal Accelerator by using the ID and the method getElementById() instead of parsing through the DOM tree hierarchy.
Mobile Portal Accelerator uses display:none
to hide elements.
Restrictions on using Accordion and Carousel View
In accordion and carousel view, if the page contains any actions that require communication with the server, the entire view is refreshed. This results in default accordion or carousel view settings. You can use the tabbed view to avoid reverting to default settings when a page contains actions that require communication with the server.
The default Accordion view settings start the first portlet in expanded mode and the rest of the portlets in collapsed mode. The default carousel view settings start the first portlet in expanded mode. The other portlets are shown when a user clicks the portlet navigation arrow.
Parent topic: XDIME aggregator design limitations and restrictions