Hi Luis,
> 1. Seems like the top and bottom panels in the
> MainWindowLayout.xml only go as far as the edge
> of the right panel and have a fixed height.
They actually go as far as they can fit within the available remaining space.
By default there is no top panel, so I'm not sure what you mean by the top panel, have you added a custom one?
The order of the elements inside MainWindowLayout.xml is significant, because each one carves out some portion of the main window and then leaves a smaller remaining area for the next ones to carve out.
In the regular default arrangement the side pane comes first and docks to the right side - that carves off the right side of the window and then after that any top or bottom panel will be contained within that smaller area.
If you want for a top or bottom panel to go all the way across the main window, you've just got to move it to the top of the list of panels instead of having it come after the side pane one.
> It would be nice to set it up to go all the across and have
> it sized according to contents.
They already do automatically size according to the contents, except for the dock="fill" one which takes up all remaining area.
Just put any one that you want to go all the way across to be at the top of the list.
> 2. Found a mix of moi specific controls and standard html/js/css
> going on in the ui, but failed to find a common thread. Maybe i
> need to spend more time looking at it. :(
It's pretty much all made up of standard html but there are a few additional mechanisms set up for managing the html. The custom tags that you see are there as a kind of templating mechanism so that if you want to use a control you can just put in a single tag and it will insert a chunk of HTML inside of it for all the "guts" of the control.
To find the HTML that is inserted just look for a file that has the same name as the tag being used.
So for example when you see a <moi:CommandButton> tag, find the file CommandButton.htm in the \ui sub-folder to see what HTML gets injected inside of that control to make it up. For that control for example there is an image and then a div for the line of text underneath it.
The controls are styled by CSS that can address the control's containing tag and also applies stuff to the inner template-inserted content as well.
> - Is it possible to embed moi-specific controls around
> standard 'div' elements and use js to control their states?
> (e.g. position, visibility, etc.)
It depends on the particular control - some controls are only meant to contain something like a single image inside of them and so are not set up to contain additional HTML inside of them - the window control button like for the X close is an example of that.
But other controls are meant to contain more content inside of them like a <moi:PushButton> - if you look at the template definition for controls like that, you'll see a %content% declaration in them - that's where any content inside the declaration of the control gets inserted into the template.
So for example if you want to put some HTML inside of a <moi:PushButton> you just put it inside the tag same as you would inside a div or whatever, like this:
code:
<moi:PushButton style="white-space:nowrap">
<b>Some bold text</b>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</moi:PushButton>
You control position and visibility of these elements same as any other HTML element - they are just regular HTML elements with a custom tag name since it's basically more convenient when doing program UI to declare a push button tag with a custom tag name rather than just using divs and lots of classes since that's more text to deal with.
> - Even better yet, is there a way to put the ViewPanel
> inside a div and have it auto-size via js?
No, the view panel is arranged using the custom layout mechanism that handles arranging the contents of a frame window, it's controlled by the MainWindowLayout.xml file and not by HTML itself. HTML doesn't quite have as convenient a mechanism for top level window panel layout so MoI implements a custom layout mechanism for that part.
> - Would it be possible to create the MainWindowLayout as a standard html file?
Why do you want to do that, I'm not sure what you would have to gain by that...
You could make the whole thing one single HTML file I guess by putting in one UI panel that had dock="fill" so it took up the whole window but you will not be able to place viewports if you do that way because the view panel that contains the viewports are not an HTML control.
The viewports don't really fit in well as an HTML control, they're a highly specialized custom control that can't really be represented well by html tags, it needs a totally custom client window to do a good job for the viewports.
Anyway, I hope this gives you enough information to make more sense of stuff.
Please keep in mind that like I mentioned things are still probably going to change to some degree, I would not say that the UI structure is fully nailed down yet.
- Michael
