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.li...@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.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. >
