Quick UI Creation (Brainstorming)

  1. var ui:QuickUI = new QuickUI();
  2. ui.x = 20;
  3. ui.y = 260;
  4. ui.addEventListener(Event.CHANGE, onChange);
  5. addChild(ui);
  7. var spriteA:Sprite = makeSprite(150,150,0xFF0000);
  8. spriteA.addEventListener(MouseEvent.CLICK, onShowAddProps);
  10. var spriteB:Sprite = makeSprite(350,150, 0xCC6600);
  11. spriteB.addEventListener(MouseEvent.CLICK, onShowExcludeProps);
  13. var spriteC:Sprite = makeSprite(550,150, 0x550066);
  14. spriteC.addEventListener(MouseEvent.CLICK, onShowExcludeProps);
  16. function onChange(evt:Event):void{
  17.     // updates the property on the current target object
  18.     ui.updateObject(evt.target);
  19. }
  20. function onShowAddProps(evt:MouseEvent):void{
  21.     ui.rows = 3;
  22.     // onle show the following properties
  23.     //  add(property, label)
  24.     ui.add("name", "name:");
  25.     ui.add("x", "x location:");
  26.     ui.add("y", "y location:");
  27.     ui.add("scaleX", "x scale:");
  28.     ui.add("buttonMode", "show hand cursor");
  29.     ui.create(evt.currentTarget);
  30.     ui.window({title:"Select Properties: "+ evt.currentTarget.name});
  31. }
  33. function onShowExcludeProps(evt:MouseEvent):void {
  34.     ui.rows = 5;
  35.     // don't show a few select properties - if add() is not called
  36.     // all properties will be shown
  37.     ui.exclude("doubleClickEnabled");
  38.     ui.exclude("useHandCursor");
  39.     // build the UI, give two custom labels to x and y properties
  40.     ui.create(evt.currentTarget, {x:"x loc:", y:"y loc:"});
  41.     // optionally render a window behind the UI elements
  42.     ui.window({title:"All Properties: " + evt.currentTarget.name});
  43. }
  46. function makeSprite(xp:Number, yp:Number, col:uint):Sprite{
  47.     var s:Sprite = Sprite(addChild(new Sprite()));
  48.     s.x = xp;
  49.     s.y = yp;
  50.     s.buttonMode = true;
  51.     with (s.graphics) beginFill(col), drawRect(-40, -40, 80, 80);
  52.     return s;
  53. }

This snippet is my first stab at creating a library that makes certain types of UI creation very easy. It works by automatically creating input text fields and check boxes for all public properties that make sense with that type of UI. It has a long way to go, but this is a good start

Take a look at the swf to get an idea of what this snippet does.

Download the source for the library and the fla for the above demo.

I hope to get this library to the point that it will at least be useful for internal UI - that is, for level editors and mini-cms systems.

This entry was posted in UI, dynamic and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. brendan
    Posted May 23, 2009 at 12:03 pm | Permalink

    this would be a good project to open source, as well. I for one would be down to put some hours into it.

  2. Posted May 23, 2009 at 1:27 pm | Permalink

    yeah… I basically have a few key things I need to fix in it - and a few things I need to add and then I can add it to google code…

    It is very limited in terms of skinning etc… I’m starting with the goal of creating internal UI and then seeing how it evolves from there…

  3. Posted April 25, 2011 at 4:46 pm | Permalink

    I made something similar a few weeks back (MinimalSettings)

    But instead I used Metadata tags to define which properties were readable or editable, as well as the ranges for numeric values.

    I was planning on using MinimalComps for the GUI part (which I have been procrastinating actually applying, so it doesn’t do much at the moment :P

    Do you mind if I grab your code for the GUI part and tie it into my project or something along those lines?

  4. Posted April 25, 2011 at 5:45 pm | Permalink

    That’s pretty cool. Yes, feel free to use my code in any way you like - just let me know if it works out because I’d be curious to see what you do with it. :)

Post a Comment

Your email is never published nor shared. Required fields are marked *