Flex Search on Google App Engine

This entry is part of 3 in the series Flex on GAE

This tutorial is about FlexSearch. An online experimental prototype I wrote in 2008, implementing web search with the Google AJAX Search API and Flex 3 API. The request is processed by the Python simplejson package. The intention was to have a simplified vi like interface. FlexSearch was a SHP ( Secret Home Project ). During my initial search for blog topics, I decided that FlexSearch would not get the status of TSHP ( Top Secret Home Project ), instead I would like to share with you what I learned, while working on this project.

FlexSearch video demo ( logo displayed from shareware product )

Last year a colleague and I went to a NLJUG presentation about Flex. The presentation was given by James Ward, who happened to be in Amsterdam by sheer coincidence, or so we were told. James Ward is a technical evangelist for Flex at Adobe. His primary focus, according to his blog, is building Flex front ends with Java running on the server.

Table of contents

  • 1. Flex
  • 1.1. ActionScript
  • 1.2 MXML
  • 1.3. CSS
  • 1.4. FlexBuilder
  • 2. Google App Engine
  • 2.1. Configuration file
  • 2.2. main.py
  • 2.3. search.py
  • 2.4. SearchRequest.py
  • 2.5 FlexApps Python project
  • 3. FlexSearch client
  • 3.1. SearchRequest.as
  • 3.2 Tracing
  • 3.3 FlexSearch Eclipse project
  • 3.4 .actionScriptProperties
  • 3.5 FlexSearch launch configuration
  • 4. Resources
  • Conclusion

1. Flex

At the time I did not know much about Flex, or why it was such a hype. My colleague showed me some demos, which looked incredibly cool. Still I had the idea that it was all Flash, and therefore not in any way related to Java programming. However, I was wrong in many respects. Flex applications and Java frameworks can be integrated in several efficient ways. I am not going to elaborate on this, because eventually I ended up deploying on Google App Engine. Flex is an open source SDK that uses ActionScript and MXML.

1.1. ActionScript

ActionScript and JavaScript are based on ECMAScript. The syntax of ActionScript is more “Java like” than JavaScript. Let’s have a look at Counter.as. The counter counts up and down with steps of 1, between 0 and a specified maximum, but not beyond the boundaries.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package net.ivanidris.flexsearch
{
    public class Counter
    {
        private var current:Number;
        private var max:Number = 0;
 
        public function Counter(current:Number):void
        {
            this.current = current;
        }
 
        public function set(value:Number):void
        {
            this.current = value;
        }
 
        public function get():Number
        {
            return this.current;
        }
 
        public function setMax(value:Number):void
        {
            this.max = value - 1;
        }
 
        public function increment():Boolean
        {
            if(this.current < this.max)
            {
                this.current++;
                return true;
            }
 
            return false;
        }
 
        public function decrement():Boolean
        {
            if(this.current > 0)
            {
                this.current--;
                return true;
            }
 
            return false;
        }
 
    }
}

Notice the keywords stolen from Java – package, class, private, public, true and false. ActionScript does not force you to use objects or strict typing, but it still has features that JavaScript lacks, such as compile-time type checking and inheritance. The Flash player contains a virtual machine, so Flex applications are platform and browser independent like Java. However, Flex does not integrate as smoothly with HTML, as Javascript does.

1.2 MXML

MXML is a XML language for describing user interface elements. If you compare Flex to normal web pages, than MXML corresponds to HTML and ActionScript to JavaScript. Only, MXML has a richer set of widgets than HTML, and there are more possibilities to customize. There are tags for data, layout, navigation and more. Have a look in the Flex 3 Component Explorer for more examples.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initApp();" 
	xmlns:iic="net.ivanidris.flex.components.*" viewSourceURL="srcview/index.html">
	<mx:Script source="FlexSearch.as"/>
	<mx:Style source="main.css"/>
    <mx:Script>
    	<![CDATA[
    	private function initApp():void {
            q.addEventListener(KeyboardEvent.KEY_DOWN, onQueryKeyDown);
            q.setFocus();
 
    	]]>
    </mx:Script>
    <iic:NavigationHeader/>
	<mx:Panel title="Web search.j down, k up, o opens page, g back to search box, b bookmark. Right click to view source.">
		<mx:Grid id="searchResult">
		    <mx:GridRow>
            	<mx:GridItem>
            			<mx:TextInput id="q"/>
		        </mx:GridItem>
    			<mx:GridItem>
    				<iic:PushButton label="Search" click="search();"/>
    			</mx:GridItem>
		    </mx:GridRow>
		</mx:Grid>
	</mx:Panel>
</mx:Application>

FlexSearch.mxml

In this example you see the Application root tag of the Flex Search application. Panel defines a container to place components on. Grid, GridRow and GridItem layout components in a table. The Script tag allows you to embed ActionScript event handlers in MXML, similar to JavaScript embedded in HTML.

Standard Flex widgets can be customized. This is called “monkey patching“. For instance, you can define our own buttons or custom user interface components. It is also possible to program widgets completely in ActionScript, but this is a lot of work, and not necessary unless you need a very special feature. In fact, each MXML tag corresponds to an ActionScript class. Each MXML tag attribute corresponds to an ActionScript class property. I have my own short and simple definition of a custom push button.

1
2
3
<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" buttonMode="true" toolTip=" ">
</mx:Button>

What this does is, set the buttonMode property for the button, so that it displays a hand cursor, whenever the mouse hovers over it, and also sets up my custom tool tip manager.

1.3. CSS

I usually style my Flex applications with Cascading Style Sheets. The CSS I mention here is similar, but not exactly the same as CSS used in web pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Text{
    fontWeight: bold;  
}
 
TextInput {
   dropShadowEnabled: true;
}
 
TabNavigator {
   backgroundColor: #999999;
   dropShadowEnabled: true;
}
 
Panel {
   titleStyleName: "panelTitle";
   headerHeight: 32;
}

This snippet illustrates how to skin some of the Flex components. I like to experiment with the Flex Style Explorer before consolidating the look and feel of the user interface. Given time and talent, you can make your widgets really pretty.

1.4. FlexBuilder

A command line MXML to SWF compiler, called mxmlc, is included with the free Flex SDK. James Ward told us during his presentation that, in principle, vi and mxmlc are sufficient for Flex development. However, Adobe would prefer if you use their FlexBuilder tool. FlexBuilder is in essence an Eclipse plugin, offering the features you would expect from an IDE, such as syntax coloring, automatic completion and debugging. Flex specific features include visual GUI editor and export wizard to show off code. When you right click on a Flex application, sometimes you get lucky and you can see “View Source” in the context menu. This allows you to browse a colored version of the source code. A download link is also shown to a zip file containing the source files. Unfortunately, all this neat stuff is not for free. The price tag says 200 euro with a trial period of two months. In those two months I made four applications on Google App Engine. More about these applications still to follow.

Series Navigation
By the author of NumPy Beginner's Guide, NumPy Cookbook and Instant Pygame. If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
Share
This entry was posted in programming and tagged , . Bookmark the permalink.