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.
Leave a comment