In the previous steps we created a simple axis2 based web service, allowing us to remotely alter an array of products. We will now focus on building the Flex client application.
Create the project
First of all we will need to create the Flex project. Launch Flex and create a new project, give it any name you like. The server technology field should be None, we will use SOAP instead of Flex remoting.
After creating the project you should have a new project with a empty <ProjectName>.mxml file, open this file.
Create the Flex client
The default mxml file has a mx:application XML tag, within this tag we will define the components used by this application. Add the following attribute to the mx:application tag :
creationComplete=”WS.getProducts.send()”
This will trigger the getProducts operation (defined later in this part ) of the WebService component on load.
The next step is to create the webservice client xml, add the following XML to the mxml file.
<mx:WebService
id=”WS”
wsdl=”http://localhost:8080/axis2/services/FlexService?wsdl”
showBusyCursor=”true”
service=”FlexService”
concurrency=”single”
> </mx:WebService>
Let’s take close look at this XML,
- The id attribute defines the unique id of this component on the stage, all other components need to use this id if they want to use this component.
- The wsdl attribute defined the location of the WSDL file, this is the webservice we deployed in the previous steps.
- The showBusyCursor attribute tells Flex to display a small icon when a webservice call is active, this is usefull since we can easily see if a button is actually performing a SOAP call.
- The servicetag attribute tells the SOAP client which service to use, this matches the value found in the wsdl:service tag in the WSDL file.
- The concurrency attribute tells flex not to open multiple connections at the same time. Since 0ur webservice is far from thread safe this attribute makes sure Flex doesn’t perform simultaneous calls.
All future mx:request tags should be placed within this tag, you should create only one mx:WebService tag in this application!
The first method we will add to the mx:WebService tag is the getProducts method
<mx:operation name=”getProducts”>
<mx:request xmlns=”http://service.test.com”>
</mx:request>
</mx:operation>
Since the getProducts method doesn’t have any parameters the request body is empty. We just build a fully functional SOAP client, the next part will describe a datagrid used to display the results.
<mx:DataGrid x=”10″ y=”10″ width=”400″ height=”492″ id=”productGrid” dataProvider=”{WS.getProducts.lastResult}”>
<mx:columns>
<mx:DataGridColumn headerText=”Id” dataField=”id”/>
<mx:DataGridColumn headerText=”Description” dataField=”description”/>
<mx:DataGridColumn headerText=”Price” dataField=”price”/>
</mx:columns>
</mx:DataGrid>
Let’s take a closer look at this XML:
- The mx:DataGrid defines the datagrid, this is a default Flex component,
- The id attribute defines the unique id of this component, just like the WebService component.
- The dataProvider attribute tells the dataGrids to use the data supplied by the webservice component. All binding and event handling is taken care of. WS.getProducts.lastResult means get the lastResult from the operation getProducts in the webservice WS.
- For each field in the product ( the id, description and price ) there is a matching tag in the mx:columns tag. Each mx:DataGridColumn represents a property of the product. The dataField attributes matches the column to a SOAP response field.
At this point you should be able to run the Flex application, and you should see a datagrid containing the products we defined in the FlexService Java class.
.
, but still..
) who really enjoys his lunch. For example, this is what his lunch looked like a couple of days ago;
