The <ui> section contains the Layout XML, which defines the layout and user interface.    This topic only provides a general overview, as the detailed XML reference is in the API Reference (more information on this below).    

First, to understand general slideshow user interface and layout principles, you should review the following topics in the Layout / Presentation section:

• Understanding and Managing Layout Views - Details what Layout Views are and how to use them.
• Layout Element Overview - Covers basic principles of using elements within a layout.
• Element Positioning and Sizing - Explains how to use the various positioning and sizing methods which are available.
• Element Styling - Explains the different ways styles can be applied to elements.
• Available Elements - Covers the many user interface elements which can be used.

Next, you should review in detail the com.dwuser.ss4.ui.LayoutManager class in the API Reference.    This is the class which transforms the Layout XML into a fully-functioning user interface for the slideshow.    The class reference has a great deal of information about the structure of the layout XML.

Once you have reviewed these topics, you should have a sound knowledge of how the <ui> section of the configuration file is constructed.    Here is a review of the most important principles:

Important Principle Review

The <ui> holder node should contain one node - the <views> node.    The <views> node holds the definitions for all of the layout views, each one implemented by a single <view> ... </view> node.  

Each <view> node needs a type and id attribute; if type is omitted, it defaults to normal.    The id can be omitted if the type has been explicitly defined to be underlay or overlay.    If the type is normal, the initial attribute must be specified as well, with only one <view> using initial="true".    There are many other special attributes which can be used on the <view> nodes; these are all covered in the LayoutManager class.

Each <view> holds one or more child element nodes.    The name of each node corresponds to the element name -- e.g. the ImagesStandard element is implemented by an <ImagesStandard ... /> node.    For nestable components (e.g. layout containers), child nodes are added inside the parent node.    Properties and styles are set on the element via attributes of the corresponding name -- e.g. the label on a button (the label property) is set via <Button ... label="My Label" ... />.    All available properties and styles are for each element are detailed in its implementing class in the API Reference; for the corresponding element classes, see the Available Elements reference.    The order of definition of the element nodes in the XML file controls their relative stacking depth.

Here is an example of a slideshow UI's Layout XML, utilizing many of the mentioned features: