FLEX – live scroll datagrid

3 min read >

FLEX – live scroll datagrid

Engineering Insights & Web Platforms

A nice feature on search engines would be a live scroll, so right before you get to the end of the current page the next page is automatically loaded.

I’ve played a bit with Adobe Flex SDK and implemented a short proof of concept.

First, you need an MX.RPC.http.HTTPService to map the search service. For the service, I created a simple PHP page that returns some random list of data and mapped my HTTPService to it.

I created a list of type ArrayCollection to hold the search results, and a DataGrid component with the list bound as dataProvider.

When the application starts, the HTTPService sends the first request for data and after the result is received, it will parse it and add the data to the ArrayCollection which is bound to the DataGrid, so the results will show up in the DataGrid

For the moment, the application only loads the first page of results so we need to load the next page each time the user gets to the end of the results. This can be done by adding an event listener for the DataGrid scroll event. On this listener, we check if the user scrolled down using the ScrollEvent direction and delta properties. If so, we check if the user is close to the end (there are 3 more results to show) and then we send a new request to the search service for the next page o data.

Here you can check out the example. (right-click on the flash to view the source code).

One problem that I was not able to solve was that when loading the first page with data the maxVerticalScrollPosition of the DataGrid does not get updated, I was using this in the status label from the bottom to show the index of data shown in the DataGrid; maxVerticalScrollPosition was only updated when making the first scroll. For the status label, I used a hack that you can check in the code.

<!--?xml version="1.0" encoding="utf-8"?-->

	
		<![CDATA[ import mx.events.ScrollEventDirection; import mx.events.ScrollEvent; import mx.controls.Alert; import mx.rpc.http.HTTPService; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; [Embed(source="assets/loading.swf")] private var loadingAnimation:Class; 
						{
							var props:Array = value.split(/(\d+)/);
							list.addItem({text:props[0], number:props[1]});
						}
					}
				}
				else
				{
					//show an alert if error
					Alert.show((event as FaultEvent).message.toString());
				}
				loadRequests--;
				if(loadRequests == 0)
				{
					loadingImage.visible = false;
				}
			}
			/**
			 * call the php service 
			 */
			private function getNewData():void
			{
				if(loadRequests == 0)
				{
					httpService.send();
					loadingImage.visible = true;
					loadRequests++;
				}
			}
			/**
			 * event handler for datagrid scrolling 
			 */
			private function listScrolled(event:ScrollEvent):void
			{
				if(event.direction == ScrollEventDirection.VERTICAL && event.delta > 0)
				{
					//if close to last item make a new call to get new results
					if(liveDataGrid.maxVerticalScrollPosition - event.position < 3) { getNewData(); } } } ]]>