All 2 entries tagged Flex

Skinning/Styling in Flex

Writing about web page http://www.adobe.com/devnet/flex/articles/flex_skins_08.html

S’funny that Adobe have a separate term for the whole styling of applications, which gives the first clue, that maybe they think about it in a different way.
Anyway skinning does seem to have progressed nicely since I last used Flash being a lot more stylesheet orientated, me likie.

To get rid of the nasty halo theme, is a lot simpler than in flash days. To tint the rollover/selection colours to something more to your taste, simply add this to the top of your stylesheet:

global {
themeColor: #767FA0;
}

and job done. Though I did google quite a bit before finding this and there were a lot more complicated ways of achieving similar probably giving more fine grain control.

Right for skinning the rest you can get quite a long way via stylesheets, using the Style Explorer to get the syntax. I found that the datagrid, hugely tricky to customise and style in flash much more quickly sorted in flex i.e.:

DataGrid {
color: #ffffff;
fontWeight: bold;
headerColors: #ffffff, #ffffff;
borderThickness: 0;
borderColor: #ffffff;
alternatingItemColors: #B6BBCE, #A4A9BF;
rollOverColor: #5F6885;
textRollOverColor: #ffffff;
selectionColor: #3F4251;
textSelectedColor: #ffffff;
horizontalGridLines: true;
horizontalGridLineColor: #ffffff;
}

the code for producing an itemrenderer similarly much shorter.

Whilst I think of it, some other useful styles are :

roundedBottomCorners: true;
cornerRadius: 10;
borderStyle: solid;

for nice rounded components. (though didn’t seem to work for all elements/components).

and
shadowDistance: 5;
shadowDirection: right;
dropShadowColor: #000000;

for drop shadows on and within components

and
backgroundAlpha: 0.4;

for transparent effects, though effected nested components too.

A weirdness I found was that paddingleft would only work when added to the component and not in the stylesheet.

Adobe describes two ways of skinning either graphical or programmatic leaving it up to you to go with what you feel the most comfortable.

With graphical skins

advantages:
being easier, familiar, and can hand off artwork creation to a designer
disadvantages:
Not as flexible size wise (though can apply embed9)
Graphics might not work well depending on the effect you want to achieve
Can’t then apply programming
larger file sizes presumably

and programmatic skins

Pros
Dynamic
Smaller file size
Flexible in terms of ability to do more with different states
Cons
More difficult, requiring coding, more to go wrong

So I thought I’d start with graphical skinning and build up to programming as required.

The Adobe article above and associated files is a bit of a find, as you can use this as a method of graphically skinning components. They provide graphics package basics of all the images for you to tailor and the css to go with it. So now I can even change how the scrollbars look. Though I haven’t found graphics labelled datagrid in the graphics file, maybe this is a compilation of other components.

I did wonder if this would bloat the .swf file, but so far have just used some of the graphics and styles from here.

Results so far looking good.

Updated version of this article for Flex3
http://www.adobe.com/devnet/flex/articles/skins_styles_03.html

Flex 3 now has a CSS Design mode…....
Adobe continues to describe skinning and styling as separate approaches. Implying there are some graphical effects you might not be able to achieve through styling alone.

Don’t forget to embed any fonts, graphics that you may need just put the @ symbol in front of anything to be embedded in the code and the word Embed in the stylesheet. e.g.

backgroundImage: Embed(source=”images/bg.png”);

or you will need to ensure that the appropriate files are copied along with your application

Sara Lever : 26 Feb 2008 17:06 |  Tags: Flex |  Comments (1) |  Close comments |  Report a problem

Scalable Flex App

Follow-up to Flex 2 – Beginners Guide from Sara's Mindbloggeld

Getting a flash app to scale nicely. I’ve blogged about this as a record of the steps required.

• In the CSS use a background# image with EmbeddingImagesScale9 to keep some areas of a graphic a set size and stretch the rest, set also background-size:”100%”; so the background image fills the whole stage. For example:

  Application {
  background-image: Embed(“bg_and_header.png”,
  scaleGridTop=”60”, scaleGridBottom=”61”,
  scaleGridLeft=”260”, scaleGridRight=”444”);
  background-size:”100%”;
  background-color: #ffffff;
  }

• In the design a middle section that is a little bit plain is great for stretching!

• Dont set any fixed width’s or heights on your containers

• Instead use constraints based layout, to do that in your application declaration put
  viewSourceURL=”src/LayoutConstraintsEdges/index.html”

• Alongside this you’ll need to put on any parent containers layout=absolute (yeah I know – completely the opposite to what you’d think if you are used to CSS!) you’ll need this or when you apply constraints on any nested panels it won’t work child containers won’t know what they are being sized to, any inheritance from application is lost

• So for the constraints bit you might have a container that you always want to appear just offset from the top and left, so you’d put in the container or maybe in the CSS. You’ll need to do something like this probably around all your containers.

NOTE: Things that seem to stop the scaling are any hard width and height settings, scrollbars though I have seen an example with scrollbar that scales.

To view this example set your browser to 1024×768 and go to this page
Voila
- Sorry web team only…..
Then stretch over both your monitors. Components will get wider, but not taller (as I’ve turned vertical scroll bars off and that was enough to stop the rescaling).

Sara Lever : 15 Feb 2008 15:07 |  Tags: Flash Flex ITS |  Comments (0) |  Close comments |  Report a problem