Posts Tagged Adobe Flex

Free Alternative to Flex Builder

It’s been a long time since I last played with Flex. I feel like starting from square one.

This also means that I have a more difficult path ahead of me, with my Flex Builder trial license already expired.

Fortunately, it’s not that hard to setup basic mxml auto complete functionality with a plain Eclipse installation with XML support.

First we need to define the .mxml file association in Eclipse (Preferences > General > Editors > File Associations).

Then map this file association to the XML editor (see screenshot below).

Add the Flex 3 schema (flex3.xsd) to Eclipse’s XML catalog.

Try creating a test mxml file and open it from Eclipse.

Test.mxml

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>

You will most likely receive an Unsupported Type error.

Complete the process by adding the content type definition (shown below).

Close the mxml file and re-open. You should now be able to see the auto-complete functionality in action.

Hope this helps and let me know if you encounter any problems.

If you’re a student or a full time Flex developer, you shouldn’t even bother trying out the outlined steps.

Flex is free for students. But, if you make a living out of developing Flex apps, you might want to consider buying a license.

Related resources:

Advertisements

Comments (5)

Creating Mashups with Adobe Flex and AIR for $10

For a limited time, this e-book will be available for $10 at Apress’ daily deal site.

1590599365 Creating Mashups with Adobe Flex and AIR

Just got myself a copy (which by the way is my 6th e-book deal purchase from Apress).

I should probably get a frequent buyer card (if there’s such a thing).

Leave a Comment

Adobe AIR for JavaScript Developers Pocket Guide

This book has been released under Creative Commons License and is available for download…

Yes, for FREE!

0596518374 Adobe AIR for JavaScript Developers Pocket Guide

You can checkout Mike Chamber’s blog for more details.

Comments (1)

JSF vs Flex Components

When developing JSF applications, I rely heavily on these two sites as reference for the Tag syntax.

With Flex, there’s a similar tool where you can see Flex 3 components in action.

Try visiting and comparing the mentioned sites and you’ll probably have an idea why I’m really excited about developing applications in Flex.

Comments (3)

Flex, BlazeDS and JPA

After several days of playing with Flex, I’ve managed to create a simple Java-based backend using BlazeDS and the Java Persistence API (JPA).

In this post, we will try to implement what used to be a very popular application (during the early days of the Internet), the “Guest Book“.

What you’ll need:

The assumption here is that you are already comfortable with Java and databases, and you just want to know how to make your Flex application communicate to your Java backend.

We now proceed to creating our form Using Flex Builder.

guestbook.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" xmlns:local="*">
 <mx:Form x="10" y="10" width="270" height="150">
 	<mx:FormItem label="Name">
 		<mx:TextInput id="guestname" />
 	</mx:FormItem>
 	<mx:FormItem label="Message">
 		<mx:TextArea id="guestmessage" />
 	</mx:FormItem>
 	<mx:FormItem label="">
 		<mx:Button label="Submit" />
 	</mx:FormItem>
 </mx:Form>
</mx:Application>

Switching to “Design” view should show us the form that we just created.

Look how nice and easy it was to create the form.

But wait, this application doesn’t do anything yet, so let’s move on to adding some logic.

Let’s try to modify the submit button to call our remote object:

<mx:Button label="Submit"
    click="guestBookService.add(guestBookEntry)"/>

Adding this line alone will cause a compile error because we haven’t told Flex what the guestBookService and guestBookEntry objects are all about.

First we need to create an ActionScript class named GuestBookEntry.as which will correspond to our remote JPA entity named GuestBookEntry.java (located under the guestbook package).

package
{
    [Bindable]
    [RemoteClass(alias="guestbook.GuestBookEntry")]
    public class GuestBookEntry
    {
        public function GuestBookEntry()
        {
        }

        private var _guestName:String;
        private var _guestMessage:String;

        public function get guestName():String {
            return _guestName;
        }

        public function set guestName(guestName:String):void {
            _guestName=guestName;
        }

        public function get guestMessage():String {
            return _guestMessage;
        }

        public function set guestMessage(guestMessage:String):void {
            _guestMessage=guestMessage;
        }
    }
}

Notice how the constructor, setters and getters are different from how you would normally do it in Java.

We now update guestbook.mxml to include a reference to our guestBookEntry object (also called a custom component). This should be added as a child of the Application element.

<local:GuestBookEntry id="guestBookEntry"
    guestName="{guestname.text}"
    guestMessage="{guestmessage.text}" />

The curly braces mean that any changes to the text values of the form elements in guestbook.mxml would be directly applied to the guestBookEntry instance.

That should leave us with one more compile error to deal with, which is that of the missing reference to guestBookService.

Just add the fragment below as a child to Application and we’re all done! At least with the Flex part.

<mx:RemoteObject id="guestBookService"
    destination="guestBookService"
    source="guestbook.GuestBookService"
    channelSet="{cset}"/>
<mx:ChannelSet id="cset">
    <mx:channels>
        <mx:AMFChannel id="myamf"
            uri="http://localhost:8400/guestbook/messagebroker/amf"/>
    </mx:channels>
</mx:ChannelSet>

