Extending the StableXUI library - Grid Widget

Posted by Tony Sep 15, 2014

Back when we first started working with OpenFl a robust UI framework didn’t exist.  The first revision of our game interface was a homegrown solution which worked well but didn’t follow any sort of MVP  or MVC design which resulted in very tightly coupled display and logic code.  This made the UI difficult to modify and customize. When we began redesigning the user interface based on player feedback we looked into two budding OpenFl libraries: haxeui and StableXUI .  We ended up choosing StableXUI back in April 2013 after briefly testing out the two frameworks mostly because it seemed easier to skin the StableXUI widget set.  Although I still prefer StableXUI, it's worth checking out haxeui.  Take a look at each libraries' github pages and be sure to check out the comparison in the HaXe google group to see which is the right fit for you.  Before diving into anything its always good to see if a tool is best for your specific project (and haxeui already has a grid based implementation built in).  So do some research!

We found that the built in widget set in StableXUI met almost all of our UI needs.  One widget we did need to add was a grid based layout.  We know we are not the only ones looking for this functionality, so in the quest to be helpful and of course finish our top secret game we started writing a custom widget.  

 

Before we begin, if you only need a grid similar to the image below then it's probably best to choose a simple solution.

blogGridLayout1.PNG

The code below matches the image above, and in all honesty, the following StableXUI XML code would work just fine:

A manual grid works great when you only have a small amount of items to add and each item can be defined statically (at compile time).  We have grids with 100's of items that also need to be created dynamically, so it was obvious a new custom widget was needed.  Hence the Grid Widget!

Our Grid needs are pretty basic:

  1. A grid that can hold unlimited items of the same width and height (expanding vertically as necessary)
  2. A grid that can add/remove items dynamically (at runtime)
  3. A grid that can scroll vertically (no need for horizontal at the moment)
  4. A grid that can be skinned to match the rest of our UI

A new custom StableXUI widget named GridWidget.hx  along with usage instructions and a runnable Flash Develop project have been added to github .

The necessary code to get up and running (and which creates the first demo below) is straightforward:

 

Check out some example grids created with the new custom Grid Widget :

 

120 items (100px x 100px) with viewable size set to 400x200

120 items (100px x 100px) with viewable size set to 400x400 

500 items (50px x 50px) with total viewable size set to 600x220 

(For each example you can interact with the grid by swiping vertically)

If you end up using the Grid Widget in your project drop us a line, we'd love to smell what you're cookin'.  Think our design stinks, interesting! we'd love to hear from you too.




Category: Xenizo Games
user_avatar

Tony

Xenizo Games Lead Developer

Add Pingback
blog comments powered by Disqus