Mariusz has posted 1 posts at DZone. View Full User Profile

An Account of Developing a Hybrid Java/Flex Application

09.05.2008
| 35486 views |
  • submit to reddit

The Flex Side of Things

I'm assuming that most of you know more about Java than Flex. So, again, I'll be a bit pragmatic when it comes to setting up the project and starting off. However, once we're there I'll concentrate on using the web service we created earlier and then leave most of the data presentation,layout and visual stuff for you to learn on your own. There are plenty of tutorials out there and I'd really want to keep this one below 15 pages :P.

Setting Up the Project

In Flex Builder clickFile->New->Flex Project. Give the new project a name, in my case Viewer.



Leave the application type as Web application and click Finish. You will notice a new tab has opened in the main window. That is all that needs doing. At the moment the app does nothing but it compiles and can be deployed instantly to the default browser by clicking the white arrow on a green circle icon. From here, we can change the way our application looks in either a WYSIWYG editor if we are in the design view (click the Design button) or in the Source view (click the Source button). Any changes made in one view will be reflected in the other instantly. Also due to the way Flex Builder 3 is set up, every time we save the project it will be compiled as well. With all this in mind let's add some components which will allow us to make use of our web service.

The Mock Up Viewer

To make explaining how the flex app works easier and the amount of code posted in this tutorial smaller we'll be building a mock up viewer. Sort of a mini version of what you can find here. The source of the full version will be posted at the bottom of this section as well. I think it will be easier to explain certain things this way. After you understand the concepts behind the mock up viewer and then look at the full version you should be able to figure out most of the stuff your self's. All that we'll need to start of is a panel with an image holder on it and a button to invoke our web service. OK, in FB3 (Flex Builder 3) double click your newly created Viewer.mxml (if not already selected). Next click the Source button.



All the presentation code in Flex is written using a XML-like language MXML. Syntax is more or less the same and so are the general concepts. But a Flex app can also make use of actionscript code. This is done by inserting a <mx:Script> section into the mxml code. Just like in the code below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Panel x="10" y="10" width="486" height="416" layout="absolute">
        <mx:Image id="img" x="10" y="10" width="446" height="326"/>
        <mx:Button x="195.5" y="344" label="Click Me!" click="doStuff()" />
    </mx:Panel>
    <mx:Script>
        <![CDATA[
        import mx.controls.Alert;
        // all action script code goes here
        private function doStuff(): void {
                mx.controls.Alert.show("This is a popup");
        }
        ]]>
    </mx:Script>
</mx:Application>

Looking at the above code we can quickly work out a couple of things. For example in the actionscript code we can comment just like in Java. We can call our AS3 (actionscript 3) code in the mxml code, just like the doStuff() function in the click handler of the button. All the components we add in the mxml context have to be contained within the <mx:Application> tag but outside of <mx:Script> tag. OK, what we have here should be enough to start off.

AttachmentSize
tutorial_html_2e51c903.jpg44.67 KB
tutorial_html_4d0d1668.jpg54.26 KB
tutorial_html_5717e36d.png9.22 KB
tutorial_html_4439460e.png12.88 KB
tutorial_html_m36babc34.gif28.69 KB
tutorial_html_m62eed3d8.png10.66 KB
tutorial_html_m9807edd.jpg41.49 KB
tutorial_html_m38373e52.jpg27.05 KB
tutorial_html_m9768552.png14.54 KB
flex-pdf-viewer.png67.61 KB
PDFImage.java3.62 KB
fileUpload.txt1.63 KB
crossdomain.txt298 bytes
Published at DZone with permission of its author, Mariusz Saternus.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Brian Matzon replied on Mon, 2008/09/08 - 3:11am

It broke my back button ;)

This looks more like a component description thana breakdown on what went well and what didn't.

Why go for flex ? - why not an applet?

Why use java as backend ?

Mariusz Saternus replied on Mon, 2008/09/08 - 4:14am

The reason for not using an applet is because I wanted to avoid a Java dependency on the client in this case - I wanted to use Flex.

If you have an Flex RIA and you want to say display a pdf file you just generated to the user you can't just use an applet. There is no way Flex will be able to 'talk' to the applet. That is what I was interested in - finding ways of communicating between the two technologies. 

The reason for using Java ... well I'm a Java programmer so the choice was obvious. Java is one possible option which may or may not suit everyone.

The article was never meant to be a "breakdown on what went well and what didn't". When I was working on the project I found it hard to find information about the things that I was working on and I wanted to share my findings with others.

Srinivas Veeravalli replied on Tue, 2008/09/09 - 12:27am in response to: Mariusz Saternus

Flex and Java applets can be used in a mixed environment. There are, however, challenges:

  • Making the applet visible. You can do this with a floating iframe, and with the applet as the source of the iframe. You need to set wmode to opaque in Flex for the iframe (and applet) to appear. Else they will go underneath the Flex rectangular area, and will never be visible.
  • Once you achieve the above, there are still z-ordering issues. Essentially the applet will "eat up" all Flex-based visual entities (mouse gestures,Flex dialogs, etc) which overlap with the applet area. There are ways to work around this problem, but these are not very pretty.
  • Finally the communication: you can use JScript (on the Java side) and ExternalInterface (on the Flex side). The glue would of course be JS functions.
So it can be done. Question is whether it is aesthetic enough.

Mariusz Saternus replied on Tue, 2008/09/09 - 12:59am in response to: Srinivas Veeravalli

Thanks for the info. I wasn't aware of such possibilities. There would still be one problem though, what it the users has disabled JS ? Cheers!

Srinivas Veeravalli replied on Tue, 2008/09/09 - 2:59am in response to: Mariusz Saternus

Hmmm.. how would your Flex program run then? AC_OETags.js ring a bell?

 Cheers :-)

Srinivas Veeravalli replied on Tue, 2008/09/09 - 3:02am in response to: Srinivas Veeravalli

Sorry, you are right - it is possible to run Flash without JS.

 But JS presence is a valid assumption in today's Ajax world, I suppose...

 Peace.

Dario Herrera replied on Mon, 2008/09/15 - 6:13am

take a look of Fiji: Exadel Fiji extends JSF by allowing the use of Flex with JSF components and within a JSF page....

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.