I’m sorry if I cannot explain the ChannelSet details as of now, because I’m as clueless as you are. We just need to make sure that they match the values in our BlazeDs backend and we’re good to go.

From your turnkey download, locate a file named blazeds.war, if you’ve done some Struts programming before, this is the same as the struts-blank.war which can serve as a template for new projects.

Import this war as a project in Eclipse WTP, and name this project guestbook (remember that our backend needs to match the entries we added for the RemoteObject and ChannelSet).

When you’re done setting up the project in Eclipse, navigate to “WEB-INF\flex\”. At this point we are only interested in “remoting-config.xml” where we should be defining a reference to our remote object.

Add these lines in between the adapters and default-channels:

   <destination id="guestBookService">
<properties>
         <source>guestbook.GuestBookService</source>
      </properties>
   </destination>

To setup JPA, we need to create a folder named META-INF under src and create a file named persistence.xml. Also, make sure to add TopLink JPA jars and your JDBC driver to WEB-INF\lib.

<?xml version="1.0" encoding="UTF-8"?>
<persistence version="1.0"
 xmlns="http://java.sun.com/xml/ns/persistence"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
<persistence-unit name="guestbook" transaction-type="RESOURCE_LOCAL">
<provider>
           oracle.toplink.essentials.PersistenceProvider
        </provider>
        <class>guestbook.GuestBookEntry</class>
<properties>
<property name="toplink.ddl-generation" value="drop-and-create-tables"/>
<property name="toplink.jdbc.driver" value="com.mysql.jdbc.Driver"/>
<property name="toplink.jdbc.url" value="jdbc:mysql://localhost:3306/guestbook"/>
<property name="toplink.jdbc.password" value="guestbook"/>
<property name="toplink.jdbc.user" value="guestbook"/>
 	</properties>
 </persistence-unit>
</persistence>

We now create the Java objects GuestBookService and GuestBookEntry:

@Entity
public class GuestBookEntry {

    @Id
    @GeneratedValue(strategy = GenerationType.TABLE)
    private long id;

    private String guestName;
    private String guestMessage;

    public GuestBookEntry() {}

    // getters and setters
}
public class GuestBookService {

    private EntityManagerFactory emf = null;

    public EntityManagerFactory getEMF() {
        if (emf == null) {
            emf = Persistence.createEntityManagerFactory("guestbook");
        }
        return emf;
    }

    public void add(GuestBookEntry guestBookEntry) {
        EntityManager em = getEMF().createEntityManager();
        try {
            em.getTransaction().begin();
            em.persist(guestBookEntry);
            em.getTransaction().commit();
        } catch (Exception e) {
            em.getTransaction().rollback();
            e.printStackTrace();
        } finally {
            em.close();
        }
    }

}

The guestbook.war can be downloaded from this location. The file uses an odt extension because of hosting limitations. Please rename to .war accordingly.

Also, JAR files from BlazeDS, TopLink and MySQL driver were not included in the distribution.

Let me know if you encounter any problems while running the application.

Recommended books:

1933988746 1933988347

Comments (11)

Flex Memory Usage

I was trying to modify this stock ticker example to work with Flex 3 when I came upon a surprising conclusion.

“With great power comes great responsibility.”

B0002XK190 Spider-Man / Spider-Man 2

Yes, I’m 100% convinced that Flex is the way to go if you want rich interactive user interfaces.

But that does not come without a cost. I think I accidentally turned the method invocation rate too high using the setInterval() function.

The result, a whopping 1GB memory consumption for firefox. It brought most of my running applications to a crawl.

Is there a way to prevent such conditions? Like running Flex in a sandbox model?

Leave a Comment

Flex-ing Your Way to RIA Land

I’ve had the privilege to work on some proof of concept pages using Flex since last week. Yes, I’ve heard the buzz around RIA and Flex before but I didn’t have the time to play around with the application until now.

I originally thought that it was somehow expensive to develop applications using Flex, but looking at the new pricing models, it seems that the entry barrier to Flex has been lowered down. You can even develop Flex applications for FREE using just the open source SDK and your old IDE but you lose all the design time capabilities the Flex Builder IDE has to offer.

I downloaded the 60 day trial and since the Flex Builder IDE was built on top of Eclipse (which I have been using for Java for a couple of years already), I immediately became very comfortable with the controls.

Coming from a Java background, I wanted to know how developing in Flex was different from what I would normally do in Java, create some JSPs and corresponding JSF Managed Beans for the UI and probably add some pretty cool JavaScript libraries like JQuery or Scriptaculous for some really nice effects.

I did some web search on Flex and found some interesting articles/links which caught my attention:

I wanted to try out writing some Flex applications but our intermittent internet connection last week prevented me from running the online tutorials.

So I just opted with buying the Early Access e-book copy of Flex 3 In Action from Manning.

After reading chapter 1 which can be downloaded freely from the site, I said to myself, “now why didn’t I try Flex earlier?” The argument there about the lack of user interactivity from pure HTML pages made a lot of sense.

I’m still in the early part of exploring Flex, but I must say that I’m really enjoying it and excited about all the new possibilities with regards to what the UI can offer.

Now all I need to do is to connect this to my Java backend and I’m ready to go.

Sounds easy? We’ll see…

Comments (1)