Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex, ColdFusion

Adobe Flex: Article

Adobe Flex 2: Advanced DataGrid

Part 1: Destination-awareness formatters & renderers

In any GUI tool, one of the most popular components is the one that shows data in a table format like JTable in Java or Datawindow in PowerBuilder. The Adobe Flex 2 version of such a component is called DataGrid. In any UI framework, the robustness of such a component depends on formatting and validating utilities as well as a whole suite of data input controls: CheckBoxes, ComboBoxes, RadioButtons, all sorts of Inputs, Masks, and so on. Using theatrical terminology, the role of the king is played by his entourage. Practically speaking, touching up the DataGrid is touching up a large portion of the Flex framework.

We'll start by upgrading the standard DataGrid to a "destination-aware" control capable of populating itself. Next, we'll look at the task of formatting DataGrid columns and that would naturally lead us to a hidden treasury of the Flex DataGrid - the DataGridColumn, which, once you start treating it like a companion rather than a dull element of MXML syntax, can help you do truly amazing things.

After setting the stage for the DataGrid's satellite controls, we'll lead you through making a professional library with a component manifest file and namespace declaration that supports flexible mappings of your custom tags to the required hierarchy of implementation classes.

Making DataGird Destination-Aware
Introducing Flex remoting substantially increased the size of our application code. Imagine a real-world application with two-dozen different ComboBoxes or DataGrids. If we put all the relevant RemoteObjects in a single application file it will become unmanageable in no time. For similar reasons, any decent sized application is usually partitioned into different files.

As far as partitioning goes, there's a compelling argument to encapsulate instantiation and interoperation with RemoteObject inside the visual component, making it a destination-aware component, if you will. Embedding a Remote Object directly into the DataGrid will make it fully autonomous and reusable. This design approach sets application business logic free from low-level details like mundane remoting.

The concept of destination-aware controls eliminates the tedious effort required to populate your controls with Remoting or DataServices-based data. Here's how an MXML application with a destination-aware DataGrid might look if we apply the familiar remoting destination com_theriabook_composition_EmployeeDAO:

<!-- DestinationAwareDataGridExDemo.mxml-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="vertical"
        xmlns:fx="com.theriabook.controls.*">
        <fx:DataGridEx id="dg"
     destination="com_theriabook_composition_EmployeeDAO"
     method="getEmployees" creationComplete="dg.fill()"/>
</mx:Application>

In Listing 1 we have sub-classed the standard Flex DataGrid.

The data are coming from a server-side database with the help of a Java object called EmployeeDAO. If we run the application, our screen will show the grid of employee records in its default formatting:. (See Figure 1).

Formatting with labelFunction
We have just looked at the default data formatting provided by DataGrid out-of-the-box. The easiest way to improve column formatting is by supplying a labelFunction for each column that requires extra attention:

     <mx:DataGridColumn dataField="PHONE" labelFunction="phoneLabelFunction" />

Once the labelFunction is declared it automatically gets called by the DataGrid, which supplies the appropriate data item plus information about the column so that you can technically apply one function to more than one column. As far as the formatting techniques themselves, Flex offers plenty of pre-defined formatters, which can be used out-of-the-box or customized to your specific needs. For instance, to format Social Security numbers (SS_NUMBER), we could have used mx.formatters.SwitchSymbolFormatter to create the following function:

    import mx.formatters.SwitchSymbolFormatter;
    private var sf:SwitchSymbolFormatter;
    private function ssnLabelFunction(item:Object, column:DataGridColumn):String {
      if (!sf) {
        sf = new SwitchSymbolFormatter();
      }
      return sf.formatValue("###-##-####", item["SS_NUMBER"]);
      }

Then inside the DataGridColumn we can mention this function name:

     <mx:DataGridColumn dataField="SS_NUMBER" labelFunction="ssnLabelFunction" />

