All 15 entries tagged Flex

View all 72 entries tagged Flex on Warwick Blogs | View entries tagged Flex at Technorati | There are no images tagged Flex on this blog

March 08, 2009

More AIR web automation – styles and dispatching mouse events

Follow-up to Automating web workflow in Adobe AIR from Transversality - Robert O'Toole

More experiments with creating automated workflows using the AIR html component. The following code gets the dom document once the html has loaded. It then gets a reference to a span in the document called 'edittool'. Once an element is referenced as a Flex Object, we can call native javascript methods on it. In this case, I give it a yellow dashed border. I then get hold of the A element that is it's child, and dispatch a mouse over event to it, causing its mouseover handler to be called. The result is that the edit menu appears.

private function initDomWindow(event:Event):void {
this.domWindow = event.currentTarget.domWindow;
var edittool:Object = domWindow.document.getElementById("edittool"); = "yellow"; = "dashed";
var overevent:Object = domWindow.document.createEvent("MouseEvents")
overevent.initEvent("mouseover", true, true);
var a:Object = edittool.getElementsByTagName('A')[0];

The html mxml tag is configured as:

<mx:HTML id="htmlTranslate" width="800" height="800" location="{this.url}" complete="initDomWindow(event)"/>

March 06, 2009

Automating web workflow in Adobe AIR

This entry was created using an AIR based browser.

Yes, it's possible. I wrote a simple AIR app that signs me in to Warwick Blogs by loading the login page into an AIR app, populating the login form fields, and submitting. It's also possible to call javascript methods in the page. Here's the code:

<mx:WindowedApplication xmlns:mx="" layout="absolute" width="1024" height="768">

			import mx.controls.Alert;
			private var domWindow:Object;
			private var blnAlertThrown:Boolean = false;
			private var load:int = 0;
	        private function initDomWindow(event:Event):void {
			if(load == 0)
	        domWindow = event.currentTarget.domWindow;
        	getElementFromHTML("userName").value = "myusername";
        	getElementFromHTML("password").value = "mypassword";

	        private function getElementFromHTML(elementName:String):Object {
				var arrayContainingAllFoundElements:Object = domWindow.document.getElementsByName(elementName);
				return arrayContainingAllFoundElements[0];	

<mx:HTML id="htmlTranslate" x="10" y="84" location=";newPermissions=Anyone&amp;newCommentPermissions=Anyone" complete="initDomWindow(event)"/>

December 28, 2008

WiMIC Browser v.3 – MySQL, BlazeDS, Lucene, Spring, Flex 3.0, Cairngorm

Follow-up to WiMIC Browser v.2 – migrated to Adobe Flex Cairngorm application framework from Transversality - Robert O'Toole

I've taken advantage of some new technologies to redevelop the Women in Modern Irish Culture data browser. The application will eventually give full online access to a big biographical and bibliographical database developed by researchers at Warwick and University College Dublin. The last version was rather over-complicated and ponderous, giving slow and awkward access to the data. This new version provides a much more instantaneous view onto the thousands of records. It is now really a data browser rather than just a search tool. Researchers can immediately scan through thousands of records, which are all immediately loaded into data grids. Whereas the old version served up 12 records at a time as a result of database queries via JSON, the new version can serve up over 9000 records in a few seconds, using the highly efficient BlazeDS mechanism.

Rapid data browsing with BlazeDS

This is how it works:

  1. the Flex/Flash interface calls a method on a Remote Object that will return an ArrayCollection of Author objects;
  2. the RemoteObject proxies through to a corresponding method in a class exposed via BlazeDS;
  3. the Java method is in fact a Spring bean which queries the database using Spring's jdbc utils (the data is now on MySQL rather than SQL Server);
  4. Spring builds a Flash Remoting ArrayCollection of Author objects (corresponding to my Flex Author class);
  5. the ArrayCollection is returned as the result of the proxied method using the effiiciently compressed AMF protocol;
  6. the ArrayCollection is added to the Flex Cairngorm model, to which the datagrid is bound;
  7. the data appears in the grid, and can be browsed and re-ordered instantly.

Even when retrieving all 9000+ authors, that only takes a few seconds.

The authors are listed in an AdvancedDataGrid, allowing the researcher to drill down into a selected record. This retrieves further data about the selected author (using BlazeDS) including a list of publications.

Fast and smart querying with Lucene

In addition, I have used the Lucene Java library to add query interfaces that search pre-built indexes. Lucene performs free-text and exact searching as required, and also uses synonyms. So, for example, a researcher could search for "Dublin AND poetry" in the simple search form, and see almost instantly all authors with the words "Dublin" AND "poetry" in their records (including their publications). It would also list records containing "poem" and "poems", giving them a lower ranking in the results.

To be even more precise, one can search for "Locations:Dublin AND Genres:poetry" which would return only authors of poetry with some association with Dublin. "Locations" and "Genres" being fields in the Lucene index. I'm using that mechanism to create a search interface with specific fields such as "genre", "surname", "firstname", "publication title" and "location".

As with other queries, BlazeDS is used for highly efficient transmission of results.

A further addition, again using BlazeDS and Lucene, is the ability to list authors who had published in a selected decade. Each author record in the Lucene index contains a list of the decades in which they published. The efficiency of this approach is demonstrated by viewing all authors to have published since 2000.

Now that I have all of these elements in place, I'll be able to quickly add more features and richer data, including more information on publications.

Try it out here.

March 25, 2008

Flex 3.0 + Spring JDBC + BlazeDS = awesome

Follow-up to Using BlazeDS to invoke server side Java classes from client side Flex Flash applications from Transversality - Robert O'Toole

And for my next trick: accessing the last row in a 10,000 row SQL Server database table, in an instant, from within a Flex 3.0 application via BlazeDS and the Spring JDBC abstraction mechanism. I am quite amazed.

I am investigating the possibility of moving the query layer of a web application off the SQL Server that hosts the data (so as to allow me to more easily move the database to another platform). Last week I mastered BlazeDS for Java remoting. That was easy. So I decided to add Spring to the mix, following this excellent article from Adobe Labs. I’ve never used Spring before, but understand how it simplifies such applications.

It didn’t take long to understand the example from Adobe, and adapt it to query the SQLServer database that I have used.

And when I pressed the ‘query’ button on my Flex app, I was astonished. 10,000 rows appeared immediately as an ArrayCollection. Whereas my Flex/JSON/Java app would request 100 rows at a time, with a new query each time the datagrid page was changed, I can now load every single record and immediately work with it in the browser.

Next trick? Hibernate.

March 20, 2008

Using BlazeDS to invoke server side Java classes from client side Flex Flash applications

Today I have been experimenting with BlazeDS, a J2EE based framework that simplifies the task of building client server web applications with a Flex/Flash client and a Java server. BlazeDS allows for data to be exchanged between client and server using the very efficient AMF3 binary format. It includes messaging and web services proxying. But of most immediate use for me is the ability to access server side Java classes (value objects and methods) from a Flex/Flash app. This will replace the JSON based communications in a database app that I recently built. Here are some notes on what I have learned today.
Firstly, I must acknowledge this very useful explanation from Ashier's blog. 

A BlazeDS project is simply a standard web application, with a few additional features. In this case I have created a Tomcat application in Eclipse. You can see the various components in this image of the Eclipse resource navigator:  

Tomcat project

The additional elements within the web app are:
  1. The flex directory in WEB-INF, containing the BlazeDS configuration files for this application, with the required service configurations (for example, making Java classes available to Flash).
  2. Various jar library files in the lib directory. 
  3. The flash application (swf and html files) generated from the Flex 3.0 project.
  4. Some configuration settings added to the web.xml file.

To get it all set up, I followed these steps:

1. Create the Tomcat project in Eclipse.

2. Add the jar files.

3. Add the flex directory with template config files.

4. Modify the web.xml file so that BlazeDS requests are handled.

We need to add the listener...


And a message broker servlet...



5. Create a new Flex 3.0 project.

Use settings like this:

Project settings 1

Note that I have set it to use LiveCycle Data Services (now known as BlazeDS) and a J2EE application server. In the next screen, the location and url of the web app must be specified. Note how I have set the output folder of the Flex application to be the root of the web application, so that when I run the Flex app it is built and deployed directly into the web app.

Project settings 2

6. Write and build a class in the Eclipse web app project.

I created a class called Hello in the package hello. To start with it contains two simple methods. One method is called sayHello, and returns a string. The other method is multiiply(int i, int j). This method returns the value of i * j.

7. Make that class and its methods available to the Flex application via BlazeDS.

The following 'destination' needs to be set up in the remoting-config.xml: 

<destination id="Hello">

The source maps to the Hello class in the hello package.

I also pared-down the services-config.xml file so that only the remoting service is being used (as suggested by Ashier):

<service-include file-path="remoting-config.xml" />

8. Add a RemoteObject to my MXML application file in Flex 3.0.

This points to the class that I have created and registered with BlazeDS. See how the source points to the Hello class in the hello package. Also see how the RemoteObject has its own id. We use that to referece it and call its methods.

<mx:RemoteObject id="blazeService" fault="faultHandler(event)" source="hello.Hello" destination="Hello">
<mx:method name="sayHello" result="resultHandler(event)" />
<mx:method name="multiply" result="resultHandler(event)" />

Notice how I have registered the two methods, and specified a resultHandler method (in this case the same handler, as it just displays the string that is returned in a text box).

9. Call one of the methods, and handle the result.

I have a button that, when pressed, calls a method that calls the multiply method on the RemoteObject...

blazeService.multiply(i, j);

This method executes asynchronously on the server, in the class Hello. The values of i and j are passed to the Java method. The result is receieved bythe specified result handler method in the action script:

private function resultHandler(evt:ResultEvent):void {
result_text.text = evt.message.body.toString();

In this case, I simply get the single string that is returned, and display it in a text box.

Alternatively, I could get a series of arguments, an ArrayCollection, an Object. I can also create a value object class in the Flex app, mirroring a class in the Java. This class may then be passed back and forth in the method call (i'll document this in another article).

October 12, 2007

Create a diagram online with Gliffy

Writing about web page

Gliffy is a free (or cheap subscription for added storage space) online browser based tool for creating diagrams of various common types, including flow charts, UML, and entity relationships. It can also be used to create visual mock ups of user interfaces. It is a very slick and complete(ish) Flash based application, so you should not need to download additional software. I have just created a flow chart for the design and communication class that I teach, as you can see below.

web design flow chart
Diagram exported as image file (Click to enlarge)

Diagrams can be exported in various formats, or shared for collaborative use.

September 14, 2007

Tagsonomy – a taxonomical keyword searching tool

Follow-up to Build your own tagxonomy tool from Transversality - Robert O'Toole

The idea of a taxonomical keyword searching tool has developed further. There is clear demand for it as part of projects in History, English, the Library, the Language Centre and Renaissance Studies. Here is a more formal specification of how it could work.
A taxonomy is a hierarchical structure of categorisations, with a progression to more detailed categories towards the leaves. The taxonomy defines the set of categories that may be applied to resources. Taxonomies are common in academia. Sometimes they are formal and explicit mechanisms. Often they are informal aids to research and academic communications.

Many web publishing systems allow content to be “tagged” with keywords. For example, a Sitebuilder page may be given one or more tags. Similarly a blog entry is classified using tags. Social bookmarking systems like use keyword tagging. Bibliographical databases also commonly use taxonomies of keywords. Most of these systems can be searched using keywords. Many of these search interfaces can be accessed programmatically.

Most keyword tagging and searching systems, such as that used in Sitebuilder, are not taxonomical. There is no taxonomical structure to which an author or researcher can refer when tagging resources or searching for resources.

I have identified a set of real use cases in which a taxonomical approach to keyword searching would be beneficial. These cases also imply that resources are tagged according to the keywords available in the taxonomy.

Here is a description of how the tool could work:


The search interface contains a tree structure representing the taxonomy of keywords.
The tree structure can be explored, drilling down through its branches.
Individual keywords, or whole branches of keywords can be selected.
There is also a text box allowing the user to type in keywords (with autosuggest giving options as they type).
As keywords are selected, they are listed in a text area showing all currently selected search terms.
Once all of the required keywords have been chosen, a search is done, returning a list of all matching resources.
The search could be ordered in several different ways, for example with resources that have a higher match coming at the top of the list.

Here is an illustration of how the interface might work (it doesn’t yet do the search):

Configuring the taxonomy

The taxonomy could be stored as an xml file on the web (for example in the same location as the search tool).
The xml file could be hand coded, or the search tool could provide an interface for creating a taxonomy file and editing its tags.
The taxonomy file to be used could be specified by the author of the web page on which it appears.
The end user could be allowed to choose a taxonomy file, it could be possible to search for taxonomy files in Sitebuilder.

Configuring the sources

The search tool will need to know about the web application in which resources are stored (for example Sitebuilder).
It will need a method for searching each web application (how to build the search url).
One or more sources could be specified by the author of the page on which the tool is deployed – it could be set to search Sitebuilder, Blogs, etc.
A version of the tool could be made available allowing the end user to choose sources.

Saving and sharing searches

Searches could be saved onto the end users local machine (Shared Object in Flash, filesystem in AIR).
Searches could also be shared with other users.

Using the taxonomy to tag resources

The search tool could be used to assist in tagging resources using a selected taxonomy.
For example, a user selects a series of keywords, and the tool displays the text to paste into the keyword tag field of the Sitebuilder page properties.


  1. find out how to save an xml file from Flash into Sitebuilder.

September 06, 2007

WiMIC Browser v.2 – migrated to Adobe Flex Cairngorm application framework

Follow-up to WiMIC Browser – my first big Flex application from Transversality - Robert O'Toole

WiMIC Browser is a Flash based rich internet application that gives online access to an extensive biographical and bibliographical database. It was originally built in Flex 2.0 using a home grown MVC application framework. I have now migrated it into the Cairngorm framework, a process that took about six days.

The application behaves just as before, but the plumbing behind it has been rationalised and improved using Cairngorm. The project now looks like this in the Navigator:

WiMICBrowser 2 Navigator

The migration was quite straightforwards. The design of the original app was quite similar to that of a Cairngorm app. However, the framework offers a few neat tricks:

  1. A simple and easy to understand event based controller. Views can initiate events, which are then passed onto the required command by the controller. Once the event is called, the originating view is forgotten about.
  2. The AppModelLocator singleton, which gives access to centrally stored value objects. Elements in views are bound directly to value objects and properties in the model. If a command updates the model, then changes are made to the bound elements.
  3. In this app, tab navigators are used to contain the various views. The TabNavigator.selectedIndex property of each tab navigator is bound to a property in the model. That means that a command can change the currently displayed tab by changing the relevant property in the model.
  4. Chaining of commands – a command can call another command. For example, when viewing a single publication record, the GetSinglePublication command calls further commands depending upon the type of publication that is being viewed.
Most importantly, my code is now much easier to understand and to develop further. As Cairngorm is a widely understood and documented framework, it will be easily understood by other developers.

August 29, 2007

Adobe Flex in an afternoon – possible course

Follow-up to Cairngorm Flex Quickstart from Transversality - Robert O'Toole

Steve Carpenter and I have spent the last few months becoming expert in the new Adobe Flex web development tool. Flex is used to build rich internet applications that run in Flash 9 or the Adobe Internet Runtime. We would be happy to share our expertise with others at Warwick, and have already had some requests for a course on this topic. There are people who want to just find out about Flex as well as some who actually want to start building applications.

It’s possible. If we do it, then this would be the course material. I reckon (optimistically) that it could be covered in half a day….

1. What is Flex capable of?
   1.1 What is a Rich Internet Application
   1.2 Examples
       1.2.1 Databases (and Hibernate)
       1.2.2 XML and RSS
       1.2.3 Charting
       1.2.4 Video and audio
       1.2.5 The Adobe Internet Runtime

2. The development process
   2.1 Introduction to Eclipse and FlexBuilder
   2.2 Debugging and inspecting
  2.3 The Cairngorm framework

3. Designing an application as a set of user interface views
   3.1 Creating a view as a custom component
   3.2 Indexing views in a ViewStack (and other navigation controls)
   3.3 Using Flex components to build user interface views
       3.3.1 Using containers to control layout (canvas, vbox, hbox, panel)
       3.3.2 Using Flex interface controls (label, text, textarea, button, datagrid, list, tree)
       3.3.3 Binding controls to data

4. Encapsulating data as models and value objects
   4.1 Creating custom classes
   4.2 Using the AppModelLocator
   4.3 Binding view controls to data in the AppModelLocator

5. Making things happen
   5.1 Creating event handlers in ActionScript within views
   5.2 Creating custom events to call actions and to carry data
   5.3 Creating command classes to process events and to update data and views
   5.4 Mapping events to classes in AppController

6. Connecting with external data services
   6.1 Loading xml and other data using HTTPService
   6.2 Coping with security sand box restrictions
   6.3 Creating and using an asynchronous service delegate
   6.4 Accessing and using the results of a service delegate

7. Publishing your Flex application using SWFObject


Cairngorm Flex Quickstart

Follow-up to My first small Cairngorm Flex application (with explanation) from Transversality - Robert O'Toole

I have created a four page document that steps through the process of creating a Cairngorm project, adding views and models, adding events and commands to handle them, and adding services and delegates to commands.

Where necessary, I have included links to template files that can be added to a project. I have also included example code snippets that can be copied in to perform the common Cairngorm tasks.

Start page for this tutorial.

August 23, 2007

My first small Cairngorm Flex application (with explanation)

Follow-up to WiMIC Browser – my first big Flex application from Transversality - Robert O'Toole

I have just constructed my first Cairngorm application: an Adobe Flex application that uses the Cairngorm application framework, implementing the MVC pattern. The app doesn't do much, initially displaying "hello everyone", along with a button that translates that message, and a second button that changes the background colour of the component. Exciting stuff! Not. But the Cairngorm framework is. Download the source code for my demo application.


Here is a screenshot of the Navigator window for the project:


The Cairngorm source code is included in the "com" folder (although it could be compiled and included as an external library). The "" folder contains my application. This has six subfolders, each containing classes responsible for different parts of the MVC architecture: view, control, command, business (actually meaning data and comms services), model, vo (value object). As with all Flex applications, there is a single container mxml file, called Main.mxml (an mxml file is equivalent to a html file, with code, styles and visual components). I'll start my explanation of this app and Cairngorm with this top-level container.

The Main.mxml file contains four key items:

  1. a Services component - this contains all of the services used for connecting to external data sources etc;
  2. the AppController - this maps events onto commands, so that when a ui dispatches an event (a request for something to happen), the correct code does the required job;
  3. the AppModelLocator - this stores and indexes all of the data models used in the application, all of the data is stored in one place!
  4. a ViewStack listing all of the alternative user interface views that the app can display.

Here's the code for the ViewStack:

<mx:ViewStack width="100%" paddingBottom="10" paddingTop="10" resizeToContent="true" selectedIndex="{model.currentView}">
   <view:InitialView />
   <view:AlternativeView />

There are two views in this application, an initial view and an alternative. Each view is defined in its own mxml file in the "" folder. Notice how the selectedIndex property of the ViewStack is bound to the .currentView property contained in the modelLocator (initially set at 0, which means that the first view in the stack is displayed). This means that the currently selected view may be changed by changing the model.currentView property (more on that below).

So now let's drill down into the InitialView component. We can then see the details of what is presented to the user, and what happens when the user responds to that interface.

InitialView is itself an mxml component based upon the standard VBox component. It contains some script and some UI components. Firstly, the script contains a bindable reference to the AppModelLocator singleton. This means that we can bind UI components to data in the AppModelLocator. There is in fact a text component that is bound to a value object (a class that wraps a set of value properties):

<mx:Text text="{model.messageVO.message}" />

Initially this displays the message "Hello everyone".

Below this text component there is a button "translate". Clicking this button calls an actionscript method in the script on the page. The method is called translate(). It could at that point do some validation, or request further input. However, in this case all that we want it to do is fire of a request for the text "Hello everyone" to be translated.

The least impressive Flex app ever

This is where Cairngorm starts:

private function translate():void
   var cgEvent : DataChangeEvent = new DataChangeEvent("Dumelang");
   CairngormEventDispatcher.getInstance().dispatchEvent( cgEvent );               

The method creates an instance of the DataChangeEvent, passing it the new message "Dumelang". The DataChangeEvent is defined in the "" folder. It is a cairngorm event extended to carry our message. We can create events that can carry whatever data we need to be passed to a command. (For example, a user types their username and password into a login box, this is then wrapped in a LoginEvent, and the event dispatched. A LoginCommand receieves the event and attempts a login using a LoginDelegate and login service. If succesful, the command changes the current view to one appropriate to a signed in user).

The next step is to dispatch that event and its message to the Cairngorm controller. This should then get passed on to the required "command" object (the command object contains the code for executing the requested command). But how does the controller know which command object to use? Events are mapped on to commands in the control.AppController class:

public class AppController extends FrontController

   public static const DATACHANGE_EVENT : String = "DATACHANGE_EVENT";

   public function AppController()
       addCommand( AppController.DATACHANGE_EVENT, DataChangeCommand );

Our request (to translate "Hello everyone") is then passed to a DataChangeCommand object. This is where we do the work that results in the translation. In this simple example, the .messageVO.message of the modelLocator is simply changed to read "Dumelang". However, we could instead refer to an English-Steswana dictionary to retrieve the translation. This might even require the use of an external data service. The DataChangeCommand would then delegate the work of sending this external request to a Delegate class in the "business" folder. The delegate, on retrieving the required translation, calls back to the DataChangeCommand to complete the requried command, or alternatively calls a seperate command.

So, with the text control on the current view bound to the .messageVO.message property in the modelLocator, and that property now altered (by DataChangeCommand) to "Dumelang" that is precisely what the end user sees on their screen.

But what if we also need to change the current view, for example to the AlternativeView control in the ViewStack? Easy. The command simply alters the .currentView property of the modelLocator. As the selectedIndex property of the ViewStack is bound to .currentView, it immediately changes.

In this example, at the end of DataChangeCommand, a second command is requested using a class that I have called ViewChangeEvent.

var cgEvent2 : ViewChangeEvent = new ViewChangeEvent();
CairngormEventDispatcher.getInstance().dispatchEvent( cgEvent2 );

This class calls ViewChangeCommand, which simply alternates between the InitialView and the DefaultView.

Look - it speaks Setswana! and now the view has changed to one with a white background! Hoorah!


This may be a simple example, but I can already see how using the Cairngorm framework will simplify the task of building very complex applications, resulting in better, more rational and sustainable code.

July 24, 2007

Simple advice on keyword tagging and tagsonomies

Follow-up to Build your own tagxonomy tool from Transversality - Robert O'Toole

Many web publishing systems allow publishers to keyword tag pages or entries using their own keywords. Combinations of these keywords can then be used to search and “aggregate” content tagged with those keywords. Both Warwick Blogs and Sitebuilder support this. It is usually left up to the content author to define the series of keywords that classify a page/entry. I have been asked to give some advise on strategies that can be used to do this efficiently and effectively. Here is my answer.

  1. Think about how you might want to be able to search/aggregate/organise your content, how other people might want to search it and see it organised, and how you want other people to think about your content (especially if you are trying to establish a schematic structure in their minds).
  2. Be systematic, especially with punctuation, spaces, spellings.
  3. Maintain a list of your tags. A concept map is a good mechanism for maintaining this list. You could use MindManager to create the list.
  4. Cooperate – use the same tags that other people use, develop tagsonomies with other people (formally or informally).
  5. Use a combination of very specific and more general tags (for example: e-learning, elab, quizbuilder) – think about your tags as being arranged in a tree structure (specific at the leaves general at the branches).
  6. Combine different tags that identify different aspects of the tagged content (for example, use a tag to identify what kind of content it is (essay, review), what it is about (philosophy, Kant).
  7. Tagging your work with a unique identifier associated with yourself allows you to aggregate your work from wherever it appears (e.g. robert_o-toole in Sitebuilder gets you this result )

July 17, 2007

WiMIC Browser – my first big Flex application

Writing about web page

The University of Warwick History Department is today releasing the beta version of its WiMIC Data Browser. This is a Flex 2 application that I have built to give online access to the huge bibliographical and biographical database of “women in modern Irish culture”, compiled by a team of researchers at Warwick and at University College Dublin.
The WiMICBrowser is an example of the kind of Rich Internet Application now made possible with the Adobe Flex development toolset. It provides four search interfaces, of varying degrees of complexity. For example, users can do a "Simple Author Search" by selecting the Authors tab and the Simple Search tab. This interface allows them to do a freetext search of various fields in the database's People table.

WiMIC Browser Simple Author Search

To compliment this simple search, there is also a "Complex Author Search" form that contains many more fields and options. Note that the user is given the option of saving the search in their "Filing Cabinet". This uses the Flex/Flash Shared Object system (Flash's equivalent of cookies) to permanently store the search parameters on the client machine's hard disk (until they select to delete it). A future migration of the application to Flex 3 and the Adobe Internet Runtime will allow these searches to be saved to ordinary files on disk, and hence allow them to be moved between PCs. I will also consider allowing users to share their searches online. Here is the search saved in the Filing Cabinet, with the options to re-run or delete it:

WiMICBrowser filing cabinet

And the results of the search is a list of mathing authors presented in a standard Flex datagrid, with the option to view a full record of any of the authors. An author record is shown below. Note that the results list remains populated with the results and accesible on a single click of a tab.

WiMICBrowser author record

The author record contains a rich array of data. Some authors are listed in the database under several names, thses are shown in the "All known names" list. Publications for the author are shown in the datagrid on the right. This shows 12 records at a time, with a paging control to move through the data. Notice that there is a link next to each publication record. Selecting the magnifying glass link opens that publication record in the Publications -> Selected Publication Record tab. For exmple, here is a book record:

WiMICBrowser Book Record

Each type of publication (book, book chapter, article, journal edition, play, film) has its own type of publication record page similar to this. These are created as Flex View States based on a generic Publication Base State. All of them list the authors of the publication, with their role in authoring it stated (for example, "editor"). The various recorded versions of the publication are also listed. In the case of a book, a datagrid is given listing its publishers and printers.

Publication records can also be found using the two publication search interfaces. Again these are "Simple" and "Complex". They work in a similar way to the Author Search interfaces. Here is the Complex Publications Search:

WiMICBrowser complex publications search

In this case the search is configured to return all books and articles (see the filter on the right) that are of the genre "religious", in the languages "Irish" and "English", written between 1700 and 2000. There are many other options for configuring and filtering the search. The SQL query for this search was rather difficult to write!

The results are again shown in a paged datagrid:

WiMICBrowser publication search results

The application is now available as a "beta", with the aim of getting feedback from researchers and students working in this field.

I will also soon write a technical review of the application, with consideration of the techniques used to build it, and the feasibility of creating similar applications in the future. For now, I will just say that for such a complex application, it was quite simple to contruct. The Flex/Eclipse IDE makes this possible. Employing a relatively sensible application framework has helped. I constructed my own MVC framework loosely based on my experience with Java application frameworks. The project structure is shown below:

WiMICBrowser project structure

The WiMICBrowser.mxml file defines both the container control (a set of customised TabNavigator controls) and the controller code (which maps actions onto action classes, and equips them with the required model objects and views). Note that the queries are specified in the queryDefinitions.xml file, loaded on start up. This is kept externally to the application, so that I can modify the queries independently. The queries themselves are SQL Server stored procedures.

The dataservices folder contains a class that does all of the work of connecting to a servlet to do the database queries. Communication with the servlet is via JSON, with the servlet mediating queries and results between the client app and a SQL Server. If I wish to employ a different method for communicating between the application and the database, or even using a different database, I just need to change the dataconnector class.

The utils folder contains various utilities, including the FilingCabinet class, which does all of the work of serializing and de-serializing model objects and query objects into the SharedObject storage (note that by default Flash/Flex does this really badly, serializing custom classes is not straightforwards). In the future I would like to try migrating the application to the Adobe Internet Runtime, so that it can run outside of the browser sandbox. That will then allow me to escape reliance on the SharedObject store. I will also soon add an option to create folders of selected publication and author records.

What then do I think of Flex and RIA technologies? Yes, at last we can easily and safely build complex web applications that run well on [m]any different platforms. 

July 06, 2007

Build your own tagxonomy tool

...or “tagsonomy” as Jenny likes to call it. I am planning to create a Flash/Flex tool that will enable people to view and edit taxonomy files, and to use them in querying RSS data sources such as Warwick Blogs and Sitebuilder.

I’m gonna do this….

1) I’m building an RSS tag searching tool to replace the slighty rickety javascript tool that I am using for Renaissance Studies and some other departments.

2) The search tool can load its tagxonomy from an xml file stored on the web.

3) I’m going to add a feature that allows different tagxonomies to be loaded as required. If the xml files are stored in Sitebuilder and tagged as “tagxonomy” then the search tool could even auto-discover tagxonomies for the user to choose from.

4) A tagxonomy file could also be tagged with the unique identifier of a person, group or department (using the web groups codes for these), thus associating the file with the profile.

5) I could allow for the tagxonomy to be edited in the search tool (adding new tags or tag collections for example).

6) The tagxonomy could then be uploaded onto Sitebuilder, if the user has permissions, it could replace an existing tagxonomy, if not they can create their own new tagxonomy.

7) It will also be possible to select a series of tags from the tree, and have an string automatically generated from that. The string can be pasted into any content tagging application. Importantly, the string should include tags that identify the tagxonomy from which the tags where taken.

