Create and set tables, part 1th: Using Flex to create JTable

Introduction: A Adobe®flex-based and set table (juxtaposition table) is a two-dimensional visual aid that can be used to arrange, classify, and compare large amounts of data. Use the table of tables to define your own perspective in a convenient and compact view. This article demonstrates how to dynamically create a table's columns and modify the contents of a table. In addition, you'll learn how to display multiple items in a cell, and how to change the shape and color of cells.

Brief introduction

To ease the burden of non-IT professionals, such as business consultants, we will build prototyping tools with similar microsoft®powerpoint presentation features to help business consultants organize large amounts of unstructured data and prepare presentation documents for customers. The first version of our tool is based on Eclipse. However, to take advantage of better charting capabilities, we decided to switch to Rich Internet application technology. We considered the pros and cons of popular Ajax and Adobe Flex, and ultimately decided to use Flex.

Our Flex based applications allow users to create slides using a variety of visual aids, including item lists, chart editors, tag clouds, relationship finder, and tables. In this article, we'll explain a special accessibility tool that allows users to arrange, categorize, and compare large amounts of data. We refer to this helper tool as "juxtaposition Table" or JTable. With JTable, users can visualize data as a two-dimensional view and interactively change horizontal and vertical datasets at run time. The tool supports checking the database or information space from a variety of user-defined perspectives that are contained in a simple view.

Before we look at the code, we'll introduce the basics of the scenario, where we'll act as a research center to study the tastes of the public's favorite books, movies, songs and sites. A survey group can contain any number of participants and an extensible list of survey categories. For the sake of simplicity, we use a small group of investigators. The participants were: John, Jennifer and Ivan. After the survey is completed, we transfer the results to a simple database. Now, we want these results to be available for review in our Web site. We can provide a large HTML table to store the results of the survey, but it is very messy in front of the user because the table is too large to make the information very dense. We can also provide multiple tables to display data from multiple predefined perspectives. This approach is also not ideal, however, because users are limited to our predefined tables, and scrolling across multiple tables can be annoying.

The adoption of JTable can achieve an excellent solution. If we display the data in JTable, users can change the horizontal and vertical datasets to select a customized perspective based on their own information needs. For example, a user might want to know John's favorite book, so you can select "John" as the horizontal dimension of the table, and select "Favorite Books" as the vertical dimension of the table. Users may want to know the most favorite movies of the survey participants. Similarly, you can select "All people" as the horizontal dimension of the table, and select "Favorite Movies" as the vertical dimension of the table. By using JTable, users can customize their own perspective in a convenient and compact view. To run the JTable application, you can download DataGridDeveloperWorksExample1 in the download table below. After you run the JTable application, you can view the results of the survey in a variety of combinations.

We use Flex's Advanceddatagrid component to implement JTable. In this two-part series, we will demonstrate how to customize and extend the Advanceddatagrid components that are provided in the Flex 3 data visualization package. In this article, we also demonstrate how to use horizontal and vertical control bars to modify the contents of JTable at run time, and how to convert the first and first rows of a table into column and row title bars. In part 2nd, we'll show you how to expand and shrink items smoothly in a cell, and move items between cells in a drag-and-drop manner.

This series of articles assumes that the reader is familiar with the Flex programming environment and the ActionScript language.