[FlexJS] Integration with bootstrap

[Saul Diaz <cr...@gmail.com>]

There is any way to integrate with bootstrap/metroUI or a custom CSS?

 

 

regards

----

Saul Diaz

In love with FlexJS.

Re: [FlexJS] Integration with bootstrap

[Alex Harui <ah...@adobe.com>]

On 11/24/15, 8:18 AM, "Saul Diaz" <cr...@gmail.com> wrote:

>It  may help initially if we can customize the html that's generated as
>we did with the template in AS . I can't see a way.

The only ways to alter the HTML right now is to add a comment in the .JS
file with <inject_html> in it, and the cross-compiler will inject the
contents of the tag into the HTML.  See
Mobile/js/src/org/apache/cordova/Camera.js, for example.

And, of course, you can always prep a .JS file to write to the DOM.

>
>How I can help?

Well, if you know Java, you could alter the compiler so you can use a
custom HTML template.

If you want to take on a big task, it would be to make a copy of
Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as, call it
AdvancedCSSValuesImpl.as, and try to write a more complex CSS lookup
algorithm.

If you want a medium-sized task, you could try to create a Bootstrap.swc
that implements the various UI controls exactly as Bootstrap wants it.
Without AdvancedCSSValuesImpl it won't look right in the SWF, but you
should be able to see it work with custom Bootstrap CSS themes in the
HTML/JS/CSS version.  Let's talk more before you start on that because it
might be better if you work in one of our branches and try to write the JS
in AS and cross-compile it.

And if you don't have time for either of those, your continued attempts to
use FlexJS and provide feedback always inspires us to keep working on it.
Maybe as more folks use this release, we'll have some simpler bugs filed
and you can help fix those.  And there is always a need for better
documentation and more unit tests.

FlexJS is going to be built by this community, not by Adobe or some other
corporation.  It will go faster if everyone can pitch in a little.  If you
or anyone else has time to help, please use the dev@ mailing list for
discussion.

Thanks,
Alex

RE: [FlexJS] Integration with bootstrap

[Saul Diaz <cr...@gmail.com>]

You are right a RadioButton could be something like this 

<label class="radio-inline"><input type="radio" name="optradio">Option 3</label> 

and a button something like 

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

I did saw the differences between  both examples and looks similar to use spark/flatspark  and see your point.  I can imagine how busy you are right now. 

It  may help initially if we can customize the html that's generated as we did with the template in AS . I can't see a way. 

How I can help?

Regards
-----Original Message-----
From: Alex Harui [mailto:aharui@adobe.com] 
Sent: Tuesday, November 24, 2015 12:10 AM
To: users@flex.apache.org
Subject: Re: [FlexJS] Integration with bootstrap 



On 11/23/15, 6:04 PM, "Saul Diaz" <cr...@gmail.com> wrote:

>There is any way to integrate with bootstrap/metroUI or a custom CSS?

I think so, and the Flat.swc in FlexJS 0.5.0 is a proof of concept for that, but not a final implementation.  Bootstrap seems to have its own custom components.  For example, the Bootstrap RadioButton isn't just an <input type="radio">.  Instead, it appears to be a composition of elements and a custom font and some fancy CSS.

FlexJS doesn't have advanced CSS selector handling on the SWF side yet, so I couldn't just use a Bootstrap CSS theme as-is, but the Flat.swc emulates some of the Bootstrap widgets via simpler HTML elements and some JS on the JS side and a similar composition on the SWF side.  You can compare DataBindingTest and DataBindingTest_Flat to see how such a theme can get used in FlexJS.

The next step would be to implement advanced CSS selectors on the SWF side and try to use a Bootstrap CSS theme as-is.  It would be great for some volunteers to step up to do it.  I'll probably get to it eventually, but right now I have plenty of other tasks to pursue, although feedback on this list helps me set priorities.

Thanks,
-Alex

Re: [FlexJS] Integration with bootstrap

[Alex Harui <ah...@adobe.com>]

On 11/23/15, 6:04 PM, "Saul Diaz" <cr...@gmail.com> wrote:

>There is any way to integrate with bootstrap/metroUI or a custom CSS?

I think so, and the Flat.swc in FlexJS 0.5.0 is a proof of concept for
that, but not a final implementation.  Bootstrap seems to have its own
custom components.  For example, the Bootstrap RadioButton isn't just an
<input type="radio">.  Instead, it appears to be a composition of elements
and a custom font and some fancy CSS.

FlexJS doesn't have advanced CSS selector handling on the SWF side yet, so
I couldn't just use a Bootstrap CSS theme as-is, but the Flat.swc emulates
some of the Bootstrap widgets via simpler HTML elements and some JS on the
JS side and a similar composition on the SWF side.  You can compare
DataBindingTest and DataBindingTest_Flat to see how such a theme can get
used in FlexJS.

The next step would be to implement advanced CSS selectors on the SWF side
and try to use a Bootstrap CSS theme as-is.  It would be great for some
volunteers to step up to do it.  I'll probably get to it eventually, but
right now I have plenty of other tasks to pursue, although feedback on
this list helps me set priorities.

Thanks,
-Alex