royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <>
Subject Re: Working on UI Controls styling
Date Tue, 31 Oct 2017 19:50:11 GMT
Ugh,  Something has gone bad in the Basic components.  Things like
CheckBox and RadioButton should be creating simple <input type="check"/>
and <input type='radio' /> elements.

The ability to style everything belongs in a different set of components.
Basic is supposed to generate the simplest tree of HTMLElements even if
they can't be fully styles.  That's so someone can do the equivalent of
just using bare bones <input> elements.

What is currently in Basic CheckBox and RadioButton might be right for
creating fully styleable components, or some other composition of
HTMLElements might be better.  Carlos, I think that's up to you to decide.

An alternative approach is to have the JS implementations of CheckBox and
RadioButton have views and the views could create the HTMLElements.  That
seems a bit heavy for the simple case of someone who just wants to use
<input type="check" in an app, but that is a possibility.

It sounds like you are looking for a way to manipulate SVG at runtime.  It
is fine to have "static SVG" which is a block of SVG with that cannot be
modified and thus uses percentages and absolute values as best it can.
Then we probably want to have a way to create "dynamic" skins with run
code to generate or manipulate SVG.  Those will be heavier, but that's
PAYG.  Should we try to allow SVG tags in MXML files?  Then you could
write code in an fx:Script block around your SVG tags and manipulate the

So IMO first, we should look into reverting Basic back to single simple
HTMLElements where possible, then decide whether we want to have swappable
views or a new skinnable component set, then build out that component set
and see what code it takes to get it to look the way we want it.  And then
we'll know what code is needed and can plan out how to encapsulate and
re-use that code.

My 2 cents,

On 10/31/17, 11:23 AM, "Piotr Zarzycki" <> wrote:

>Hi Carlos,
>I think you should start looking into the Basic module and later make an
>upgrades to Express once you have all components visually created. I would
>not think on that stage about how we implement them rather look how they
>look like currently.
>1) Create small app or run example with that component from our
>2) Make it visually with theme
>3) Show on the dev list - once we agree on all of them we can decide how
>apply those styles.
>My 2 cents. :) Piotr
>2017-10-31 19:12 GMT+01:00 Carlos Rovira <>:
>> Hi,
>> I'm trying to find a valid workflow to start working in two initial
>> for Royale components.
>> I'm talking about to generate some kind of UI sheet with all controls
>>and a
>> basic wireframe style and another one that would be what more people
>> be using as default in Royale. From here, will be more easy to other
>> to change styles. We could event create a Royale Theme editor in a near
>> future.
>> So, to start working on this I need a design tool, and in this case, I
>> think that one is Sketch App.
>> So I can create a design in Sketch with all controls (Button, TextInput,
>> CheckBox, Panel,...)
>> From here, I can generate CSS and SVG code
>> For example the code of this simple button
>> that
>> I did quickly is:
>> CSS
>> /* Background: */
>> background: #D8D8D8;
>> border: 1px solid #979797;
>> border-radius: 3px;
>> /* TextField: */
>> font-family: HelveticaNeue;
>> font-size: 12px;
>> color: #646D7A;
>> (CSS is almost all usable)
>> And SVG
>> <svg width="150px" height="40px" viewBox="0 0 150 40" version="1.1"
>>     <!-- Generator: Sketch 47.1 (45422) -
>>oGVBONBD6Z1XMTjYcpEc7gq5UqtS8BziB0I3f9qSs%3D&reserved=0 -->
>>     <desc>Created with Sketch.</desc>
>>     <defs>
>>         <rect id="path-1" x="0" y="0" width="150" height="40"
>> rx="3"></rect>
>>     </defs>
>>     <g id="Page-1" stroke="none" stroke-width="1" fill="none"
>> fill-rule="evenodd">
>>         <g id="Royale" transform="translate(-58.000000, -49.000000)">
>>             <g id="Button" transform="translate(58.000000, 49.000000)">
>>                 <g id="Background">
>>                     <use fill="#D8D8D8" fill-rule="evenodd"
>> xlink:href="#path-1"></use>
>>                     <rect stroke="#979797" stroke-width="1" x="0.5"
>> width="149" height="39" rx="3"></rect>
>>                 </g>
>>                 <text id="TextField" font-family="HelveticaNeue,
>> Neue" font-size="12" font-weight="normal" fill="#646D7A">
>>                     <tspan x="57" y="25">Button</tspan>
>>                 </text>
>>             </g>
>>         </g>
>>     </g>
>> </svg>
>> (SVG could be a base, but it needs to be removed absolute values and
>> some static parts to be usable)
>> I'd like to create a Button "playground" app with a button and some
>> controls that allow us to change how the button looks (colors, strokes,
>> round corners, font face, font weight,....)
>> In the end this would be the starting point of a playground app for all
>> Royale controls
>> Finaly this would be very useful if we can get the generated code for
>> particular styles and we could apply easily to any app, so change a
>> will be quick and easy. Important: This will only work with our Royale
>> components (Express mainly, and maybe Basic?, but not MDL, CreateJS, or
>> others)
>> I'm as well interested in how we could integrate that "view" in some
>> component in order to easy replace visuals for a concrete component. For
>> example, in the button above will be
>> * we'll be making a skin part with SVG code, so we could pass values to
>> skin (for example colors, text button, width,...)
>> * if not using skins, how can we pass data from the component to the svg
>> part? (for example colors, text button, width,...)
>> To progress with this effort, I think I could start doing only two
>> controls, and then as we have all considerations in place progress
>> the rest.
>> Thoughts?
>> --
>> Carlos Rovira
>Piotr Zarzycki
>mobile: +48 880 859 557
>skype: zarzycki10

View raw message