royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Harbs <harbs.li...@gmail.com>
Subject Re: Working on UI Controls styling
Date Wed, 01 Nov 2017 13:16:08 GMT
You can also use a GraphicShape class and set the element to any random SVG. This would work
as long as you don’t need access to the SVG structure using normal Royale methods.

Harbs

> On Nov 1, 2017, at 3:12 PM, Harbs <harbs.lists@gmail.com> wrote:
> 
> We also have an SVG package. Look in Basic org/apache/royale/svg.
> 
> It might make sense to pull the SVG classes out into its own project.
> 
> The current implementation of SVG wraps each element in a separate svh element, so you
get lots of nested SVG elements. We considered adding raw non-wrapped SVG elements, but that
has not happened yet.
> 
> There are drawing commands similar to the Flash Graphics APIs. The drawing APIs work
a bit different though. There is a PathBuilder class which abstracts a lot of things, but
some classes have similar APIs like drawRect, drawRoundedRect, etc.
> 
> Check out CompoundGraphic and PathBuilder. PathBuilder has APIs that mimic Flash Graphic
very closely and can be used with SVG and theoretically Canvas.
> 
> HTH,
> Harbs
> 
>> On Nov 1, 2017, at 3:00 PM, Harbs <harbs.lists@gmail.com> wrote:
>> 
>> <js:ImageButton click="flipHorizontally()" src="assets/images/icons/0896-flip-horizontal2.svg"/>
>> <js:ImageButton click="flipVertically()" src="assets/images/icons/0897-flip-vertical2.svg"/>
>> 
>> 
>>> On Nov 1, 2017, at 2:45 PM, Carlos Rovira <carlos.rovira@codeoscopic.com>
wrote:
>>> 
>>> Hi Harbs,
>>> 
>>> could you post some basic snippet for this to look at your approach?
>>> 
>>> Thanks!
>>> 
>>> 2017-11-01 13:42 GMT+01:00 Harbs <harbs.lists@gmail.com>:
>>> 
>>>> You can use SVG files instead of PNG files. I’m doing that extensively
in
>>>> my app, but that will only work for components which have src or
>>>> background-image.
>>>> 
>>>>> On Nov 1, 2017, at 2:14 PM, Carlos Rovira <carlosrovira@apache.org>
>>>> wrote:
>>>>> 
>>>>> Hi,
>>>>> 
>>>>> I started a new project as Piotr suggested. After setup I only put one
>>>>> single button to start figuring how to do this.
>>>>> 
>>>>> I'm starting for now with Basic, but as we discussed, don't know if this
>>>>> should go directly to express or not...it seems like something we could
>>>>> plug into Basic at any time as we can plug beads, and Express will come
>>>>> with some theme bundled. That seem the most natural for me right now
>>>>> 
>>>>> Setting up a CSS-only theme seems pretty straight forward for me, and
I
>>>>> could go with it for now.
>>>>> 
>>>>> Regarding SVG, right now I don't see the way to add SVG in Royale. As
>>>> Alex
>>>>> suggested, I think we need to be able to add SVG in MXML.
>>>>> I was looking at this topic and seems very powerful since it can be
>>>>> integrated with CSS as well and in HTML
>>>>> 
>>>>> For Example we have: https://css-tricks.com/using-svg/
>>>>> 
>>>>> Maybe I could start with only CSS and see how far I can go, making
>>>>> wireframe and royale themes, as well trying with PNG images to
>>>> complement,
>>>>> but I suppose I'll get stuck soon, so maybe we should talk about SVG
>>>>> support as well and how hard it would be to make it happen in Royale.
As
>>>>> well if you know other ways to integrate SVG right now please let me
know
>>>>> 
>>>>> Thanks
>>>>> 
>>>>> 
>>>>> 
>>>>> 
>>>>> 2017-10-31 21:31 GMT+01:00 Piotr Zarzycki <piotrzarzycki21@gmail.com>:
>>>>> 
>>>>>> I can say at this point that I really like idea with swappable view.
In
>>>>>> most cases view is an ActionScript class where we may have more
>>>> possibility
>>>>>> to do things. When I was looking last time into the checkbox it for
sure
>>>>>> need to more love, some part of the logic should be moved to the
View.
>>>>>> 
>>>>>> Piotr
>>>>>> 
>>>>>> 2017-10-31 20:50 GMT+01:00 Alex Harui <aharui@adobe.com.invalid>:
>>>>>> 
>>>>>>> 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
>>>>>>> SVG?
>>>>>>> 
>>>>>>> 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,
>>>>>>> -Alex
>>>>>>> 
>>>>>>> On 10/31/17, 11:23 AM, "Piotr Zarzycki" <piotrzarzycki21@gmail.com>
>>>>>> 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
>>>>>>>> repository.
>>>>>>>> 2) Make it visually with theme
>>>>>>>> 3) Show on the dev list - once we agree on all of them we
can decide
>>>> how
>>>>>>>> to
>>>>>>>> apply those styles.
>>>>>>>> 
>>>>>>>> My 2 cents. :) Piotr
>>>>>>>> 
>>>>>>>> 
>>>>>>>> 2017-10-31 19:12 GMT+01:00 Carlos Rovira <carlosrovira@apache.org>:
>>>>>>>> 
>>>>>>>>> Hi,
>>>>>>>>> 
>>>>>>>>> I'm trying to find a valid workflow to start working
in two initial
>>>>>>>>> faces
>>>>>>>>> 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
>>>>>>>>> will
>>>>>>>>> be using as default in Royale. From here, will be more
easy to other
>>>>>>>>> guys
>>>>>>>>> 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
>>>>>>>>> (https://na01.safelinks.protection.outlook.com/?url=
>>>>>>> https%3A%2F%2Fsnag.gy
>>>>>>>>> %2FAm2fRX.jpg&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>>>> 8494%7Cfa7b1b
>>>>>>>>> 5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&
>>>>>>> sdata=Z4b6dMq%2Br
>>>>>>>>> UmSSxpGYNjgKl0nkRkIlV%2FbQIDLVUIvo6E%3D&reserved=0)
>>>>>>>>> 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"
>>>>>>>>> xmlns="
>>>>>>>>> 
>>>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>>> http%3A%2F%2Fwww.w3.or
>>>>>>>>> g%2F2000%2Fsvg&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>>>> 8494%7Cfa7b1
>>>>>>>>> b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&
>>>>>>> sdata=cWLJ2jj9Ih
>>>>>>>>> cGnjAB8GEtEIdc3ZZO2OSAsgzPNEVrUzE%3D&reserved=0"
>>>>>>>>> xmlns:xlink="https://na01.safelinks.protection.outlook.
>>>>>>> com/?url=http%3A%2
>>>>>>>>> F%2Fwww.w3.org%2F1999%2Fxlink&data=02%7C01%7C%
>>>>>>> 7Cc23665e118fc4a7fed4c08d52
>>>>>>>>> 08c8494%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>>>>>> 7C636450710247213906&s
>>>>>>>>> data=sgNtytSumzad%2BraDA6NoITbm6XqJJx6yHQudjzhpm6Y%3D&reserved=0">
>>>>>>>>> <!-- Generator: Sketch 47.1 (45422) -
>>>>>>>>> 
>>>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>>> http%3A%2F%2Fwww.bohem
>>>>>>>>> iancoding.com%2Fsketch&data=02%7C01%7C%
>>>> 7Cc23665e118fc4a7fed4c08d5208c
>>>>>>> 8494
>>>>>>>>> %7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>>>>>> 7C636450710247213906&sdata=dE
>>>>>>>>> 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"
>>>>>>>>> y="0.5"
>>>>>>>>> width="149" height="39" rx="3"></rect>
>>>>>>>>>             </g>
>>>>>>>>>             <text id="TextField" font-family="HelveticaNeue,
>>>>>>>>> Helvetica
>>>>>>>>> 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
>>>>>>>>> even
>>>>>>>>> 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
>>>>>>>>> that
>>>>>>>>> particular styles and we could apply easily to any app,
so change a
>>>>>>>>> "theme"
>>>>>>>>> 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
>>>>>>>>> the
>>>>>>>>> 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
>>>>>>>>> through
>>>>>>>>> the rest.
>>>>>>>>> 
>>>>>>>>> Thoughts?
>>>>>>>>> 
>>>>>>>>> --
>>>>>>>>> Carlos Rovira
>>>>>>>>> 
>>>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>>> http%3A%2F%2Fabout.me%
>>>>>>>>> 2Fcarlosrovira&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>>>> 8494%7Cfa7b1
>>>>>>>>> b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&
>>>>>>> sdata=auPeQ0ub4B
>>>>>>>>> Iq%2FTscLQWJ0Xxb9XdM2eegav2v1LXcuYY%3D&reserved=0
>>>>>>>>> 
>>>>>>>> 
>>>>>>>> 
>>>>>>>> 
>>>>>>>> --
>>>>>>>> 
>>>>>>>> Piotr Zarzycki
>>>>>>>> 
>>>>>>>> mobile: +48 880 859 557
>>>>>>>> skype: zarzycki10
>>>>>>>> 
>>>>>>>> LinkedIn:
>>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>>> http%3A%2F%2Fwww.linked
>>>>>>>> in.com%2Fpiotrzarzycki&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>>>> 8494%
>>>>>>>> 7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>>> 7C636450710247213906&sdata=
>>>>>>> xZ56
>>>>>>>> se7Z6gcWKcC7PuWDPW0E6F9wQjEZkuYZO4zvwnY%3D&reserved=0
>>>>>>>> <https://na01.safelinks.protection.outlook.com/?url=
>>>>>>> https%3A%2F%2Fpl.linke
>>>>>>>> din.com%2Fin%2Fpiotr-zarzycki-92a53552&data=02%
>>>>>>> 7C01%7C%7Cc23665e118fc4a7fe
>>>>>>>> d4c08d5208c8494%7Cfa7b1b5a7b34438794aed2c178de
>>>>>>> cee1%7C0%7C0%7C6364507102472
>>>>>>>> 13906&sdata=1pwc5Fz1vKM2YCp6yUSe6x1Zdh9Au2
>>>> xqb28Duy2Tqac%3D&reserved=0>
>>>>>>>> 
>>>>>>>> GitHub:
>>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>>> https%3A%2F%2Fgithub.co
>>>>>>>> m%2Fpiotrzarzycki21&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>>>> 8494%7Cf
>>>>>>>> a7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&sdata=
>>>>>>> Lr7JdnU
>>>>>>>> fF%2F4xHJbXVZlZN%2Fw7t4Tz5R5KbZFwdVnZFww%3D&reserved=0
>>>>>>> 
>>>>>>> 
>>>>>> 
>>>>>> 
>>>>>> --
>>>>>> 
>>>>>> 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
>>>>>> 
>>>>> 
>>>>> 
>>>>> 
>>>>> --
>>>>> Carlos Rovira
>>>>> http://about.me/carlosrovira
>>>> 
>>>> 
>>> 
>>> 
>>> -- 
>>> 
>>> <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.
>> 
> 


Mime
View raw message