But how do I use that code?

That’s a question I’ve seen quite a few times on the Adobe labs and pre-release forums over the past months. And the question is used in relation with the code being generated by the web service introspection wizard.

Although we’ve tried to make the code as simple and versatile as possible, as in to cover most use-cases, it seems to still need some explaining. It is possibly caused by change. The way in which you used web services has changed substantially, and disruptive changes are not always easily understood. We’ve gone from a full run-time experience to strong-types and ActionScript representations of the service. So I’ve tried to put together a small application that uses a web service and shows how to use this new nifty feature.

The example will stretch over two posts/parts, each covering a way of using the generated code to arrive at the same result, structured like this: Continue reading

Flex 3, BlazeDS & AIR 1.0 are out!

Finally, the combination for RIA goodness is upon us. Adobe, through the combined efforts of the Flex, AIR and BlazeDS teams has launched these three products aimed to making the life of web developers a bit easier, and the life of the web user a lot easier. You can check out the products on the adobe.com website, where you can also download a trial version (for Flex Builder) or the full versions of the Flex 3 SDK, AIR SDK and BlazeDS.

air  fx_appicon_web blaze_ds_logo_web

Now it’s time to see how the web experience shapes up – I’m looking forward to ever-increasing levels of interactivity on the web, and a nice blend between the web and the desktop (which AIR aims to increase).

Here are some stories on Digg, on the same topic, here, here and here.

Post Flex Camp

Last night was Flex Camp. We had a bunch of people coming, talked about Flex (and a little bit about AIR) and it was great. It really was to see the people that will use the products that you’re working on in person, not only over the forums. It’s great to see the enthusiasm and understand how people think about your work. And it’s great to network and help out.

I don’t know the exact number of people that attended, but I know they had different backgrounds (designers, developers) and they were a fun bunch. And I’m still sleepy.

I had promised to make available the presentation that I gave regarding Flex and SOA and the application built on stage. These will also appear on Adobe Romania‘s blog in a short while, where you can find them with all the others, and a link to watch the recorded event (in case you missed it live, or via the broadcast).

That said, you can grab the presentation here and the zipped project here (this is a zip exported from Flex Builder, so ideally you should grab a copy of the IDE and use the Import > Flex > Import project command to load the zip contents into your workspace).The presentation is the same one I did last night, with only the Amazon developer key zeroed out 🙂 You have to get your own.

Enjoy.

Silverlight 1.0 is out the door with a surprise

Yesterday Microsoft launched Silverlight 1.0. Officially it is supported by Microsoft on Windows and Mac. So if you’re running on Linux, tough luck. Or is it?

Along the lines of what seems to be an ongoing internal disagreement on how to treat open-source, the developer division seems to be the one that opens up first – they signed a collaboration document with the Moonlight team, promising to share test suites, specification and in-depth documentation to make the Mono version of the plug-in as good as possible. There are also hints that it will be supported by Microsoft, although indirectly through Novell. Microsoft will provide the binary codecs to use with the plug-in. Novell will distribute Moonlight, as said in a recent blog post.

Moonlight is the current implementation of the Silverlight plug-in, made available by the same guys that make Mono, the .NET for Linux. Currently they also work for Novell, so an agreement with Microsoft could be at least guessed. Since it aims to dethrone Flash, the logical move would be to attack it on all platforms, but Microsoft has not released any projects for Linux (per my knowledge). But it does have a prior agreement with Novell, so this is not so unexpected.

It will be interesting to see how will the Linux version stack up against the “originals” – the Mac and Windows plug-ins. Regardless of the results this agreement remains a good sign, a sign that Microsoft can change. And allthough they have us (and most probably themselves) confused about what they’re doing, I can only hope that the developers’ division ideas on Open-Source software gains momentum and adoption inside the behemoth.

For those who want to try out the current implementation of Moonlight, you can see the build instructions here.

How do you create an Apache module for Windows?

Part 2: The Windows way.

Until Apache 2.0, the community disregarded using the webserver on Windows systems. It’s true that the 1.3 release also had a Windows version, but it has always seemed that it was treated like the ugly duckling. Even the release notes stated that it works, but it’s not recommended to use for anything serious.

With the 2.0 and subsequent releases the state of the matter changed. Windows support and performance got a hell lot better, and people use it. This is why when you create a module (on Linux first, of course, since it’s easier) you should consider porting it to Windows. And Apache helps a lot in this regard with the APR runtime, which hides away all of the ugly differences between OS’s. The only problem that remains is that you cannot find a quick, step-by-step guide on how to build a module. Yes, a single module, and not the entire Apache tree. Building the tree is explained, fairly detailed even on Apache’s website. So let’s get down to action.

