You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Piotr Zarzycki <pi...@gmail.com> on 2017/10/19 20:02:56 UTC
[Royale|FlexJS] Questions about states
Hi Guys,
I'm trying to understand how states are working. I have simple code which
should actually work. I'm using latest FlexJS from develop - not Royale
yet. [1] Am I doing something wrong ?
Can someone shed some light how internally States are working ? I would
like to debug things, but not sure where to start.
I have to admit that DataBindingExample where states has been used working
fine in old FlexJS code and Royale.
[1] https://paste.apache.org/VBTs
Thanks,
Piotr
Re: [Royale|FlexJS] Questions about states
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Hi Yishay,
it seems that I've overlooked your repo.
Good idea and very helpful!!!
I'll also check out the states source code... hope
I'll understand the whole picture better.
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: [Royale|FlexJS] Questions about states
Posted by yishayw <yi...@hotmail.com>.
As Alex mentioned upthread there's nothing preventing you from controlling
visibility according to state.
This [1] is an example of how you can use states to control an attribute or
inclusion in DOM.
[1] https://github.com/yishayw/Examples/blob/States/views/MainView.mxml
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: [Royale|FlexJS] Questions about states
Posted by Piotr Zarzycki <pi...@gmail.com>.
Olaf,
Current states mechanism in Royale (FlexJS) do not manipulate visibility.
It's make components disappear from the DOM - I think this is good after
more thinking. That's what distinguish it from simple manipulation of
visibility.
Piotr
2017-10-24 0:41 GMT+02:00 Olaf Krueger <ma...@olafkrueger.net>:
>
> Regarding states I mean a minimal Implementation that just takes care about
> the visibility of related components in different UI states.
>
> Maybe my brain is completely resetted after the first 4 weeks on holiday
> and
> I am writing complete nonsense, sorry for this ;-)
>
> Olaf
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/
>
--
Piotr Zarzycki
mobile: +48 880 859 557
skype: zarzycki10
LinkedIn: http://www.linkedin.com/piotrzarzycki
<https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
GitHub: https://github.com/piotrzarzycki21
Re: [Royale|FlexJS] Questions about states
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Regarding states I mean a minimal Implementation that just takes care about
the visibility of related components in different UI states.
Maybe my brain is completely resetted after the first 4 weeks on holiday and
I am writing complete nonsense, sorry for this ;-)
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: [Royale|FlexJS] Questions about states
Posted by Piotr Zarzycki <pi...@gmail.com>.
Olaf,
Just one clarification question - If you would like to write states
behavior in pure CSS/JS the same working as in current FlexJS ? Is this
what you mean ?
Piotr
2017-10-24 0:29 GMT+02:00 Olaf Krueger <ma...@olafkrueger.net>:
> Hmmm.. it always seems to me that you are miles ahead cause you all already
> thought about so much stuff and how to implement it.
> So sometimes it's still a bit hard for me to follow and I am pretty sure
> that I always miss some things ;-)
>
> So I would like to ask a maybe basically question:
> When I'd like to implement something like states using pure CSS and JS my
> understanding is that I have to write some of JS code to change the related
> display or visibility CSS attributes of the related elements.
> This would be a bit cumbersome.
>
> In contrast to this the benefit of MXML is that it does this job for me by
> just declaring some states in combination to define which components are
> whithin which state, is that right?
>
> What I don't understand is your concern regarding performance.
> If somebody needs this feature and add some beads I would expect that on JS
> side less code as possible is generated to achive this.
> Any additional line of JS is expensive maybe, but there is no other way to
> realise a SPA... am I wrong?
>
> Thanks,
> Olaf
>
>
>
>
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/
>
--
Piotr Zarzycki
mobile: +48 880 859 557
skype: zarzycki10
LinkedIn: http://www.linkedin.com/piotrzarzycki
<https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
GitHub: https://github.com/piotrzarzycki21
Re: [Royale|FlexJS] Questions about states
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Hmmm.. it always seems to me that you are miles ahead cause you all already
thought about so much stuff and how to implement it.
So sometimes it's still a bit hard for me to follow and I am pretty sure
that I always miss some things ;-)
So I would like to ask a maybe basically question:
When I'd like to implement something like states using pure CSS and JS my
understanding is that I have to write some of JS code to change the related
display or visibility CSS attributes of the related elements.
This would be a bit cumbersome.
In contrast to this the benefit of MXML is that it does this job for me by
just declaring some states in combination to define which components are
whithin which state, is that right?
What I don't understand is your concern regarding performance.
If somebody needs this feature and add some beads I would expect that on JS
side less code as possible is generated to achive this.
Any additional line of JS is expensive maybe, but there is no other way to
realise a SPA... am I wrong?
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: [Royale|FlexJS] Questions about states
Posted by Alex Harui <ah...@adobe.com.INVALID>.
display:none is hooked up to the visible property. You can use states to
change the visible property. IncludeIn/ExcludeFrom should operate on the
DOM since there is no "property" that affects that.
We could introduce an "includeInLayout" property that affects
visibility:hidden, but I found that includeInLayout was abused in the past
and led to poor performance.
If you set the currentState to a non-existent state, the default
statesimpl should not have code to check for that since by the time you go
into production, you should have all of that worked out. We could provide
a debug-mode StateImpl that does check for valid inputs. Debug-mode beads
would be helpful in lots of cases.
-Alex
On 10/19/17, 2:23 PM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>>States removes element from DOM
>
>I wonder why Royale states removes element from DOM instead of using the
>CSS
>properties
>visibility:hidden; (The element is hidden but still take up the same
>place)
>or display:none (The element is hidden and take up no space);
>
>Does somebody know what is the benefit of removing elements from DOM vs
>the
>use of CSS?
>
>However, I think if Royale states are working in a similar way as in Flex
>this would be one more key feature of Royale.
>
>Thanks,
>Olaf
>
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-development.20373.n8.nabble.com%2F&data=02%7C01%7C%7C329fcc20a026465f7
>e7e08d51737b127%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6364404503298
>29149&sdata=4J9Q2htwS4ShLHzA4tUx1nt1loqy0UwitdO3vYCZadg%3D&reserved=0
Re: [Royale|FlexJS] Questions about states
Posted by Piotr Zarzycki <pi...@gmail.com>.
Hi Olaf,
Yes they are working and in my first simple tests they seems to be working
nicely with MDL module. I would not change their behavior in case of
removing. I would rather improve it using your suggestion.
1) If some element in state "X" wasn't display yet it should not exists in
the DOM - Current behavior
2) If some element got his state should appear - Current behavior
3) If state changed that element should stay as is in DOM, but disappear
from UI and do not take any space - Improvement
I believe that is how Flex's states works.
Piotr
2017-10-19 23:23 GMT+02:00 Olaf Krueger <ma...@olafkrueger.net>:
> >States removes element from DOM
>
> I wonder why Royale states removes element from DOM instead of using the
> CSS
> properties
> visibility:hidden; (The element is hidden but still take up the same place)
> or display:none (The element is hidden and take up no space);
>
> Does somebody know what is the benefit of removing elements from DOM vs the
> use of CSS?
>
> However, I think if Royale states are working in a similar way as in Flex
> this would be one more key feature of Royale.
>
> Thanks,
> Olaf
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/
>
--
Piotr Zarzycki
mobile: +48 880 859 557
skype: zarzycki10
LinkedIn: http://www.linkedin.com/piotrzarzycki
<https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
GitHub: https://github.com/piotrzarzycki21
Re: [Royale|FlexJS] Questions about states
Posted by Olaf Krueger <ma...@olafkrueger.net>.
>States removes element from DOM
I wonder why Royale states removes element from DOM instead of using the CSS
properties
visibility:hidden; (The element is hidden but still take up the same place)
or display:none (The element is hidden and take up no space);
Does somebody know what is the benefit of removing elements from DOM vs the
use of CSS?
However, I think if Royale states are working in a similar way as in Flex
this would be one more key feature of Royale.
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: [Royale|FlexJS] Questions about states
Posted by Piotr Zarzycki <pi...@gmail.com>.
States seems to be working nicely :) One question I accidentally assign to
currentState wrong state and my content just disappear. What actually
should happen in that case. In my opinion - Should be thrown an exception.
Thanks, Piotr
2017-10-19 22:23 GMT+02:00 Piotr Zarzycki <pi...@gmail.com>:
> Ahh! It was problem on my sight. In Application need to be declared "SimpleStatesImpl"
> [1]
>
> [1] https://paste.apache.org/HEDa
>
> Piotr
>
>
> 2017-10-19 22:14 GMT+02:00 Piotr Zarzycki <pi...@gmail.com>:
>
>> Harbs,
>>
>> States removes element from DOM, so this is very different than just
>> setting visible to false, but agree with you that the results for the user
>> is the same.
>>
>> Thanks for sharing your thoughts!
>>
>>
>> 2017-10-19 22:06 GMT+02:00 Harbs <ha...@gmail.com>:
>>
>>> States cause elements to be added and removed.
>>>
>>> FWIW, I have found little reason to use States in Royale because setting
>>> visible to false causes elements to take up no space. Hence I’ve never
>>> really spent time looking into them.
>>>
>>> Harbs
>>>
>>> > On Oct 19, 2017, at 11:02 PM, Piotr Zarzycki <
>>> piotrzarzycki21@gmail.com> wrote:
>>> >
>>> > Hi Guys,
>>> >
>>> > I'm trying to understand how states are working. I have simple code
>>> which
>>> > should actually work. I'm using latest FlexJS from develop - not Royale
>>> > yet. [1] Am I doing something wrong ?
>>> >
>>> > Can someone shed some light how internally States are working ? I would
>>> > like to debug things, but not sure where to start.
>>> >
>>> > I have to admit that DataBindingExample where states has been used
>>> working
>>> > fine in old FlexJS code and Royale.
>>> >
>>> > [1] https://paste.apache.org/VBTs
>>> >
>>> > Thanks,
>>> > Piotr
>>>
>>>
>>
>>
>> --
>>
>> Piotr Zarzycki
>>
>> mobile: +48 880 859 557 <+48%20880%20859%20557>
>> skype: zarzycki10
>>
>> LinkedIn: http://www.linkedin.com/piotrzarzycki
>> <https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
>>
>> GitHub: https://github.com/piotrzarzycki21
>>
>
>
>
> --
>
> Piotr Zarzycki
>
> mobile: +48 880 859 557 <+48%20880%20859%20557>
> skype: zarzycki10
>
> LinkedIn: http://www.linkedin.com/piotrzarzycki
> <https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
>
> GitHub: https://github.com/piotrzarzycki21
>
--
Piotr Zarzycki
mobile: +48 880 859 557
skype: zarzycki10
LinkedIn: http://www.linkedin.com/piotrzarzycki
<https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
GitHub: https://github.com/piotrzarzycki21
Re: [Royale|FlexJS] Questions about states
Posted by Piotr Zarzycki <pi...@gmail.com>.
Ahh! It was problem on my sight. In Application need to be declared
"SimpleStatesImpl"
[1]
[1] https://paste.apache.org/HEDa
Piotr
2017-10-19 22:14 GMT+02:00 Piotr Zarzycki <pi...@gmail.com>:
> Harbs,
>
> States removes element from DOM, so this is very different than just
> setting visible to false, but agree with you that the results for the user
> is the same.
>
> Thanks for sharing your thoughts!
>
>
> 2017-10-19 22:06 GMT+02:00 Harbs <ha...@gmail.com>:
>
>> States cause elements to be added and removed.
>>
>> FWIW, I have found little reason to use States in Royale because setting
>> visible to false causes elements to take up no space. Hence I’ve never
>> really spent time looking into them.
>>
>> Harbs
>>
>> > On Oct 19, 2017, at 11:02 PM, Piotr Zarzycki <pi...@gmail.com>
>> wrote:
>> >
>> > Hi Guys,
>> >
>> > I'm trying to understand how states are working. I have simple code
>> which
>> > should actually work. I'm using latest FlexJS from develop - not Royale
>> > yet. [1] Am I doing something wrong ?
>> >
>> > Can someone shed some light how internally States are working ? I would
>> > like to debug things, but not sure where to start.
>> >
>> > I have to admit that DataBindingExample where states has been used
>> working
>> > fine in old FlexJS code and Royale.
>> >
>> > [1] https://paste.apache.org/VBTs
>> >
>> > Thanks,
>> > Piotr
>>
>>
>
>
> --
>
> Piotr Zarzycki
>
> mobile: +48 880 859 557 <+48%20880%20859%20557>
> skype: zarzycki10
>
> LinkedIn: http://www.linkedin.com/piotrzarzycki
> <https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
>
> GitHub: https://github.com/piotrzarzycki21
>
--
Piotr Zarzycki
mobile: +48 880 859 557
skype: zarzycki10
LinkedIn: http://www.linkedin.com/piotrzarzycki
<https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
GitHub: https://github.com/piotrzarzycki21
Re: [Royale|FlexJS] Questions about states
Posted by Piotr Zarzycki <pi...@gmail.com>.
Harbs,
States removes element from DOM, so this is very different than just
setting visible to false, but agree with you that the results for the user
is the same.
Thanks for sharing your thoughts!
2017-10-19 22:06 GMT+02:00 Harbs <ha...@gmail.com>:
> States cause elements to be added and removed.
>
> FWIW, I have found little reason to use States in Royale because setting
> visible to false causes elements to take up no space. Hence I’ve never
> really spent time looking into them.
>
> Harbs
>
> > On Oct 19, 2017, at 11:02 PM, Piotr Zarzycki <pi...@gmail.com>
> wrote:
> >
> > Hi Guys,
> >
> > I'm trying to understand how states are working. I have simple code which
> > should actually work. I'm using latest FlexJS from develop - not Royale
> > yet. [1] Am I doing something wrong ?
> >
> > Can someone shed some light how internally States are working ? I would
> > like to debug things, but not sure where to start.
> >
> > I have to admit that DataBindingExample where states has been used
> working
> > fine in old FlexJS code and Royale.
> >
> > [1] https://paste.apache.org/VBTs
> >
> > Thanks,
> > Piotr
>
>
--
Piotr Zarzycki
mobile: +48 880 859 557
skype: zarzycki10
LinkedIn: http://www.linkedin.com/piotrzarzycki
<https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
GitHub: https://github.com/piotrzarzycki21
Re: [Royale|FlexJS] Questions about states
Posted by Harbs <ha...@gmail.com>.
States cause elements to be added and removed.
FWIW, I have found little reason to use States in Royale because setting visible to false causes elements to take up no space. Hence I’ve never really spent time looking into them.
Harbs
> On Oct 19, 2017, at 11:02 PM, Piotr Zarzycki <pi...@gmail.com> wrote:
>
> Hi Guys,
>
> I'm trying to understand how states are working. I have simple code which
> should actually work. I'm using latest FlexJS from develop - not Royale
> yet. [1] Am I doing something wrong ?
>
> Can someone shed some light how internally States are working ? I would
> like to debug things, but not sure where to start.
>
> I have to admit that DataBindingExample where states has been used working
> fine in old FlexJS code and Royale.
>
> [1] https://paste.apache.org/VBTs
>
> Thanks,
> Piotr
Re: [Royale|FlexJS] Questions about states
Posted by Olaf Krueger <ma...@olafkrueger.net>.
I also think that for now HTML, CSS, JS should be the focus...
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: [Royale|FlexJS] Questions about states
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Peter,
I think you are right. Main need is to get AS3/MXML producing great
HTML/JS/CSS, and SWF right now is in second place.
I think it could be great to demonstrate that we can generate more outputs,
but maybe WebASM, swift (iOS) and Java (Android) could be great outputs as
well. But for this to happen I think we need first to get more people join
us, so I 'd concentrate in get 1.0 with stable HTML/JS/CSS that could let
us do a full application. I just talked about this in other thread, but for
me is to get Forms /validation working good and having a good looking theme
(this implies not only art but a theme infrastructure in Royale).
we need to show people that some demos that looks good and make as easy as
we can try us to convince people to try and join, and his final experience
will be good in order to join, so SWF for me is not priority right now.
Thanks
2017-10-23 15:36 GMT+02:00 Peter Ent <pe...@adobe.com.invalid>:
> I've been debating whether or not to send this, but given this discussion,
> I think it is appropriate.
>
> It is still unclear to me whether or not we code Royale with the priority
> on HTML/JS/CSS platform or SWF. Alex and I have talked about this and
> primarily the rule is: make it work for HTML/JS/CSS as best as possible
> and then get the SWF version to work.
>
> This is why layouts are pretty lightweight on the JS side because the
> browser takes care of things. Not too long ago I made changes to the
> layouts to use Flexbox[1] and then made the SWF side work similarly
> (although without all of the Flexbox abilities).
>
> When you want to introduce something like "includeInLayout", it is not
> natural to the browser platform. There is not a way - that I know of - to
> tell the browser that a particular element should be displayed but not
> counted in the layout process. A property like includeInLayout seems as if
> it would go all the way down to the UIBase class level which implies that
> all layouts would support it. And that means layouts would have to be
> completely algorithmic on the browser, bypassing the browser's layout
> mechanisms and potentially slowing down the app and increasing the size of
> the download - definitely not PAYG.
>
> The PAYG way would be to introduce an IncludeInLayoutBead bead and then
> add VerticalLayoutSupportingIncludeInLayout,
> HorizontalLayoutSupportingIncludeInLayout and so forth. You'll note that
> to use states requires SimpleStatesImpl since not all apps will use states.
>
> If I am wrong about being able to display an element and getting the
> browser to ignore it for layout, then my point here is moot. I suppose a
> CSS float might suffice, but I think that may not get what is really
> desired.
>
> ‹peter
>
> [1] You can argue, fairly easily, that not all browsers still fully
> implement Flexbox and some browsers have trouble with complex or nesting
> Flexbox. So perhaps Flexbox wasn't a best choice in all circumstances. But
> the point was to get more mileage out of the browser and keep the download
> small.
>
> On 10/19/17, 4:02 PM, "Piotr Zarzycki" <pi...@gmail.com> wrote:
>
> >Hi Guys,
> >
> >I'm trying to understand how states are working. I have simple code which
> >should actually work. I'm using latest FlexJS from develop - not Royale
> >yet. [1] Am I doing something wrong ?
> >
> >Can someone shed some light how internally States are working ? I would
> >like to debug things, but not sure where to start.
> >
> >I have to admit that DataBindingExample where states has been used working
> >fine in old FlexJS code and Royale.
> >
> >[1]
> >https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fpaste.apa
> >che.org%2FVBTs&data=02%7C01%7C%7Ccdb0ded139084900f09b08d5172c
> 674a%7Cfa7b1b
> >5a7b34438794aed2c178decee1%7C0%7C0%7C636440401835413777&
> sdata=fDTsTEb9iVGb
> >Y2BqsAElhSm7ZrO%2Bb4%2FQa5Oy1ukX%2BH0%3D&reserved=0
> >
> >Thanks,
> >Piotr
>
>
--
<http://www.codeoscopic.com>
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
Conocenos Avant2 en 1 minuto! <https://avant2.es/#video>
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: [Royale|FlexJS] Questions about states
Posted by Peter Ent <pe...@adobe.com.INVALID>.
I've been debating whether or not to send this, but given this discussion,
I think it is appropriate.
It is still unclear to me whether or not we code Royale with the priority
on HTML/JS/CSS platform or SWF. Alex and I have talked about this and
primarily the rule is: make it work for HTML/JS/CSS as best as possible
and then get the SWF version to work.
This is why layouts are pretty lightweight on the JS side because the
browser takes care of things. Not too long ago I made changes to the
layouts to use Flexbox[1] and then made the SWF side work similarly
(although without all of the Flexbox abilities).
When you want to introduce something like "includeInLayout", it is not
natural to the browser platform. There is not a way - that I know of - to
tell the browser that a particular element should be displayed but not
counted in the layout process. A property like includeInLayout seems as if
it would go all the way down to the UIBase class level which implies that
all layouts would support it. And that means layouts would have to be
completely algorithmic on the browser, bypassing the browser's layout
mechanisms and potentially slowing down the app and increasing the size of
the download - definitely not PAYG.
The PAYG way would be to introduce an IncludeInLayoutBead bead and then
add VerticalLayoutSupportingIncludeInLayout,
HorizontalLayoutSupportingIncludeInLayout and so forth. You'll note that
to use states requires SimpleStatesImpl since not all apps will use states.
If I am wrong about being able to display an element and getting the
browser to ignore it for layout, then my point here is moot. I suppose a
CSS float might suffice, but I think that may not get what is really
desired.
‹peter
[1] You can argue, fairly easily, that not all browsers still fully
implement Flexbox and some browsers have trouble with complex or nesting
Flexbox. So perhaps Flexbox wasn't a best choice in all circumstances. But
the point was to get more mileage out of the browser and keep the download
small.
On 10/19/17, 4:02 PM, "Piotr Zarzycki" <pi...@gmail.com> wrote:
>Hi Guys,
>
>I'm trying to understand how states are working. I have simple code which
>should actually work. I'm using latest FlexJS from develop - not Royale
>yet. [1] Am I doing something wrong ?
>
>Can someone shed some light how internally States are working ? I would
>like to debug things, but not sure where to start.
>
>I have to admit that DataBindingExample where states has been used working
>fine in old FlexJS code and Royale.
>
>[1]
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fpaste.apa
>che.org%2FVBTs&data=02%7C01%7C%7Ccdb0ded139084900f09b08d5172c674a%7Cfa7b1b
>5a7b34438794aed2c178decee1%7C0%7C0%7C636440401835413777&sdata=fDTsTEb9iVGb
>Y2BqsAElhSm7ZrO%2Bb4%2FQa5Oy1ukX%2BH0%3D&reserved=0
>
>Thanks,
>Piotr