August 22, 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

August 06, 2008

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.

March 27, 2008

Tips and tricks from the form guide team

A great new blog is now available from the Form Guide team at Adobe.  This blog will contain contributions from many memebers of the form guide team as they discuss tips, tricks and best practices concerning Form Guides.

The team is also looking for questions and suggestions from those early adoptors out there already using Form Guides to help guide future postings so be sure to provide lots of comments.

The URL for the new blog is:

http://blogs.adobe.com/lcformguides/





technorati tags:

Blogged with Flock

Drag and Drop support in Guide Builder

Did you know that the Guide Builder tool included with LiveCycle Designer not only supports drag and drop from the Designer canvas but also from the file system?

I'll start with drag and drop with LiveCycle Designer.  In Guide Builder the form hierarchy is provided to allow a user to pick form objects that they wish to appear in their form guide. While this hierarchy provides a quick way to see all the objects on a form they may not be easy to find particularily on a larger form.  In these cases it may be easier to pick objects directly from the design view canvas in LiveCycle Designer.  With Guide Builder running switch back to Designer and pick the fields you want to include in your form guide.  Next, drag and drop these fields on top of Guide Builder.  When a panel is selected these fields will be automatically added to that panel otherwise a dialog will appear asking you where you would like the fields to be placed.

If that wasn't cool enough Guide Builder also supports SWC, CSS, XML and XDP file types being dragged form the file system.  How each of these files is handled depends on what view Guide Builder is currently in. 

When in the Edit Guide view any guide definitions found in XML or XDP files will be imported into the current guide.  Any SWC files that are dropped onto Guide Builder will be added as custom library components for the currently selected guide.

When in the Customize Appearance view any SWC or CSS files that are dropped onto Guide Builder will be used as a custom style for the currently selected guide.

For more information on using Guide Builder look up Using Guide Builder in the LiveCycle Designer ES Help.

technorati tags:

Blogged with Flock

January 15, 2008

Form Guide Documentation

LiveCycle ES has now been out on the market for just over six months.  This means people are finally starting to get their feet wet and are looking at form guides as a possible solution to create engaging data capture applications.  As a result I been getting more requests lately on how one should actually get started creating a form guide.  For those just getting started there is a fiar amount of documentation already available online that is worth reading.

  1. Using Guide Builder (LiveDocs)
    • The LiveCycle ES Designer documentation contains a whole section on how to use Guide Builder
  2. Getting Started With Form Guides (PDF)
    • This is a great document that provides an overview of form guides, walks through creating a new form guide and touches on customization.
  3. Customizing Form Guides (PDF)
    • If you are really interested in creating custom form guide components this is the document for you!  This document provides information about creating customized guide layouts, panel layouts and controls using Flex Builder. This is also the place to go if you want to learn about taking advantage of the built in styling capabilities of form guides.

While these documents are great starting point for your form guide solution development over the next few months I will be posting additional articles that cover some of the holes and more difficult aspects of creating form guides.  If you have specific questions feel free to leave a comment and I'll do my best to address it.


Categories

Powered by
Movable Type 3.2