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
