Blogs
Using Flex DateField and DataGrid elements in WebDynpro Java with FlashIslands - Part 1
|
|
After doing the FlashIsland slider example, I wanted to try out other Flex UI elements. In this blog series, I would like show how to use the DateField, TextInput and DataGrid to display data from SAP backend. I give a date range and a username, and the corresponding records are displayed in the DataGrid. This is what the final application looks like:
I have divided this blog into two main parts. One is the Flex part and other is the WebDynpro part. We can either choose to develop the Flex screen first or the WebDynpro part. Let us start with designing the Flex UI.
Designing the Flex UI:
Go to Flex Development perspective in NetWeaver Developer Studio, and create a new Flex project. I have named it "FlexUIElements". Before you start designing the UI, you need to change the Flex SDK version to Flex 2.0.1 Hotfix 3. This can be done by right clicking on the project -> Properties -> Flex Compiler -> Flex SDK Version -> Use a specific SDK version -> select Flex 2.0.1 Hotfix 3. Click on OK.
You also need to add the WDIslandLibrary.swc in the Library path of your project. This can be done by right clicking on the project -> Properties -> Flex Build Path -> Library Path -> Click on Add SWC -> select the WDIslandLibrary.swc file. Click on OK.
In the ‘Design' view add the UI elements: I added a panel, and within that panel added the UI elements - Grid, DateField, TextInput, Button and DataGrid. It looks like this:
Your mxml code looks like this now:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="20" y="23" width="615" height="464" layout="absolute">
<mx:Grid x="10" y="10" width="345">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:Label text="From Date" fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:DateField width="167" height="23" id="fromDate"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:Label text="To Date" fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:DateField width="168" id="toDate"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:Label text="Username" fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:TextInput width="168" id="user"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:Button x="10" y="97" label="Get Records" click="getRecords(event)"/>
<mx:DataGrid x="10" y="127" width="575" height="287" dataProvider="{records}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
Replace the Application tag with the following:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="init()">
Make the following changes to the <mx:DateField> in your mxml code: parseFunction property is set to null, so that user cannot enter a date in the text field. labelFunction property calls the function to format the selected date.
For fromDate field:
<mx:DateField width="167"
height="23"
id="fromDate"
showToday="true"
parseFunction="null"
labelFunction="formatDate"/>
For toDate field:
<mx:DateField width="168"
id="toDate"
showToday="true"
parseFunction="null"
labelFunction="formatDate"/>
You write all import statements, functions, bindable variables etc., within the <mx:Script> tag.
This is how your <mx:Script> looks like:
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// Bindable variables with WebDynpro
[Bindable]
public var fDate:Date;
[Bindable]
public var tDate:Date;
[Bindable]
public var userName:String;
[Bindable]
public var records:ArrayCollection;
public function init():void
{
FlashIsland.register(this);
}
// this method is called when you click on the button "Get Records"
public function getRecords(event:Event):void
{
fDate=fromDate.selectedDate;
tDate=toDate.selectedDate;
userName=user.text;
FlashIsland.fireEvent(this, 'getrecords', null);
}
//This method formats the date, and is mentioned in the labelfunction of the DateField
public function formatDate(date:Date):String
{
dfFormatter.formatString="DD/MM/YYYY";
return dfFormatter.format(date);
}
]]>
</mx:Script>
Now I will explain each part of the <mx:Script> code:
Bindable variables hold the value that needs to be passed to WebDynpro and the values that come back from WebDynpro.
Note: Bindable variables should have the same name in the both WebDynpro and in Flex. I will come to this later.
I have declared 2 variables - fDate and tDate, both of type Date. This will hold the selected date in the flex screen, and gets passed to WebDynpro.
The String variable username holds the username I enter in the Flex screen.
The list of records that come from the backend is stored in the records ArrayCollection variable.
The variable dfFormatter is used to format the date and is of type DateFormatter.
Functions lets you run a piece of code that can be invoked within the ActionScript. In our case we have 3 user-defined functions:
init() is first called as soon as the application is initialized to register the FlashIsland, and needs to be mentioned within the Application tag.
getRecords() is called when you click on the button. It sets the value of variables fDate and tDate with the selected date in the flex UI. It sets the username variable with the user you enter in the flex UI at runtime. Once the variables have the value necessary to get the records, it fires an event to webdynpro using the following code:
FlashIsland.fireEvent(this, 'getrecords', null);
Note: Please keep a note of the event name getrecords, this has to be the same in webdynpro. We will come to this when we do the webdynpro part of the project.
formatDate() is the labelFunction that is called to format the date. By default, the date is in MM/DD/YYYY format. In this example, I am formatting it to DD/MM/YYYY format.
This is what our final flex code looks like:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="init()">
<mx:Script>
<![CDATA[
import sap.FlashIsland;
import mx.collections.ArrayCollection;
import mx.formatters.DateFormatter;
// Bindable variables with WebDynpro
[Bindable]
public var fDate:Date;
[Bindable]
public var tDate:Date;
[Bindable]
public var userName:String;
[Bindable]
public var records:ArrayCollection;
[Bindable]
public var dfFormatter:DateFormatter=new DateFormatter();
public function init():void
{
FlashIsland.register(this);
}
// this method is called when you click on the button "Get Records"
public function getRecords(event:Event):void
{
fDate=fromDate.selectedDate;
tDate=toDate.selectedDate;
userName=user.text;
FlashIsland.fireEvent(this, 'getrecords', null);
}
//This method formats the date, and is mentioned in the labelfunction of the DateField
public function formatDate(date:Date):String
{
dfFormatter.formatString="DD/MM/YYYY";
return dfFormatter.format(date);
}
]]>
</mx:Script>
<mx:Panel x="20"
y="23"
width="615"
height="464"
layout="absolute">
<mx:Grid x="10"
y="10"
width="345">
<mx:GridRow width="100%"
height="100%">
<mx:GridItem width="100%"
height="100%">
<mx:Label text="From Date"
fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem width="100%"
height="100%">
<mx:DateField width="167"
height="23"
id="fromDate"
showToday="true"
parseFunction="null"
labelFunction="formatDate"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%"
height="100%">
<mx:GridItem width="100%"
height="100%">
<mx:Label text="To Date"
fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem width="100%"
height="100%">
<mx:DateField width="168"
id="toDate"
showToday="true"
parseFunction="null"
labelFunction="formatDate"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%"
height="100%">
<mx:GridItem width="100%"
height="100%">
<mx:Label text="Username"
fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem width="100%"
height="100%">
<mx:TextInput width="168"
id="user"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:Button x="10"
y="97"
label="Get Records"
click="getRecords(event)"/>
<mx:DataGrid x="10"
y="127"
width="575"
height="287"
dataProvider="{records}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1"
dataField="col1"/>
<mx:DataGridColumn headerText="Column 2"
dataField="col2"/>
<mx:DataGridColumn headerText="Column 3"
dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
Build the project to check for errors if any, and then do an "Export Release Build" to the bin-release folder as shown:
Now that we have partially completed the flex part of our project, let us begin the WebDynpro part of our project. Why I am saying partially is because, we need to make some changes to the DataGrid element, and we will come back to this once we have done the WebDynpro part.
The WebDynpro part of this application is explained in the 2nd part of this blog series Using Flex DateField and DataGrid elements in WebDynpro Java with FlashIslands - Part 2
Rishi Narayanan S is an SAP Technology Consultant at Tango Group New Zealand, exploring the incredibly awesome world of SAP Netweaver.
Add to: del.icio.us | Digg | Reddit
Looking forward to hearing your ideas and innovative ways to do this better.
Comment on this weblog