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.
