HorizontalLayout and VerticalLayout in Jewel based on CSS

[Carlos Rovira]

Hi,

I just get the HorizontalLayout and VerticalLayout in Jewel working with
CSS:

for example <j:HorizontalLayout/> has now in JS:

COMPILE::JS
{
                var contentView:IParentIUIBase = layoutView as
IParentIUIBase;
                contentView.element.classList.add("layout", "horizontal");
}

and is using this CSS

.layout.horizontal {
white-space: nowrap;
display: block;
}
.layout.horizontal > * {
display: inline-block !important;
}

SWF part is untouched so we can take a look when at some time we decided to
concentrate in SWF output

And the resultant HTML is:

*<div class="royale layout horizontal">*
*       <div class="Group layout vertical">...</div>*
*       <div class="Group">...</div>*
*</div>*

so no inline styles and better separation of concerns.

but people could choose between one version with inline styles (in Basic)
and other that use CSS rules (in Jewel).

-- 
Carlos Rovira
http://about.me/carlosrovira