flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: Understanding CSS in FlexJS
Date Tue, 04 Oct 2016 06:56:45 GMT

On 10/3/16, 2:56 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:

>now that I have a maven env and the NextGenAS with Visual Studio Code
>setup, I'm finding super easy to test and modify things in FlexJS, and I'm
>trying to learn what folks made. I think one of the points that we need
>soon, is to get some good-looking examples, for this reason, I want to
>check styling in flexjs and see what can be done in the current state of
>the art. For example:
>1.- I would want to exercise a way to make some of the examples look more
>beautiful. For example, applying MDL
>But how where I should aggregate css mdl url files? The index.html is
>generated when compiling...how could I insert, i.e.: mdl ? :
><link rel="stylesheet"
>defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
>Should I insert a fx:style block in the main js:Application ? (if
>...and how to apply some styling to a component? some example out there to
>Is out there some link where I could read about CSS in FlexJS and what
>properties are available per component?

There isn't a wiki page on this yet.

The nightly builds should now support an -html-template option where you
can specify your own file.  There should be a
templates/js-index-template.html in the build (or at least, in the
flex-asjs repo) to serve as a starting point.  There you can add other css

It is up to the View of each component to respond to any CSS.  On the SWF
side, we don't have sophisticated CSS handling so most complex things will
fail to have any effect.  On the JS side, if you can use the existing
components to construct the DOM, the CSS should behave properly.  These
CSS files are not presented to the MXMLC/MXMLJSC compilers.

FlexJS CSS is full of non-compliant CSS that specifies ClassReferences.
When you specify CSS files and/or fx:Styles to MXMLC/MXMJSC or they are
found in a SWC, a data structure is created from the CSS so SWF-side code
doesn't have to parse CSS at runtime.  SWF-side code tries to use that
data structure to emulate CSS in Flash.  SimpleCSSValuesImpl doesn't
handle any complex selectors right now.  I hope we eventually have a fully
compliant AdvancedCSSValuesImpl.

MXMLJSC outputs the CSS files it found as the .css file for the app, but
it clears out non-compliant CSS like those ClassReferences that would make
the browser complain.  JS code also gets the same data structure as the
SWF-side code so the JS version of the components can pick up class

>(right now I'm trying to use a

Spark components are not supported at this time.

>and...what about js:Button...I don't see is used...instead, theres's
>svg:TextButton... someone could talk a bit about svg components in FlexJS
>so I could understand the scope of the namespace and where to use it?

js:Button doesn't support text labels.  js:TextButton does.  That's why
you don't see js:Button in the examples, but it is used as the base for
uparrow/downarrows in Spinners and a few other places.

There is a plan to use FXG/SVG for a skinning model.  I haven't played
with it myself so I don't know what state it is in.

>A side from this, I think it could be good to make something similar to
>blog.flexexamples.com for flexjs, I think I could try something about this
>as I get more skilled on the possiblities.

I'd rather start a tour-de-flexjs.


View raw message