You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Harbs <ha...@gmail.com> on 2016/06/05 18:26:36 UTC
[FlexJS]Layout
How is layout handled in FlexJS? Is there a layout manager? It looks like there’s no constraints (i.e. top, bottom,left and right). Is that something that’s particularly difficult to add?
Re: [FlexJS]Layout
Posted by Alex Harui <ah...@adobe.com>.
On 6/6/16, 5:01 PM, "jude" <fl...@gmail.com> wrote:
>I was looking to add some default styles to the HTML page and it looks
>like
>Falcon JX is creating it dynamically
><https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Developer+Setup>,
>"The FalconJX compiler will generate an index.html file and a single
>minified .js file in bin/js-release and a debug version with many .js
>files
>in bin/js-debug."
>
>Is there a way we can set it up to use a template?
No way to use a template right now, but we should probably do that. If a
volunteer doesn't show up to do it in the next few days, I will take a
shot at it.
-Alex
Re: [FlexJS]Layout
Posted by jude <fl...@gmail.com>.
I was looking to add some default styles to the HTML page and it looks like
Falcon JX is creating it dynamically
<https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Developer+Setup>,
"The FalconJX compiler will generate an index.html file and a single
minified .js file in bin/js-release and a debug version with many .js files
in bin/js-debug."
Is there a way we can set it up to use a template?
On Mon, Jun 6, 2016 at 1:20 PM, Alex Harui <ah...@adobe.com> wrote:
>
>
> On 6/6/16, 10:49 AM, "jude" <fl...@gmail.com> wrote:
>
> >I think for HTML5 we want to set the html and body width and height to
> >100%. That should enable elements on the body to be constrained to the
> >edge
> >of the browser window.
> >
> >Peter, on the layout containers, I think we may be able to use a single
> >container if we don't have any chrome but still want scroll bars. We would
> >set the overflow to auto and that should clip the content and add scroll
> >bars. There may be other use cases that that won't work.
>
> Yep, that optimization is awaiting a volunteer to code up. Any volunteers?
>
> Thanks,
> -Alex
>
>
Re: [FlexJS]Layout
Posted by Harbs <ha...@gmail.com>.
I had put it on the application after I had put it in the view.
My mistkae was that I forgot to remove it from the view.
It’s working now…
On Jun 6, 2016, at 2:20 PM, Alex Harui <ah...@adobe.com> wrote:
>
>
> On 6/6/16, 10:49 AM, "jude" <fl...@gmail.com> wrote:
>
>> I think for HTML5 we want to set the html and body width and height to
>> 100%. That should enable elements on the body to be constrained to the
>> edge
>> of the browser window.
>>
>> Peter, on the layout containers, I think we may be able to use a single
>> container if we don't have any chrome but still want scroll bars. We would
>> set the overflow to auto and that should clip the content and add scroll
>> bars. There may be other use cases that that won't work.
>
> Yep, that optimization is awaiting a volunteer to code up. Any volunteers?
>
> Thanks,
> -Alex
>
Re: [FlexJS]Layout
Posted by Alex Harui <ah...@adobe.com>.
On 6/6/16, 10:49 AM, "jude" <fl...@gmail.com> wrote:
>I think for HTML5 we want to set the html and body width and height to
>100%. That should enable elements on the body to be constrained to the
>edge
>of the browser window.
>
>Peter, on the layout containers, I think we may be able to use a single
>container if we don't have any chrome but still want scroll bars. We would
>set the overflow to auto and that should clip the content and add scroll
>bars. There may be other use cases that that won't work.
Yep, that optimization is awaiting a volunteer to code up. Any volunteers?
Thanks,
-Alex
Re: [FlexJS]Layout
Posted by jude <fl...@gmail.com>.
I think for HTML5 we want to set the html and body width and height to
100%. That should enable elements on the body to be constrained to the edge
of the browser window.
Peter, on the layout containers, I think we may be able to use a single
container if we don't have any chrome but still want scroll bars. We would
set the overflow to auto and that should clip the content and add scroll
bars. There may be other use cases that that won't work.
While there's constraints in HTML through styles we still need to support
them in the swf side. I don't think the simple CSS class does that. Will
have to check.
On Jun 6, 2016 12:28 PM, "Harbs" <ha...@gmail.com> wrote:
> Next question:
>
> Is there a canned way to trigger a re-layout on a browser window resize?
>
> CSS constraints only work if the parent element is big enough.
>
> On Jun 6, 2016, at 12:41 PM, Harbs <ha...@gmail.com> wrote:
>
> > Never mind. I see you answered this question in the other discussion:
> >
> > <js:style>
> > <js:SimpleCSSStyles left="10px" right="20px" />
> > </js:style>
> >
> > This seems to work well.
> >
> > I could definitely get used to this.
> >
> > On Jun 6, 2016, at 11:48 AM, Harbs <ha...@gmail.com> wrote:
> >
> >> If I’m understanding correctly, the constraints are already working as
> css for both browser and Flash. Correct?
> >>
> >> What’s the right way to go about declaring these values? Assuming I
> have some markup like this:
> >> <js:Container>
> >> <js:beads>
> >> <js:VerticalLayout />
> >> </js:beads>
> >> <js:TextInput text="Type something here" />
> >> <js:TextButton text="Click Me"/>
> >> <js:Label id="field" text="Some info"/>
> >> <js:Label text="Some more info" />
> >> </js:Container>
> >>
> >> and I want my container to be inset from its container by 10 pixels or
> attached to the right side, what’s the best way to declare that?
> >>
> >> Right now, I think what FlexJS is missing the most is good
> documentation and IDE autocomplete tools to make the features more
> discoverable.
> >>
> >> On Jun 6, 2016, at 10:55 AM, Alex Harui <ah...@adobe.com> wrote:
> >>
> >>>
> >>>
> >>> On 6/6/16, 6:02 AM, "Harbs" <ha...@gmail.com> wrote:
> >>>
> >>>> Well, constraint layout is really important. I’m fine with using css
> for
> >>>> JS output, but that’s not going to help for a swf first workflow.
> >>>
> >>> What do you mean by "constraint layout"? The Spark layout with
> >>> ConstraintColumns and ConstraintRows? IIRC, it used a lot of compute
> >>> cycles.
> >>>
> >>> CSS is intended to work for SWF-first workflows as well. The goal for
> the
> >>> Basic component set is to eventually support all of CSS. The Basic
> >>> component set is trying to emulate what the browsers do, not the other
> way
> >>> around. That way, the output JS is as lightweight and low-overhead as
> >>> possible. So, if you specify in CSS that left=0, the same thing should
> >>> happen in the SWF as in the browser.
> >>>
> >>>> I’m a bit confused.
> >>>>
> >>>> In BasicLayout.layout() there’s the following code:
> >>>>
> >>>> var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
> >>>
> >>> The ValuesManager abstracts CSS (and other non-CSS values). On the JS
> >>> side, the code doesn't have to query ValuesManager nearly as often
> since
> >>> the browser is just going to deal with it, but when the code we write
> >>> needs to know what the CSS is that the theme/developer specified, we
> use
> >>> ValuesManager to get it. And, like I said, the goal in the code we
> write
> >>> is to replicate what the browser will do.
> >>>
> >>> HTH,
> >>> -Alex
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>
> >
>
>
Re: [FlexJS]Layout
Posted by Alex Harui <ah...@adobe.com>.
On 6/6/16, 10:40 AM, "Harbs" <ha...@gmail.com> wrote:
>To answer my own question, I see this was already answered in another
>discussion:
> <js:beads>
> <js:BrowserResizeHandler />
> </js:beads>
>However, when I add this, I get an error on this line:
> var /** @type {org.apache.flex.core.UIBase} */ initialView =
>org.apache.flex.utils.Language.as(this.app.initialView,
>org.apache.flex.core.UIBase);
>
>this.app is null.
>
>I’m not sure how that’s happening. My best guess is that the strand is
>not being set, but I don’t know why.
>Suggestions?
Which bead strand are you showing above? It may be designed to go on the
Application's strand.
-Alex
Re: [FlexJS]Layout
Posted by Harbs <ha...@gmail.com>.
To answer my own question, I see this was already answered in another discussion:
<js:beads>
<js:BrowserResizeHandler />
</js:beads>
However, when I add this, I get an error on this line:
var /** @type {org.apache.flex.core.UIBase} */ initialView = org.apache.flex.utils.Language.as(this.app.initialView, org.apache.flex.core.UIBase);
this.app is null.
I’m not sure how that’s happening. My best guess is that the strand is not being set, but I don’t know why.
Suggestions?
On Jun 6, 2016, at 1:28 PM, Harbs <ha...@gmail.com> wrote:
> Next question:
>
> Is there a canned way to trigger a re-layout on a browser window resize?
>
> CSS constraints only work if the parent element is big enough.
>
> On Jun 6, 2016, at 12:41 PM, Harbs <ha...@gmail.com> wrote:
>
>> Never mind. I see you answered this question in the other discussion:
>>
>> <js:style>
>> <js:SimpleCSSStyles left="10px" right="20px" />
>> </js:style>
>>
>> This seems to work well.
>>
>> I could definitely get used to this.
>>
>> On Jun 6, 2016, at 11:48 AM, Harbs <ha...@gmail.com> wrote:
>>
>>> If I’m understanding correctly, the constraints are already working as css for both browser and Flash. Correct?
>>>
>>> What’s the right way to go about declaring these values? Assuming I have some markup like this:
>>> <js:Container>
>>> <js:beads>
>>> <js:VerticalLayout />
>>> </js:beads>
>>> <js:TextInput text="Type something here" />
>>> <js:TextButton text="Click Me"/>
>>> <js:Label id="field" text="Some info"/>
>>> <js:Label text="Some more info" />
>>> </js:Container>
>>>
>>> and I want my container to be inset from its container by 10 pixels or attached to the right side, what’s the best way to declare that?
>>>
>>> Right now, I think what FlexJS is missing the most is good documentation and IDE autocomplete tools to make the features more discoverable.
>>>
>>> On Jun 6, 2016, at 10:55 AM, Alex Harui <ah...@adobe.com> wrote:
>>>
>>>>
>>>>
>>>> On 6/6/16, 6:02 AM, "Harbs" <ha...@gmail.com> wrote:
>>>>
>>>>> Well, constraint layout is really important. I’m fine with using css for
>>>>> JS output, but that’s not going to help for a swf first workflow.
>>>>
>>>> What do you mean by "constraint layout"? The Spark layout with
>>>> ConstraintColumns and ConstraintRows? IIRC, it used a lot of compute
>>>> cycles.
>>>>
>>>> CSS is intended to work for SWF-first workflows as well. The goal for the
>>>> Basic component set is to eventually support all of CSS. The Basic
>>>> component set is trying to emulate what the browsers do, not the other way
>>>> around. That way, the output JS is as lightweight and low-overhead as
>>>> possible. So, if you specify in CSS that left=0, the same thing should
>>>> happen in the SWF as in the browser.
>>>>
>>>>> I’m a bit confused.
>>>>>
>>>>> In BasicLayout.layout() there’s the following code:
>>>>>
>>>>> var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
>>>>
>>>> The ValuesManager abstracts CSS (and other non-CSS values). On the JS
>>>> side, the code doesn't have to query ValuesManager nearly as often since
>>>> the browser is just going to deal with it, but when the code we write
>>>> needs to know what the CSS is that the theme/developer specified, we use
>>>> ValuesManager to get it. And, like I said, the goal in the code we write
>>>> is to replicate what the browser will do.
>>>>
>>>> HTH,
>>>> -Alex
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>
>>
>
Re: [FlexJS]Layout
Posted by Harbs <ha...@gmail.com>.
Next question:
Is there a canned way to trigger a re-layout on a browser window resize?
CSS constraints only work if the parent element is big enough.
On Jun 6, 2016, at 12:41 PM, Harbs <ha...@gmail.com> wrote:
> Never mind. I see you answered this question in the other discussion:
>
> <js:style>
> <js:SimpleCSSStyles left="10px" right="20px" />
> </js:style>
>
> This seems to work well.
>
> I could definitely get used to this.
>
> On Jun 6, 2016, at 11:48 AM, Harbs <ha...@gmail.com> wrote:
>
>> If I’m understanding correctly, the constraints are already working as css for both browser and Flash. Correct?
>>
>> What’s the right way to go about declaring these values? Assuming I have some markup like this:
>> <js:Container>
>> <js:beads>
>> <js:VerticalLayout />
>> </js:beads>
>> <js:TextInput text="Type something here" />
>> <js:TextButton text="Click Me"/>
>> <js:Label id="field" text="Some info"/>
>> <js:Label text="Some more info" />
>> </js:Container>
>>
>> and I want my container to be inset from its container by 10 pixels or attached to the right side, what’s the best way to declare that?
>>
>> Right now, I think what FlexJS is missing the most is good documentation and IDE autocomplete tools to make the features more discoverable.
>>
>> On Jun 6, 2016, at 10:55 AM, Alex Harui <ah...@adobe.com> wrote:
>>
>>>
>>>
>>> On 6/6/16, 6:02 AM, "Harbs" <ha...@gmail.com> wrote:
>>>
>>>> Well, constraint layout is really important. I’m fine with using css for
>>>> JS output, but that’s not going to help for a swf first workflow.
>>>
>>> What do you mean by "constraint layout"? The Spark layout with
>>> ConstraintColumns and ConstraintRows? IIRC, it used a lot of compute
>>> cycles.
>>>
>>> CSS is intended to work for SWF-first workflows as well. The goal for the
>>> Basic component set is to eventually support all of CSS. The Basic
>>> component set is trying to emulate what the browsers do, not the other way
>>> around. That way, the output JS is as lightweight and low-overhead as
>>> possible. So, if you specify in CSS that left=0, the same thing should
>>> happen in the SWF as in the browser.
>>>
>>>> I’m a bit confused.
>>>>
>>>> In BasicLayout.layout() there’s the following code:
>>>>
>>>> var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
>>>
>>> The ValuesManager abstracts CSS (and other non-CSS values). On the JS
>>> side, the code doesn't have to query ValuesManager nearly as often since
>>> the browser is just going to deal with it, but when the code we write
>>> needs to know what the CSS is that the theme/developer specified, we use
>>> ValuesManager to get it. And, like I said, the goal in the code we write
>>> is to replicate what the browser will do.
>>>
>>> HTH,
>>> -Alex
>>>
>>>
>>>
>>>
>>>
>>>
>>
>
Re: [FlexJS]Layout
Posted by Harbs <ha...@gmail.com>.
Never mind. I see you answered this question in the other discussion:
<js:style>
<js:SimpleCSSStyles left="10px" right="20px" />
</js:style>
This seems to work well.
I could definitely get used to this.
On Jun 6, 2016, at 11:48 AM, Harbs <ha...@gmail.com> wrote:
> If I’m understanding correctly, the constraints are already working as css for both browser and Flash. Correct?
>
> What’s the right way to go about declaring these values? Assuming I have some markup like this:
> <js:Container>
> <js:beads>
> <js:VerticalLayout />
> </js:beads>
> <js:TextInput text="Type something here" />
> <js:TextButton text="Click Me"/>
> <js:Label id="field" text="Some info"/>
> <js:Label text="Some more info" />
> </js:Container>
>
> and I want my container to be inset from its container by 10 pixels or attached to the right side, what’s the best way to declare that?
>
> Right now, I think what FlexJS is missing the most is good documentation and IDE autocomplete tools to make the features more discoverable.
>
> On Jun 6, 2016, at 10:55 AM, Alex Harui <ah...@adobe.com> wrote:
>
>>
>>
>> On 6/6/16, 6:02 AM, "Harbs" <ha...@gmail.com> wrote:
>>
>>> Well, constraint layout is really important. I’m fine with using css for
>>> JS output, but that’s not going to help for a swf first workflow.
>>
>> What do you mean by "constraint layout"? The Spark layout with
>> ConstraintColumns and ConstraintRows? IIRC, it used a lot of compute
>> cycles.
>>
>> CSS is intended to work for SWF-first workflows as well. The goal for the
>> Basic component set is to eventually support all of CSS. The Basic
>> component set is trying to emulate what the browsers do, not the other way
>> around. That way, the output JS is as lightweight and low-overhead as
>> possible. So, if you specify in CSS that left=0, the same thing should
>> happen in the SWF as in the browser.
>>
>>> I’m a bit confused.
>>>
>>> In BasicLayout.layout() there’s the following code:
>>>
>>> var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
>>
>> The ValuesManager abstracts CSS (and other non-CSS values). On the JS
>> side, the code doesn't have to query ValuesManager nearly as often since
>> the browser is just going to deal with it, but when the code we write
>> needs to know what the CSS is that the theme/developer specified, we use
>> ValuesManager to get it. And, like I said, the goal in the code we write
>> is to replicate what the browser will do.
>>
>> HTH,
>> -Alex
>>
>>
>>
>>
>>
>>
>
Re: [FlexJS]Layout
Posted by Harbs <ha...@gmail.com>.
If I’m understanding correctly, the constraints are already working as css for both browser and Flash. Correct?
What’s the right way to go about declaring these values? Assuming I have some markup like this:
<js:Container>
<js:beads>
<js:VerticalLayout />
</js:beads>
<js:TextInput text="Type something here" />
<js:TextButton text="Click Me"/>
<js:Label id="field" text="Some info"/>
<js:Label text="Some more info" />
</js:Container>
and I want my container to be inset from its container by 10 pixels or attached to the right side, what’s the best way to declare that?
Right now, I think what FlexJS is missing the most is good documentation and IDE autocomplete tools to make the features more discoverable.
On Jun 6, 2016, at 10:55 AM, Alex Harui <ah...@adobe.com> wrote:
>
>
> On 6/6/16, 6:02 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> Well, constraint layout is really important. I’m fine with using css for
>> JS output, but that’s not going to help for a swf first workflow.
>
> What do you mean by "constraint layout"? The Spark layout with
> ConstraintColumns and ConstraintRows? IIRC, it used a lot of compute
> cycles.
>
> CSS is intended to work for SWF-first workflows as well. The goal for the
> Basic component set is to eventually support all of CSS. The Basic
> component set is trying to emulate what the browsers do, not the other way
> around. That way, the output JS is as lightweight and low-overhead as
> possible. So, if you specify in CSS that left=0, the same thing should
> happen in the SWF as in the browser.
>
>> I’m a bit confused.
>>
>> In BasicLayout.layout() there’s the following code:
>>
>> var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
>
> The ValuesManager abstracts CSS (and other non-CSS values). On the JS
> side, the code doesn't have to query ValuesManager nearly as often since
> the browser is just going to deal with it, but when the code we write
> needs to know what the CSS is that the theme/developer specified, we use
> ValuesManager to get it. And, like I said, the goal in the code we write
> is to replicate what the browser will do.
>
> HTH,
> -Alex
>
>
>
>
>
>
Re: [FlexJS]Layout
Posted by Alex Harui <ah...@adobe.com>.
On 6/6/16, 6:02 AM, "Harbs" <ha...@gmail.com> wrote:
>Well, constraint layout is really important. I’m fine with using css for
>JS output, but that’s not going to help for a swf first workflow.
What do you mean by "constraint layout"? The Spark layout with
ConstraintColumns and ConstraintRows? IIRC, it used a lot of compute
cycles.
CSS is intended to work for SWF-first workflows as well. The goal for the
Basic component set is to eventually support all of CSS. The Basic
component set is trying to emulate what the browsers do, not the other way
around. That way, the output JS is as lightweight and low-overhead as
possible. So, if you specify in CSS that left=0, the same thing should
happen in the SWF as in the browser.
> I’m a bit confused.
>
> In BasicLayout.layout() there’s the following code:
>
> var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
The ValuesManager abstracts CSS (and other non-CSS values). On the JS
side, the code doesn't have to query ValuesManager nearly as often since
the browser is just going to deal with it, but when the code we write
needs to know what the CSS is that the theme/developer specified, we use
ValuesManager to get it. And, like I said, the goal in the code we write
is to replicate what the browser will do.
HTH,
-Alex
Re: [FlexJS]Layout
Posted by Harbs <ha...@gmail.com>.
Well, constraint layout is really important. I’m fine with using css for JS output, but that’s not going to help for a swf first workflow.
I’d be happy to do some work on this, but frankly, I’m not sure where to start. If you could give me some pointers, it might help. I’ll try and look at the current layout beads and see if I can understand them.
On Jun 6, 2016, at 12:46 AM, Alex Harui <ah...@adobe.com> wrote:
>
>
> On 6/5/16, 11:26 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> How is layout handled in FlexJS? Is there a layout manager? It looks like
>> there’s no constraints (i.e. top, bottom,left and right). Is that
>> something that’s particularly difficult to add?
>>
>
> Layouts are beads. We have a HorizontalLayout and VerticalLayout and a
> few special case layouts: OneFlexibleChildHorizonalLayout. See:
> HTML/src/main/flex/org/apache/flex/html/beads/layouts
>
>
> There is no LayoutManager (at least, right now). The regular Flex
> LayoutManager actually manages invalidation/validation which FlexJS does
> not have because the browsers often immediately update the screen.
>
> There is no ConstraintLayout. CSS should work, so setting
> style="left:0px" should pin it to the left side. There is no equivalent
> to the regular Flex ConstraintLayout. Volunteers are welcome to build it,
> but I'm not sure it was the greatest solution. Other constraint layouts
> can and should be built by volunteers some day. And don't forget "data
> binding". Hopefully FlexJS data binding is simpler and faster in certain
> cases so it won't kill performance as much to use data binding to get your
> UI widgets to line up and move together.
>
> HTH,
> -Alex
>
Re: [FlexJS]Layout
Posted by Peter Ent <pe...@adobe.com>.
I did a lot of work on the layouts - in fact I re-wrote it at least once.
For BasicLayout, we pull each child's CSS values and use them. They should
work.
The other layouts, vertical and horizontal, use some CSS styles too
(padding and margin). The layout beads try to watch for changes in the
size of the strand(component) and react to those changes, running their
layout algorithm again.
The tricky part was the Container structure. Containers are actually two
pieces (or three, if scrolling is involved): the outer part (the
component) and the content view. The children go into the content view
while "chrome" elements, like scrollbars, go into the outer part. This way
when you ask for a Container's children, you don't get the chrome pieces
in the mix. The layout operates only on the content view. And then factor
in the fact that JS/HTML supplies scrolling while Flash does not.
If you wanted to create a constraint-aware layout, start with BasicLayout
since it loops through the children.
One thing to be aware of is FlexJS's notion of size. For example, if you
have a Container (without an explicit size) and two children, both have
explicit size, then the size of the Container is determined by the
children. A horizontal layout, for example, has to be aware of that's how
the Container is being sized - it just can't ask the Container for its
size because it has yet to be determined. But if you give the Container an
explicit size, then this can limit the size of the children. For example,
if Container is 400 pixels wide and has a vertical layout (the flexible
one), then each child will be expanded to fit horizontally, but the
overall height of the Container is determined by the sum of the heights of
the children plus any margins and paddings on the children and on the
Container.
‹peter
On 6/6/16, 9:36 AM, "Harbs" <ha...@gmail.com> wrote:
>I¹m a bit confused.
>
>In BasicLayout.layout() there¹s the following code:
>
> var left:Number =
>ValuesManager.valuesImpl.getValue(child, "left");
> var right:Number =
>ValuesManager.valuesImpl.getValue(child, "right");
> var top:Number =
>ValuesManager.valuesImpl.getValue(child, "top");
> var bottom:Number =
>ValuesManager.valuesImpl.getValue(child, "bottom");
>and
> var left:Number =
>org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'left');
> var right:Number =
>org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'right');
> var top:Number =
>org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'top');
> var bottom:Number =
>org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'bottom');
>
>I¹m probably not reading this right.
>
>Where do these constraint values come from, and how do they work?
>
>On Jun 6, 2016, at 12:46 AM, Alex Harui <ah...@adobe.com> wrote:
>
>> There is no ConstraintLayout.
>
Re: [FlexJS]Layout
Posted by Harbs <ha...@gmail.com>.
I’m a bit confused.
In BasicLayout.layout() there’s the following code:
var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
var right:Number = ValuesManager.valuesImpl.getValue(child, "right");
var top:Number = ValuesManager.valuesImpl.getValue(child, "top");
var bottom:Number = ValuesManager.valuesImpl.getValue(child, "bottom");
and
var left:Number = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'left');
var right:Number = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'right');
var top:Number = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'top');
var bottom:Number = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'bottom');
I’m probably not reading this right.
Where do these constraint values come from, and how do they work?
On Jun 6, 2016, at 12:46 AM, Alex Harui <ah...@adobe.com> wrote:
> There is no ConstraintLayout.
Re: [FlexJS]Layout
Posted by Alex Harui <ah...@adobe.com>.
On 6/5/16, 11:26 AM, "Harbs" <ha...@gmail.com> wrote:
>How is layout handled in FlexJS? Is there a layout manager? It looks like
>there’s no constraints (i.e. top, bottom,left and right). Is that
>something that’s particularly difficult to add?
>
Layouts are beads. We have a HorizontalLayout and VerticalLayout and a
few special case layouts: OneFlexibleChildHorizonalLayout. See:
HTML/src/main/flex/org/apache/flex/html/beads/layouts
There is no LayoutManager (at least, right now). The regular Flex
LayoutManager actually manages invalidation/validation which FlexJS does
not have because the browsers often immediately update the screen.
There is no ConstraintLayout. CSS should work, so setting
style="left:0px" should pin it to the left side. There is no equivalent
to the regular Flex ConstraintLayout. Volunteers are welcome to build it,
but I'm not sure it was the greatest solution. Other constraint layouts
can and should be built by volunteers some day. And don't forget "data
binding". Hopefully FlexJS data binding is simpler and faster in certain
cases so it won't kill performance as much to use data binding to get your
UI widgets to line up and move together.
HTH,
-Alex