8. In the HGroup component, add the top bar containing the Create, Query, and Sync buttons. When a user clicks the buttons, the
application logic calls ActionScript event handlers specified in the click attributes. You will create these handlers later.
<s:HGroup width="100%" verticalAlign="middle">
<s:Button label="Create" click="onCreateClick()"/>
<s:Button label="Query" click="onQueryClick()"/>
<s:Button label="Sync" click="onSyncClick()"/>
<mx:Spacer width="100%"/>
</s:HGroup>
9. Add the following columns component in the DataGrid component. The columns component data fields for the account
name, billing city, type, website, and annual revenue. The DataGrid component presents a full listing of the account records
retrieved from the local database when a user clicks the Sync button. When a user clicks a record, the application calls the ActionScript
method presenting the edit user interface.
<mx:DataGrid
id="_dataGrid"
width="100%"
height="100%"
resizeEffect="Resize"
dataProvider="{_gridDataProvider}"
itemClick="onDataGridItemClick()">
<mx:columns>
<mx:DataGridColumn dataField="Name"/>
<mx:DataGridColumn dataField="BillingCity"/>
<mx:DataGridColumn dataField="Type"/>
<mx:DataGridColumn dataField="Website"/>
<mx:DataGridColumn dataField="AnnualRevenue"/>
</mx:columns>
</mx:DataGrid>
10. Create two Force.com Flex FieldContainer components, which group data and simplify the process of manipulating several
fields in a single operation. The FieldContainer components you're creating here will also render the details of the selected
record at the bottom of the application window. The first component edits an existing account, and the second creates a new
account. Each has an id attribute that the ActionScript code uses as a variable to render the interface elements contained in the
component. The includeIn attribute contained in each component indicates which UI the application presents.
In addition to horizontal groups of buttons needed in each UI, you will also add one LabelAndField component for each field
of the Account object you want to display, and reference each field by its internal Force.com API name. A LabelAndField
component is a Force.com Flex component that renders a Salesforce field value with its label. The fields you create with the
LabelAndField component automatically function in Force.com Flex applications the same way they do on the Salesforce
user interface. For example, date fields display a calendar when clicked. The fields also respect field dependencies, and automatically
provide inline editing, hover details, error notification, and Info icon help text.
<!-- edit mode: show UI components in inline edit mode -->
<flexforforce:FieldContainer
id="_editFieldContainer"
width="100%"
includeIn="edit">
<s:HGroup
width="100%"
paddingLeft="5"
paddingRight="5"
paddingBottom="5"
18
Step 8: Create the Account Manager User Interface and
Application Logic
(39 pages)
Manymanuals.com
Manymanuals.de
Manymanuals.fr
Manymanuals.it
Manymanuals.pl
Manymanuals.cz
Manymanuals.es
Manymanuals-pt.com
Commentaires sur ces manuels