Flex Article

Integrating Flex 2 and Ruby on Rails

Building the user interface

To get started, you'll create the user interface for displaying the data. Open Flex Builder and go to File > New > Flex Application to create a new Project called flex_issuetracker. Once the project has been created, open flex_issuetracker.mxml and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            
            [Bindable]
            private var statusArray:Array = ["Opened", "Assigned", "Closed"];
            
            [Bindable]
            private var priorityArray:Array = ["Blocker", "Critical", "Major", "Minor", "Trivial"];
                
        ]]>
    </mx:Script>
    <mx:VDividedBox x="0" y="0" height="100%" width="100%">
        <mx:Panel width="100%" height="376" layout="absolute" title="Create/Update Bugs">
            <mx:Form x="10" y="10" width="930" height="280">
                <mx:FormItem label="Reported by">
                    <mx:TextInput width="220" id="reportedby" text="{bugs_dg.selectedItem.reportedby}"/>
                </mx:FormItem>
                <mx:FormItem label="Assigned to">
                    <mx:TextInput width="220" id="assignedto" text="{bugs_dg.selectedItem.assignedto}"/>
                </mx:FormItem>
                <mx:FormItem label="Description">
                    <mx:TextArea width="336" height="111" id="description" text="{bugs_dg.selectedItem.description}"/>
                </mx:FormItem>
                <mx:FormItem label="Status" width="287">
                    <mx:ComboBox width="199" id="status" selectedIndex="{statusArray.indexOf(bugs_dg.selectedItem.status)}">
                        <mx:dataProvider>
                            {statusArray}
                        </mx:dataProvider>                    
                    </mx:ComboBox>h
                </mx:FormItem>
                <mx:FormItem label="Priority">
                    <mx:ComboBox width="199" id="priority" selectedIndex="{priorityArray.indexOf(bugs_dg.selectedItem.priority)}">
                        <mx:dataProvider>
                            {priorityArray}
                        </mx:dataProvider>
                    </mx:ComboBox>
                </mx:FormItem>
            </mx:Form>
            <mx:ControlBar horizontalAlign="right">
                <mx:Button label="Clear" />
                <mx:Button label="Update" />
                <mx:Button label="Create" />
            </mx:ControlBar>
        </mx:Panel>
        <mx:Panel width="100%" height="444" layout="absolute" title="Bugs">
            <mx:DataGrid x="0" y="0" width="100%" height="100%" id="bugs_dg" >
                <mx:columns>
                    <mx:DataGridColumn headerText="Reported by" dataField="reportedby"/>
                    <mx:DataGridColumn headerText="Assigned to" dataField="assignedto"/>
                    <mx:DataGridColumn headerText="Description" dataField="description"/>
                    <mx:DataGridColumn headerText="Status" dataField="status"/>
                    <mx:DataGridColumn headerText="Priority" dataField="priority"/>
                </mx:columns>
            </mx:DataGrid>
            <mx:ControlBar horizontalAlign="right">
                <mx:Button label="Delete" />
            </mx:ControlBar>
        </mx:Panel>
    </mx:VDividedBox>
</mx:Application>

The code in this MXML file does several things:

1. It creates a basic form for submitting new bugs and editing existing bugs.

   Note: The values in the FormItems are updated automatically using databinding based on the values of the selected item in the datagrid discussed in the following sections. The form is wrapped inside of a Panel component. Using a Panel component has two benefits:

   1. It generally produces a nicer looking interface and provides a label for you to describe the content/purpose of the panel.

   2. You can attach a ControlBar to your panel so that you can add additional controls that work with the content. The ControlBar at the bottom of this panel has three buttons. One that creates new bugs, another for updating an existing bug, and lastly a button for clearing the form. Currently these buttons do not do anything. They are just placeholders for now, at least until you set up your Rails back end for the application.

   <mx:Panel width="100%" height="376" layout="absolute" title="Create/Update Bugs">
       <mx:Form x="10" y="10" width="930" height="280">
           <mx:FormItem label="Reported by">
               <mx:TextInput width="220" id="reportedby" text="{bugs_dg.selectedItem.reportedby}"/>
           </mx:FormItem>
           <mx:FormItem label="Assigned to">
               <mx:TextInput width="220" id="assignedto" text="{bugs_dg.selectedItem.assignedto}"/>
           </mx:FormItem>
           <mx:FormItem label="Description">
               <mx:TextArea width="336" height="111" id="description" text="{bugs_dg.selectedItem.description}"/>
           </mx:FormItem>
           <mx:FormItem label="Status" width="287">
               <mx:ComboBox width="199" id="status" selectedIndex="{statusArray.indexOf(bugs_dg.selectedItem.status)}">
                   <mx:dataProvider>
                       {statusArray}
                   </mx:dataProvider>                    
               </mx:ComboBox>h
           </mx:FormItem>
           <mx:FormItem label="Priority">
               <mx:ComboBox width="199" id="priority" selectedIndex="{priorityArray.indexOf(bugs_dg.selectedItem.priority)}">
                   <mx:dataProvider>
                       {priorityArray}
                   </mx:dataProvider>
               </mx:ComboBox>
           </mx:FormItem>
       </mx:Form>
       <mx:ControlBar horizontalAlign="right">
           <mx:Button label="Clear" />
           <mx:Button label="Update" />
           <mx:Button label="Create" />
       </mx:ControlBar>
   </mx:Panel>
   

2. This code creates a DataGrid component that both displays information about existing bugs and allows you to select a bug record to update or delete. The app uses the dataField parameter in the columns to specify the name of the attribute in the dataprovider that your application will use to populate this column. You do not have any data yet, but it is important to keep in mind that the column names in your table should match the values specified here. The DataGrid component is also wrapped in a panel with a control bar. This control bar has one button that will be used for deleting the bug that is currently selected in the DataGrid component.

   <mx:Panel width="100%" height="444" layout="absolute" title="Bugs">
       <mx:DataGrid x="0" y="0" width="100%" height="100%" id="bugs_dg" >
           <mx:columns>
               <mx:DataGridColumn headerText="Reported by" dataField="reportedby"/>
               <mx:DataGridColumn headerText="Assigned to" dataField="assignedto"/>
               <mx:DataGridColumn headerText="Description" dataField="description"/>
               <mx:DataGridColumn headerText="Status" dataField="status"/>
               <mx:DataGridColumn headerText="Priority" dataField="priority"/>
           </mx:columns>
       </mx:DataGrid>
       <mx:ControlBar horizontalAlign="right">
           <mx:Button label="Delete" />
       </mx:ControlBar>
   </mx:Panel>
   

3. The panels are wrapped inside of a VDividedBox component, which allows you to dynamically resize the area that is allotted to the form or the DataGrid component using a divider that the user can drag.

4. The code declares two arrays that are used as data providers to populate the ComboBox components that are part of the form

   [Bindable]
   private var statusArray:Array = ["Opened", "Assigned", "Closed"];
   			
   [Bindable]
   private var priorityArray:Array = ["Blocker", "Critical", "Major", "Minor", "Trivial"];
   

Page 2 of 4

Previous Page

Next Page