You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Harbs <ha...@gmail.com> on 2017/10/25 10:14:12 UTC
Styling express components
I’m trying to figure out the best way to make it easier to declare styling for express components.
Right now, I know of three ways to set styling:
1. Using class names in css blocks
2. programmatically setting the values when the component is initialized
3. using js:style mxml blocks and declaring some kind of stlye object in that.
None of these options are as easy as what we had in Flex.
In Flex, you could just declare the styling options as attributes of the main tag. Even option #3 is problematic because it makes it too easy to swap out the style object defined in the component, so BindableCSSStyles might be replaced with the non-bindable version by mistake.
One option is that we can add getters and setters for the styles that Flex supported natively. That would use whatever CSS object is created by default, and support simple declarations in the main tags.
Another option would be to add a new setter which takes an object of any type and for-ins the object to insert the values into the default styles object in the component.
One variation on the first option is to create a new “styleable” component set which has a large gamut of style-able proprties (and possibly a better skinning story). Maybe express could be middleweight components and “styleable” or “skinnable” would be a heavier-weight component set which would be closer to Flex components.
Thoughts?
Harbs
Re: Styling express components
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi,
this thread is about styles per component? or are you considering to
customize all components at once?
If the later is considered too in Flex we had the theme feature. In that
case we made a separate project with all css styles and skins and could set
in application a "theme" property.
Switching between themes was a breeze, and is what I expect to have in
Royale some day, and would love to contribute joining efforts with someone
that wants to make this a reality.
2017-10-25 12:32 GMT+02:00 Piotr Zarzycki <pi...@gmail.com>:
> Hi Harbs,
>
> My first thought when you are saying that maybe component could support css
> properties and we could use it - It's like back to the Flex 3, where Button
> has multiple properties for styling them self. Later were Flex 4 which
> brings some order by skinning. In my opinion we should not go to that path,
> but somewhere in the middle is your idea with having property, which takes
> styling - going that way we can end up with one small change in the API.
>
> Piotr
>
>
> 2017-10-25 12:14 GMT+02:00 Harbs <ha...@gmail.com>:
>
> > I’m trying to figure out the best way to make it easier to declare
> styling
> > for express components.
> >
> > Right now, I know of three ways to set styling:
> > 1. Using class names in css blocks
> > 2. programmatically setting the values when the component is initialized
> > 3. using js:style mxml blocks and declaring some kind of stlye object in
> > that.
> >
> > None of these options are as easy as what we had in Flex.
> >
> > In Flex, you could just declare the styling options as attributes of the
> > main tag. Even option #3 is problematic because it makes it too easy to
> > swap out the style object defined in the component, so BindableCSSStyles
> > might be replaced with the non-bindable version by mistake.
> >
> > One option is that we can add getters and setters for the styles that
> Flex
> > supported natively. That would use whatever CSS object is created by
> > default, and support simple declarations in the main tags.
> >
> > Another option would be to add a new setter which takes an object of any
> > type and for-ins the object to insert the values into the default styles
> > object in the component.
> >
> > One variation on the first option is to create a new “styleable”
> component
> > set which has a large gamut of style-able proprties (and possibly a
> better
> > skinning story). Maybe express could be middleweight components and
> > “styleable” or “skinnable” would be a heavier-weight component set which
> > would be closer to Flex components.
> >
> > Thoughts?
> >
> > Harbs
>
>
>
>
> --
>
> 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
>
--
<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: Styling express components
Posted by Piotr Zarzycki <pi...@gmail.com>.
Hi Harbs,
My first thought when you are saying that maybe component could support css
properties and we could use it - It's like back to the Flex 3, where Button
has multiple properties for styling them self. Later were Flex 4 which
brings some order by skinning. In my opinion we should not go to that path,
but somewhere in the middle is your idea with having property, which takes
styling - going that way we can end up with one small change in the API.
Piotr
2017-10-25 12:14 GMT+02:00 Harbs <ha...@gmail.com>:
> I’m trying to figure out the best way to make it easier to declare styling
> for express components.
>
> Right now, I know of three ways to set styling:
> 1. Using class names in css blocks
> 2. programmatically setting the values when the component is initialized
> 3. using js:style mxml blocks and declaring some kind of stlye object in
> that.
>
> None of these options are as easy as what we had in Flex.
>
> In Flex, you could just declare the styling options as attributes of the
> main tag. Even option #3 is problematic because it makes it too easy to
> swap out the style object defined in the component, so BindableCSSStyles
> might be replaced with the non-bindable version by mistake.
>
> One option is that we can add getters and setters for the styles that Flex
> supported natively. That would use whatever CSS object is created by
> default, and support simple declarations in the main tags.
>
> Another option would be to add a new setter which takes an object of any
> type and for-ins the object to insert the values into the default styles
> object in the component.
>
> One variation on the first option is to create a new “styleable” component
> set which has a large gamut of style-able proprties (and possibly a better
> skinning story). Maybe express could be middleweight components and
> “styleable” or “skinnable” would be a heavier-weight component set which
> would be closer to Flex components.
>
> Thoughts?
>
> Harbs
--
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: Styling express components
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Ah, sorry. I didn't realize that. It looks like we are using
AllCSSValuesImpl in Express? It could have its parseStyles parse into a
BindableCSSStyles.
-Alex
On 10/25/17, 1:34 PM, "Harbs" <ha...@gmail.com> wrote:
>Right. My point is that Express creates a BindableCSSStyles object in the
>constructor. That’s useful for folks who expect to be able to change
>style properties at runtime.
>
>I’m looking for an easy was to specify styles i a component *without*
>overwriting the default BindableCSSStyles.
>
>> On Oct 25, 2017, at 10:35 PM, Alex Harui <ah...@adobe.com.INVALID>
>>wrote:
>>
>> IIRC, a UIBase style property is either declared as a string or as a
>>style
>> object like BindableCSSStyles. If declared as a string,
>> SimpleCSSValuesImpl will parse the string into an object. The only
>> reasons for SimpleCSSStyles is to save the time parsing the strings and
>> have the compiler and IDEs catch errors early. BindableCSSStyles
>>provides
>> change events.
>>
>> HTH,
>> -Alex
>>
>> On 10/25/17, 10:31 AM, "Harbs" <ha...@gmail.com> wrote:
>>
>>> I have used that, but I forgot to include it.
>>>
>>> How does that work? Is the declared style object preserved (i.e.
>>> BindableCSSStyles) when declaring the style as a string?
>>>
>>>> On Oct 25, 2017, at 8:13 PM, Alex Harui <ah...@adobe.com.INVALID>
>>>> wrote:
>>>>
>>>> There is a fourth, which is to declare styles as in HTML:
>>>>
>>>> <js:SomeComponent style="fontWeight:bold; fontStyle:italic" />
>>>>
>>>> There should be some usage of it in RoyaleStore.
>>>>
>>>> We could fatten the API surface of Express to populate every CSS style
>>>> onto the components, but IMO, it gets nasty when you want to allow for
>>>> non-standard/browser-specific styles (--moz-xxx). So, that's why, at
>>>> least for now, Royale does not put styles in the APIs.
>>>>
>>>> It would be cool if the newer IDEs would help check for mis-spellings
>>>> and
>>>> invalid values in that HTML-like style syntax.
>>>>
>>>> HTH,
>>>> -Alex
>>>>
>>>> On 10/25/17, 3:14 AM, "Harbs" <ha...@gmail.com> wrote:
>>>>
>>>>> I’m trying to figure out the best way to make it easier to declare
>>>>> styling for express components.
>>>>>
>>>>> Right now, I know of three ways to set styling:
>>>>> 1. Using class names in css blocks
>>>>> 2. programmatically setting the values when the component is
>>>>> initialized
>>>>> 3. using js:style mxml blocks and declaring some kind of stlye object
>>>>> in
>>>>> that.
>>>>>
>>>>> None of these options are as easy as what we had in Flex.
>>>>>
>>>>> In Flex, you could just declare the styling options as attributes of
>>>>> the
>>>>> main tag. Even option #3 is problematic because it makes it too easy
>>>>>to
>>>>> swap out the style object defined in the component, so
>>>>> BindableCSSStyles
>>>>> might be replaced with the non-bindable version by mistake.
>>>>>
>>>>> One option is that we can add getters and setters for the styles that
>>>>> Flex supported natively. That would use whatever CSS object is
>>>>>created
>>>>> by
>>>>> default, and support simple declarations in the main tags.
>>>>>
>>>>> Another option would be to add a new setter which takes an object of
>>>>> any
>>>>> type and for-ins the object to insert the values into the default
>>>>> styles
>>>>> object in the component.
>>>>>
>>>>> One variation on the first option is to create a new “styleable”
>>>>> component set which has a large gamut of style-able proprties (and
>>>>> possibly a better skinning story). Maybe express could be
>>>>>middleweight
>>>>> components and “styleable” or “skinnable” would be a heavier-weight
>>>>> component set which would be closer to Flex components.
>>>>>
>>>>> Thoughts?
>>>>>
>>>>> Harbs
>>>>
>>>
>>
>
Re: Styling express components
Posted by Harbs <ha...@gmail.com>.
Right. My point is that Express creates a BindableCSSStyles object in the constructor. That’s useful for folks who expect to be able to change style properties at runtime.
I’m looking for an easy was to specify styles i a component *without* overwriting the default BindableCSSStyles.
> On Oct 25, 2017, at 10:35 PM, Alex Harui <ah...@adobe.com.INVALID> wrote:
>
> IIRC, a UIBase style property is either declared as a string or as a style
> object like BindableCSSStyles. If declared as a string,
> SimpleCSSValuesImpl will parse the string into an object. The only
> reasons for SimpleCSSStyles is to save the time parsing the strings and
> have the compiler and IDEs catch errors early. BindableCSSStyles provides
> change events.
>
> HTH,
> -Alex
>
> On 10/25/17, 10:31 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> I have used that, but I forgot to include it.
>>
>> How does that work? Is the declared style object preserved (i.e.
>> BindableCSSStyles) when declaring the style as a string?
>>
>>> On Oct 25, 2017, at 8:13 PM, Alex Harui <ah...@adobe.com.INVALID>
>>> wrote:
>>>
>>> There is a fourth, which is to declare styles as in HTML:
>>>
>>> <js:SomeComponent style="fontWeight:bold; fontStyle:italic" />
>>>
>>> There should be some usage of it in RoyaleStore.
>>>
>>> We could fatten the API surface of Express to populate every CSS style
>>> onto the components, but IMO, it gets nasty when you want to allow for
>>> non-standard/browser-specific styles (--moz-xxx). So, that's why, at
>>> least for now, Royale does not put styles in the APIs.
>>>
>>> It would be cool if the newer IDEs would help check for mis-spellings
>>> and
>>> invalid values in that HTML-like style syntax.
>>>
>>> HTH,
>>> -Alex
>>>
>>> On 10/25/17, 3:14 AM, "Harbs" <ha...@gmail.com> wrote:
>>>
>>>> I’m trying to figure out the best way to make it easier to declare
>>>> styling for express components.
>>>>
>>>> Right now, I know of three ways to set styling:
>>>> 1. Using class names in css blocks
>>>> 2. programmatically setting the values when the component is
>>>> initialized
>>>> 3. using js:style mxml blocks and declaring some kind of stlye object
>>>> in
>>>> that.
>>>>
>>>> None of these options are as easy as what we had in Flex.
>>>>
>>>> In Flex, you could just declare the styling options as attributes of
>>>> the
>>>> main tag. Even option #3 is problematic because it makes it too easy to
>>>> swap out the style object defined in the component, so
>>>> BindableCSSStyles
>>>> might be replaced with the non-bindable version by mistake.
>>>>
>>>> One option is that we can add getters and setters for the styles that
>>>> Flex supported natively. That would use whatever CSS object is created
>>>> by
>>>> default, and support simple declarations in the main tags.
>>>>
>>>> Another option would be to add a new setter which takes an object of
>>>> any
>>>> type and for-ins the object to insert the values into the default
>>>> styles
>>>> object in the component.
>>>>
>>>> One variation on the first option is to create a new “styleable”
>>>> component set which has a large gamut of style-able proprties (and
>>>> possibly a better skinning story). Maybe express could be middleweight
>>>> components and “styleable” or “skinnable” would be a heavier-weight
>>>> component set which would be closer to Flex components.
>>>>
>>>> Thoughts?
>>>>
>>>> Harbs
>>>
>>
>
Re: Styling express components
Posted by Alex Harui <ah...@adobe.com.INVALID>.
IIRC, a UIBase style property is either declared as a string or as a style
object like BindableCSSStyles. If declared as a string,
SimpleCSSValuesImpl will parse the string into an object. The only
reasons for SimpleCSSStyles is to save the time parsing the strings and
have the compiler and IDEs catch errors early. BindableCSSStyles provides
change events.
HTH,
-Alex
On 10/25/17, 10:31 AM, "Harbs" <ha...@gmail.com> wrote:
>I have used that, but I forgot to include it.
>
>How does that work? Is the declared style object preserved (i.e.
>BindableCSSStyles) when declaring the style as a string?
>
>> On Oct 25, 2017, at 8:13 PM, Alex Harui <ah...@adobe.com.INVALID>
>>wrote:
>>
>> There is a fourth, which is to declare styles as in HTML:
>>
>> <js:SomeComponent style="fontWeight:bold; fontStyle:italic" />
>>
>> There should be some usage of it in RoyaleStore.
>>
>> We could fatten the API surface of Express to populate every CSS style
>> onto the components, but IMO, it gets nasty when you want to allow for
>> non-standard/browser-specific styles (--moz-xxx). So, that's why, at
>> least for now, Royale does not put styles in the APIs.
>>
>> It would be cool if the newer IDEs would help check for mis-spellings
>>and
>> invalid values in that HTML-like style syntax.
>>
>> HTH,
>> -Alex
>>
>> On 10/25/17, 3:14 AM, "Harbs" <ha...@gmail.com> wrote:
>>
>>> I’m trying to figure out the best way to make it easier to declare
>>> styling for express components.
>>>
>>> Right now, I know of three ways to set styling:
>>> 1. Using class names in css blocks
>>> 2. programmatically setting the values when the component is
>>>initialized
>>> 3. using js:style mxml blocks and declaring some kind of stlye object
>>>in
>>> that.
>>>
>>> None of these options are as easy as what we had in Flex.
>>>
>>> In Flex, you could just declare the styling options as attributes of
>>>the
>>> main tag. Even option #3 is problematic because it makes it too easy to
>>> swap out the style object defined in the component, so
>>>BindableCSSStyles
>>> might be replaced with the non-bindable version by mistake.
>>>
>>> One option is that we can add getters and setters for the styles that
>>> Flex supported natively. That would use whatever CSS object is created
>>>by
>>> default, and support simple declarations in the main tags.
>>>
>>> Another option would be to add a new setter which takes an object of
>>>any
>>> type and for-ins the object to insert the values into the default
>>>styles
>>> object in the component.
>>>
>>> One variation on the first option is to create a new “styleable”
>>> component set which has a large gamut of style-able proprties (and
>>> possibly a better skinning story). Maybe express could be middleweight
>>> components and “styleable” or “skinnable” would be a heavier-weight
>>> component set which would be closer to Flex components.
>>>
>>> Thoughts?
>>>
>>> Harbs
>>
>
Re: Styling express components
Posted by Harbs <ha...@gmail.com>.
I have used that, but I forgot to include it.
How does that work? Is the declared style object preserved (i.e. BindableCSSStyles) when declaring the style as a string?
> On Oct 25, 2017, at 8:13 PM, Alex Harui <ah...@adobe.com.INVALID> wrote:
>
> There is a fourth, which is to declare styles as in HTML:
>
> <js:SomeComponent style="fontWeight:bold; fontStyle:italic" />
>
> There should be some usage of it in RoyaleStore.
>
> We could fatten the API surface of Express to populate every CSS style
> onto the components, but IMO, it gets nasty when you want to allow for
> non-standard/browser-specific styles (--moz-xxx). So, that's why, at
> least for now, Royale does not put styles in the APIs.
>
> It would be cool if the newer IDEs would help check for mis-spellings and
> invalid values in that HTML-like style syntax.
>
> HTH,
> -Alex
>
> On 10/25/17, 3:14 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> I’m trying to figure out the best way to make it easier to declare
>> styling for express components.
>>
>> Right now, I know of three ways to set styling:
>> 1. Using class names in css blocks
>> 2. programmatically setting the values when the component is initialized
>> 3. using js:style mxml blocks and declaring some kind of stlye object in
>> that.
>>
>> None of these options are as easy as what we had in Flex.
>>
>> In Flex, you could just declare the styling options as attributes of the
>> main tag. Even option #3 is problematic because it makes it too easy to
>> swap out the style object defined in the component, so BindableCSSStyles
>> might be replaced with the non-bindable version by mistake.
>>
>> One option is that we can add getters and setters for the styles that
>> Flex supported natively. That would use whatever CSS object is created by
>> default, and support simple declarations in the main tags.
>>
>> Another option would be to add a new setter which takes an object of any
>> type and for-ins the object to insert the values into the default styles
>> object in the component.
>>
>> One variation on the first option is to create a new “styleable”
>> component set which has a large gamut of style-able proprties (and
>> possibly a better skinning story). Maybe express could be middleweight
>> components and “styleable” or “skinnable” would be a heavier-weight
>> component set which would be closer to Flex components.
>>
>> Thoughts?
>>
>> Harbs
>
Re: Styling express components
Posted by Alex Harui <ah...@adobe.com.INVALID>.
There is a fourth, which is to declare styles as in HTML:
<js:SomeComponent style="fontWeight:bold; fontStyle:italic" />
There should be some usage of it in RoyaleStore.
We could fatten the API surface of Express to populate every CSS style
onto the components, but IMO, it gets nasty when you want to allow for
non-standard/browser-specific styles (--moz-xxx). So, that's why, at
least for now, Royale does not put styles in the APIs.
It would be cool if the newer IDEs would help check for mis-spellings and
invalid values in that HTML-like style syntax.
HTH,
-Alex
On 10/25/17, 3:14 AM, "Harbs" <ha...@gmail.com> wrote:
>I’m trying to figure out the best way to make it easier to declare
>styling for express components.
>
>Right now, I know of three ways to set styling:
>1. Using class names in css blocks
>2. programmatically setting the values when the component is initialized
>3. using js:style mxml blocks and declaring some kind of stlye object in
>that.
>
>None of these options are as easy as what we had in Flex.
>
>In Flex, you could just declare the styling options as attributes of the
>main tag. Even option #3 is problematic because it makes it too easy to
>swap out the style object defined in the component, so BindableCSSStyles
>might be replaced with the non-bindable version by mistake.
>
>One option is that we can add getters and setters for the styles that
>Flex supported natively. That would use whatever CSS object is created by
>default, and support simple declarations in the main tags.
>
>Another option would be to add a new setter which takes an object of any
>type and for-ins the object to insert the values into the default styles
>object in the component.
>
>One variation on the first option is to create a new “styleable”
>component set which has a large gamut of style-able proprties (and
>possibly a better skinning story). Maybe express could be middleweight
>components and “styleable” or “skinnable” would be a heavier-weight
>component set which would be closer to Flex components.
>
>Thoughts?
>
>Harbs