Similarly, in Listing 2 we can apply the same technique to the PHONE field setting the formatString to (###)###-####.

Figure 2 shows how our formatting looks on the screen.

Formatting with Extended DataGridColumn
The labelFunction formatting does the job. The price tag is hard-coding labelFunction(s) names in the DataGridColumn definitions. If you packaged a set of label functions in the class mydomain.LabelFunction your column definitions might look like this:

<mx:DataGridColumn    dataField="PHONE" labelFunction="mydomain.LabelFunctions.phone" />
<mx:DataGridColumn    dataField="SS_NUMBER" labelFunction=" mydomain.LabelFunctions.ssn" />

A more pragmatic approach is to provide the formatString as an extra attribute to the DataGridColumn and have it encapsulate the implementation details. We're talking of the following alternative:

<fx:DataGridColumn    dataField="PHONE" formatString="phone" />
<fx:DataGridColumn    dataField="SS_NUMBER" formatString="ssn" />

Implementing such syntax is within arm's reach. We just have to extend - well, not the arm, but the DataGridColumn so that instead of mx:DataGridColumn we would use our, say, fx:DataGridColumn. The mx.controls.dataGridClasses.DataGridColumn is just a respository of styles and properties to be used by the DataGrid. In the Flex class hierarchy it merely extends CSSStyleDeclaration. Nothing prevents us from extending it further and adding an extra attribute. In the case of formatString the setter function will delegate assigning the labelFunction to the helper FormattingManager:

    public class DataGridColumn extends mx.controls.dataGridClasses.DataGridColumn {
      public function set formatString( fs:String ) : void{
        FormattingManager.setFormat(this, fs);
      }
    }

Wait a minute, where did the FormattingManager come from? We'll get to the implementation of this class later. At this point, we have to eliminate the possible naming collision between our to-be-made DataGridColumn and the standard mx.controls.dataGridClasses.DataGridColumn.

Introducing the Component Manifest File
Up till now we've been keeping folders with classes of our custom components under the folder of application MXML files. To reference these components we've been declaring namespaces pointing to some hard-coded, albeit relative paths, such as xmlns:lib="com.theriabook.controls.*" or xmlns="*". The problem with this approach is that these namespaces point to one folder at a time. As a result, we either end up with multiple custom name spaces or we have a wild mix of components in one folder.

To break the spell and abstract the namespace from the exact file location we need to use the component manifest file. Component manifest is an XML file that allows mapping of component names to the implementing classes. Below is the example of component manifest, which combines our custom DataGrid and DataGridColumn located in different folders:

<?xml version="1.0"?>
<componentPackage>
    <component id="DataGrid" class="com.theriabook.controls.DataGrid"/>
    <component id="DataGridColumn"
    class="com.theriabook.controls.dataGridClasses.DataGridColumn"/>
</componentPackage>

To benefit from using this component manifest you have to compile your components with the compc or use the Flex Library project. To be more specific, you have to instruct compc to select the URL that your application can use later in place of the hard-coded folder in the xmlns declaration. So we'll create a new FlexLibrary project - theriabook, where we'll put the theriabook-manifest.xml containing the XML above and set the relevant project properties, as shown in Figure 3.

Now we can move DataGrid from our application project to theriabook and replace xmlns:fx="com.theriabook.controls" with xmlns:fx="http://www.theriabook.com/2006" provided that our application project will include a reference to theriabook.swc. As a result our application will reference fx:DataGrid and fx:DataGridColumn irrespective to their physical location.

Having done that, let's get back to the custom DataGridColumn.


More Stories By Victor Rasputnis

Dr. Victor Rasputnis is a Managing Principal of Farata Systems. He's responsible for providing architectural design, implementation management and mentoring to companies migrating to XML Internet technologies. He holds a PhD in computer science from the Moscow Institute of Robotics. You can reach him at [email protected]

More Stories By Yakov Fain

Yakov Fain is a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay. He wrote a thousand blogs (http://yakovfain.com) and several books about software development. Yakov authored and co-authored such books as "Angular 2 Development with TypeScript", "Java 24-Hour Trainer", and "Enterprise Web Development". His Twitter tag is @yfain

More Stories By Anatole Tartakovsky

Anatole Tartakovsky is a Managing Principal of Farata Systems. He's responsible for creation of frameworks and reusable components. Anatole authored number of books and articles on AJAX, XML, Internet and client-server technologies. He holds an MS in mathematics. You can reach him at [email protected]

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
Almost two-thirds of companies either have or soon will have IoT as the backbone of their business. Though, IoT is far more complex than most firms expected with a majority of IoT projects having failed. How can you not get trapped in the pitfalls? In his session at @ThingsExpo, Tony Shan, Chief IoTologist at Wipro, will introduce a holistic method of IoTification, which is the process of IoTifying the existing technology portfolios and business models to adopt and leverage IoT. He will delve in...
In the enterprise today, connected IoT devices are everywhere – both inside and outside corporate environments. The need to identify, manage, control and secure a quickly growing web of connections and outside devices is making the already challenging task of security even more important, and onerous. In his session at @ThingsExpo, Rich Boyer, CISO and Chief Architect for Security at NTT i3, will discuss new ways of thinking and the approaches needed to address the emerging challenges of securit...
As cloud adoption continues to transform business, today's global enterprises are challenged with managing a growing amount of information living outside of the data center. The rapid adoption of IoT and increasingly mobile workforce are exacerbating the problem. Ensuring secure data sharing and efficient backup poses capacity and bandwidth considerations as well as policy and regulatory compliance issues.
The emerging Internet of Everything creates tremendous new opportunities for customer engagement and business model innovation. However, enterprises must overcome a number of critical challenges to bring these new solutions to market. In his session at @ThingsExpo, Michael Martin, CTO/CIO at nfrastructure, outlined these key challenges and recommended approaches for overcoming them to achieve speed and agility in the design, development and implementation of Internet of Everything solutions with...
SYS-CON Events announced today that Outlyer, a monitoring service for DevOps and operations teams, has been named “Bronze Sponsor” of SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Outlyer is a monitoring service for DevOps and Operations teams running Cloud, SaaS, Microservices and IoT deployments. Designed for today's dynamic environments that need beyond cloud-scale monitoring, we make monitoring effortless so you...
What are the new priorities for the connected business? First: businesses need to think differently about the types of connections they will need to make – these span well beyond the traditional app to app into more modern forms of integration including SaaS integrations, mobile integrations, APIs, device integration and Big Data integration. It’s important these are unified together vs. doing them all piecemeal. Second, these types of connections need to be simple to design, adapt and configure...
It is one thing to build single industrial IoT applications, but what will it take to build the Smart Cities and truly society changing applications of the future? The technology won’t be the problem, it will be the number of parties that need to work together and be aligned in their motivation to succeed. In his Day 2 Keynote at @ThingsExpo, Henrik Kenani Dahlgren, Portfolio Marketing Manager at Ericsson, discussed how to plan to cooperate, partner, and form lasting all-star teams to change the...
"I think that everyone recognizes that for IoT to really realize its full potential and value that it is about creating ecosystems and marketplaces and that no single vendor is able to support what is required," explained Esmeralda Swartz, VP, Marketing Enterprise and Cloud at Ericsson, in this SYS-CON.tv interview at @ThingsExpo, held June 7-9, 2016, at the Javits Center in New York City, NY.
In his General Session at 16th Cloud Expo, David Shacochis, host of The Hybrid IT Files podcast and Vice President at CenturyLink, investigated three key trends of the “gigabit economy" though the story of a Fortune 500 communications company in transformation. Narrating how multi-modal hybrid IT, service automation, and agile delivery all intersect, he will cover the role of storytelling and empathy in achieving strategic alignment between the enterprise and its information technology.
In his session at @ThingsExpo, Steve Wilkes, CTO and founder of Striim, will delve into four enterprise-scale, business-critical case studies where streaming analytics serves as the key to enabling real-time data integration and right-time insights in hybrid cloud, IoT, and fog computing environments. As part of this discussion, he will also present a demo based on its partnership with Fujitsu, highlighting their technologies in a healthcare IoT use-case. The demo showcases the tracking of patie...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, discussed the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
SYS-CON Events announced today that SD Times | BZ Media has been named “Media Sponsor” of SYS-CON's 20th International Cloud Expo, which will take place on June 6–8, 2017, at the Javits Center in New York City, NY. BZ Media LLC is a high-tech media company that produces technical conferences and expositions, and publishes a magazine, newsletters and websites in the software development, SharePoint, mobile development and commercial UAV markets.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
SYS-CON Events announced today that Linux Academy, the foremost online Linux and cloud training platform and community, will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Linux Academy was founded on the belief that providing high-quality, in-depth training should be available at an affordable price. Industry leaders in quality training, provided services, and student certification passes, its goal is to c...
WebRTC defines no default signaling protocol, causing fragmentation between WebRTC silos. SIP and XMPP provide possibilities, but come with considerable complexity and are not designed for use in a web environment. In his session at @ThingsExpo, Matthew Hodgson, technical co-founder of the Matrix.org, discussed how Matrix is a new non-profit Open Source Project that defines both a new HTTP-based standard for VoIP & IM signaling and provides reference implementations.
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at 20th Cloud Expo, Ed Featherston, director/senior enterprise architect at Collaborative Consulting, will discuss the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
910Telecom exhibited at the 19th International Cloud Expo, which took place at the Santa Clara Convention Center in Santa Clara, CA, in November 2016. Housed in the classic Denver Gas & Electric Building, 910 15th St., 910Telecom is a carrier-neutral telecom hotel located in the heart of Denver. Adjacent to CenturyLink, AT&T, and Denver Main, 910Telecom offers connectivity to all major carriers, Internet service providers, Internet backbones and exchanges.
We all know that data growth is exploding and storage budgets are shrinking. Instead of showing you charts on about how much data there is, in his General Session at 17th Cloud Expo, Scott Cleland, Senior Director of Product Marketing at HGST, showed how to capture all of your data in one place. After you have your data under control, you can then analyze it in one place, saving time and resources.
"A lot of times people will come to us and have a very diverse set of requirements or very customized need and we'll help them to implement it in a fashion that you can't just buy off of the shelf," explained Nick Rose, CTO of Enzu, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.