Flex + Webservices

November 5, 2007

In this article, we will look into the following:

  1. How do I write code for handling data from a webservice.
  2. What attributes would I need to be familiar about to setup the connections.

Now that we know what to do, let’s get moving to the next. Before that, we need to know what things are needed to be ready in order to proceed. First, we need to have an already fully coded Webservice running on a website. In this example, we are using Localhost domain, or simply the development machine as the Webservice source. And the filename of that Webservice is called student.asmx.

For this article, we will not be covering the details of student.asmx, as it is another set of technology requiring another article, so we’ll just leave that for now, treat it like a blackbox and only send and receive data from it.

The Login User Interface

Let’s write a login panel for our students. To be validated as a student, a user has to present credential to the login webservice by simply entering the Login Name and Password. The UI panel collects them and sends them over the wire to the webservice. The Webservice receives the credential and checks to see if it is a valid credential. Once validated, it returns the student record to the client login panel.

In the figure above, a graphical representation of the login panel have two input boxes for entering login ID and password, followed by the login button. The user enters data to the input boxes and later presses the login button to send the data to the server.

At the source code level, the xml declaration counterpart is shown below. You’ll see in full detail the attributes of the elements like the panel, input boxes, buttons and labels. Notice the login button has an attribute named click with a value of saveData() which is a symbol for a function name for handling the click event.

The click event handler for the button is shown below, saveData() calls the send() method found in studentWS, a webservice that does all the work of sending the data to the webservice and receiving the data back from the webservice. In this case, studentWS is the webservice, while studentLogin is the function declared inside the webservice, send is a method foe initiating the event.

At this point, you have a pretty good idea of setting up a graphical panel and the corresponding xml declaration. You also now know how to setup the send() event and where to attach it, the click attribute of the button.

The Webservice Tag

Advertisements

Adobe Flex Development On Ubuntu Linux

May 13, 2007

Adobe Flex is an API that works in tandem with Flash 9 player, is available as an SDK. There is a free version of the SDK that allows you to develop Flex applications. You can get the SDK from the download section and install it in your development directory. The SDK contain two sets of development tools that target two platforms: Linux and Windows. You can code and test in Windows or choose a flavor of Linux, remember to simply run the appropriate compiler to get the output file generated.

If you’re interested to know more about setting-up a Flex development environment in Linux, please read-on as I’ll document the steps needed to get you up-and-running.

From here on, you’ll be seeing concrete examples that might confuse you if you’re not familiar with what I’m describing. For example, Ubuntu will be used as a reference OS and that might confuse non-Ubuntu developers. If that’s the case, you can still follow-through and try to relate them to your familiar environment.

Let’s start with what tools are needed to setup the environment.

  1. Ubuntu 7
  2. Adobe Flex SDK (free version)
  3. Java JRE
  4. Firefox

We’re now ready to assemble the parts. Here we go.

Ubuntu

I chose Ubuntu as a reference for this article. The reason behind for choosing Ubuntu is a subjective one and I’m not going to go there explaining why. This is one of the benefits of having to participate in Freedom Culture.

I’ve set up the latest version known as Feisty Fawn and you can get a free copy from www.Ubuntu.com , download a copy and install, you should be OK to follow the next step.

Flex SDK

The free version of Flex SDKis available from Adobe Flex Download. Download the package and install it in your development directory.

  1. Click download to start download.
  2. Save package in ~/Packages.
  3. Expand downloaded package in ~/Packages/flex
  4. For every build.sh file add the following text shown in the code box.
  5. That’s it.

Setting the path to Java JRE instead of the default Java that came with Ubuntu.

#code box
export JAVA_HOME=~/Packages/jre
export PATH=$JAVA_HOME/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games

If this approach doesn’t appeal to you, there is another method you can do and that is simply add the setting to ~/.bashrc instead.
Java JRE

Java developers may find this one optional as they already have Java JRE installed. In my case, I don’t code Java so I had to download the JRE from http://www.Sun.com, that’s definitely an extra step. One thing I found out when I was testing the sample files, the Java that came installed in Ubuntu didn’t work, that’s why you need to get a working version for Flex SDK.

  1. Download Java JRE from http://www.sun.com
  2. Install in ~/Packages/jre/

At this point, you can now compile the sample files located in ~/Packages/flex/samples/ directory. Simply navigate to the directory and run the shell script build.sh and you’ll see the output files with the extension .swf, you can drop the swf file onto a browser and it will render once it gets loaded.

Firefox

This is the last step to get you going. Flex is browser dependent and mostly all testing will be done using a browser. In Ubuntu’s case, the Firefox browser is already installed and accessible from the desktop toolbar.

Conclusion

At this point, your Flex development environment is already set up. And if you count how much they cost to get these tools installed you will be surprised they are free as in beer.

Thanks for reading if you’ve reach this far.

Addendum: by the way, check out the Flex SDK website for more information on developing applications using the Flex SDK