go to introduction

go to next page

Layout XML

If you have not done so already, download and unzip the source files. You should see several xml files. Six files represent sample layouts,

horizontal1d.xml (horizontal, 1d thumbnailer)

horizontal2d.xml (horizontal, 2d thumbnailer)

vertleft.xml (vertical 1d thumbnailer, scroller left-aligned)

vertright.xml (vertical 1d thumbnailer, scroller right-aligned)

vert2dleft.xml (2d vertical thumbnailer, scroller left-aligned)

vert2dright.xml (2d vertical thumbnailer, scroller right-aligned)

layout.xml is the layout file loaded by the sample driver (portfoliodriver.fla). To experiment with a sample layout, copy one of the six example files to layout.xml and then execute the driver.

The layout file contains style information and layout item information.

Styles

Style information is assigned inside <style> tags. Each style is given a name. A sample style in the example layouts is 'darkblue',

<style name="darkblue">
 <font-face>Arial</font-face>
 <font-size>11</font-size>
 <font-color>0x000033</font-color>
 <leftmargin>5</leftmargin>
 <border>on</border>
 <borderColor>0x000033</borderColor>
 <backgroundColor>0xcecddf</backgroundColor>
</style>

Instead of directly assigning the same style attributes over and over to different components, a style manger class is employed to broadcast style information to components. This is facilitated in XML by first describing all styles and then associating named styles with each component.

For tutorial purposes, only basic style information is assigned in XML. The style classes are easily modified to include as much style or skin information as you may desire.

Layout Items

Items in the layout are specified in <item> tags. Currently, the layout consists of the following items,

Background - static background graphic.

Scroller - Multi-dimensional thumbnailer with scrollbar, used to navigate thumbnail images

Status - Status area (Label) just above scroller item, used to indicate status information or display title of portfolio sample on roll over.

Synopsis - Text area to write more detailed information about the portfolio item whenever the user clicks on a thumbnail. Allows the viewer to decide if they really want to view the selected item.

Play - Play button. On click, opens portfolio item in a new browser window.

Layout items have three basic attributes, a name, a type, and a class. The item name is used to identify the component inside the application. The item type could be one of the basic types,

'Clip' - Graphic, currently implemented with a MovieClip
'Text' - Simple Label, currently implemented with a TextField
'Button' - Simple Button, currently implemented with a MovieClip with button behaviors

The item type may also be 'Custom', indicating that it is implemented with a custom class. If the item type is 'Custom', then a 'class' attribute must be specified to indicate the name of the class that implements the layout item.

Information to create and position a layout item is contained inside <data> tags. The <data> tags contain a 'mode' attribute to indicate whether the item is 'absolute' or 'relative'. An absolute item is given either specific x- and y-coordinates or the value 'CENTER' in which case the item is centered horizontally or vertically relative to the Stage. A 'relative' item observes another component. The name of the component to be observed and relative alignment must be specified in this tag. An example is

<data 
  mode="relative" 
  observe="SCROLLER" 
  align="right" 
  valign="top"
 x-offset="2" 
 y-offset="-20"
> 

These attributes illustrate a component that observes the SCROLLER component. The observing component is aligned top-right to the SCROLLER with an x-offset of 2 pixels and a y-offset of -20 pixels. Absolute components must be specified before relative components in the layout XML file.

Allowable alignment values are:

align - 'left', right', 'stackleft', 'stackright'

valign - 'top', 'bottom', 'stacktop', 'stackbottom'

Alignment combinations are illustrated in the following diagrams. The light red component is absolute and the light blue component is the observer.

From these illustrations, you should be able to deduce other combinations such as align='left' valign='stackbottom.'

Other basic item properties include width, height, linkage, text, and style. The 'linkage' property indicates the linkage ID of a library symbol to use in a CLIP or BUTTON. The 'text' property indicates text initially displayed in a TEXT item. The 'style' property is the name of a style that is applied to the item. The style must be previously defined in the XML file.

There is some additional information associated with custom components such as the SCROLLER. These properties are discussed in more detail in a later section.

It is very important that relative components have their width and height specified in advance. When an absolute component is initialized, it broadcasts a notification to all relative components registered as observers. Relative components record position information based on specified alignment so that they are properly placed during their initialization. This action requires the observing component's width and height to be specified in advance.

This specification allows quite a bit of control over the layout via properties that are easily changed in XML. Next, let's look at the portfolio data.

go to introduction

go to next page