August 2008 Archives

Keeping your custom panel layouts styled: Part 2

By Anthony Rumsey on August 22, 2008 12:21 PM | No Comments

Last week I covered a number of style names that can be added to your guide layouts when creating custom form guide components.  By adding these style names to your layout you can take advantage of all the styling that gets defined in Guide Builder and is included with each guide definition.  Similar to guide layouts there are also a few of style names that can be included in custom panel layouts.

Here are a selection of style names that can be added to your custom panel layouts.  These styles can be defined by going to Customize Appearance in Guide Builder and navigating to the appropriate panel listed under each style name description.  A number of these style names do not need to be included in your MXML since they are handled internally by the Panel Item component.

Style Name MXML Description
layoutobjects <mx:VBox width="100%" height="100%" styleName="layoutobjects">
Defines padding for your top-level panel layout container.

Guide Builder: no editable in Guide Builder
panelhelp <gc:HelpPanel id="helpPanel" styleName="panelhelp" /> Applies the font, background and border styles to the help panel component.

Guide Builder: Customize field and text > Panel help background, font
fieldhelp handled by <ga:PanelItem/> Applies the font, background and border styles to a field help component.

Guide Builder: Customize field and text > Field help background, Field Active, font
panelitem handled by <ga:PanelItem/> Applies the font and background styles to a field component.

Guide Builder: Customize field and text > Field background, Font
panelcaption handled by <ga:PanelItem/> Applies the font and color styles for field captions.

Guide Builder: Customize field and text > Font
paneltext handled by <ga:PanelItem/> Applies the font and color styles for panel text.

Guide Builder: Customize field and text > Font

Keeping your custom guide layouts styled: Part 1

By Anthony Rumsey on August 6, 2008 7:06 PM | No Comments

When creating custom layouts to be used with form guides it is a good practice to ensure that your layouts can be styled.  One method that will achieve this goal is to use the style names that get defined by Guide Builder.  By adding these style names to various components in your layout you can take advantage of all the styling that gets defined in Guide Builder and is included with each guide definition.

Here are a selection of style names that can be added to your custom guide layouts.  These styles can be defined by going to Customize Appearance in Guide Builder and navigating to the appropriate panel listed under each style name description.

Style Name MXML Description
application

<mx:VBox width="100%" height="100%" styleName="application"/>

 Defines the overall background gradient colors for the guide.

Guide Builder: Customize guide, logo and progress bar -> Background
logo <mx:VBox styleName="logo" left="0"/> Specifies a location to hold an image such as a logo.

Guide Builder: Customize guide, logo and progress bar -> Logo
guidetitle <mx:Label text="{panelManager.gaModel.name}" styleName="guidetitle"/> Specifies font and color styles.

Guide Builder: Customize guide, logo and progress bar -> Font
guide

<mx:HDividedBox styleName="guide"/>

 Defines background color/image, border color, padding and corner radius styles.

Guide Builder: Guide Builder: Customize guide, logo and progress bar -> Border, Guide background
panelnav

<mx:Panel styleName="panelnav"/>

 Defines font, background color, background image, background alpha, border and header styles.

Guide Builder: Customize panels -> Panel border, Panel header, Navigation, Font
guidehelp

<mx:Panel styleName="guidehelp"/>

 Defines font, background color, background image, background alpha, border and header styles.

Guide Builder: Customize panels -> Panel border, Panel header, Guide help, Font
paneldata

<mx:Panel styleName="paneldata"/>

 Defines font, background color, background image, background alpha, border and header styles.

Guide Builder: Customize panels -> Panel border, Panel header, Data entry, Font
buttons

<gc:NextPanelButton styleName="buttons"/>

 Defines theme color, fill colors and font styles.

Guide Builder: Customize buttons and repeater layouts -> Button color, Button theme color, Font

 

For further information on how to include form guide specific style names in your own layouts browse the guide source included with the LiveCycle install.  The source and associated Flex project have been made available for all the default guide layouts, panel layouts and guide controls.

./LiveCycle8.2/LiveCycle_ES_SDK/samples/FormGuides/GuideSource

In my next post I will cover the various styles that can be applied to your custom panel layouts.

« March 2008 | Main Index | Archives | October 2008 »

Search

About Me

Anthony Rumsey
I am a Computer Scientist at Adobe Systems in Ottawa, Canada. Currently occupying my time developing enterprise applications using a combination of the next generation of Flex and LiveCycle.

The views expressed in this blog are my own and do not necessarily reflect the views of Adobe Systems Incorporated.

About this Archive

This page is an archive of entries from August 2008 listed from newest to oldest.

March 2008 is the previous archive.

October 2008 is the next archive.

Find recent content on the main index or look in the archives to find all content.