<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.rov...@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.li...@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 <carlosrov...@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 <piotrzarzyck...@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 <aha...@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" <piotrzarzyck...@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 <carlosrov...@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.
