Advertisement
  1. Code
  2. Flash
Code

Dynamic Advanced Long Lists with Flex

by
Difficulty:IntermediateLanguages:

This tutorial demonstrates how a developer can easily extend the prepackaged Flex library classes to achieve superior user interface results.

In this case, we'll be creating an advanced datagrid which can make insanely long lists into manageable chunks and display them as paged lists. This tutorial deals with primarily AS3, but has a dose of php and mySQL to support back end functionality. The application will be able to store and recall the list's shown columns, current page, sort orders and sort fields. Let's go..

Introduction

The datagrid and advanced datagrid classes packaged with Flex are rather limited in functionality. They are only good for very short lists in a real world application. Lists can be millions of lines long and XML documents can't be sent representing the full list efficiently. Also, if the XML returned only represents one section of the list, then that is the only section the user will ever see.

This tutorial is the first stage of my own experimentation trying to make advanced datagrids act as the user would intend. Sections of this could be used for a regular DataGrid, but the AdvancedDataGrid is much more usable. The AdvancedDataGrid has a watermark unless you purchase the Professional Edition or if you're a student and pick up the education version of FlexBuilder. You will need FlexBuilder, a place to host your php code and a mySQL server for the database to follow this tutorial. I'm also assuming you're competent in basic FlexBuilder functionality like building projects.

Step 1: Requirements Gathering

The first step is always to figure out what you want to do. Since all applications are different in their use, your own lists may have different functionality. Based on my user requirements I determined that I needed an application that could:

  • Show data from a list that could be 1 - ∞ records long.
  • Allow paging of the data to enhance UI and load times.
  • Remember the fields being shown.
  • Remember the fields the list is being sorted on.
  • Remember the direction those fields are being sorted on (ascending or descending).
  • Allow the user to change the field order of the grid.
  • Allow the user to change the page that they are viewing.

Step 2: Determine List Controls

The user will have all controls built into the AdvancedDataGrid such as multi column sorting and column reordering through dragging the headers. Additionally, the user will have to be able to navigate through the pages of the list. For this, we'll need to use a stepper, as well as buttons to allow the user to go to the first page, go to the previous page, reload, go to the next page and go to the last page. Since this cannot be built into the AdvancedDataGrid class itself we must have some kind of container that we create which holds the list we'll be working with and all of the controls.

Step 3: What Are My Events?

We're trying to make the front end as "dumb" as we can. This means that for every action the user makes we must record their actions on the backend. I usually write out a list of everything that must be communicated to my server to help with flow. It also helps for agile development so we can focus on one piece of functionality at a time. For this experiment I determined the following events will need to take place based on the requirements gathered. I've broken this down into two groups; events fired by the list itself and events fired by the controls outside of the list

Outside Events:

  • Page is visited for the first time this session.
  • Stepper value is changed using the stepper item.
  • Stepper value is changed using the navigation buttons.

List Events:

  • User changes the grid's column sorting.
  • User changes the grid's column display order.
  • Columns are loaded.
  • List items are loaded.

The Database

Long lists must come from databases. While there are numerous ways to do this, I have chosen something simple just to get data back to for this experiment. We'll need to create a database and two tables. One table for the data we are going to list, and one table as an advanced session variable storage that will make it possible for a list to remember its state as long as the session is valid.

Step 4: Create Your Tables

Create two tables. The first is the actual data that we'll be retrieving. To make things simple you can simply copy the following to get an exact replica of my test data.

Now we must create the table to store session information. This is the table that makes this whole thing work.

The Session Table has a unique key id, a "SessionID" which will be stored as a cookie in PHP, the "Name" of the type of information being stored, the "Value" stored and a "LastActiveDTS" to help with future cleanup to purge old expired sessions. This cleanup is not currently implemented.

PHP Event Code

As we determined in Step 3 there are several events that must happen. The following steps go through the php scripts that allow these events to occur on the server. There are many ways to do this, what I have coded works, but even I would not use this in a production environment.

Step 5: Tag.php

I created a helper class to help with creating any kind of structured tagged output. This can be used to create html, but in this case it will be the basis for XML. I won't go into this code much as I use it as an accessory, more than the point of this tutorial.

Step 6: GetListColumns.php

This script initializes the session if needed, then returns the columns in the display order and what their sorts are.

First, we make a connection to the database and include our Tag class.

Logically, this is the first event that will be fired when the user first visits the page with the list. Columns must be known before they can be retrieved. With this assumption, the first part of the code deals with initializing the default list options in the Session table and assigning a cookie to this user.

