« Presentations from BFlex – Flex Data Paging | Main | Photoshop.com Mobile for Android (My Review) »
Data Paging within Flash Builder 4
| By Rich Tretola | November 3, 2009 | |
| 2,670 views |
One of the coolest new features of Flash Builder 4 is built in data paging. This tutorial will show you how to enable data paging so that your datagrid intelligently fetches data only when necessary. What does that mean? In this example, I have 10000 objects defined on the Java side, however the DataGrid will only request what it needs based on where the user scrolls. In fact if the user starts with the first 20 records and then jumps to the 5000th record, the application will not fetch records 21-4999, but will actually skip ahead and request records 5000-5020! How cool is that? OK, so lets get started with the tutorial. To follow along with this tutorial you can compile the classes below or use the pre-built turnkey Tomcat/BlazeDS server by, downloading the lab assets from here.
Check out the full tutorial..
If you take a look at the MyService.java class below, you will notice that it has 2 methods, the first is called count() and this simply returns the total possible amount of records that could be returned to Flex. This allows Flash Builder to setup the grid properly. The second is called getItems_paged(Integer startIndex, Integer numItems) and this accepts 2 arguments. The startIndex, and the numItems. This will allow the service to know where in the data set to start returning records and how many to return. Finally, you will notice that the service is returning objects of type MyValueObject which has 2 properties, message and index.
MyService.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import java.util.ArrayList; import java.util.List; public class MyService { public Integer count(){ return 10000; } public List<MyValueObject> getItems_paged(Integer startIndex, Integer numItems){ List<MyValueObject> returnList = new ArrayList(); for (int i=0; i<numItems; i++){ startIndex++; String s = "I am item " + startIndex; returnList.add(new MyValueObject(s, startIndex)); } return returnList; } } |
MyValueObject.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | public class MyValueObject { private String message; private Integer index; public MyValueObject() { super(); } public MyValueObject(String message, Integer index) { super(); this.message = message; this.index = index; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public Integer getIndex() { return index; } public void setIndex(Integer index) { this.index = index; } } |
On to the full tutorial. If you haven’t downloaded the turnkey Tomcat server from the lab assets, you will need to compile the two classes above, put them within the classes folder of your BlazeDS server and define the destination within the remoting-config.xml file. If you are running the turnkey Tomcat/BlazeDS server from within lab assets, this has already been setup for you.
Next, create a new Flash Builder project and point it to your BlazeDS server. Just follow the steps below:
Create a new project:
Configure the project settings as a J2EE BlazeDS Web Based Flex application:
Attach the project to your BlazeDS server:
Now that you have a project created and running on your BlazeDS server, select Connect to Data/Service from the Data/Services view:
Select BlazeDS as the service type:
If you are prompted for a password while using my turn key server, select No password required and click OK, if you are running your own server, you may need a password depending on your setup.
If all is working properly, you should now see your service show as shown below. Check your service and click finish.
Now that your service is defined, you need to change it to enable paging. Right click on the getItems_pages method from within the Data/Services panel and select Enable Paging.
You will need to set an identity property. This property must be a unique identifier, in our case this is the index property.
Next, you need to define the total number of records you would like fetched per call and the count operation which is what Flash Builder uses to identify the total possible number of records available.
Now, switch to deign view and drag a DataGrid out to your workspace. Right click on the DataGrid and select Bind to Data.
Choose the service you just defined as the data to be bound.
That’s It! Run your application and you will now have a datagrid that will intelligently fetch only the data it needs!
Note: although this feature is currently only available for BlazeDS services (Java, PHP, ColdFusion, etc), future builds of Flash Builder will allow you to also use this feature within HTTP and WebServices.
Topics: Uncategorized | 4 Comments »
November 3rd, 2009 at 10:55 am
Social comments and analytics for this post…
This post was mentioned on Twitter by richtretola: Blogged: Data Paging within Flash Builder 4 http://bit.ly/4arF73…
November 4th, 2009 at 11:46 am
[...] This post was mentioned on Twitter by Rich Tretola, Simon Barber, Michael Borbor, Rafael Ochoa, Abraham Vázquez and others. Abraham Vázquez said: Data Paging within Flash Builder 4 http://bit.ly/4ANo3G (via @richtretola) [...]
November 8th, 2009 at 2:37 am
Classic Tall Ugg Boots on sale!,We are professional supply Ugg bailey button ,Ugg Knightsbridge is your best choice,free shipping and nontax,only need 1 week to your door!
Reply to this comment
January 26th, 2010 at 10:05 pm
[...] Data Paging within Flash Builder 4 | EverythingFlex: Flex & AIR [...]