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
