Welcome!

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

Related Topics: Adobe Flex

Adobe Flex: Article

Back and Forth

Custom history management with Flex 2

For over a decade now, we have been trained to use the "back" and "forward" buttons in our Web browser to review or backtrack previously viewed content. We are trained to the point that there are even keyboard shortcuts. Unfortunately, this can be a problem when browsing Flex applications. Being the well-trained users that we are, we often forget that we could cause the Flex application to reload unwittingly.

Fortunately, there is a solution that is built into the Flex SDK and HTML templates that are generated in a Flex Builder project. By default, Flex enables history management for only a couple of navigator containers, without using any additional ActionScript or MXML tags. Although this is a good start, we often need more options to build truly custom applications.

In order to implement your own custom history management, you will need to use the HistoryManager class that is part of the Flex 2 SDK. By implementing the API, you can create custom history management for your custom objects in an application. Note: History management is not supported on Netscape 4.x and Opera 6.0 web browsers.

History Enabled Components
History management is available by default for the Accordion and TabNavigator navigator containers. It is disabled by default for the ViewStack navigator container. When history management is enabled, as the user navigates different navigator containers within an application, each navigation state is saved. Selecting the Web browser's "back" or "forward" browser button displays the previous or next navigation state that was saved. History management keeps track of where you are in an application, but it is not an undo and redo feature that remembers what you have done. Note: When history management is enabled for a particular component, such as a navigator container, only the state of the navigator container is saved. The state of any of the navigator container's child components is not saved unless history management is specifically enabled for that component.

Custom History Management
The mx.managers.HistoryManager package is pretty useful for building generic undo mechanisms. It must be imported before using it. The HistoryManager provides a register () method that allows you to register any object with it, even if it does not have a visual element. To register a component with the HistoryManager class, that component must implement the IHistoryManagerClient interface, and then it must be registered with the HistoryManager class. You will then pass along a reference to a component instance to manage. Each registered component receives a unique state ID based on its full pathname.

In the following example, the Application component (this) is registered with the HistoryManager class when the Application is initialized:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="mx.managers.HistoryManager.register(this);"
implements="mx.managers.IHistoryManagerClient">

By implementing the IHistoryManagerClient interface, you "agree" to implement the following two methods into your object's code:

  • function saveState() : Object
  • function loadState( state : Object ) : void
The HistoryManager calls the saveState () method on all registered objects every time the state of the application changes. It's up to you to return any object that describes the current state of your object (like a snapshot). If this state is going to be restored, then all registered objects receive their state back via the loadState () method. Again, it's up to you to rebuild the state by investigating the snapshot.

You can also inform the HistoryManager to save the current state of the whole application by calling its static save() method. This has to be done by hand if a performed action has to result in building a "snapshot" of your application. I've illustrated (see Listings 1 and 2) two ways to implement the HistoryManager:

How the HistoryManager Class Saves and Loads State
The history management feature uses the Macromedia Flash navigateToURL() function to load an invisible HTML frame in the current Web browser window. It then encodes a Flex application's navigation states into the invisible frame's URL query parameters (using the standard prop1=value1&prop2=value2 format). A SWF file, called history.swf, in the invisible frame decodes the query parameters and sends the navigation state back to the HistoryManager class. You can investigate this by viewing the HTML source that is generated along with a Flex application.

Conclusion
Once again, the Flex SDK has made it possible for extending components to be history management enabled very easy. By simply implementing an interface and utilizing the HistoryManager class, you are able to quickly avoid many Pavlovian nightmares from the back button. Keep in mind that this feature should be used primarily for managing navigation and not for undo/redo. Although you could accomplish some level of undo/redo if you are creative, there are definitely better ways of doing it, so it's best to stick to navigation with the HistoryManager. I hope you found these examples easy to follow and helpful in your learning process.

More Stories By Rob Rusher

Rob Rusher is an Adobe Certified Expert (ACE), Community Expert, and Certified Instructor (ACI). In his role as Principle Consultant for On3, he leads an Adobe software enablement practice to help his clients build rich Internet applications and to rapidly increase their knowledge and skills to better support their organization's goals. He has taught and mentored the technical teams at Standard and Poor’s, eBay, IBM Global Services, the Social Security Administration, and other Government and Fortune 100 organizations.

Because of his depth of knowledge and long standing relationship with Adobe, Rob was selected to write the Certified AIR training course as well as the ColdFusion and Flex certification exams. Rob has also co-authored four best selling books on building secure, cutting-edge and rapidly developed applications using Adobe AIR, ColdFusion and Flex. He is also very active is organizing and speaking at Adobe conferences and user groups. In addition to growing his software consulting practice, On3, Rob has been building expertise in rich client application development on a wider variety of devices and platforms that extend the applications to change the way we all create and live.

On3 provides consulting, mentoring and training services to help organizations grow their own experts from within. For more information, visit us at www.On3solutions.com. Rob Rusher maintains a weblog devoted to Adobe Flex and other Internet technologies at www.RobRusher.com.

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.


IoT & Smart Cities Stories
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
DSR is a supplier of project management, consultancy services and IT solutions that increase effectiveness of a company's operations in the production sector. The company combines in-depth knowledge of international companies with expert knowledge utilising IT tools that support manufacturing and distribution processes. DSR ensures optimization and integration of internal processes which is necessary for companies to grow rapidly. The rapid growth is possible thanks, to specialized services an...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...