Creating a blank panel layout

Creating a simple panel layout familiarizes you with the basic concepts, including the structure and MXML definition of a panel layout.

Important: Try not to edit the panel layout files that are included with LiveCycle ES2.5. Instead, make uniquely named copies of the content to help you get started creating panel layout extensions.

Create a blank panel layout

  1. Start Flash Builder.

  2. Create a Flex library project and configure it using the procedures in Creating Flex library Projects for Custom Guides . Ensure that you create the required folder structure in your Flex Library Project. To display custom panel layouts in the list of panel layouts, create all panel layouts in the layouts folder of your Flex library project. (The list of panel layouts is displayed in the Guide Design perspective in Workbench.)

  3. Right-click the layouts folder and select New > MXML Component .

  4. Type a unique filename. The Guide Design perspective modifies the name of your custom panel layout when it displays it. The perspective adds a space immediately before each uppercase character and number in the name to make it easier to read. For example, an MXML component named MyPanel.mxml appears as My Panel in the Guide Design perspective in Workbench.

  5. In the Based On list, select LayoutTemplate .

  6. (Optional) Set the values for Width and Height to 100% .

  7. Click Finish .

The MXML source for your new panel layout looks like the following: 

<?xml version="1.0" encoding="utf-8"?> 
<LayoutTemplate width="100%" height="100%" 
    xmlns:mx="http://www.adobe.com/2006/mxml"  
    xmlns="ga.model.*" > 
     
</LayoutTemplate>

Note the <LayoutTemplate> element includes the namespace attribute xmlns="ga.model.*" . It is considered good practice to provide namespaces when you reference objects from the Guides API. Providing namespaces both reduces the amount of MXML code and increases code readability. Updating the MXML source for the blank panel layout, the panel layout source looks like the following: 

<?xml version="1.0" encoding="utf-8"?> 
<ga:LayoutTemplate width="100%" height="100%" 
    xmlns:mx="http://www.adobe.com/2006/mxml"  
    xmlns:ga="ga.model.*" > 
     
</ga:LayoutTemplate>

This panel layout project compiles with no warnings or errors. However, this panel layout in its current state does not display any objects or content. In the next section, you extend the blank panel layout to display Guide objects and Flex components.

// Ethnio survey code removed