Archive for category actionscript

Getting Spark & MX Components to Use Embedded Fonts :: UPDATED**

You’d think embedding a font and declaring it as an Spark Application style would cascade down to all components — after all, CSS = Cascading Style Sheet, right? Well, it doesn’t. The font won’t show up in your MX components.

After bumping our heads against this about 8-9 months ago we decided to move on…I recently had to come back to it and found this helpful link that allowed me to do the following to get this working as expected.

UPDATE*: Added style for MX DataGrid.

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face
{
	src: url("/resources/fonts/Chalkboard.ttc");
	font-family: ChalkboardEmbedded;
	font-weight: normal;
	font-style: normal;
	embed-as-cff: true;
}

s|Application
{
	font-family: ChalkboardEmbedded;
	font-size: 12;
}

mx|global
{
	textFieldClass: ClassReference("mx.core.UIFTETextField");
}

mx|DataGrid
{
	defaultDataGridItemEditor: ClassReference("mx.controls.MXFTETextInput");
	defaultDataGridItemRenderer: ClassReference("mx.controls.dataGridClasses.FTEDataGridItemRenderer");
}

The class-level global style is what does the trick as it instructs all MX components using text fields to use the UIFTETextField class — it allows MX or Halo components to leverage CFF embedded fonts.

Run the app with those styles defined and you’ll notice that one component still doesn’t want to listen — the title of the Spark Panel (or at least that’s the only component I’ve run across so far that doesn’t work).

I tried defining the style for the Spark Panel specifically, but no dice. I also tried creating a new skin for the Spark Panel and set the fontFamily property of the titleDisplay to my embedded font of ChalkboardEmbedded and that also failed. Anyone else come up with a solution for this?

UPDATE*: This approach failed for the following MX classes:

  • ProgressBar
  • FormHeading

This approach failed for the following Spark classes:

  • Panel

UPDATE*:I spoke to several Adobeans on the Flex Doc team and this is unfortunately a known issue:

This approach works for most components, but not Panel and a couple others (he identified Panel and ProgressBar in his blog). I suspect he found a bug. This whole thing about using the same embedded font in MX and Spark components was meant to be a temporary solution until Spark had parity with MX controls. A year and a half later, and there’s still no parity, so there’s no surprise that users are running into this.

Brian, I would ask him to submit a bug.

He can take a look at the spec: http://opensource.adobe.com/wiki/display/flexsdk/Font+Embedding+Reprise

That spec seems to indicate that Panel and ProgressBar should work the way it is documented.

Post to Twitter Tweet This Post

, , , , ,

2 Comments

Some Helpful Settings For Maven Builds

When running Maven builds, there are typically a few settings that are useful to have in your ~/.bash_profile (for Mac or similar, depending on your shell) to help get things off on the right foot.

Set memory usage to 1024M minimum.
export MAVEN_OPTS=-Xmx1024m

Set the path to the appropriate SDK for Flash Builder
FLASH4_SDK=’/Applications/Adobe Flash Builder 4 Plug-in/sdks/3.5.0′

Set the path for ADL if building AIR applications
ADL_PATH=${FLASH4_SDK}/bin

Set the path to the Flash Player for launching FlexUnit tests
FLASH_PLAYER_PATH=’/Applications/Adobe Flash Builder 4 Plug-in/Player/mac/Flash Player.app/Contents/MacOS’

Append these to the current path
export PATH=${PATH}:${ADL_PATH}
export PATH=${PATH}:${FLASH_PLAYER_PATH}

Post to Twitter Tweet This Post

, ,

No Comments

Flex & ActionScript Regex List

I’m not great with regex since I don’t use it a ton so I constantly find myself looking up simple, reusable regex statements…thought I’d just start listing them as I use them in case someone else finds them useful. This will start with just a couple examples that we’ll continue to add to.

Assume the following vars:

var myString:String;
var pattern:RegExp;
var resultString:String;
var isSuccess:Boolean;

Remove All Spaces

myString = "The quick brown fox.";
pattern = /\s+/g;
resultString = myString.replace(pattern, "");
trace(resultString); // Thequickbrownfox.

Remove Special Characters & Spaces

myString = "The 123 quick 456 brown !@#$% fox.";
pattern = /\W/g;
resultString = myString.replace(pattern, "");
trace(resultString); // The123quick456brownfox

Remove Special Characters & Numbers & Spaces

myString = "The 123 quick 456 brown !@#$% fox.";
pattern = /[^a-zA-Z]+/g;
resultString = myString.replace(pattern, "");
trace(resultString); // Thequickbrownfox

Test URL String

