yOOrek's Flex™ Adventure

Another success – Problem with using embedded font fixed

As reported in this post, I was having problems with using embedded font in the <mx:Linkbar> object. Have a look at the code below to see what I had to change to get it to work (changes are in bold).

Here is the snippet for font embedding from as file -

[Bindable]
[Embed(source='include/fonts/Speedline.ttf',
       fontName='GalleryFont',
       fontStyle='normal',
       fontWeight='normal',
       mimeType='application/x-font')]
// You do not use this variable directly. It exists so that
// the compiler will link in the font.
public var embeddedFont:Class;

Here is the snippet of the style sheet -

.headerLinkBar {
    fontFamily:         GalleryFont;
    fontSize:           18;
    fontWeight:         normal;
    fontStyle:          normal;
    fontThickness:      0;

    colour:             #808080;
    textRollOverColor:  #FFFFFF;
    rollOverColor:      #262626;
    selectionColor:     #262626;
    separatorColor:     #FFFFFF;
}

.headerLinkBarButton {
	fontFamily: 	GalleryFont;
	fontWeight:	normal;
	fontStyle:	normal;
}

And here is the snippet from the MXML file -

<mx:LinkBar id="headerLinkBarThumbsView"
            styleName="headerLinkBar"
            linkButtonStyleName="headerLinkBarButton">
    <mx:dataProvider>
        <mx:Array>
            <mx:String>Arrange</mx:String>
            <mx:String>Stack</mx:String>
            <mx:String>Randomise</mx:String>
            <mx:String>Back</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:LinkBar>

It looks like specifying the style in ‘styleName’ attribute of <mx:Linkbar> element is not enough in Flex 3.2 (it used to work in Flex 2). Specifying the style for the link bar button in ‘linkButtonStyleName’ does the trick. Hopefully someone will find this useful.
—
Without wax,
yOOrek

Tags: compiler issues, moving to Flex 3, problems

Success – I managed to recompile the galleries

Success, I managed to recompile the galleries using Flex 3.2 SDK. See them here and here. The only thing that I still have problems with is embedded fonts in <mx:Linkbar>. Embedded fonts work quite nicely in other elements, but not in <mx:Linkbar>.

Here is the snippet for font embedding from as file -

[Bindable]
[Embed(source='include/fonts/Speedline.ttf',
       fontName='GalleryFont',
       fontStyle='normal',
       fontWeight='normal',
       mimeType='application/x-font')]
// You do not use this variable directly. It exists so that
// the compiler will link in the font.
public var embeddedFont:Class;

Here is the snippet of the stylesheet -

.headerLinkBar {
    fontFamily:         GalleryFont;
    fontSize:           18;
    fontWeight:         normal;
    fontStyle:          normal;
    fontThickness:      0;

    colour:             #808080;
    textRollOverColor:  #FFFFFF;
    rollOverColor:      #262626;
    selectionColor:     #262626;
    separatorColor:     #FFFFFF;
}

And here is the snippet from the MXML file -

<mx:LinkBar id="headerLinkBarThumbsView"
            styleName="headerLinkBar">
    <mx:dataProvider>
        <mx:Array>
            <mx:String>Arrange</mx:String>
            <mx:String>Stack</mx:String>
            <mx:String>Randomise</mx:String>
            <mx:String>Back</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:LinkBar>

I think I’m coding everything correctly. It worked without a problem in Flex 2. You can see the same font being used on the slide/thumbnail. Perhaps there is a change in behavior in Flex 3. Sooner or later I will get to the bottom of this. In the meantime I have to put up with the default font.
—
Without wax,
yOOrek

Tags: code, embedding assets, Flex 3 problems, fonts, Linkbar

Diaries of my Flex™ Adventure

I already have some experience (like almost a year), with Flex™ 2 and AS2. I gained it while writing a Lightroom® web gallery. To cut a long story short, everything was fine until I wanted to see the results of my work inside LR. No va monsieur le developer! Since the gallery looked fantastic, at least to my eyes, I decided to spend some more time on it.

You are welcome to check the prototype of the gallery here and here. The difference between these links is  that they use different configuration file. Normally you should be able to double click on the slide to view a full size image. This does not work however. I did something in the code and forgot to undo it.

My Flex™ Photo Gallery

Not that I expect anything to change now, but I decided to have another go at it using free Flex™ 3 SDK, Eclipse and few other tools that I will list in the next post. This blog will document my efforts in  a hope that it my just help someone, in a not so distant future, to get started in RIA.

So, until the next post,
yOOrek

Tags: Adobe, flash, Flex, Flex2, Flex3, Lightroom, Lightroom gallery, Lightroom web gallery, photo gallery, web module