Monthly Archives: February, 2008

Baseline alignment with constraints in Flex 3

One of the minor improvements in Flex 3 regarding layout is baseline alignment. Setting the baseline constraint means that the user is specifying an offset from the top edge of a constraint region or parent border and the control’s baseline. By offering a baseline constraint style, we can now allow multiple components to be constrained along a single shared baseline. Here is an example of two panels. One has no baseline set on the components. The other uses a baseline and a ConstraintRow.

The Panel using a baseline constraints looks like this:


<mx:Panel title=”baseline in a ConstraintRow” layout=”absolute” >
<mx:constraintRows>
<mx:ConstraintRow height=”200″ id=”row1″/>
<mx:ConstraintRow height=”100″ id=”row2″/>
</mx:constraintRows>
<mx:Text text=”San Francisco” baseline=”row1:20″ />
<mx:Button label=”Newton” x=”70″ baseline=”row1:20″ />
<mx:DateChooser x=”140″ baseline=”row1:20″ />
<mx:Label text=”Romania” x=”310″ baseline=”row1:20″ />
</mx:Panel>

Demo: simpleBaseline.swf

Source: simpleBaseline.mxml

At this time, you cannot set the verticalAlign style to a baseline. This is still an open bug: SDK-11725

Loading css when your application starts up

In Flex 2.0.1, Flex introduced a feature enabling runtime css. This meant that your application could load a different stylesheet at runtime using the method StyleManager.loadStyleDeclaration(url). This allows your Application’s swf to be much smaller if you had multiple stylesheets for one Application that may or may not be used. Unfortunately, you cannot load the css directly. Instead, you would need to compile the css using the Flex compiler. The compilation of a css file will create a swf file that can be specified as an argument to loadStyleDeclarations method. Here is the description of this method from the Flex livedocs:

public static function loadStyleDeclarations(url:String, update:Boolean = true, trustContent:Boolean = false, applicationDomain:ApplicationDomain = null, securityDomain:SecurityDomain = null):IEventDispatcher Loads a style SWF.

Parameters


url:String — Location of the style SWF.


update:Boolean (default = true) — Set to true to force an immediate update of the styles. Set to false to avoid an immediate update of the styles in the application. This parameter is optional and defaults to true For more information about this parameter, see the description in the setStyleDeclaration() method.


trustContent:Boolean (default = false) — Obsolete, no longer used. This parameter is optional and defaults to false.


applicationDomain:ApplicationDomain (default = null) — The ApplicationDomain passed to the load() method of the IModuleInfo that loads the style SWF. This parameter is optional and defaults to null.


securityDomain:SecurityDomain(default = null) — The SecurityDomain passed to the load() method of the IModuleInfo that loads the style SWF. This parameter is optional and defaults to null.

Returns


IEventDispatcher — An IEventDispatcher implementation that supports StyleEvent.PROGRESS, StyleEvent.COMPLETE, and StyleEvent.ERROR.

So, how can you load css at runtime and not create any of the components in your application until the styles were loaded? You want to be sure that your components don’t show up on screen with default styles for a brief amount of time while the css is being loaded. There are probably a few ways to do this, but, here is one that I found that works.

1. Call StyleManager.loadStyleDeclarations(url) in the preinitialize handler for your <mx:Application>

2. Make sure that your <mx:Application> has a creationPolicy=”none”.

3. When, the StyleEvent.COMPLETE event is triggered after the call to loadStyleDeclarations, then, you can call createComponentsFromDescriptors(). This method will create all of the children of the container that it is called on.

Here is the code in the Application:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; width=”100%” height=”100%”
preinitialize=”changeTheme()” creationPolicy=”none”>
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.events.StyleEvent;private function changeTheme(): void
{
var myevent:IEventDispatcher = StyleManager.loadStyleDeclarations(“Ice2.swf”);
myevent.addEventListener(StyleEvent.COMPLETE, createComponents);
}

private function createComponents(event:StyleEvent): void
{
createComponentsFromDescriptors();
}
]]>

</mx:Script>

<mx:Panel id=”main” width=”100%” height=”100%”>
<mx:HBox>
<mx:VBox>
<mx:Label text=”comments:” />
<mx:TextArea width=”200″ height=”150″ />
<mx:Button label=”submit” />
</mx:VBox>
<mx:DateChooser />
</mx:HBox>

</mx:Panel>
</mx:Application>

Demo: Icetheme.swf, Ice2.swf

Source: Icetheme.mxml, Ice2.css

Using a border skin for a TitleWindow in Flex 3

Happy Valentines Day, everyone! In celebration of the day, I thought I’d put together a very cheesy, border skin with a lot of hearts to use for a TitleWindow. It’s pretty simple to use a border skin with a TitleWindow, but, in my opinion, it’s not obvious what you have to do to make your content layout correctly.

In the following example, I am using a png asset that I’ve created as the skin. When embedding it, I am defining a scale-9 grid:

border-skin: Embed(“hearts_skin.png”,
scaleGridLeft=”44″,
scaleGridRight=”360″,
scaleGridTop=”54″,
scaleGridBottom=”219″);

This ensures that the area of my skin that I want to have as a border for the TitleWindow stretches or shrinks correctly regardless of the content in my container. Next, I define where my content will live inside the TitleWindow by using the padding styles:


paddingTop: 55;
paddingLeft: 45;
paddingRight: 45;
paddingBottom: 40;

If you do not specify padding styles in the TitleWindow, your content will overlap with the title and/or close button.

Have fun with this example!

Demo: skinnedTitleWindow.swf

Source: skinnedTitleWindow.mxml, hearts_skin.png

In the example, you can click the button “add child to TitleWindow” to see the TitleWindow grow, but, it should keep the correct proportions of the borders.

Vote on Flex deferred bugs

As of last night, voting on deferred/closed bugs is now available in our public Flex bugbase. As I specified in my last post, the team is currently evaluating features and fixes for Flex 4 now that Flex 3 is almost out the door.

The time is now to vote at: http://bugs.adobe.com/flex

Flex votes on Super Tuesday

As February 5 approaches here in California, most people are deciding who to vote for in our presidential primaries, but, this isn’t the only decision that you have to make on Tuesday. You need to make some decisions on how you want to influence the future of Flex. Plus, this Flex vote isn’t limited to U.S. residents or to people over 18!

Anyone can vote for Features in our public Flex Bugbase. Right now, our team is considering features for our next release and your votes count. If you aren’t familiar with voting in the Flex bugbase, here are a few basic steps:1. Go to http://bugs.adobe.com/flex

2. Register or login

3. Click on the link for “Find Issues”

4. On the left column, under, “project”, selectt “Flex Builder” and the “Flex SDK” .

5. Under “type”, select “Feature Request”.

6. Click the button to “View”. This will bring up a list of all of the Flex feature requests that we are considering. Peruse the list and select ones that you feel passionate about.

7. When viewing a bug, you can click on the “view” link next to the “Votes” label (on the left hand column) of the bug.

8. From this screen, you can “add” your vote to this bug. It also helps our team if you add comments to bugs describing why this bug is important to you.

Early voting is available, so, you can vote today!

Also, please file any new Feature Requests that have not been recorded in the bugbase. By Tuesday, you may also be able to vote for the bugs that are currently “Deferred”. However, this isn’t allowed yet, and I don’t know if this will be available by Tuesday.

Go forth! Make a difference! And, if you don’t believe me, then, you should believe Matt Chotin:

I’m a member of the Flex SDK team and I approve this message.