myString = "http://yahoo.com";
pattern = /^http(s)?:\/\/((\d+\.\d+\.\d+\.\d+)|(([\w-]+\.)+([a-z,A-Z][\w-]*)))(:[1-9][0-9]*)?(\/([\w-.\/:%+@&=]+[\w- .\/?:%+@&=]*)?)?(#(.*))?$/i;
isSuccess = pattern.test(myString);
trace(isSuccess); // true
myString = "htt://yahoo.com";
isSuccess = pattern.test(myString);
trace(isSuccess); // false

Trim String (With Tabs & Returns): Courtesy of Jeff Channel

myString = myString = "The quick brown fox.                   		";
pattern = /^\s+|\s+$/gs;
resultString = myString.replace(pattern, "");
trace(resultString); // "The quick brown fox."

Post to Twitter Tweet This Post

, , ,

4 Comments

Unable to export SWC oem

Been switching environments a bit lately from Flash Builder to Flex Builder and back and using different SDKs.

When importing a new project that someone had checked in from a different version, the .flexLibProperties file was causing this issue.

After much scouring, I found something that worked.

Open .flexLibProperties and find the section <includeResource/>. Remove everything in that section.

Made the problem disappear.

Post to Twitter Tweet This Post

, , ,

No Comments

Dynamic Classes Gotcha!

We recently started using dynamic classes to assist with unknown data formats. It’s a pretty powerful feature of the language. It comes with a price in that you don’t get strong typing nor intellisense on the dynamic properties. But, there are cases where it can serve great purpose.

One of the things you have to keep in mind though is that since the class is dynamic, the compiler can’t provide the linkage for you to do something like:

var someValue:SomeClass = someObject as SomeDynamicClass;

The compiler won’t complain, but, you will as you scratch your head trying to understand why someValue == null all the time. The lack of information at compile time is the obvious culprit.

But, I have found a decent workaround. Provide a constructor for the dynamic class that takes and Object as an optional parameter. If you pass in a parameter, call the helper function to populate the object. Here I’m using a form of reflection to do this dynamically so I don’t have to hand write all the properties.


dynamic public class SomeDynamicClass

public function SomeDynamicClass(obj:Object=null)
{
if ( obj )
this.populateMe(obj);
}

private function populateMe(source:Object):void
{

var destinationList:XML = describeType(this);

for each ( var propName:XML in destinationList..variable )
{
if ( source.hasOwnProperty( propName.@name ) )
{
var cls:Class = getDefinitionByName(propName.@type) as Class;
this[propName.@name] = source[propName.@name] as cls;
}
}
}

Later on, when you get some generic Object, like from ArrayCollection.getItem, you don’t do the normal cast but instead create a new instance passing in the Object.

var someValue:SomeClass = new SomeDynamicClass(someObject);

Hope that helps.

Post to Twitter Tweet This Post

, ,

No Comments

Dude, Where’s My Chart Labels?

Wondering where your Flex Chart labels are? Well, you’re not alone. Turns out it may be related to your use of Embedded Fonts and Modules.

Surfacing a charting component in a Module works just fine when not making use of Embedded Fonts. Embed fonts in your main application or the Module itself and Presto! Your labels will disappear.

A number of bug tickets have been opened and closed with Adobe, i.e. http://bugs.adobe.com/jira/browse/FLEXDMV-1883, indicating that the issue was resolved with DMV 3.3.0. Currently using DMV 3.4.0.9271, however, and the problem seems to have re-emerged.

Opening another bug ticket with Adobe and in the meantime commenting out the use of Embedded Fonts.

More to follow…

Post to Twitter Tweet This Post

No Comments

Axiis Drill Down Example

I’ve seen a number of requests for a drill down version of an Axiis chart. We have a current client that will need that functionality as well so I figured I’d give it a shot.

The approach I’m taking is pretty straight forward. Put a drill down layout on the stage and make it invisible initially. When the user clicks on an item in the primary chart that we want to drill in, capture the event, set a dataProvider specific to the portion of the data that represents the drill down, hide the primary layout and show the drill down layout.

Building off the familiar approach for the Axiis examples, add a few objects for the drill down layout to use

<mx:Object id=“dataProvider”/>
<mx:String id=“verticalField”/>
<mx:String id=“dataField”>date</mx:String>
<mx:String id=“labelField”>date.value</mx:String>
<mx:Object id=“drilldataProvider”/>
<mx:String id=“drilldataField”/>
<mx:String id=“drilllabelField”/>

The drill down layout can be whatever type you choose. Here I’m just going to display the data as a simple bar chart.

<axiis:HBoxLayout
      id=“drillDownLayout”
      x=“25”
      y=“0”
      showDataTips=“true”
      height=“{dc.height-70}”
      width=“{dc.width-25}”
      visible=“false”
      dataProvider=“{drilldataProvider}”
      percentGap=“0”
      dataField=“{drilldataField}”
      labelField=“{drilllabelField}”
      itemClick=“this.itemClick(event);”>

    <axiis:drawingGeometries>
       <degrafa:RegularRectangle
             id=“drillRectangle”
             x=“{drillDownLayout.currentReference.x}”
             y=“{drillDownLayout.height-vScale.valueToLayout(drillDownLayout.currentValue)}”
             width=“{drillDownLayout.currentReference.width}”
             height=“{vScale.valueToLayout(drillDownLayout.currentValue)}”
             stroke=“{colStroke}”/>

       <degrafa:RasterText
             text=“{drillDownLayout.currentLabel}”
             fontFamily=“Arial”
             align=“center”
             x=“{drillDownLayout.currentReference.x}”
             width=“{drillDownLayout.currentReference.width}”
             y=“{drillDownLayout.height+5}”/>
     </axiis:drawingGeometries>
</axiis:HBoxLayout>

The only real piece of interest in this is the addition of a handler for the itemClick event.

itemClick="this.itemClick(event)"

Here’s the code that will handle the click of an item in the layout. Note that it will check to see which layout is currently visible so we can get back to the primary chart.

public function itemClick(evt:LayoutItemEvent):void
{
       // Switch back to main view
       if ( this.drillDownLayout.visible )
       {
            this.drilldataProvider = null;
            this.drillDownLayout.visible = false;
            this.hLayout.visible = true;
            dc.invalidateDisplayList();
         }else {
             var ac:ArrayCollection = evt.item.layout.dataProvider as ArrayCollection;
             this.hLayout.visible = false;
             this.drillDownLayout.visible = true;
             this.drilldataField = &amp;quot;value&amp;quot;;
             this.drilllabelField = &amp;quot;value&amp;quot;;
             this.drillRectangle.fill = ( evt.item.data.type == "receivables" ) ? this.receivablesStack.fill : this.payablesStack.fill;
             this.drilldataProvider = ac;
             dc.invalidateDisplayList();
        }
}

Post to Twitter Tweet This Post

No Comments

Axiis Examples with Lots of Comments

We’ve begun using Axiis on a current client’s project. The application is loaded with graphs and charts and when we hand off the project, we needed to provide a framework for the development staff to quickly build and add new graphing components. Some of the charts are simple but there are some more complicated ones we need to build and will be built in the future. The current Flex DataViz components work fine for simple tasks. But, anyone who has had to go beyond the basics understands the pain that you quickly begin to feel.

Fortunately, I caught Tom Gonzalez’s, (BrightPoint Consulting) lecture at MAX this month and was blown away. The things they’re doing with the Axiis framework and Degrafa are off the charts! (pun intended)

I’ll leave the real discovery to you to check out the Axiis site, but, Axiis is a ’specialized framework that implements specific design patterns that can be used to create your own visualizations’. It’s not a pre-built collection of charting components. They’ve developed a great way of abstracting the basic building blocks of doing data visualization.

Axiis is currently in beta release. There are a lot of great examples on their site so check them out. If you’re new to Degrafa, it’s worth your while to do a bit of reading and check out the cool examples they have on their site as well since many of the examples use Degrafa.

Being in beta, the documentation is a work in progress. The examples from the site are great and really cover a lot of space, but I did struggle with some of the concepts at first. So I’ve taken three of the first examples we needed to borrow from and hyper-commented them for clarity.
I’ll continue to add to the collection over time.

Cluster Stack Example

Linear Series Example

Cluster Column Example

Post to Twitter Tweet This Post

, ,

3 Comments

Workaround to Flex SDK 3.4 Bug 22333 :: HTTPService Responders Are Called Twice…Here’s a Fix!

This one kicked my team’s ass for a couple of hours so I’m hoping it’ll help somone else…so we updated our Flex SDKs to 3.4 and all of a sudden all of our Delegates’ result handlers were getting called twice. We thought it was due to our service orchestration object (we have a base object that allows us to make sequential Cairngorm service calls) and somehow we were calling the services 2x, but nope…wasn’t it. Seemed our AbstractDelegate that sets up the responders for all of our service calls like so had the issue:

public function executeHTTPService(requestDTO:AbstractRequestDTO=null):void
{
	logger.debug("executeHTTPService");

	var token:AsyncToken;
	var responder:mx.rpc.Responder;

	// create a responder for the service
	responder = new mx.rpc.Responder(result, fault); // WTF mate?

	// execute the service
	token = this.service.send(requestDTO);
	token.addResponder(responder); // why yall busted up now???
}

Apparently, SDK 3.4 reintroduces an old defect that causes this implementation of setting up the responder with the async token to call the result handler twice…bummer, eh? So what to do…well, a simple workaround until they fix this is to do the following:

this.service.addEventListener(ResultEvent.RESULT, result);
this.service.addEventListener(FaultEvent.FAULT, fault);

Just create your handlers with good-ole fashioned event handlers…DONE.

Get more info on the defect here.

Post to Twitter Tweet This Post

, , , , ,

3 Comments