Hi Alex, just committed the MDLExample project in examples folder with minimal code, just a js:Button with styles that works and a mdl:Button that should have that styles and doesn't work. I configure to build with maven, but not ant.
thanks Carlos 2016-10-14 22:27 GMT+02:00 Alex Harui <aha...@adobe.com>: > If you want to make an example in flex-asjs repo in examples/flexjs that > would be helpful. > > -Alex > > On 10/14/16, 11:54 AM, "carlos.rov...@gmail.com on behalf of Carlos > Rovira" <carlos.rov...@gmail.com on behalf of > carlos.rov...@codeoscopic.com> wrote: > > >Ok, just pushed to branch /feature/mdl > > > >my example project is out the examples. Do you think I should create an > >examples/mdlexample project and upload it to the branch as well? > > > >Thanks > > > >2016-10-14 20:42 GMT+02:00 Carlos Rovira <carlos.rov...@codeoscopic.com>: > > > >> Hi Alex, > >> > >> I tried the both <i class="material-icons">add</I> and > >> > >> <js:html> > >> <i class="material-icons">add</i> > >> </js:html> > >> > >> but didn't worked. > >> > >> I'll be uploading the branch, since I'm equally worried about the low > >> level code not working > >> > >> Thanks! > >> > >> > >> > >> > >> > >> > >> > >> 2016-10-14 20:19 GMT+02:00 Alex Harui <aha...@adobe.com>: > >> > >>> > >>> > >>> On 10/14/16, 10:25 AM, "carlos.rov...@gmail.com on behalf of Carlos > >>> Rovira" <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> > >>> wrote: > >>> > >>> >Hi, > >>> > > >>> >I'm trying to setup a MDL library to start making some components with > >>> >that > >>> >look and feel. > >>> >I'm following the Flat library project indications, and right now I'm > >>> >building it ok with maven (didn't test Ant, but as a copy/paste from > >>> Flat, > >>> >I think it should work as well). > >>> > > >>> >Then I tried in a sample project. Again, new dependencies set and mdl > >>> >declarations are working, but result is not looking as I expect, maybe > >>> due > >>> >to some low level constructions that I still doesn't dominate (mainly > >>>the > >>> >internals in the "createElement():WrappedHTMLElement" overload, that > I > >>> >want > >>> >to try to give some love today as I get a bit more time. > >>> > > >>> >Ok, from here,...I'm still trying to understand more things... for > >>> >example: > >>> > > >>> >1.- MDL requires some CSS files to be linked. I'm using it with > >>> >-html-template tag in the example project, but, maybe this should be > >>> >provided by the MDL.swc ? if so, why could we do this? > >>> > >>> Use the <inject_html> directive. See CreateJS.swc's Application class. > >>> > >>> > > >>> >2.- To start implementing components, maybe it'd be better that > >>>someone > >>> >review what I'm doing (to avoid work in things that not conform to > >>> >standards setup here). Maybe I should upload the branch for people > >>>(Maybe > >>> >Alex, Peter,...) to take a look? > >>> > >>> Sure, feel free to share the branch. > >>> > >>> > > >>> >3.- I started trying to make a simple Colored Fab MDL button... (as > >>> >described here > >>>https://getmdl.io/components/index.html#buttons-section) > >>> > > >>> >and find that using a simple mxml declaration almost worked (it's not > >>> >right, only an approximation, since I can't write "low level" HTML in > >>> MXML > >>> >like an <I> with HTMLElement). So, this: > >>> > > >>> ><js:Button className="mdl-button mdl-js-button mdl-button--fab > >>> >mdl-button--colored"> > >>> ></js:Button> > >>> > >>> Did you try: > >>> > >>> <js:Button className="mdl-button mdl-js-button mdl-button--fab > >>> mdl-button--colored"> > >>> <i class="material-icons">add</i> > >>> </js:Button> > >>> > >>> And/or: > >>> > >>> > >>> <js:Button className="mdl-button mdl-js-button mdl-button--fab > >>> mdl-button--colored"> > >>> <js:html> > >>> <i class="material-icons">add</i> > >>> </js:html> > >>> </js:Button> > >>> > >>> If neither of those worked, I will take a look. > >>> > >>> > >>> > > >>> >Shows a pink circle button, without icon. > >>> > > >>> >My MDL button has the following createElement code: > >>> > > >>> >/** > >>> > * @flexjsignorecoercion > >>>org.apache.flex.core.WrappedHTMLElement > >>> > * @flexjsignorecoercion HTMLButtonElement > >>> > */ > >>> > override protected function createElement(): > WrappedHTMLElement > >>> > { > >>> > element = button = document.createElement('button') as > >>> >HTMLButtonElement; > >>> > button.className = 'mdl-button mdl-js-button > >>>mdl-button--fab > >>> >mdl-button--colored'; > >>> > > >>> > positioner = element; > >>> > positioner.style.position = 'relative'; > >>> > (button as WrappedHTMLElement).flexjs_wrapper = this; > >>> > element.flexjs_wrapper = this; > >>> > > >>> > return element; > >>> > } > >>> > > >>> >and I'm using at my example project : <mdl:Button/> > >>> > > >>> >But instead to throw the pink empty circle button as the MXML > >>>example, it > >>> >shows a normal button as if my declaration was <js:Button/> (the same > >>> >indeed) > >>> > > >>> >someone knows where I could be failing ? > >>> > >>> I don't see any obvious problems. I would examine the DOM in the > >>>browser > >>> debugger and make sure the CSS got loaded and the className is properly > >>> set on the HTMLButtonElement. I'm wondering if the className gets > >>>reset > >>> by the framework somehow. Although note that setting the className on > >>>the > >>> outer button class that wraps the HTMLButtonElement should set the > >>> className on the button element. > >>> > >>> HTH, > >>> -Alex > >>> > >>> > >> > >> > >> -- > >> > >> Carlos Rovira > >> Director General > >> M: +34 607 22 60 05 > >> http://www.codeoscopic.com > >> http://www.avant2.es > >> > >> > >> 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. > >> > >> > > > > > >-- > > > >Carlos Rovira > >Director General > >M: +34 607 22 60 05 > >http://www.codeoscopic.com > >http://www.avant2.es > > > > > >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. > > -- Carlos Rovira Director General M: +34 607 22 60 05 http://www.codeoscopic.com http://www.avant2.es 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.