What we’re trying to achieve here is to write a simple module, targeting Apache 2.0 and using free tools along the way. To build it I have used:

  1. The Apache 2.x sources (mostly for inspiration, and when I want to build the entire tree)
  2. Microsoft’s Platform SDK
  3. Microsoft’s Visual C++ 2005 Express Edition
  4. Lots of coffee.

First off you will have to download and install the tools above, if you haven’t already. As a rule of thumb, installing VS Express first and the Platform SDK afterwords worked best for me.

Before you are going to start off on the actual module coding, you need to setup the workspace:

  1. First off you must tell VS 2005 where the Platform SDK can be found. Otherwise it won’t found the many needed required header files. To do this, open VS 2005 and from the Tools menu open the Options dialog.
  2. In the Projects and Solutions > VC++ Directories you will have to add an entry for Include files, Executable files and Library files:
    • Executable files: [install_path]Bin
    • Include files: [install_path]Include
    • Library files: [install_path]Lib

Regarding the actual module creation you can either import the entire Apache project tree (conveniently put as a Visual Studio project) or create a single project with the module alone. Let’s look at both ways:

Building the entire Apache tree

Instructions on how to import and build the Apache tree are easy to find in the documentation, so I won’t go there. But, after you have imported the project in VS you should see lots of smaller sub-project, for each of the default modules. This is great, as you can look at how they are configured and create your own.

To create your own module – let’s say mod_foo you’d go like this:

  1. Import the Apache .vbs file which creates all the projects.
  2. Right-click on the Apache solution and select Add New Project. Give it a name and click Next to get to the configuration wizard.
  3. In the configuration dialog, the most important is to pick the right project type. Select the Dynamic Library (.dll) library one.
  4. Then right click the new project and select Add > New Item > Code > cpp file. Give it a name, and before clicking OK change the extension to .c (more similar to *NX).
  5. To make sure that the module will find the relevant include files and dependant libs you will have to add the [apache_src_root]/includes folder to the Additional includes property on the new project. Also add a dependency on the libapr subproject in the Apache solution.
  6. Write the code. At last! Copy the code in part 1. Because of the beauty in apr it will just work.
  7. Build the entire solution.If you have built it at least once before you can just build the new module

If you don’t get any errors in the build above you can go ahead and install the module. Copy it to the [apache2_root]/modules and modify the httpd.conf file to load it. Also make sure you assign a virtual folder to call the module, so you can test it out. One little Apache restart and you’re done. You should be able to navigate in your browser to the virtual mappting you’ve defined earlier and it should work.

Congrats!

Later edit:

I later realized (thanks to wizardcoder) that if someone only used windows, without going through the Linux part, the code needed in the steps cannot be copied from anywhere. So here it is – a zip with a default simple module.

New Flex Module is out

A new version of the Flex Module for Apache and IIS has been released on labs late last week. It includes several important changes:

1. A zip folder with instructions for manual installations has been added to help users running Unixes without X and users with more weird configurations with which the installer couldn’t cope

2. Major speed increase. This is the biggest stuff yet, as it now uses a caching slots mechanism to keep the latest 5 compiled mxmls in memory. Incremental compilation times bumped down to under a second (for the FlexStore sample application). Due to the need for the browser to render and display the flash it still shows as almost 2 seconds. But it’s way faster than the previous release.

3. Fixed some bugs and compiled the entire server on Java 1.4. So now the JRE/JDK 1.4 will be enough to work on.

4. Added Vista / IIS7 / Apache support, and Ubuntu 7.04/Apache. Added Mac/PPC support.

5. Fixed some issues with Windows / Apache 1.3.7 (the java virtual machine refused to start when invoked by the module).

6. Fixed Content-Length value  – in some casse, on Windows the pipe from the compilation server to the Apache module added some junk characters, causing the page to never stop loading. Now we check for specific markers before setting the final value on the content length.

You can also find the release notes on the project’s wiki page, over on Adobe Labs. One thing to note though: if you already have a previous version installed, do a full uninstall and then put in the new version.

How do you create a new Apache module?

Maybe this exists well documented somewhere – I couldn’t find it. This last month I had to do some work which involved creating an Apache module from scratch. For Linux and MacOSX creating a module is pretty easy – Apache even lends a hand via the APXS tools. On windows there’s a totally different problem. This is why I will try to write here how to create a module.

Hypothesis: We want an Apache 2.x module written in C++ which will respond to certain requests – let’s say .doc files – with a standard text. This is a very easy scenario, but one on which we can build later on.

Part 1 – creating the module on Linux/MacOSX:

