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=1pwc5Fz1vKM2YCp6yUSe6x1Zdh9Au2xqb28Duy2Tqac%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
