AE ENHANCERS

Expressions/Scripts/Presets
It is currently Wed May 22, 2013 5:40 pm

All times are UTC - 8 hours [ DST ]




Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post subject: UI layout question
PostPosted: Mon May 30, 2011 4:02 pm 
Offline

Joined: Tue Jun 08, 2010 2:57 pm
Posts: 89
Trying to put together a simple UI, but it's givinig me problems.

I want the "Render" button to be in the same line as the first objects, but alligned to the right instead of the left. See attached images.

If I add the render button to a separate group, it shows up below everything else, which isn't how I would like it. Notice that the render button is a bit bigger, so ideally it would be in the middle of the first and the second row.

Any ideas for this?


* As you see, the bottom image (correct one) is a sketch only version.


Code:


var myPalette = buildUI(this);

    if(myPalette != null && myPalette instanceof Window) {
        myPalette.show();
            }

function buildUI (thisObject) {
   
    if(thisObject instanceof Panel) {
        var myPalette = thisObject;
        }else{
        var myPalette = new Window ("palette", "test", undefined, {resizeable:true});
        }

    if(myPalette != null) {
   
    var res =
    "Group { \
    orientation: 'column', \
        alignment: ['fill', 'fill'], \
        alignChildren: ['left', 'top'], \
                test: Group { \
                 orientation: 'row', \
               test1: EditText {size: ['100', '25']}, \
               test2: EditText {size: ['100', '25']}, \
                } \
                        test2: Group { \
                        orientation: 'row', \
                        test3: Checkbox {text: 'test'}, \
                        test4: Checkbox {text: 'test'}, \
                                        } \
                          test3: Group { \
                        orientation: 'row', \
                        alignment: ['right', 'top'], \
                        renderButton: Button {text: 'Render', size: ['100', '50']}, \
                } \
                } \
                }";
               
       

myPalette.grp = myPalette.add(res);
myPalette.layout.layout(true);
myPalette.layout.resize()
myPalette.resizing = myPalette.onResize = function () {this.layout.resize()};


}//if(myPalette != null) {

return myPalette;

} //buildUI


Attachments:
notCorrect.jpg
notCorrect.jpg [ 8.17 KiB | Viewed 551 times ]
correct.jpg
correct.jpg [ 6.36 KiB | Viewed 551 times ]
Top
 Profile  
 
 Post subject: Re: UI layout question
PostPosted: Wed Jun 01, 2011 3:21 am 
Offline

Joined: Sat Jun 05, 2004 7:59 am
Posts: 646
Location: London, UK
Try this:
Code:
var myPalette = buildUI(this);

if(myPalette != null && myPalette instanceof Window) {
   myPalette.show();
}

function buildUI (thisObject) {
   
   if(thisObject instanceof Panel) {
      var myPalette = thisObject;
   } else {
      var myPalette = new Window ("palette", "test", undefined, {resizeable:true});
   }

    if (myPalette != null) {
   
      var res =
      "Group { \
         orientation: 'row', \
         alignment: ['fill', 'fill'], \
         alignChildren: ['left', 'top'], \
         test2: Group { \
            orientation: 'column', \
            test: Group { \
               orientation: 'row', \
               test1: EditText {size: ['100', '25']}, \
               test2: EditText {size: ['100', '25']}, \
            } \
            test2: Group { \
               orientation: 'row', \
               alignment: ['left', 'top'], \
               test3: Checkbox {text: 'test'}, \
               test4: Checkbox {text: 'test'}, \
            } \
         } \
         test3: Group { \
            orientation: 'row', \
            alignment: ['left', 'top'], \
            renderButton: Button {text: 'Render', size: ['100', '50']}, \
         } \
      }";

      myPalette.grp = myPalette.add(res);
      myPalette.layout.layout(true);
      myPalette.layout.resize()
      myPalette.resizing = myPalette.onResize = function () {this.layout.resize()};


   }//if(myPalette != null) {

   return myPalette;

} //buildUI


Top
 Profile  
 
 Post subject: Re: UI layout question
PostPosted: Thu Jun 02, 2011 9:23 am 
Offline

Joined: Tue Jun 08, 2010 2:57 pm
Posts: 89
Thanks Paul, that worked perfectly :). Not sure what you did though, I guess it's kind of nesting groups, since you have the main grops orientation set to row.


Top
 Profile  
 
 Post subject: Re: UI layout question
PostPosted: Thu Jun 02, 2011 9:35 am 
Offline

Joined: Sat Jun 05, 2004 7:59 am
Posts: 646
Location: London, UK
Yeah, the main group is a row containing two items, the first being a group with all the stuff on the left, and the second group containing just the render button. Actually the group for the render button isn't needed, you could just have the render button without it being inside a group.

Paul


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC - 8 hours [ DST ]


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group