This is the easy part. It only takes a few steps to get it done:

  1. Make sure you have the apache2 and apache2-dev packages installed. On Ubuntu/Debian you can find these packages in the Synaptic Package Manager. On Red Hat / Fedora Core systems you can find rpm’s online. On MacOSX simply install the developer tools.
  2. Check that you have apxs available. Try typing apxs in a terminal. If the required packages are installed you should get a help page.
  3. Let’s create the module files. Go to a folder – e.g. /home/my_user and create the enclosing module dir:
    $> mkdir modules
  4. Now apxs/apxs2 already comes into play. One of the flags (-g) can generate a default module template. Let’s do this now. Switch folder with the newly created one and call apxs:
    $> cd modules
    $> apxs2 -g -n doc
    or $>apxs -g -n doc
  5. The -n argument sets the newly generated module name, In this case it is mod_doc. The -g tells apxs to create a new template module.
  6. The default template generates code for a module that implements a custom request handler – just what we need. We could already test the created module and we would get an answer, but it’s not needed right now – it will just print out The sample page from mod_doc. Instead let’s modify the response. Find the line with the above text and change it into whatever you want – let’s say: You are not allowed to download docs! . Save the file and close it.
  7. Almost there now: we need to turn the .c into an Apache loadable .so. Open a terminal in the modules/doc folder and type:
    sudo apxs2 -c -i mod_doc.c
  8. You must use sudo in order for the apxs tool to be able to copy the compiled .so into Apache’s modules folder. If you don’t get an error it’s one step to the finish.
  9. Let’s tell Apache what to use to handle .doc files. Open httpd.conf (location varies depending on your distro) and add these lines at the end:
    LoadModule doc_module modules/mod_doc.so
    AddHandler doc .doc
  10. Now restart Apache and request a doc file through the browser. Instead of a download prompt you will get the HTML text added above.

In the next post, Part 2 – modules on Windows with Visual C++ 2005 Express Edition.

FABridge & memory …

One of the biggest changes in the latest FABridge release is the addition of memory management mechanisms. If until now everything that was passed from ActionScript to JavaScript via the bridge stayed in memory until the page was reloaded, this is true no more. now various objects behave differently with their allocated memory, depending on their origin and purpose.

The mechanism behind the memory management functions is basic reference counting, without cycle handling. This is enough because both ActionScript and JavaScript already have their garbage collection schemes in place, so all that was needed was a way to remove object references from the bridge structures. And this has been put in place. If you don’t care about the memory you are using, then you can develop applications almost just like now (there’s a single thing to chase here). If you do care, the bridge offers the tools to help:

  • Increasing the reference count for an object: object.addRef() or the more arcane FABridge.addRef(object). Useful when an object is destroyed automatically but you still need it. (Special hint here for those who do not care about memory – you still need to do this, or you’ll end up with stale references).
  • Decreasing the reference count for an object object.release() or FABridge.release(object). Do this when you care about memory and want to clear out old objects. If the reference count has been artificially increased above 1, this call will not destroy the object. If it is already 1, the object will be destroyed immediately.
  • FABridge.releaseNamedASObject(object) -immediately destroy the object passed as argument, regardless of its reference count.

As you can see a lot has been going on when it comes to memory, with emphasis on helping the user and keeping it simple. These changes mean that now some objects clean themselves up when they are no longer needed, but not all. And as such, if you want to avoid errors triggered by null object references you should understand what is kept and what not.

The following rules apply:

  1. Objects created explicitly by the user from JavaScript are not removed from the bridge automatically.
  2. Objects creates as the result of an ActionScript function call and returned to the user in JavaScript are kept. Their intended purpose is not obvious, so we cannot remove them automatically.
  3. New objects created in ActionScript after being passed as arguments to function / method calls from JavaScript are not automatically destroyed.
  4. Events and other objects created automatically in ActionScript and passed to a handler function in Javascript only live for the life of their dispatch function. Outside its scope, the object reference no longer exists.

One of the most basic examples which will appeal to both developers which care and which don’t care about memory is the case when you add an event handler from JavaScript and need to delay an execution via a setTimeOut call, like here:

….
var flexapp = FABridge.flash.root;
flexapp.myButton.addEventListener(“click”,jsDispatchFunction);
…..
function jsDispatchFunction(event) {
setTimeout(function() {doSomethingLater(event);},10);
}
…..
function doSomethingLater(event) {
alert(event.getKind());
}

This snippet of code, as it is right now will fail, because once the direct dispatch function ends, the event object is destroyed. Thus, the doSomethingLater function will throw an error. If you add a line inside the jsDispatchFunction, like this

event.addRef()

will fix everything.

And this is it for this post, for it is already too long!

A new version of FABridge is out

