Archive for August, 2008

Keeping your custom panel layouts styled: Part 2

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

Share on Facebook

Keeping your custom guide layouts styled: Part 1

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.

Share on Facebook