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.