Now we get the columns to show. We know at this point that we have a session and session variables for this list.

Step 7: listLoad.php

This script is what will return the actual data for the DataGrid.

First, we make a connection to the database and include our Tag class.

We create the query based on values from the session table. Namely, the current page and the sort paramenters needed.

Now that we have created our desired query string, we get the data and return it in XML form. We must also return the ORDER BY parameters so that it can be displayed to the user on the front end.

Step 8: stepperMax.php

This script is needed to determine the maximum number of pages possible for the list. It returns the max pages, as well as the current page for display purposes. For simplicity, the result is a string formatted like "MAX, CURRENT".

Complete script:

Breather

This wraps up our scripts needed to make the list visible at all. The next php files are solely for updating session information based on user interaction.

Step 9: stepperUpdate.php

This is the simple script that changes the value of the "ListPage" session variable. This script is called whenever the stepper of the list is modified by the user. It also assumes there will be a post parameter called "page" sent from the front end application.

Step 10: SetColumnOrder.php

This is the simple script that changes the value of the "ColumnOrder" session variable. This script is called whenever the user changes the columns around on the front end and it assumes a Post variable named "order".

Step 11: SetSort.php

This is the simple script that changes the values of the "SortOrders" and "SortDirections" session variables. This script is called whenever the user changes the sorts around on the front end. It assumes a Post variable named "order" and a Post variable named "directions".

/PHP

That wraps up all the PHP scripts needed to provide for the functionality we want. For ease of use, these files should reside in the same directory as the page that will hold the .swf and the .swf itself. I didn't go into too much detail as there are many other ways to access a database through php. My final result will most likely only have one php script that is called that can interpret the type of request and has a sort of factory class that determines what should be set or returned. For this example that may have just been overkill. Just remember, we are trying to keep the front end as dumb as we can. The less logic it has to do the better.

Now, finally, we have the backend ready and we can start with Flex.

Step 12: Set Up Folders in FlexBuilder

In the src folder of your project create a folder called "css" and a folder called "images".

Step 13: Create Images For Stepper Buttons

You could just use generic buttons, but since vectortuts gave us such a nice selection of icons here : http://vector.tutsplus.com/articles/web-roundups/60-free-vector-icon-packs-for-design-professionals/ we can utilize some of these. I used for my example the milky icon set to get my arrow buttons. I created the mouse over icons by simply applying a grey screen over the green and saving it as such. The names I used are in the CSS file we'll discuss now. Just remember, we need a total of ten icons; five for the icon, and five matching icons for mouseover events.

Step 14: longList.css

This is my css file for visualization of the list I will be creating.

Step 15: LongList.as

Create a new ActionScript class. This class will be our list itself so it extends the AdvancedDataGridClass. I have tried to comment the code as needed so as not to break up the source. By keeping the files at the root we don't have to worry about package paths. In a real world setting I highly advise against doing this as all your script files will need to be organized in different directories.

The key to remember about this class is that we're not really adding much to the library supplied with Flex. All we have to do is give an AdvancedDataGrid the ability to fire events to the server to load information, or change session information. Actual user interface is not changed at all.

Step 16: LongListArea.as

This is the display container that will have the LongList as well as its controls. For ease I just extended the Panel class and laid everything out inside of it. This class is only concerned with layout of its elements, and what should happen when the user changes the stepper's value be it through the stepper itself or the buttons. Again, to keep it simple I have tried to comment in the code to keep the code all together.

Step 17: GridExample.mxml

Since we did all the work in ActionScript the actual mxml markup is super simple. I did it this way to follow OOP principles and to program for reusability. There really is nothing to this file, so here it is.

Step 18: Wrap Up

Build your project and put the created files in the same directory as all the php scripts you created. For simplicity, I have them all living at my web root. Try it out, navigate away from the page after you have changed around the page, or the sort, and then come back to it. Hit refresh in your browser. You'll see that the application remembers what you have done!

Conclusion

This is just an example of how by simply extending what Flex already has you can achieve very nice results for the user interface. By customizing events you are able to tell Flex what it should be doing and you can use this same methodology to make any list perform as you wish.

I'll be expanding on this hopefully, with added features like a Quick Search, the ability to choose which columns to show, adding columns, removing columns, letting the user Save their selections through the use of a login system, predefined search parameters, predefined list layouts etc. Since Flex is made to be completely extendable there's really no need to have to reinvent the wheel, just make the wheel better! I hope you enjoyed this tutorial.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.