AsWing – ActionScript UI component framework

AsWing example simple login

Keith Peters was right, when he said, that Flash has a lack of UI component frameworks. The Flex components has a quasi monopoly on that. Besides his minimal components there is another alternative: AsWing.

Last year Neue Digitale / Razorfish gave me the chance to dive into AsWing. The task was to build a form manager that can not only run in Flex projects but also in straight AS3 projects where no flex runtime is available.

Click to see AsWing in action (not very sexy, huu? Don’t worry, of course thats all skinnable :) ) .

Where does AsWing come from?

AsWing is a port of the famous Java UI framework Swing, which was first released in 1996. The original port was made to AS2, which is still available. However, with AsWing 2.0 the AS3 version will be complete. AsWing 2.0 is still beta but safe to use.

How to use AsWing

Here some demo code from the simple login example above:

[SWF(backgroundColor="#AAAAAAA", frameRate="30", width="400", height="300")]
public class Main extends MovieClip
{
  private var pwdTextfield : JTextField;
  private var okBtn : JButton;
  private var userTextfield : JTextField;
  private var jf : JFrame;
  private var vp : JViewport;

  public function Main() 
  {
    var sprite:Sprite = new Sprite();
    sprite.x = sprite.y = 30;
    addChild(sprite);
    
    okBtn = new JButton("Ok");
    okBtn.setEnabled(false);
    okBtn.addActionListener(_okPressed);
    
    userTextfield = new JTextField("", 8);
    userTextfield.addEventListener(Event.CHANGE, _onPwdTextfieldChange);
    
    pwdTextfield =  new JTextField("", 8);
    pwdTextfield.setDisplayAsPassword(true);
    pwdTextfield.addEventListener(Event.CHANGE, _onPwdTextfieldChange);
    
    jf = new JFrame(sprite, "Login");
    
    var form:Form = new Form();
    
    form.addRow(new JLabel("Username"), new JSpacer(new IntDimension(8)), userTextfield);
    form.addRow(new JLabel("Password"), new JSpacer(new IntDimension(8)), pwdTextfield);
    form.addRow(null, new JSpacer(new IntDimension(8)), okBtn);
    
    vp = new JViewport(form);
    
    jf.getContentPane().append( vp );
    jf.setSizeWH(300, 160);
    jf.show();
  }

  private function _onPwdTextfieldChange(e:Event) : void 
  {
    okBtn.setEnabled( (userTextfield.getText() != "" && pwdTextfield.getText() != ""));
  }

  private function _okPressed(e:Event) : void 
  {
    var successOutput:String = "Welcome " + userTextfield.getText();
    
    var successLabel:JLabel = new JLabel(successOutput);
    
    vp.removeAll();
    vp.append(successLabel);
  }
}

More sophisticated examples on request…

The documentation can be found here
Here some tutorial you can start with

How come that I never heard of it?

Well, I guess AsWing had it’s 15 minutes of fame when the AS2 version came out. Back then, there were not many robust UI frameworks. Obviously that changed with the hole Flex thing. Nowadays the people tend to use the Flex components, since it’s industry standard.

The Flex components offer a wide range of features. However, we all know that it’s getting tricky when you want to change basic functionality of them (not sure, if this still applies to Flex 4 Spark components). I’m not saying that this is all easy with AsWing, but at least you can just click in the source code and hack something in… ;)

Pros and Cons

Pros
– Ported from very robust Java Swing
– Very fast
– No Flex framework required (AS3 only)
– Very flexible once learned

Cons
– Tough learning curve
– Small community
– Future questionable

Conclusion

Overall it was fun to work with AsWing. It’s powerful and once learned very flexible. And it’s fast as hell. The rendering is really fast unlike Flex(3).

Comments