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 <[email protected]>: > 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" <[email protected]> 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 <[email protected]>: > > > >> 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