Best of all, i’ll try to build it as an Adobe AIR desktop application (not sure how Single Sign On will work with that).

I reckon that will take a few weeks to build (as I’m in the middle another big project).

This example will load the tags defined for the Renaissance Studies project:

The use cases that I have discovered so far all assume that the tool appears upon a web page with a pre-defined tagsonomy and a pre-defined source to be searched for matching documents. It would be easy to create a version that can be configured to search any resource that works with tags and keyword queries: Warwick Blogs, Sitebuilder, etc
Does that sound like fun?

June 06, 2007

Automatically resizing text areas in Flex

From the Flex 2 controls documentation:

The TextArea control does not resize to fit the text that it contains. If the new text exceeds the capacity of the TextArea control and the horizontalScrollPolicy is true (the default value), the control adds a scrollbar.

Why!!!! Auto-resizing a text area is just such an obvious thing. In the app i’m developing I have some fields that might in some cases be very short, and in others very long. I had to override the default TextArea behaviour so that it would resize to fit whatever text it contains when the text is updated:

<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="" creationComplete="onLoad()">
           private function onLoad():void
               this.addEventListener(FlexEvent.UPDATE_COMPLETE, resizeme);
           private function resizeme(event:Event):void
               var ta:TextArea = as TextArea;
               ta.explicitHeight = ta.textHeight + 10;

That really should not be necessary!