You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Justin Mclean <ju...@classsoftware.com> on 2017/02/07 07:33:34 UTC
[FlexJS] vertical layout not working with labels
Hi,
Can anyone tell me why this displays horizontally rather than vertically? Is this a bug?
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/basic”>
<js:initialView>
<js:View>
<js:Container>
<js:beads>
<js:VerticalLayout />
</js:beads>
<js:Label text="Hello" />
<js:Label text="World" />
</js:Container>
</js:View>
</js:initialView>
</js:Application>
I can see the labels get turned into spans. Shouldn’t they be divs? Or do I need to use something else other than js:labels to get vertical alignment?
I can put <js:Spacer />’s after each one to get vertical alignment but that seems a bit hacky.
Thanks,
Justin
Re: [FlexJS] vertical layout not working with labels
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
> How about giving the Express package a whirl. Try the VView component
> which packages up the vertical layout with data binding.
I tried this:
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/express">
<js:initialView>
<js:View>
<js:VContainer>
<js:Label text="hello"/>
<js:Label text="world"/>
</js:VContainer>
</js:View>
</js:initialView>
</js:Application>
And it get an exception on startup:
Uncaught TypeError: c is not a constructor
at org.apache.flex.html.supportClasses.ScrollingViewport.org.apache.flex.html.supportClasses.Viewport.set__strand (Viewport.js:127)
at org.apache.flex.html.supportClasses.ScrollingViewport.set__strand (ScrollingViewport.js:100)
at org.apache.flex.express.VContainer.org.apache.flex.core.UIHTMLElementWrapper.addBead (UIHTMLElementWrapper.js:68)
at org.apache.flex.express.VContainer.org.apache.flex.core.UIBase.addBead (UIBase.js:362)
at org.apache.flex.express.VContainer.org.apache.flex.express.Container [as constructor] (Container.js:25)
at Function.childCtor.base (base.js:2442)
at new org.apache.flex.express.VContainer (VContainer.js:23)
at Function.org.apache.flex.utils.MXMLDataInterpreter.generateMXMLArray (MXMLDataInterpreter.js:123)
at Function.org.apache.flex.utils.MXMLDataInterpreter.generateMXMLInstances (MXMLDataInterpreter.js:260)
at org.apache.flex.express.View.org.apache.flex.core.ContainerBase.addedToParent (ContainerBase.js:173)
I tried this
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/express">
<js:initialView>
<js:VView>
<js:Label text="hello"/>
<js:Label text="world"/>
</js:VView>
</js:initialView>
</js:Application>
And it gave me the this HTML (which places them side by side). it’s being concisely wrong at least :-)
<div class="flexjs" style="display: block; position: relative;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none;">hello</span><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none;">world</span></div>
Thanks,
Justin
Re: [FlexJS] vertical layout not working with labels
Posted by Peter Ent <pe...@adobe.com>.
How about giving the Express package a whirl. Try the VView component
which packages up the vertical layout with data binding.
‹peter
On 2/7/17, 8:56 AM, "Harbs" <ha...@gmail.com> wrote:
>Same here.
>
>This is the HTML that it outputs (and they are stacked on top of each
>other):
>
><body class="Application">
> <script type="text/javascript">
> new test_project().start();
> </script><div class="flexjs" style="display: block; position: relative;
>width: 29px; height: 28px;"><div style="display: block; position:
>absolute; left: 0px; top: 0px; width: 29px; height: 28px;"><div
>style="position: relative; width: 29px; height: 28px; display:
>block;"><div style="display: block; position: absolute; left: 0px; top:
>0px; width: 29px;"><span class="Label" style="white-space: nowrap;
>cursor: default; pointer-events: none; display: block;">hello</span><span
>class="Label" style="white-space: nowrap; cursor: default;
>pointer-events: none; display:
>block;">world</span></div></div></div></div>
>
></body>
>
>> On Feb 7, 2017, at 3:49 PM, yishayw <yi...@hotmail.com> wrote:
>>
>> They're spans.
>>
>>
>>
>> --
>> View this message in context:
>>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-vertical-layo
>>ut-not-working-with-labels-tp59069p59085.html
>> Sent from the Apache Flex Development mailing list archive at
>>Nabble.com.
>
Re: [FlexJS] vertical layout not working with labels
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
Here you go https://issues.apache.org/jira/browse/FLEX-35258 <https://issues.apache.org/jira/browse/FLEX-35258>
Justin
Re: [FlexJS] vertical layout not working with labels
Posted by Alex Harui <ah...@adobe.com>.
Can you open a JIRA issue with the good and bad output? It was hard to
see in my email client.
-Alex
On 2/7/17, 5:35 PM, "Justin Mclean" <ju...@classsoftware.com> wrote:
>Hi,
>
>After a little more investigation this seems to an IntelliJ issue. I set
>it up as described here [1]. We might want to fix that or add a big red
>warning to that page. I guess it’s missing a compiler option or two?
>Anyone have an idea to what that may be? Look like these instructions
>also have the same issue [2]. Well for me at least anyway.
>
>I’m getting correct results when compiling with maven, so while not ideal
>setup it’s something I can work with.
>
>Thanks,
>Justin
>
>1.
>https://cwiki.apache.org/confluence/display/FLEX/Using+FlexJS+with+Intelli
>J+IDEA
><https://cwiki.apache.org/confluence/display/FLEX/Using+FlexJS+with+Intell
>iJ+IDEA>
>2.
>https://nextgenactionscript.com/tutorials/intellij-idea-apache-flexjs-tran
>spile-actionscript-setup/
><https://nextgenactionscript.com/tutorials/intellij-idea-apache-flexjs-tra
>nspile-actionscript-setup/>
>
Re: [FlexJS] vertical layout not working with labels
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
After a little more investigation this seems to an IntelliJ issue. I set it up as described here [1]. We might want to fix that or add a big red warning to that page. I guess it’s missing a compiler option or two? Anyone have an idea to what that may be? Look like these instructions also have the same issue [2]. Well for me at least anyway.
I’m getting correct results when compiling with maven, so while not ideal setup it’s something I can work with.
Thanks,
Justin
1. https://cwiki.apache.org/confluence/display/FLEX/Using+FlexJS+with+IntelliJ+IDEA <https://cwiki.apache.org/confluence/display/FLEX/Using+FlexJS+with+IntelliJ+IDEA>
2. https://nextgenactionscript.com/tutorials/intellij-idea-apache-flexjs-transpile-actionscript-setup/ <https://nextgenactionscript.com/tutorials/intellij-idea-apache-flexjs-transpile-actionscript-setup/>
RE: [FlexJS] vertical layout not working with labels
Posted by Jim Norris <ji...@e-work.com>.
Sorry all, this e-mail was sent to the incorrect address.
Thanks,
Jim Norris
-----Original Message-----
From: Jim Norris [mailto:jim.norris@e-work.com]
Sent: Tuesday, February 7, 2017 5:48 PM
To: dev@flex.apache.org
Subject: RE: [FlexJS] vertical layout not working with labels
It should be hidden from the user portal not the report.
-----Original Message-----
From: Justin Mclean [mailto:justin@classsoftware.com]
Sent: Tuesday, February 7, 2017 5:22 PM
To: dev@flex.apache.org
Subject: Re: [FlexJS] vertical layout not working with labels
Hi,
Thanks for that:
> <body class="Application">
> <script type="text/javascript">
> new test_project().start();
> </script><div class="flexjs" style="display: block; position: relative; width: 29px; height: 28px;"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 29px; height: 28px;"><div style="position: relative; width: 29px; height: 28px; display: block;"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 29px;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">hello</span><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">world</span></div></div></div></div>
>
> </body>
This is what I get. It seems to be missing the height and widths and has less divs. I’m using the nightly from 4 days ago.
<div class="flexjs" style="display: block; position: relative;"><div style="position: relative;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none;">hello</span><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none;">world</span></div></div>
Thanks,
Justin
RE: [FlexJS] vertical layout not working with labels
Posted by Jim Norris <ji...@e-work.com>.
It should be hidden from the user portal not the report.
-----Original Message-----
From: Justin Mclean [mailto:justin@classsoftware.com]
Sent: Tuesday, February 7, 2017 5:22 PM
To: dev@flex.apache.org
Subject: Re: [FlexJS] vertical layout not working with labels
Hi,
Thanks for that:
> <body class="Application">
> <script type="text/javascript">
> new test_project().start();
> </script><div class="flexjs" style="display: block; position: relative; width: 29px; height: 28px;"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 29px; height: 28px;"><div style="position: relative; width: 29px; height: 28px; display: block;"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 29px;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">hello</span><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">world</span></div></div></div></div>
>
> </body>
This is what I get. It seems to be missing the height and widths and has less divs. I’m using the nightly from 4 days ago.
<div class="flexjs" style="display: block; position: relative;"><div style="position: relative;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none;">hello</span><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none;">world</span></div></div>
Thanks,
Justin
Re: [FlexJS] vertical layout not working with labels
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
Thanks for that:
> <body class="Application">
> <script type="text/javascript">
> new test_project().start();
> </script><div class="flexjs" style="display: block; position: relative; width: 29px; height: 28px;"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 29px; height: 28px;"><div style="position: relative; width: 29px; height: 28px; display: block;"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 29px;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">hello</span><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">world</span></div></div></div></div>
>
> </body>
This is what I get. It seems to be missing the height and widths and has less divs. I’m using the nightly from 4 days ago.
<div class="flexjs" style="display: block; position: relative;"><div style="position: relative;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none;">hello</span><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none;">world</span></div></div>
Thanks,
Justin
Re: [FlexJS] vertical layout not working with labels
Posted by Harbs <ha...@gmail.com>.
Same here.
This is the HTML that it outputs (and they are stacked on top of each other):
<body class="Application">
<script type="text/javascript">
new test_project().start();
</script><div class="flexjs" style="display: block; position: relative; width: 29px; height: 28px;"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 29px; height: 28px;"><div style="position: relative; width: 29px; height: 28px; display: block;"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 29px;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">hello</span><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">world</span></div></div></div></div>
</body>
> On Feb 7, 2017, at 3:49 PM, yishayw <yi...@hotmail.com> wrote:
>
> They're spans.
>
>
>
> --
> View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-vertical-layout-not-working-with-labels-tp59069p59085.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] vertical layout not working with labels
Posted by yishayw <yi...@hotmail.com>.
They're spans.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-vertical-layout-not-working-with-labels-tp59069p59085.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] vertical layout not working with labels
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
Yes I did add:
<js:valuesImpl>
<js:SimpleCSSValuesImpl/>
</js:valuesImpl>
It doesn’t make any difference - the label are still positions horizontally. What’s the constructed HTML like are they spans or divs?
Thanks,
Justin
Re: [FlexJS] vertical layout not working with labels
Posted by yishayw <yi...@hotmail.com>.
Anyway, this [1] works for me.
[1] https://paste.apache.org/nWqq
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-vertical-layout-not-working-with-labels-tp59069p59082.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] vertical layout not working with labels
Posted by yishayw <yi...@hotmail.com>.
Hi Justin,
Did you check for console errors? It worked for me after adding:
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
to the application (which made some errors go away).
It'll be easier for me to reproduce your problem if you use [1] to paste the
code. It'll save formatting problems.
[1] paste.apache.org/
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-vertical-layout-not-working-with-labels-tp59069p59081.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.