… quite some time now actually (from last Tuesday). In case you don’t know already, the Flex-AJAX Bridge (or the much shorter name FABridge) is a library that allows developers integrate Flex applications with JavaScript code. It is a way to access and use Flex components directly from JavaScript code, without duplicating functionality. It allows accessing objects and functions in the target flash movie on the page, and even registering JavaScript functions as event listeners for flash events.

Getting started …

To make a Flex app available for JavaScript integration via the FABridge you will have to place the FABridge.as file in your project and add a component tag in the application, like this:

<bridge:FABridge bridgeName="flash" id="flash" />

Next make sure you give all of the visual components that you want to access from JavaScript an unique ID (this is something you should do all the time though).

Let’s make it clear, and use an example: we want to have for this demo a Flex component which displays a ‘Hello world’ text and a button which refreshes it. On the JavaScript side we’ll simply have a text box where you can type the message you want displayed in the Flash movie. Also, to showcase event handling, when the refresh button is clicked, a JS alert box will pop up. This is how the end page will look like this:

FABridge sample preview

First step – building the Flex component. It’s quite easy actually:

  1. To create a simple application just like this fire up your text editor of choice (yeah, you heard me right, no need for Flex Builder here) and paste the following code in:
    <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="220" height="220">
    
    <bridge:FABridge bridgeName="flash" id="flash" />
    
    <mx:Label x="10" y="25" text="Hello world!" width="157" height="26"
    fontSize="12" fontFamily="Arial" id="myLabel"/>
    
    <mx:Button x="59.5" y="80" label="Refresh" id="myButton"
    click="myLabel.text='Hello world reloaded!'"/>
    
    </mx:Application>
  2. Now save the new file – let’s say helloworld.mxml.
  3. Now copy the FABridge.as file from the src folder within the zip you’ve downloaded from here into a folder called bridge on the same level as your mxml file.
  4. Now open a command prompt and browse to the location of your project. Once there call the mxml compiler – mxmlc.exe. You can find it in the bin folder of your Flex SDK installation.
  5. At this point you should have a swf file named helloworld.swf in the same folder as your mxml application.

Step 2 – write the HTML page – it’s just as easy:

  1. Fire up that preferred editor again. Punch in the HTML to create the text box and to load the swf file.
  2. To enable the web page to interact with the embedded Flex application you will have to add an import for the FABridge.js:
    <script src="javascript/FABridge.js"></script>
  3. To pass the text in the input text box to the flash movie we need to write a JavaScript function – relax, it’s easy, two rows are enough:
    function setText()
    {
       var flexApp = FABridge.flash.root();
       flexApp.getMyLabel().setText(jsMessage.value);
    }
  4. Now add the function call to the blur event of the text box and it’s done. Once you type and tab out of the text box, the message will appear inside the Flash movie, just like this:
    Messages from JavaScript
  5. For the last touch, let’s register a JavaScript function as an event handler for when the flash button is pressed – this will take some more code, about 4 lines 🙂
    function initListener()
    {
       var initCallback = function()
    {
       var flexApp = FABridge.flash.root();
       flexApp.getMyButton().addEventListener("click",textChanged);
    }
       FABridge.addInitializationCallback("flash",initCallback);
    }function textChanged(event)
    {
       alert("The text has been reset from Flash");
    }
  6. The textChanged function contains the code which gets executed when the button is pressed. You can do whatever you want in this function. The first function should be called by the body’s onload event and will register an event handler on the Flex button – when clicked, trigger the JS function.

With this simple example, you can see how the FABridge makes Flash – JavaScript communication easier. With just a few lines of code you can control a Flex component without going through the ExternalInterface hassle. You can download the sample application created in this example here.

Now that you know what FABridge does, next post will be about the changes in the latest version. Until then, have fun mixing Flex and AJAX!

The file(s) with no death

Aas I was working with some ANT scripts today (well, yesterday by the time I finish the post) I stumbled upon a strange situation (or so I thought at first): my ANT task failed when trying to delete some JAR files. I checked the path to the file – it was correct. I checked if the file existed – it was there, waiting quietly. I checked its properties – it was read-only. I said bingo, changed the attribute and ran the task again. 2 seconds later, the same error. I checked whether other programs had the file opened. None.

Some minutes later, after searching for a bit on the net I verified the system CLASSPATH environment variable. And there were the two causes: I had the .  added to the classpath. And so it seems that this is why JARS cannot be removed automatically by ANT.

Now, as a rule of thumb, it’s not very smart to have the . in your classpath variable (in my defence I added it for a test before leaving work the previous day and forgot to put it out), but if you run into files that will not die, check it out – it’s worth a look.