Wijits: The Beginning

Posted in: Portfolio by preitz on

What is Wijits?

Wijits is a UI library I’ve decided to build for AS3. Or rather, it will be, since I just started on this two days ago. So, why would I build my own UI library? Especially since there are a few out there already. I have three very good reasons for doing this:

1. Because I can
2. For the fun of it
3. To show off

My main goal for the last two days was to have enough of this done to present a decent demo. Obviously there are little quirks here and there that need to be fixed, and a lot of work remains in order to have this be a decent API. So here is the list of what I wanted to accomplish (and did accomplish!) for this weekend:

Windows
Basic windows that can have components added to them and can be interacted with. There are no window buttons yet (min/max/close), those will come later. The one must have I wanted is the ability to resize the  windows in any direction, not just from the lower right.

Basic Component Framework
A framework that can be used to build all of the components.

A Single Component
For a demo I only needed a single component, in this case a basic label. This was basically something to test on while building the framework, and something to use for the demo.

Two Component Borders
I have two borders that can be added to components: EmptyBorder and LineBorder. Borders have a property called ‘area’ that helps control how child components are placed. Currently I have plans to add at least three more borders: DashedBorder, BevelBorder, and LabelBorder.

Three Layout Managers
Currently I have three layout managers (and more to come): AbsoluteLayout, BorderLayout, and GridLayout. I have plans for a FlowLayout (vertical or horizontal) and something similar to Java’s GridBagLayout.

Like I said, there’s a lot of work, and several little bugs that need to be worked out. For instance, there is no check on resizing windows, so there’s some weird behavior there. And, yes, I know about the little quirk with the BorderLayout 😛

 

Here’s the obligatory screenshot:

So here is the link for the first of many demos: Launch The Demo

And for a peek at the internals, here is the source code for the border layout demo window:

package{
    import com.reitzdesigns.wijits.layouts.BorderLayout;
    import com.reitzdesigns.wijits.borders.LineBorder;
    import com.reitzdesigns.wijits.components.WLabel;
    import com.reitzdesigns.wijits.windows.Window;
 
    public class BorderDemo extends Window{
        public function BorderDemo(title:String=""){
            super(title);
            layout = new BorderLayout();
 
            var northLabel:WLabel = new WLabel("North", WLabel.CENTER, WLabel.MIDDLE);
            northLabel.border = new LineBorder();
            addComponent(northLabel, BorderLayout.NORTH);
 
            var southLabel:WLabel = new WLabel("South", WLabel.CENTER, WLabel.MIDDLE);
            southLabel.border = new LineBorder();
            addComponent(southLabel, BorderLayout.SOUTH);
 
            var eastLabel:WLabel = new WLabel("East", WLabel.CENTER, WLabel.MIDDLE);
            eastLabel.border = new LineBorder;
            addComponent(eastLabel, BorderLayout.EAST);
 
            var westLabel:WLabel = new WLabel("West", WLabel.CENTER, WLabel.MIDDLE);
            westLabel.border = new LineBorder;
            addComponent(westLabel, BorderLayout.WEST);
 
            var centerLabel:WLabel = new WLabel("Center", WLabel.CENTER, WLabel.MIDDLE);
            centerLabel.border = new LineBorder();
            addComponent(centerLabel, BorderLayout.CENTER);
        }
    }
}

  • by Danny Simmons, on December 11, 2013 - 8:38 PM

    This comment is awaiting approval

  • by seovps, on December 30, 2013 - 9:38 PM

    This comment is awaiting approval