Flexpletives

Javascript error in Flex: Why my html won't load my swf...oy!

2012-01-09T09:07:00.000-08:00

Boy, I hate Javascript...actually I don't hate it, but I hate the errors it can throw. Anyways, in this issue I explain why a spurious error actually was correct. I haven't done much Flex 3 in a while, but a current client project asked me to stay within these bounds. I checked out the code from CVS (ugh) and got everything up. But when I tried to run the project, I never launched the swf in the html. Finally I found the error.

Using FireBug, I found that the DetectFlashVer() wasn't firing. Huh?

I checked the files, made sure I hadn't changed any configuation, double checked with the team that I all the code. Everything was there, as they had it.

Only upon further investigation did I realize that I was missing the AC_OET.js and /history from my template. This seemed strange in the beginning, but the client insisted everything was running fine for them. I had to assume it was my configuration, trying to run Flex 3.5 from Flashbuilder 4.6, I must've been doing something wrong.

My only guess is that because AC_OET.js didn't exist a long time ago (I actually don't know when it was introduced to the SDK), when I tried to build the package, because it wasn't in the html-template folder, it wasn't going to just show up, and because the html template was probably based on the newer SDK, it was looking for the javascript, and because it couldn't find that, never loaded...

Case solved.

Old html:
if(DV(6,0,65)&&!hV){document.title=document.title.slice(0,47)....

New html:

var hasProductInstall = DetectFlashVer(6, 0, 65);

This made a big difference. Hope this helps you.

Flex a Spoon, Flash some AIR, and stick around for a while

2011-12-13T14:22:00.000-08:00

Hoyt’s last Chicago Flex preso and Labriola’s SpoonProject

Kevin Hoyt and Michael Labriola both were the guest speakers at our CFUG meetup (www.chicagoflex.org). The great news is that this was the first time either of them had spoken together in the same room at the same time. The sad news is, this will be the last time both of them will be together at CFUG to ever talk about Flex again.

If you are interested in watching the near 2-hour discussion, please go here: https://experts.adobeconnect.com/_a204547676/p7xqmnpakcd/?launcher=false&fcsContent=true&pbMode=normal

Otherwise:

First off, I want to discuss a few things that I feel will help clarify where I am coming from. Often times I have discussions with multiple clients about what Flash is, how Flex fits in, and we can accomplish with AIR. For this post (which is long – way too long perhaps, but long enough to see the point), I am going to just quickly reference and review, then I will discuss: Adobe’s PR (the reason for this meetup and me asking Michael and Kevin to come and talk); Adobe’s strengths, position, and vision for the future; The Spoon Project; Spoons opportunities and dilemmas; and my own 2 cents.

What is Flash?

Plain-speak: A plugin. Want more information, check here: http://en.wikipedia.org/wiki/Flashplayer. It is Adobe’s bread and butter when it comes to content management regarding video and video games. More on that later. For now, know that it is a highly evolved virtual machine (VM) that can execute code (AS3) for a rich and interactive experience.

What is Flex?

Plain-speak: A framework built on top of Actionscript 3. It is a powerful tool for building applications, especially enterprise apps. It has a terrific life cycle, amazing APIs, and is several years ahead of any other technology for delivering secure, robust, and data-driven applications

What is AIR?

Plain-speak: A desktop version of the web browser version of the flashplayer. It has some much cooler APIs than the standard flashplayer, and because it isn’t sandboxed by the browser, you get a few other neat things. Still, it’s mainly a desktop version of the browser version.

So?

Adobe’s PR (fubarred, snafu, or intended)

Adobe is great at one thing, making tools for creative people to create things. In my experience as a developer, consultant, analyst, and everything else, I’ve learned that when it comes to businesses and software development, you get one of two things: an agency approach, or an enterprise approach.

As a quick definition, and agency approach is the short term. These are products that don’t have much shelf life, are short lived in the wild, and even if they win an award will fade into obscurity soon. The enterprise approach is the opposite. While enterprise apps are notoriously slow to come to fruition, they last (what seems) forever. Normally they are a 5-10 year package that sells for a large amount, and comes with upgrades, new features, and snazzy options as the life of the product wears on.

In the world of Adobe, Adobe has no clue how to deal with the enterprise. They can only see one thing, and that is the bleeding edge. As a four-plus billion dollar ($4,000,000,000+) a year company, Adobe makes most of it’s money on creative tools. This means Creative Suite, Photoshop, and a few other choice applications is where Adobe makes its money. It does it by selling tools, or packages of tools, to companies and users. Since the inception of Flex, Adobe has never really figured out how to make money off of it. Flex uses the flashplayer and AIR, but AIR and the flashplayer don’t need Flex. In fact, one of the biggest complaints of Flex is the bloat it brings with its myriad libraries, download times can be severely impacted. Not to mention the speed of an application because it is using the Flex messaging framework. These have been, and will be, hotly contested for some time to come.

Regardless, Adobe never made (“real”) money by creating the framework. It did make some money by consulting on projects, but the 25+ team members it has allocated to the sdk never generated revenue (unlike the large group of folks who work on Photoshop or AfterEffects, whose products do make money). Flashbuilder does generate some revenue, but not at the same volume as the other products. Adobe looks to start projects that can generate at least a hundred million dollars ($100,000,000) a year, and Flex never even came close. Sure it might be a multi-million dollar venture, but is that worth the resources when those resources could be dedicated to a larger project and make more money somewhere else? Adobe says, “Nope.”

So Adobe made the bold move and told the world it is no longer interested in developing Flash for mobile (completely unrelated to Flex), and making Flex completely open source, giving it, and its support to the Apache Foundation (http://blogs.adobe.com/flex/2011/11/your-questions-about-flex.html). Make no mistake about it, Adobe will support the flash player, especially for the desktop, and it WILL support AIR. AIR makes the flashplayer available everywhere that isn’t a browser, so video content and games have a way to live on. And Adobe keeps its cash cow.

And don’t worry, Flex isn’t going anywhere too quickly, but we’ll get there in a bit.

The message from Adobe is messy, sloppy, poorly handled, but think of it like teenage angst, where the person has lost control of their emotions, and finally just said, “Enough! Enough! We can’t have it our way, we don’t want it any way!” Adobe has not been able to capitalize on innovations that are not tools “creative” people need.

Adobe’s position (including Natobi/PhoneGap)

So what does Adobe want to do going forward? For starters, they have their Interactive Developer Evangelist team spearheading a PR campaign to tell all developers that HTML is the future. Their message has become pretty consistent, with their twitter feeds basically dropping any mention of Flex. They seem to ignore everything Flex, and stick with the standards of the future. Let’s not get caught u p in rhetoric. Adobe is not interested in maintaining Flex any longer than it has to. Flex is a dead weight to the hipster, creative, entrepreneurial type. And Adobe cannot wait to release itself from that death grip. To prove that it is over Flex, it bought Natobi, Typekit (http://blog.typekit.com/2011/10/03/adobe-acquires-typekit/), Efficient Frontier (), and a few other online real estate properties, pointing towards a desire to enter and again dominate the tool making process for online advertising (because the flashplayer hasn’t been there for the last decade). From the 8/18/11 anouncement, Adobe is building up to be the leader of “…Content Authoring and Digital Marketing.”

Enterprise applications are not either of those.

Adobe bought Natobi because Natobi created PhoneGap. PhoneGap is a software application that essentially turns any application you create into an HTML5/JS/CSS application, wraps it in a pseudo-browser, and deploys like a native app. So, for example, on iOS this is a standalone instance of Safari running on your device, and it appears to be a standalone, native app, but you are only seeing Safari rendering web pages that are considered the app. The library works quite well, and for all intents and purposes, it acts just as good as a native application. Adobe supports it and suggests you use it as well. For them, this is the bleeding edge of technology, pushing mobile application development.

There is no Spoon?

During the 2011 Flex|360 conference in Denver, it was announced that the Spoon Project was taking off. If you don’t know what Spoon is, read here: http://www.spoon.as/

Short take – it’s meant to help the Flex development team fix bugs faster. It’s got an architecture of people and processes to resolve conflicts and promote fixes faster than Adobe’s Jira and engineers could handle. Spoon has PR, it has volunteers, it has a lot!

Spoon’s dilemma

It might actually conflict with the Apache Software Foundation (ASF). This is not detailed out yet, and Spoon, Adobe, and ASF have some work to do to hammer out the details. There are a lot of license agreements, IP rights, and whatever else a lawyer wants to earn fees to help disentangle Adobe from the Flex framework. Spoon might be a problem only because it is a separate entity ready to run and fix problems, and Adobe is saying, “Actually, let’s let the big boys handle this. We’re gonna give it to ASF, and see that they take good care.” Nothing is set in stone yet, and Spoon may or may not be involved. That is to be determined.

Future

If there’s anything that is certain right now, the Flash player and AIR are going to continuously be improved upon, upgraded, and pushed out to be as ubiquitous, easy to use, easy to get, and easy to update. Adobe has a lot at stake to make sure these tools remain potent sources of DRM content providers, and will keep them up to date. But Adobe also wants users to buy their products if they are making cutting edge products. The amazing thing about HTML advertising is that you can’t disable it without disabling your browser. With Flash, there were plugin disablers galore that allow users the ability to block any flash-related medium trying to load on your computer. However, now with the advent of video and canvas in HTML5, unless you disable javascript on your browser, you can’t stop the ads from coming. It is a marketers wet dream to know that’s where we’re going. And guess what, Adobe is looking to blaze the trail by providing you with the latest and greatest tools to make them. Adobe is not promising Apps, they are promising rich web pages, rich ads, rich user experiences. It is cutting edge, but not anything with a long tail. Flex is a long-tailed beast.

And just for a quick summation, here's Peter Elst's post about the exact same subject:

http://www.peterelst.com/blog/2011/12/13/flex-summit-updates-on-the-open-source-strategy-and-runtimes/

The Flex Summit has had some interesting notes and should help provide information about the future of this industry!

Balanced decision on the future of Flex

2011-11-21T13:34:00.000-08:00

Essentially, Adobe has come to the realization that the world does not
want plug-ins on mobile devices. Unfortunately Adobe has done a
terrible job communicating what their intention is, and the initial
feeling many Flash/Flex users and developers had bordered on
pandemonium. But this announcement is actually great news. Adobe did
a poor PR job, so here's a post that really clarifies the good from
the bad: http://david.realeyes.com/?p=214. And Adobe about their
strategy: http://www.adobe.com/devnet/flashplatform/articles/recent-updates.html

These are long posts, so if you don't have time, here's my summary:

First and foremost, Flash was never really viable on mobile devices.
The actual Flash player has always been clunky, resource intensive,
and just buggy on mobile. It was created for a world of users that
had a mouse and could interact with the screen via a cursor. On
mobile devices this is different, and the rules of
human-computer-interaction have changed. That said, Adobe won't put
resources into something that isn't meant for mobile.

Second, Adobe is finally giving us (developers) the ability to fix
Flex faster than Adobe could. Since Flex 1.0, Adobe has controlled
the entire update and release process of Flex, often times ignoring
blatant problems and publishing updates with a strange sense of
priority. As an open source technology, the community of developers
gets to enhance it, much like Sun made Java open source, and aids
development, but doesn't control where it goes. The community gets to
enhance a mature technology and improve on it, with resources from
Adobe and the rest of the world. Adobe is finally making good on its
original promise from years ago to make Flex truly open source.

Third, the Flash player for the desktop will continue development
because it is viable, extremely robust, ubiquitous, and provides a
uniform experience regardless of which platform you are on.

Fourth, for mobile development, Adobe stands behind AIR and the
continued improvement and development of this tool.

I am not urging anyone to simply take the path of one technology over
another. HTML5 is definitely here to stay, but its tools, frameworks,
and community are very immature compared to the Flash platform.
Conversely, native development is expensive in time and resources, and
both paths cost a lot in regards to testing every browser on every
device and OS.

There are arguments for why companies should begin acquiring and/or
developing talent in native and web-based technologies, but these are
bets being made for a future that might pan out one direction or
another. I think it is beneficial to all companies that have used
Flash in the past to realize that not much has changed or will change.
Flex is an awesome enterprise development tool that can be used to
rapidly build projects. Flash and AIR are great resources with an
excellent community. Adobe just needed to openly realize that Flash
on a mobile device wasn't realistic, and that the community will
benefit more by having Flex be truly open sourced.

For the future of your projects, I truly believe Flex is very strong,
secure, and viable. The wariness of Adobe's commitment is
understandable. Regardless, Flex isn't going anywhere, and will be
here (specifically in the enterprise) for many years to come.

Dynamically loading audio from different locations in ApplicationStorageDirectory

2011-10-27T22:49:00.000-07:00

Similar to my last post about getting data from different locations, this time, instead of trying to load images, i'm trying to load audio clips. It took a little bit of finagling, but I finally have it. Just a quick bit of back story, I am downloading a zip file and unzipping contents into my app storage directory in folders. If I reference the directory, I need to adjust the file.nativePath for that. Enough talk, here's the code:

_file.nativePath     = _file.nativePath + _audio;
                req                 = new URLRequest(_file.url);
                s                     = new Sound(req,context);

over and over I tried to just make the URLRequest be the _file.nativePath + _audio and kept getting the most awful Error #2032 Stream Error (which explains nothing and is not helpful). Finally I came across a forum post that explained that the URLRequest needs the _file.url, otherwise it appends this app:/ to my string, which bombs out. So i can adjust the nativepath, and then use the url. ta-da!!!

Loading images from applicationStorageDirectory in Flex Mobile

2011-10-27T19:49:00.001-07:00

I have to say, without a doubt, this was one of the most confounding things I've worked on in a long, long, long time.In a project for my client, I have to be able to store zip files filled w/ media assets, then be able to load audio or pictures at runtime.

Sounds easy, right? Wrong :(

Loading a picture has never been this painful in my life. It turns out, I can add the image to the stage (which for some reason is not respecting my skin, contentgroup, or vertical layout settings). Regardless, I can finally load any stored image via this "not-so" simple routine. One caveat I have is, I am downloading images in zip format, and using a utility to unpackage them into the storage directory in folders. originally I though that would be a problem, but it turns out, because I can update the file.nativePath with the new folder, this works just fine.

var fl:File = File.applicationStorageDirectory;

fl.nativePath = fl.nativePath + _image;

var bytes:ByteArray = new ByteArray();

var filestream:FileStream = new FileStream();

try{

filestream.open(fl, FileMode.READ);

filestream.readBytes(bytes, 0, filestream.bytesAvailable);

filestream.close();

loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, showPic);

loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onError);

loader.loadBytes(bytes);

}catch (e){

trace("xml badly formed");

}

and in my showPic method:

loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, showPic);

var bitmapData:BitmapData = new BitmapData(loader.content.width,loader.content.height, true, 0x000000);

bitmapData.draw(loader.content, new Matrix(),null,null,null,true);

img.source = new Bitmap(bitmapData);

Honestly, painful, but it gets the job done. Now to load audio dynamically from saved files is another story for another post:)

Datefields before Flex 4.5

2011-05-10T11:14:00.000-07:00

So I wanted to take advantage of the custom skinning I had already done for a datechooser, and apply that to my new datefield without making a copy of all the skin classes. Turns out, this is relatively easy, if you know what to look for. Code below:

Extend datefield
set the dropdownFactory in the constructor to an IFactory var
then in css, set your custom datefielddatechooser's settings (which may be identical or different to your own datechooser custom skins)
and finally, in css (or wherever else you set your styles), for the extended datefield, set the dateChooserStyleName to null...i.e. ClassReference(null)

You do these steps, and you'll have your custom skins show up on the drop down of the datefield...a PITA and Flex 4.0/4.1 problem, so maybe it's no longer mx in 4.5 (but I can't find it anywhere in spark, so maybe it's still stuck in MX hell?). Anyways, as promised, here are some code examples, if my sytnaxhighlighter doesn't eat them.

DateFieldBase.as



package com.lordB8r.view.component.controls.datefield{

import flash.events.Event;
import mx.controls.DateField;
import mx.core.ClassFactory;
import mx.core.IFactory;

public class DateFieldBase extends DateField{
private _dateChooser:IFactory = new ClassFactory(DateFieldDateChooserBase);

public function DateFieldBase(){
super();
this.dropdownFactory = _dateChooser;
}
}

DateFieldDateChooserBase.as:


package view.component.datefield.datechooser{
 import mx.controls.DateChooser;
 
 import view.component.datechooser.skins.CommonsDateChooserNextMonthSkin;
 import view.component.datechooser.skins.CommonsDateChooserPrevMonthSkin;
 import view.component.datechooser.skins.CommonsDateChooserRollOverIndicatorSkin;
 import view.component.datechooser.skins.CommonsDateChooserSelectionIndicatorSkin;
 import view.component.datechooser.skins.CommonsDateChooserTodayIndicatorSkin;
 
 [Style(name="highlightFillColors",  type="Array", arrayType="uint")]

 public class DateFieldDateChooserBase extends DateChooser{
  public function DateFieldDateChooserBase(){
   super();
   setStyle("nextMonthSkin",    nextMonthSkin);
   setStyle("prevMonthSkin",    prevMonthSkin);
   setStyle("rollOverIndicatorSkin",  rollOverIndicatorSkin);
   setStyle("selectionIndicatorSkin",  selectionIndicatorSkin);
   setStyle("todayIndicatorSkin",   todayIndicatorSkin);
  }
  
  protected function get nextMonthSkin():Class{
   return CommonsDateChooserNextMonthSkin;
  }
  protected function get prevMonthSkin():Class{
   return CommonsDateChooserPrevMonthSkin;
  }
  protected function get rollOverIndicatorSkin():Class{
   return CommonsDateChooserRollOverIndicatorSkin;
  }
  protected function get selectionIndicatorSkin():Class{
   return CommonsDateChooserSelectionIndicatorSkin;
  }
  protected function get todayIndicatorSkin():Class{
   return CommonsDateChooserTodayIndicatorSkin;
  }
 }
}

CSS:


datefield|DateFieldBase{
date-chooser-style-name: ClassReference(null);
}


datechooser|DateFieldDateChooserBase{
headerColors: #e2e6eb,  #f4f5f7; 
todayColor: #818181;
rollOverColor: #b2e1ff;
selectionColor: #7fceff;
color:   #373830;
borderColor:  #b7babc;
headerStyleName:"mydateChooserHeaderStyle";   
weekDayStyleName:"mydateChooserWeekDayStyle";   
todayStyleName:"mydateChooserTodayStyle";
}

.mydateChooserHeaderStyle {
color:         #373830;
font-weight:      bold;
}
.mydateChooserWeekDayStyle {
color:         #373830;
font-weight:      bold;
}
.mydateChooserTodayStyle {
color:         #ffffff;
fontWeight:       normal;
fontStyle:        normal;
textDecoration:      none;
border-visible:      false;
}

DateChooser

Adding Rollover/rollout halos to Flex 4 skins

2011-05-09T21:28:00.000-07:00

So in my current project, I'm working on skinning several controls in Flex 4. One of the issues that I'm coming across is the desire to have the rollover halo effect that used to be in Flex 3. I was getting css styles from the Flex Style Explorer developed several years ago by the Adobe Consulting team. Now, don't get me wrong, that explorer has saved me many sleepless nights. However those styles no longer apply in Flex 4. The main reason is that some components no longer extend from button that used to normally extend from button.

ButtonBase.as is fascinating, and a great place to read up and understand the most basic principles of skinning and the skin UIComponent that is attached to the Button. Flex 4 is wonderful, and I really, really, really enjoy the maintainability of skinning components in this framework much more than the previous framework.

Anyways, the point of this post is to quickly show you how you can take advantage of skin parts, and pre-existing components, to extend your components and get effects that you thought were lost in the transition to Flex 4.

Anyways, if you haven't seen, I think (but can't remember right now) I did a post on passing CSS styles into Flex 4 skins via custom components. Regardless, you can easily add rollover effects to standard components with a few steps.

Create a new component that extends skinnableComponent





public class ComboBoxBase extends SkinnableComponent{

In that component, add a skinPart. For more information about skin parts, see Ryan Stewarts quick blog about it here. That got me going further





[SkinPart(required="true")]


public var cbo:ComboBox;

Create a new skin that extends from skinnableComponent





<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 


xmlns:s="library://ns.adobe.com/flex/spark" 


xmlns:mx="library://ns.adobe.com/flex/mx">


<!-- host component -->


<fx:Metadata>


[HostComponent("spark.components.supportClasses.SkinnableComponent")]


</fx:Metadata>

Add the states you want (mine were hover, hoverNormal, normal)





<s:states>


<s:State name="normal"/>


<s:State name="hover"/>


<s:State name="hoverNormal"/>


</s:states>

Add to the skin the control you want to have a halo around





<s:ComboBox id="cbo" width="100%" height="100%"/>

notice that the combobox here has the exact same ID as in the component class (that is important!)

Add a rect before (or after - depending on the effect you want) with a solidStroke.





<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="3" > 


<s:stroke>


<s:SolidColorStroke color="0x0000ff" alpha.normal="0" alpha="1"/>


</s:stroke>


</s:Rect>

I put my rectangle afterwards, and you can specify radiusX and many other items using script or CSS.

In the custom component, override the partAdded and add some eventlisteners for mouseEvent.ROLL_OVER/ROLL_OUT. (and don't forget to remove them, otherwise some other person might get angry).





override protected function partAdded(partName:String, instance:Object):void{


super.partAdded(partName, instance);   


if(instance == cbo){


cbo.addEventListener(MouseEvent.ROLL_OUT, haloEffect);


cbo.addEventListener(MouseEvent.ROLL_OVER,  haloEffect);


}


}  


override protected function partRemoved(partName:String, instance:Object):void{


super.partRemoved(partName, instance);


if(instance == cbo){


cbo.removeEventListener(MouseEvent.ROLL_OUT,  haloEffect);


cbo.removeEventListener(MouseEvent.ROLL_OVER,  haloEffect);


}


}

In your event handler, change the skin.currentState to the new state that you setup in your skin.





protected function haloEffect(me:MouseEvent):void{


if(me.type == MouseEvent.ROLL_OVER){


//stateChanged('normal','hoverNormal',false);


this.skin.currentState = 'hoverNormal';


}


else{


//stateChanged('hoverNormal', 'normal', false);


this.skin.currentState = 'normal'


}


}

And finally, don't forget to add your skin to your component via setStyle('skinClass', skinClass):





public function ComboBoxBase(){


super();


setStyle('skinClass', skinClass);


}


protected function get skinClass():Class{


return ComboboxSkin;


}

And there you have it, a fully haloed Flex 4 component, that you dind't have to do a lot to get...if enough folks want to see the code files, I'll try to find a way to get Blogger to let me post those as well. Hope this helps someone else

(ps - i apologize for any code syntaxHighlighting formatting problems...I've spent too much time trying to figure out how to do this right now, but if it is really causing someone headaches, please let me know, and I'll spend some more time cleaning it up. Thanks!)

Custom skinning mx tabnavigator tabbars in Flex 4.1 (pre-4.5 mx style)

2011-04-24T13:21:00.000-07:00

For anyone who doesn't care about my explanation and just wants code, please see the bottom of the post.

The annoying part about this post is that it probably won't matter for anyone using Flex 4.5 or later, but if you are using Flex SDK 4.0 or 4.1, this might just help you. I've been working on skinning a tab navigator, and in the process, kept running into roadblocks, especially when I wanted the skin to respect a new state. Long story short, skinstates in MX components were not behaving correctly, and skinning a Flex 3 component with a flex 4 mxml skin, expecting states to help me change views, wasn't working.

I tried to invalidateSkinState, but that's not a feature of Flex 3, and I tried to overwrite the Tabbar and Tab, but that become a bloody mess because of all the needed inheritance. The best answer to solve the riddle came here from Ivan Latysh, who succinctly says, "doc's are lying". Hellz yes they are. The docs only tell me to use the css (it doesn't mention that the framework actually comes with two). The biggest problem I was having was just getting the skinning rectangles to respect their selected/non-selected states. They wouldn't. The couldn't. because when I traced down to it, tab navigator doesn't fire off a StateChangeEvent for anything other than "up" (*disclaimer: myriad reasons might be at fault, including my own customizations of my setup, but for sake of argument, I couldn't skin a tabbar as part of a tabnavigator [separate components wouldn't work because by the time I was brought in on the project, the logic was heavily embedded for the tab navigator]).

Because I can't have the tabnavigator separated, I needed to figure out how to skin it appropriately to recognize the events and the actions. Justin, aka Saturnboy has an amazing post on pushing component events into skins here. So did WebDevGirl and James Whitakker. And this stackoverflow post helped, but still, I still find the right info. The tabbar refused to accept anything for mouse over events, and the only thing I could eventually figure out was that the component wasn't applying state events to the tabbar.

If this is the case, then it's a bug in 4.1.

But here's my solution, because I wanted to set everything in my library to respect the classes, and then styles could be overwritten in later CSS files (this tabnavigator was actually part of my core library, and I needed it to have the default skins to be adjusted by later users.

up-skin: ClassReference("lordB8r.view.component.navigableContainer.skin.CustomTabNavigatorSkin");

over-skin: ClassReference("lordB8r.view.component.navigableContainer.skin.CustomTabNavigatorSkin");

down-skin: ClassReference("lordB8r.view.component.navigableContainer.skin.CustomTabNavigatorSkin");

selected-over-skin: ClassReference("lordB8r.view.component.navigableContainer.skin.CustomTabNavigatorSkinSelectedTab");

selected-down-skin: ClassReference("lordB8r.view.component.navigableContainer.skin.CustomTabNavigatorSkinSelectedTab");

selected-up-skin: ClassReference("lordB8r.view.component.navigableContainer.skin.CustomTabNavigatorSkinSelectedTab");

However, if I want the original skins from the mx component, and have those skins and their faculties recognized, use this to override the default skins that I was trying to set styles to:

skin: ClassReference("mx.skins.halo.TabSkin");

border-skin: ClassReference("mx.skins.halo.HaloBorder");

border-side: "left, top, bottom";

The main purpose of this blog post is to point out that even though the styling that I wanted to use in Flex 4.1 on an MX component should have allowed me to create a custom skin (albeit in AS3 or MXML), and apply to the class, I couldn't do it because the component was reverting everything back to 1 class and not passing state events into the component (the only event I could capture was "UP", which was not very helpful.

Anyways, I do believe the tabnavigator is now a Spark component, and this headhache should evaporate with Flex 4.5, however, if you are stuck on a 4.0 or 4.1 project, and need to apply skins to the tabbar, this should at least show you that the skins themselves aren't very good for listening for events, so either override them completely, or use the original skin, and use original stylings for mx components (and just override in the css - apparently doing so at the component creation point doesn't seem to help ;p )

FizzBuzz in AS3

2011-02-21T19:17:00.000-08:00

I'm not sure why this didn't seem hard, but in 10 minutes I came up w/ this solution to fizzBuzz:

private function fizzBuzz():void{

for (var i:int = 1; i <= 100; i++){

var str:String = String(i) + " " ;

if(i%3==0){

str += "Fizz";

}

if(i%5==0){

str += "Buzz";

}

trace(str);

}

Was there an easier way to do this? Could I refactor this down further in AS3? I tried overcomplicating it for reuse, but then said, "why?" I just need it to spit out Fizz, Buzz or FizzBuzz, and the value of i...so that's it for now...Go AS3, modulo, and procrastineering...

edit: After reviewing the code, I decided to expand it (yes, I wasted another 10 minutes on this), but now I can pass in to fizzBuzz any values so that I don't have to have my modulo hardcoded. Here it is, eat your heart out :)

public function fizzBuzz(starter:int, ender:int, fizzer:int, buzzer:int):void{

for(var i:int = starter; i<=ender; i++){

var str:String = i + " ";

if(i % fizzer == 0){ str += "Fizz";}

if(i % buzzer == 0){ str += "Buzz";}

trace(str);

}

Hacking an iOS app from an existing Flex app

2011-02-02T08:10:00.000-08:00

To make an iPhone application work from an existing Flex/AS3 app, you have to jump through a few hoops. The first and foremost are getting a few certificates, png's and licenses out of the way. Before going any further, you need the following:

1) Provisioning profile
2) PKCS12
3) icons
4) an app (not necessary before you start, but indeed necessary for the end result)
5) PFI (Packager For IPhone)
6) AIR SDK (2.0.2 or later)

Ok, the provisioning profile is the hardest bastard to deal with. If you are like me, and just want to put together a proof of concept, you don't (nor shouldn't) have to pay a company $99 just to try it out. However that's not how it works for iOS applications. Apple wants your money any way they can get it, and even if you want to write just a simple app, they'll try and get it however they may. After asking Lord Google the best way to get past paying money, I found this one link with a hacked provisioning profile...success!!! Actually, I need to learn the mechanics of this profile to understand what's really in there. But for my POC, I just grabbed one from here.

Next, I needed a PKCS12 (or more short-handedly known as a .p12) certficate. This wasn't easy because I've never created one before. After much searching and trying, I came across Flat Mountain's awesome posts on how to do it. Always looking to improve my shell skills, I followed his post and finally got some certs built. I could've used Apple's developer site, but that seemed to obtuse. and this is for OSX.4, so it might not be relevant, but it's also a start. On a Mac you can even use Keychain Access, but I didn't go the "easy" route until Flex Builder started complaining that my cert wasn't a "code-signing" cert... I spent another few minutes trying (However, now that I'd gone through the process of making the cert manually, I understood a lot more about what keychain access wanted to do). In less than 3 minutes I had created a CA and a cert…but dangit! I couldn't export those as code signing certs (at least not right off the bat, even though I had created them as code signing certs). About 2 minutes later, i figured I had to evaluate the cert. I changed the viewing and evaluation to Code signing and voila! I could export the cert as a .p12! WOOT!

OK, fine, I should also post that exporting the final release will also give you the option of creating your own .p12 right there on the spot, but I felt like that is just way too easy to do, and you don't actually have a clue what's going on in the black magic voodoo of Flex Builder's sneaky background (maybe a post is required about how FB builds keys…but not right now).

Armed with my cert and profile, I just needed a quick default icon, so I used some Photoshop (which isn't necessary, but can help), then Apple's Icon Composer (part of the xCode package: /Developer/Applications/Utilities/Icon Composer). This guy's blog post helped, but I wasn't interested in paying for CandyBar, so I skipped that step . It's also about 4 years old, so unless you're still running just Leopard or Tiger, and CS3 or CS4, then you have to use a little imagination.

Ok, icons and certs down, now to getting my AIR app to work. I used FB4's converter to change the project from Flex to AIR. A few errors (read: Flex 3.5 SDK custom preloader doesn't like AIR applications because of the addedToStage event. With a workaround in my custom preloader, I have a functioning AIR app that works on my desktop.)

Now, command line is cool, but sometimes we just need functional. I got the steps from Kevin Cantrell's post to start with, but I didn't like figuring out all the paths, tabbing through and hopefully not messing up the spelling of anything (I'm lazy, not a hipster). Even after making it all, putting it into a text editor so I could copy and paste for later use seemed trite. So I used FB's export tool with my custom signed certs to at least build my app's swf (it exports as a .air, but that's just code for .zip/.tar/.air/.whatever). I un-tarred it to have the swf, but there's also a copy in my bin folder by default. I also want to be lazy, so I used this post from Ivan to update the ant build process so I could remain lazy. Now I have everything in place, so let's let it run, and tada!!!

I've got a functioning Flex app converted from Flex 3.5 to iOS (with some hefty mods). and it runs! Ok, it isn't native, but as a POC, it doesn't matter. The point is the point.

This was for me a POC as well as an aggregation of different user's experiences. If you have any questions, please ping me or the other guys who put this together.

Debugging Flex and Java on Glassfish on OSX6

2011-02-01T17:50:00.000-08:00

Just a short post about debugging apps. If you are using OSX and Glassfish, if you want to debug a remote java application, you need to do the following on the glassfish (there are 2 ways to do this)

The first is going through the admin screen -> application server -> JVM Settings -> JVM Options -> and add the following to JVM Option:

-XX:+UseParallelGC

Save your options and you'll need to restart your server.

Make sure you only add that here, otherwise your server won't start up correctly and you'll be forced to do what I learned the hard way (proceed to step two if you added it to the General tab's Debug Options)

Open the following file:

~/glassfish/domains/domain1/config/domain.xml

Add a child to the with the same parameters:

-XX:+UseParallelGC

Then restart your server and you're all set! I hope this helps anyone else trying to get eclipse breakpoints to actually catch on debug mode using glassfish!

Sending an email from your Flex app just got easier (short post)

2011-01-07T12:08:00.000-08:00

I want to send an email from my Flex app. Well, if I don't have a backend mailserver setup, and I want my user to send me a message about, say, the app's service crashing, the easiest way to do this is through URLRequest!

Quick demonstration -

1) Create the url request:

var u:URLRequest = new URLRequest("mailto:"+EMAIL_ADDRESS);

2) Create a variable for the subject and body:

var v:URLVariables = new URLVariables(); //interestingly, you can put all the variables into a string and pass that in, but here we're just going to append them as properties to the object

3) Assign those properties:

v.subject = "Application crashed";

v.body = TEXT_OF_CRASH_MESSAGE;

4) Pass those variable properties into the URLRequest:

u.data = v;

5) Navigate to the URL:

navigateToURL(u, "_self"); //the _self is .js and not required

This is an easy way to pass any valuable info from your flex app into your user's default email program (Entourage/Outlook, Thunderbird, Mail, etc.)

Error #2173: Unable to read object in stream

2011-01-06T07:31:00.000-08:00

I've been working on building up async tests (which I should have a different post for shortly), and came across this annoying error:

ArgumentError: Error #2173: Unable to read object in stream. The class com.lordB8r.model.Control does not implement flash.utils.IExternalizable but is aliased to an externalizable class.

at ObjectInput/readObject()

at mx.collections::ArrayList/readExternal()

at mx.collections::ArrayCollection/readExternal()

Finding FlashSecret's comment helped, but didn't get me all the way there. While I could put the path inside an array, I wasn't assigning the return value to an array, or Control. Instead, I needed to import a/the class(es) needed by IExternalizable in my test. So, simply putting this in my test class made it work:

import com.lordB8r.model.Control;

Is this correct for testing? I'm not sure, but it helped me get my async test to retrieve data from a Spring RESTful service. Test passed because I got data, but only once I told my test what data type it should be expecting.

I've dealt with this when bootstrapping an application, also when requesting data back from the server. Often times, my service class (or service recipient) doesn't know the type I just asked for, so I need to import it into that class.

To Cuddle or not to Cuddle :} setting curly brace defaults in my IDE

2010-12-21T09:42:00.000-08:00

After a short stint of not understanding what the heck people were moaning about on twitter (re @jesterxl's comments about cuddling), and thanks to him, I came across Grant Skinner's post about curly braces.

I am personally a cuddler. I find the code easier to read, and I am of the school of thought that less lines of code is better. Also, to me logic dictates that if you are starting a block of code, you would emphasize that by showing me on the line that you are declaring the opening of that code, that the code block begins with the curly. In Ruby, there are no curly's for code blocks, so it doesn't bother me there.

But what bothers me, and Grant mentioned it, is how Flashbuilder autogenerates non-cuddled code blocks. And he griped about it, asking that anyone who knows how to fix the problem please let him know. Well, here's my quick fix, using Flashbuilder 4 on Eclipse 3.6 on OSX6.5:

-> Preferences (cmd + ,) -> Flash Builder -> Editors -> Code Templates -> ActionScript

For each of these classes, I manually updated the templates so that the curly braces all were at the end of the opening line for package, class and constructor, i.e.

package com.lordB8r.controller{
  public class TestClass{
   public function TestClass():{
   }
  }
}

and methods did the same thing:

private function runTestClass():void{
}

ahhh, breathe deeply, knowing that all auto-magically generated code in AS3 will now conform to my preferences.

And yes, I can export these settings, in case I don't want to manually change all of them for each instance of Eclipse (and then reimport them).

Now, I obviously am not smart enough to be the first person to have come up with this. There is the following resources I found:

InsideRia's article by Greg Owen
FlexFormatter
ActiveTuts by Jesse Freeman
and the best example so far is someone who actually made real templates of what they use in their workflow:
FBB blogpost by Maxim Kachurovskiy

And you can quickly find your own by using lord google.

Resizing Dynamically Loaded swfs using swfloader

2010-12-06T23:57:00.000-08:00

In my current project, I am using RobotLegs and a parent application to load in "modules". However, I don't use modules, because frankly, I don't quite get why I should. Instead, I have separate swfs that I can load, and pass information to them, if necessary. The biggest frustration that I have is that when I resize the parent application, my child, which is a loaded swf, doesn't know it's stage has been resized, and thus doesn't resize itself. To fix that, I tried a few different options, including resizing the loader, the system manager, the loaded application, the screen, everything!!!

The problem I was running into is that my loaded swf was getting it's size clipped. This was unacceptable.

For example, if I loaded my swf into my app, if the window was sized at 700x400 (w x h), if I resized my window to something smaller, the controls inside the loaded swf would follow accordingly. However when I resized the window larger than 700x400, the controls would get clipped by an auto-assumed max size of the loaded swf's stage.

GRRRRRRR!!!!!!

So I have lost countless hours of sleep, including the time it's taking me to post this incoherent message. But I feel I must share about resizing a loaded swf without scaling. Right now I have some jerkiness in the movement, but it forces a scale and resize of the loaded swf's width and height.

I avoid using the _loadedSwf.scaleContent and _loadedSwf.maintainAspectRatio. These together were fun to figure out, but the end result was that my controls were scaling, and I didn't want that. If I turned off scaleContent, then nothing would resize. If I turned off aspect ration, then things started looking wonky.

because I had added my _loadedSwf to a SkinnableContainer, and that container was getting resized, I wanted my _loadedSwf to update to that container's size. On initialization I do use a method inside _loadedSwf. And to use that, I have something like the following:

var loadedSM:SystemManager = SystemManager(_loadedSwf.content)
loadedSM.application["updateDimensions"](container.width, container.height);

This worked great for the initial setup, but resizing still didn't work. I won't recount the countless hours I've tried to make it work. Needless to say, and the reward for reading this post is to see that to make this work, I did the following on the resizeMyApp(), called by the parent application whenever an EVENT.RESIZE_EVENT is dispatched:

_loadedSwf.content.width = container.width;
_loadedSwf.content.height = container.height;
Object(_loadedSwf.content).setActualSize(container.width, container.height);
loadedSM.application["updateDimensions"] (container.width, container.height);

I got the idea on page 48 of this manual (Thank you Matt Horn!!!)

http://livedocs.adobe.com/flex/3/loading_applications.pdf

These last 2 lines seem a bit hazy to me, but if I remove one of them, then the resizing doesn't work. I do have some jerkiness that I need to work out, but the overall resizing now commits correctly. I think there is something in the updateDisplayList() that I've missed, but somehow this makes the call work.

the iPhone, development, and Hedonism

2010-06-07T19:37:00.000-07:00

Sorry, should’ve clarified...some emails were going around amongst my colleagues, and we were discussing the newest iPhone. While Apple is the king of cool right now, they're still stuck with a crappy cell phone provider that is worthless if you want your phone conversation to last longer than 30 seconds (about the average amount of time before an average call drops - with full signal strength, mind you).

For me, Flash happens to be a medium I work in, but I’m a Rich Internet Application developer, and HTML5 + javascript, or Flash + javascript, or Silverlight + javascript all can achieve the same thing (eventually)...My job is to make shit look cool (kinda like bouncing gradient balls using gravity to propel themselves through millions of particles of pixie dust (optimized by apparat, of course), all while synthetically growing and teaching you something about polymorphism, or something like that)

I don’t think the hedonistic value of owning an iPhone would actually improve my life in the least, aside from earning the respect and envy of toy collectors...I know I’m a luddite, because I don’t want a phone that surfs the web on a shoddy little screen (high res or not).

Smart phone or not, I hate surfing the web on tiny screens...watching a movie, or playing a game is ok, and getting some quick information distilled down to a quick blurb on twitter-like basis would be useful, but reading entire sites, surfing through the Nytimes, or even going to craigslist suck on these little screens (at least for someone like me with big fat fingers). The iPad comes closer for casual users, or people who don’t need a professional development environment, and just some connectedness...the iPhone (compared to the Incredible) is ok, but I’m not losing sleep.

I’ve got to get back to making cool shit happen on the screen (whichever size screen that may be).

Oh, and Hedonism is an amazing scotch by Compass Box. I really love their bottle of Peat monster, and they've got some yummy other bottles. Try them out if you can.

Getting Flex 3.6 SDK, Flashbuilder 4, Tomcat, and BlazeDS to all play nice?

2010-04-22T21:06:00.000-07:00

Ok, I'll be honest, I haven't gotten Blaze to play nicely yet, but I haven't had anything to setup w/ it yet. I'm connecting to a previous setup that used Tomcat to connect to OLAP, and I'm recreating it in FB4 instead of Spring Suite tools. Much of my team prefers STS, but I am comfortable right now in my efficiency in FB3/4, so I blogged yesterday about wiring up the Flex 3.6 SDK

Connecting to a Tomcat server was the last hurdle before I get to a BlazeDS, and so I found this nice little plugin that I couldn't get from any other source. For some reason, Tomcat isn't supported easily on Eclipse 3.5, and I'm not a fan of the standalone Flash Builder. I prefer the Eclipse plugins, and found this would help me stay within the Eclipse.

http://www.eclipsetotale.com/tomcatPlugin.html#A3

This was a very nice find. I simply put the package in my eclipse plugin folder, and immediately when I restarted Eclipse, I had a Tomcat option on my toolbar. In the preferences pane (Command+,) I could point the plugin at my Tomcat install, and away I go.

Now I can setup keyboard shortcuts (like Command+shift+t) to start/restart, or stop Tomcat. The information from eclipsetotale is quite helpful, and I'm glad I came across it.

Now to get down to some hardcore devving

:)

Getting up to speed on the latest Flex 3 SDK’s

2010-04-21T20:55:00.000-07:00

This is not assuming you already have Flex 3 installed on your machine (eclipse plug-in or stand alone).

In order to do this and avoid buggy errors, the latest nightly build of Flex SDK 3.6 is what I’ve used successfully. I found one of many a bug which are annoying as all get out regarding comboboxes (which is why I prefer/recommend 3.6).

In order to get up and running quickly, download either the latest or 2nd to latest nightly build of SDK 3.6, found here from Adobe.

Inside your Flexbuilder sdk folder, create a folder for 3.6.0, something like this:
for  Windows: C:\Program Files\Adobe\Flex Builder 3\sdks 
for Mac: [I use eclipse w/ the plugin, but it’s probably something similar] /Applications/Adobe Flex Builder 3 Plug-in/sdks

Now install (or copy over) the newest SDK to this folder from the download.

Next you’ll need to download the data visualization package (and unit testing if you use that). While the latest build is for 3.5, you can use the package for 3.6 as well.

And instructions for where to copy the files from/to:

This helped me get the environment up and running quickly in 3.6. This can also apply to anyone developing using Flashbuilder 4 and working with SDK 3.x (for previous projects).

Creating an AIR Installer badge for Flex Devs

2010-04-12T21:24:00.000-07:00

In building a recent app, the customer asked me to also make a flash badge for their installer. This way they could deploy the app installer, yet control the download of the AIR app. For me, the badge allows two things, control of the app's image, and some nice SEO. If you can get other sites to deploy your badge (which is a simple group of files), then you can get some nice cross linkage SEO (not to mention and SEO linking/MetaData you might have in the SWF that runs the installer), and also some good data.

So to create a Badge, use Adobe's sample badge which I found here (on my Mac):

/Applications/Adobe Flex Builder 3 Plug-in/sdks/3.6.0/samples.

After you copy it into your project's folder (or wherever you'll most effectively work with it), you'll need to open it in Flash to manipulate some of it. Now, I am not a Flash IDE user. It takes me quite some time to figure out what the heck timelines are, and what layers are doing where, but in all honesty, if I could just figure this out, I'm sure I could do some killer stuff in Flash that would help out my enterprise apps. Anyways, inside the group of items are .js, .html, .as, .swf, .jpg, and .fla. The .fla allows me some room for designing, creating, and manipulating my text area. Following Lee Brimelow's (http://www.gotoandlearn.com/play?id=56) example of making a tooltip in Flash (something I enjoy taking for granted in Flex), I built a hover over tooltip in my installer badge, as well as added some SEO in the metadata of the swf, and inside the jsp/html page.

It took me a few minutes to realize that the badge itself was generated from Flash, so once I got inside of Flash, and started tooling around, I found out I could easily automate, or graphically change around, things on my installer badge. And by using my own customized image, I could adjust inside the .fla what the image was to be shown, and could now use an animated .gif, or a .png, or (using the awesomeness of alchemy and ZaalLabs) 40+ image types.

Also, because the fla incorporates the as file, I adjusted a few settings there for some more seo, and used that to compile and push out my swf. bada-boom, bedaubing, I now have a kick-a$$ installer badge, with a custom logo, and I can mess around and adjust anything about the badge I want (including animation, or generative art, or what not). And the installer file is tiny (in comparison to a flex app, this thing was only about 6k when I was done). 6 friggin K. That's ridiculously small…I need to learn to make Flex apps that small.

Anyways, please enjoy hopefully these step by steps will help you make a better AIR app installer badge.

Working w/ Global settings in Flash to get around Sandbox Security issue

2010-03-19T05:31:00.000-07:00

I am working on an app that needs local resources and network resources. I was getting very frustrated during my development because I couldn't read the local setup file. Unfortunately, after a lot of digging around, the only reason I could find that the app wouldn't load was because the global settings for flash had been changed. Because these settings are only available by going online here:

http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager02.html
or here:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html
or here:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html
or here:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager06.html
or here:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager07.html

The following isn't a tab, but allow you to view set your player updates:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager05.html

Anyways, the annoyance for me is a couple of things:
1) why is this remote (aka why do I have to keep reloading a page to look at flash player settings inside of a flash swf?)
2) What is the garbage that Charles is recording going back and forth, and
3) where is this swf object located on my machine so that I may have some more control over it.

It's amazing to see what sites (intentionally visited or not - which includes pop-ups) that are stored in the global settings…I need to understand this more if I'm going to want more security for my machine.

Anyways, the point I had about this post was that the global security settings were causing me some problems in connecting my app to the intertubes. Once I made a checkmark on the Global Security Settings, I could actually see content and it resolved my problems (and all of this started as a search into possible cross domain issues, and not just my own irrational fears that someone might actually want to track all the websites I've been to and store private information about it without letting me know/delete/erase this stuff, manage my own security, etc…).

Compiling Release Build in Flex - non-alerted memory error:

2010-02-14T17:38:00.000-08:00

I use Eclipse with FB3 plug-in for all my development, and often can become the case with opportunistic applications, Eclipse will grab more and more memory. If I'm working on 2-3 apps at once, compiling and changing objects, I quickly lose up to 500MB to Eclipse. Garbage collection and heap status size are determined by the .ini file. When working on projects that have to embed a couple of fonts, I've had to increase the size, so that the compiler doesn't give me an out of memory error and ask me to close my workbench.

Well, to keep Eclipse from becoming a memory hog, I changed the runtime and max perm size to 128 respectively. This normally keeps Eclipse happy, running pretty quickly, and about as close to 300MB at runtime as I can keep it. Well, recently while building out a project, I tried to export my final build, and the application kept crashing or bombing out. The problem was that it wasn't telling me what was going on. It just kept stopping, and not giving me a reason why. I knew something was wrong because the release-bin folder remained empty.

Switching over to Eclipse's plug-in development, I checked the error logs (very, very important resource when Flex and Eclipse fail without giving you warning…). The error:
java.lang.reflect.InvocationTargetException
.
.
.
Caused by: java.lang.OutOfMemoryError: Java heap space
Root exception:
java.lang.OutOfMemoryError: Java heap space

Aha! Eureka - my answer lay in the fact that I had changed my workbench max and permanent size to something smaller than it could use, but it wouldn't tell me that. Why Eclipse, is there now message? Well, glad I know how to find the error log in Eclipse.

Hope this helps anyone else who's Release Build fails, and no answer/reason is given…

Dynamically Showing Embedded Images in Flex

2010-02-04T10:55:00.000-08:00

Dynamically Showing Embedded Images

Several resources will show how easy it is to embed an Image in Flex. You can embed inline, via meta tag, and another way (which I forgot right now). Regardless of any of these ways, they assume you always know when you are going to be using your embedded image, and don't have much flexibility if you want to dynamically change the image for a component based on something as arbitrary as mouseOver.

If you look at the profuse examples when googling, you come across many that show you how to embed inline:
<
<mx:Image id="img" source="{@Embed(source=assets/img.jpg)}" />

Or you can embed an image via metatag inside your class, and then call it explicitly in your component:

<mx:Metadata>
[Embed(source="assets/icons/myImg.png")]
public static const myImg:Class;
</mx:Metadata>
…
<mx:Image id="img" source="{myImg}" />

Or you can embed the object in another class, foo, and then reference it in your Image:

import location.for.assetClass.foo;
...
<mx:Image id="img" source="{foo.myImg}" />

More often than not, I like to go the third route, mainly because I want to be able to access the images from another class, or from multiple components. Now knowing how to embed images is great, but my quandary was, "What do I do if I have 30 or 100 small icons/images that I want to embed, and the component that is using the image doesn't know the embedded image to use until runtime, i.e. itemRenderer, or dynamically generated object using static icons (recycled buttons…)?"

For this example, I am using a simple list, with a custom itemRenderer. The list's dataprovider has an id and some other information for each record. In my customItemRenderer, I can get the data.id and use that to determine the picture I wanted to use. The only problem was, I have know idea how to call foo.myImg dynamically. I tried getClassByName(data.id), but it refused to cast my object to a class or would return null.

I really thought that because I had embedded my image, then cast it as a class, I'd be able to call it by name. Bummer!

Next I setup an array and a method inside of class foo. The array, called myAssets, is an array of all the classes inside of foo. The function was called from the itemRenderer, in init() to get the class for the image to assign it, as a ByteAsset, to the source for the image. Inside of foo, I have the following:

public function getClass(str:String):Class{
var s:String = "[class IconAssets_" + str + "]";
for (var i:int = 0; i < myAssets.length; i++){
var t:String = myAssets[i].toString();
trace(t);
if(s == t){
return myAssets[i];
}
}
return null;
}

I would pass in the data.id to the getClass(), and the return would be the class I needed. This actually worked, but seemed quite cumbersome, especially because now I was not only responsible for creating the embedded image, but also adding and maintaining an array for all objects. This seemed a bit extraneous, so I finally hit on a solution that let's me do this quickly and easily.

The most annoying part of all of this is either not knowing the correct syntax (because I'm a music major and am learning coding on my own), wording to search the world of Flex development blogs, or something else involving the continual error between seat and keyboard…

Anyways, the ultimate solution was actually quite easy.

Keeping the foo class with all my embedded images is fine, and in my itemRenderer, for the image, I just need to put the following for the source:

<mx:Image id="img" source="{foo[data.id]}" />

That's it! Probably too much time spent trying to figure this out, but in the end, the class is acting like an object, and I can get any of my "properties" out of the class pretty easily now. I struggled w/ this concept on an earlier project, but now that I have the quick fix to dynamically change the source of an image with an embedded image without having to hard code any values in the component is much, much better. Ok, so lesson learned, the answer wasn't that hard, but I needed to futz with the other possibilities before I could finally get it right. Now that I got it right, I promise I shouldn't get it wrong again*.

*I might, but that's all part of my slow learning.

Custom Buttons In Flex - Drop Shadow on Text

2010-01-25T19:27:00.000-08:00

Just recently I was asked about adding a drop shadow to the text in a button. Going through a few blogs, I found quickly that the best example to follow was from some guys who're way more advanced than me (http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/, http://www.asfusion.com/blog/entry/stateful-skins-in-flex-3e-color-transitions-in-buttons-now-possible, http://www.tink.ws/blog/stateful-skins-in-flex/). Essentially, the label inside a button is a IUITextField. It can have filters, styles, whatever you want. So I simply extended the Button class in .as, and added my own 'filters = [new DropShadowFilter(x,y)]', and when I implement the button, I get text w/ drop shadows. More excitingly, I can setup some local vars that can be adjusted at runtime, so not every custom button has to have a drop filter, or if I click on it, I can quickly, in a programmatic skin, remove the drop shadow on over or down states. This means I now have some cooler looking buttons that can shift text formatting dynamically (which is so much better than hardcoding in the style - just in case I'd like to reuse my buttons!)

Here's some code:

In the class itself, I have to override the rollover and rollout so I can remove the drop shadow to give a different dynamic effect. Also, I have to override the updateDisplayList because the disabled buttons shouldn't have a drop shadow (again, just for fun).

/**Class**/
package com.studioNorth.skins{
    import flash.display.DisplayObject;
    import flash.events.MouseEvent;
    import flash.filters.DropShadowFilter;

    import mx.controls.Button;
    import mx.core.IUITextField;
    import mx.core.UITextField;

    public class CustomButtonTextDropShadow extends Button{
        private var ds:DropShadowFilter; //This could be public so users could access and change it or any other variable

        public function CustomButtonTextDropShadow(){
            super();
            ds = new DropShadowFilter(1);
        }

        override protected function rollOverHandler(event:MouseEvent):void{
            textField.filters = null;
            super.rollOverHandler(event);
        }
        override protected function rollOutHandler(event:MouseEvent):void{
            super.rollOutHandler(event);
            if(enabled)
                textField.filters = [ds];
        }

        override protected function createChildren():void{
            if (!textField){
                textField = IUITextField(createInFontContext(UITextField));
                textField.filters = [ds];
                textField.styleName = this;
                addChild(DisplayObject(textField));
            }
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(!this.enabled){
                textField.filters = null;
            }
        }

    }
}

/**Main App**/



before mouse over:

during mouse over:

that simple!

drawRoundRect in Flex is nice, but what about non-straight rectangular borders

2010-01-21T06:43:00.000-08:00

rounded rectangles are nice, but...

Everyone wants at least one rounded rectangle corner these days in Flex…well, it's easy to do if you just want to define the corner radius for each corner. However, what do you do if you want to notch a side, extend another side, and still have the corners? Well, just drawing a rounded rectangle doesn't work, because you're now changing the shape of the object. Now I've gotta use the graphics.curveTo, moveTo, and lineTo methods to give me a cooler rectangular border (this might even work well for tabNavigatorButtons)

Because I'm big into programmatic skinning (it mainly just makes sense to me not to have to hardcode a project to specific images imported/exported from Flash or Illustrator or whatnot. I'd like my skins to be able to redraw themselves quickly and efficiently. For my project, I wanted to create rounded rectangles, but also have the notch. Using the drawRoundRectangle was a start, but I couldn't change anything else in the border. I searched and came across this guys article about dynamically creating shapes based on where you click on the canvas. Amazing idea which would be really neat to extend to the use of manipulating images or cutting anything on the canvas (think lasso or scissor tool in any image editing software by Adobe)

Anyways, to create the rectangle with rounded corners and non-straight borders, I abused the example from Adobe and added my own flair. You need the plotPoints part to make the rectangle draw everything, including the corners. In addition, I had to adjust for my 3 rounded corners, which include curveTo functionality. That was the trickier part, but in the end, got me a programmatic skin with notches…yippee!!!

package your.package
{

import flash.filters.BitmapFilterQuality;
import flash.filters.DropShadowFilter;
import flash.geom.Point;
import flash.geom.Rectangle;

import mx.graphics.RectangularDropShadow;
import mx.skins.RectangularBorder;

public class CustomContainerBorderSkin extends RectangularBorder {

    private var dropShadow:RectangularDropShadow;
    private var _points:Array = [];
    private var rect:Rectangle;

    // Constructor.
    public function CustomContainerBorderSkin() {
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

           super.updateDisplayList(unscaledWidth, unscaledHeight);

           var cornerRadius:Number = getStyle("cornerRadius");
           var backgroundColor:int = getStyle("backgroundColor");
           var backgroundAlpha:Number = getStyle("backgroundAlpha");

        graphics.clear();

           var indent:Number = 10;
        plotPoints(indent);
        graphics.beginFill(backgroundColor,1);
        graphics.moveTo(_points[0].x, _points[0].y);
        for (var i:int = 0; i < _points.length; i++) {
            if(i == 2 || i == 7 || i == 9){
                switch(i){
                    case(2):
                        graphics.curveTo(x + width, y, _points[i].x, _points[i].y);
                        break;
                    case(7):
                        graphics.curveTo(x + width, y + height, _points[i].x, _points[i].y);
                        break;
                    case(9):
                        graphics.curveTo(x, y + height, _points[i].x, _points[i].y);
                        break;
                }
            }else{
                graphics.lineTo(_points[i].x, _points[i].y);
            }
        }
        graphics.lineTo(_points[0].x, _points[0].y);
        graphics.endFill();
        parentObj = null;
    }
    private function plotPoints(n:Number):void {
        _points = [];
        _points.push(new Point(x, y));                                    //0 topLeft
        _points.push(new Point(x + width - 10    , y));                     //1 topRight curve from
        _points.push(new Point(x + width        , y + 10));             //2 topRight curve to
        _points.push(new Point(x + width        , y + height - 45));    //3 indent begin
        _points.push(new Point(x + width - n    , y + height - 35));    //4 indent point
        _points.push(new Point(x + width        , y + height - 25));    //5 indent end
        _points.push(new Point(x + width        , y + height - 10));     //6 bottomRight curve from
        _points.push(new Point(x + width - 10    , y + height));           //7 bottomRight curve to
        _points.push(new Point(x + 10            , y + height));            //8 bottomLeft curve from
        _points.push(new Point(x                , y + height - 10));    //9 bottomLeft curve to
    }

    private function getBitmapFilter():DropShadowFilter {
        var distance:Number = 2;
        var angle:Number = 45;
        var color:Number = 0x000000;
        var alpha:Number = .5;
        var blurX:Number = 8;
        var blurY:Number = 8;
        var strength:Number = 0.65;
        var quality:Number = BitmapFilterQuality.LOW;
        var inner:Boolean = false;
        var knockout:Boolean = false;

        return new DropShadowFilter(distance, angle, color, alpha,
            blurX, blurY, strength, quality, inner, knockout);
    }

}
}

Eclipse Navigator Link with Editor

2010-01-15T18:45:00.000-08:00

This as a small setting that I made about 6 months ago, forgot where I did it, and about 2 days later, regretted ever making this change. I hate having my navigator bounce around all the time every time I change a tab, so this was annoying as all get out. Stoopid me, I didn't find it again until my co-worker showed me this link. It was for something completely different (i.e. hiding .svn folders, but on a Windows machine, however on my mac svn files are hidden in Eclipse). Needless to say, I saw that example image, with the term 'Link with Editor'. My eyes misted and I got very smiley, as my co-worker accidentally solved my problem (and he just wanted to help me hide the hidden .svn folders). Oh well. Glad I'm back on a more efficient route!

Flex Builder error: The project properties files could not be read.

2010-01-13T07:50:00.000-08:00

My recent flex adventure almost came to a crashing end when I shut down and restarted Eclipse, only to find that my file's project properties could no longer be read?!?! I got very angry trying to figure out what happened, thinking to myself that I recently tried committing my project to SVN via subclipse (which is another story on its own). One thing I'm very happy I did was create a backup before trying to commit. Pretty much every time I tried to open my project I got the project properties files could not be read. I looked at the .actionScript and .project files, and couldn't see anything missing. I looked high and low, and ran a -diff on my project and the backup copy. Turns out, I was missing the .flexProperties file. How that got deleted from the project I don't know, but it was horrifyingly maddening to only get a mystic message saying the project properties files could not be read. Which files?!? A better message would be preferred, but alas, I copied the old over to the project folder, and I'm back in shape. Lesson learned, if you get this error, make sure you have all three project files in the correct location (aka CYA).

Thanks to Ben Clinkenbeard and Eric Hélier for getting me in the right direction!

Massive amounts of memory consumption via image swapping in Flex

2010-01-11T19:18:00.000-08:00

On my project, I was using De MonsterDebugger (DMD) (great tool, easy to implement, but can get heavy if you don't have a lot of RAM - peaks at about 150MB for me, which can hurt because I'm running on only 2 GB). In my project, I am rolling over canvases, and on each rollover, the background of the application should have its images change. My initial development had me doing this by changing the style of the Application (application.setStyle("backgroundImage",assets/myNewImg)). And to make the transition smooth, I had a second Image that I was using on top of the background, but underneath all the other components (z level = lowest possible).

The problem quickly became clear (even more so w/ DMD because I could see why my computer would stop responding when debugging, i.e. my RAM usage was spiking). In the last several days I have been reading about garbage collection (GC) and how it seems to act on its own accord. It was happening w/ my app, which would always return to about 40MB in runtime, but could (and often did) spike upwards of 250MB!!! All that for a single swf file running in Safari. I checked my objects, commented out different things (including custom turtle border graphics), and went through item by item that could've ran up so much RAM.

Finally it came back to my images being swapped in and out. I thought the image class could handle changing sources quickly, but it turns out, that was eating huge resources to render the image (all while doing some lightweight tweening). I tried my best to build this application to follow OOP and reusability as best as I could. The data source (an xml config file) is what drives the layout and information of the app, so I wanted to avoid embedding anything that needed to be called up explicitly w/ a case/if. But alas, I could only do so much before I had to make some exceptions in my class and embed the background images, and use a case statement to assign it correctly on hover. Once here, and once I realized that changing two background images (one stacked on the other to allow me to transition smoothly - read fade - meant I needed two images).

My app now only spikes at about 68MB, no matter how many transitions I make, and I don't have to try to force GC (which eventually happens during idle time). The last thing I think I'd like to try is possibly improving the cpu performance and keeping the fan from getting hot by adjusting frame rate, but for now, I'm happy that my app doesn't spike so much anymore.

Smooth scrolling of a horizontallist

2010-01-07T19:47:00.000-08:00

So I tried various makes of horizontal scrolling a horizontallist. I followed these examples, yet either my canvas never added the hlist (because the canvas initialized after I added the hlist, so the hlist was garbage collected before it's parent was initialized), or the scroll bar never moved the list (although I came close to rewriting the scrollhandler function. Suffice it to say, finally my hack involved adding the hlist to my canvas through a calllater(addHList), and then having external buttons be able to scroll my hlist left and right a designated amount based not on the scroll bar of the parent canvas, but on the x coordinate of my hlist. Simple enough! I don't need to worry about overriding the location of the scroll bar, and now i can use something like tweenmax to handle the transitioning of the horizontal lists position, so i get scrolling, and external buttons to move my hlist, and i get all the benefits of an hlist (which has as many columns as i need because i set its columncount = dataprovider.length. if anyone wants to see code, let me know and i'll post an update.

private function scrollHorizontalList(e:Event):void{
               var dir:String = e.currentTarget.name;
               var end:int;
               var pos:int = hList.x;
               var max:int = hList.dataProvider.length;
               var myTween:TweenMax;
               trace(dir);
               if(dir == "rButton"){
                    end = pos + colWidth;
                    if(!TweenMax.isTweening(hList)){
                       //if(hList.x-colWidth*colsToScroll)
                        myTween = new TweenMax(hList,1,{x: hList.x - colWidth*colsToScroll, ease:Cubic.easeInOut});
                        myTween.play();
                        hListScroll+=colsToScroll;
                    }
                } else if (dir == "lButton") {
                    end = pos - colWidth;
                    if(!TweenMax.isTweening(hList)){
                        myTween = new TweenMax(hList,1,{x: hList.x + colWidth*colsToScroll, ease:Cubic.easeInOut});
                        myTween.play();
                        hListScroll-=colsToScroll;
                    }
                }
                lButton.enabled = (hListScroll > 0)?true:false;
                rButton.enabled = (hListScroll < max-colsToScroll)?true:false;
           }

Eclipse .ini changes

2010-01-05T19:37:00.000-08:00

FB3 breaks then fixes, all because I forgot an 'm' in my init file. Actually, I was trying to change the min, max, and permanent sizes of my eclipse runtime, and I accidentally deleted one of the 'm's, and then eclipse never started or worked for me again. I got really angry, wasted 30 minutes trying to figure out what happened, including trying to read the logs and see where it went wrong, and finally decided to skip ahead and reinstall eclipse (3.4.2 of course, as FB3 won't work on 3.5, although some have figured it out…) So long story short, I reinstalled, did the software update to re-attach FB3 plugin (the new 3.5 sdk rocks!), and then couldn't get SVN to attach via subclipse. Another half hour later, and I returned to my .ini file, checked it against my old install, found the missing 'm', almost kicked myself, fixed the 'm', and now I have everything back in order…how annoying! Although, now Aptana makes things a bit slower...anyone else having that problem?

Flex, AR and speed improvement

2009-12-15T19:44:00.000-08:00

I am working on an AR project for a client when I ran into major performance issues. It drove me batty because I tested out a bunch of stuff and couldn't get the performance up. For starters, I am using a dae file (standard stuff), then I load it in using collada, and that's where the crap started bottoming out. I tried multiple ways to fix it, testing whether it was my app, the dae, the AR, or what! I even connected w/ ARToolworks and Eric Socolofsky. They made some suggestions, like using Windows to take advantage of FP10.1.5's newest drivers which are great on the graphics card (but don't help me because I'm on a Mac). Instead, after countless hours and angry griping, I happened upon a small discovery, the rendering engine in Papervision. This little sucker is rendering my dae and making my 3D model work. Well, it was using Quadrant, which was eating up about every resource to make my model look nice and smooth. Once I switched that to Lazy, I got a huge performance boost (going from 1-2 fps up to 10-11 fps).

Who works in a corporate environment and is allowed to use FB4 yet?

2009-12-10T19:45:00.000-08:00

FB4 - oh how I pine for you!

Actually, I wanted to create my latest project in FB4, utilizing the pleasures of the vector class in FP10, but alas, my compatriots managed to convince me that the upgrade isn't necessary yet.

Is there anyone out there who's corporate policy is banning them from using the beta product to develop apps? If they do, how do you get to play (aside from on your own time?)

Dreamweaver and CS4 killing performance

2009-12-01T19:42:00.000-08:00

Is Dreamweaver running slow for anyone else who does Flex development. I'm not on a great machine, but I'm running a MacBook 13" w/ a 2.16 GHz Core 2 Duo, and 2 GB of Ram, but I do love my MacBook, and get quite frustrated by the fact that when I open up most of my CS4 products, my computer can come to a grinding halt. Actually, it's mostly just Dreamweaver, which I'm using for reading, writing and editing C#. I've thought about running my XP partition, then running visual studio for the coding, but that'd take up just about as much resources as me running Dreamweaver. What I don't understand (and maybe it comes from being spoiled by a wonderful Eclipse community), but why is Dreamweaver so unwieldily and ugly and hard to use? I'm happy that I can edit multiple languages with it, but frankly, I would've been happier if netBeans or even Eclipse let me work on it. It's annoying! But regardless, I'm trying to figure out what is killing my cpu? I do know and have configured my Eclipse for larger memory management (I believe I set the min at 84, and the max at 1024), but I'm almost never using all of that. Aside from a few smaller apps (read: iTunes, Adium, Thunderbird), I'm at a loss for such inefficiency.

Recruiters and Pricing one's services

2009-11-27T21:09:00.000-08:00

Recruiters - I enjoy when you call to discuss things, but seriously, please don't contact me when it's about something I haven't done in 5-10 years. And don't get offended when I have fun at your expense for responding w/ ridiculous information, like absurd rates…Honestly, I don't want your gig, that's why I stopped doing it what I did. And don't get mad because you're spamming me that I shouldn't just respond w/ a bit of wit. If you actually take it seriously, then the problem is you.

However if you want to pay me that much, then I might reconsider :)

And why not pay me that much? Most companies are willing to pay other companies that much for consulting on something (for example, look what any of the big consulting or management consulting or accounting firms charge). I should be paid that much to consult as well, right? Wrong? While it would be nice to charge that much, and companies always feel they get more bang for their buck at the higher price (I mean, who wouldn't want bragging rights about spending top dollar to get the best - it happens all the time regarding MBAs and other degrees, and just because you have more people with accolades doesn't mean you'll get a better resolve). For example, look at the financial companies in dire straits (only as an example). They claim they have 10 (or 20 or 100) of the brightest minds working to solve the problems. Yet it's like saying I have 10 (or 20 or 100) copies of the "special report". No copy is better than the other, yet there is a belief, a horrible misconception, that if you gather enough bright minds of the same ilk, you'll get superior results. And for that, you get to charge bucko bucks.

Yet nobody stops to ask, "What difference is all this making for me?" Large companies, time and time again, say they want to cut costs, improve efficiencies, and grow the bottom line. Yet they normally farm out work to contractors and consultants, almost all of whom (except the rare exceptions of really brilliant people - not just smart, but those that actually can figure things out for themselves) use Google, Bing, YouTube, Twitter, and whatever other technological device to help themselves learn from what everyone else has done and use their examples.

People can learn quickly, and those that are the most profitable should make good money. But companies that charge buckets for their services, when they aren't necessarily the best game in town (most often they rely on normal people because nobody is a superhero - unless you are Jonny Lee - then I'll make an exception). But even so, most people aren't that brilliant, and companies don't have a lot of brilliant people in them, so why should they get to charge so much and I can't? Brand recognition? Paint? Logo? What?

So back to my original rant, if someone's willing to pay it, shouldn't I oblige them?

Flex Builder Recursion Variable?

2009-11-15T20:13:00.001-08:00

Wouldn't it be nice if Flex allowed us to have some kind of global that would let us know (especially when building, testing, and debugging) what level we're at when working w/ a recursive loop? I created some XML a bit back that involves recursion, and the trick to it was knowing how I built it, but what about times when you have something that Flex makes - such as the simpleXMLEncoder - which is simple, but only works on basic Flex objects and provides really lame tags…In the simpleXMLEncoder/Decoder, their own code runs recursion, and it would be nice to have a way of tracking what level in which we are working.

My own projects have used recursive Data Transfer Objects to drill through and build up external complex data sets. However, when debugging and working through it, I can't easily nail down what level I'm at and how to go backwards. Sometimes the debug window can hold up to a few locations where I can click and view my location and progress, but it would be much simpler to have some kind of level tracking, especially in recursion.

This flexplitive rant is brought to you by a recursive loop that is brought to you by a recursive loop that is brought to you by a recursive loop that is…well you get the idea :)

Not Flex directly, but html, Outlook 2007, and the evil colSpan

2009-11-13T13:46:00.001-08:00

During a current project, one of the requirements is being able to send an email from a Flex application to one or more recipients. To accomplish this, through an amalgam of remote services, flex, and an email server, we are able to send out the emails. The Flex side is quite easy, and using fluorine, we were able to quickly generate the c# code for the backend. However the problem lies in QA'ing these emails for recipients and ultimately from the various email clients available. While it would be nice to send a .swf in an email (like an html email) and allow it to play as soon as one opens the email, I can imagine how that could negatively impact a lot of users - think of a user who unwittingly opens an email that has a swf (which now wants to import and open up inside of your email client all of its components). This could bog down the email client considerably, but more important, isn't email meant to be for simple text and images? Leave the swf to the browser, right? Well, I think it would be awesome if thunderbird allowed you to read .swf's in your email, and run flash right there…regardless, I digress.

What I'd like to get at is the complexity we've had in testing an html email template that all clients would read (i.e. gMail, Outlook 07 and 03, thunderbird, aol, yahoo, etc.) There are tons of clients, but most business savvy users are on the Outlook clients. So how do I, running on a mac, without access (nor desire) to Outlook, test this? Well, our handy QA team is doing that for me, and they've noticed some really annoying *flexplitive here* things w/ Outlook. Namely, the absence of support for colSpan inside a table. C'mon mang, colspans are the bread and butter of making a table work right, otherwise I'm stuck putting a bunch of 's inside of the 's which just makes my life really, really complicated. the easy trick we figured out is that to avoid col spans, you can put multiple 's next to eachother, then put those in a row, and finally, to avoid the colspan, just move the items that you wanted to span, move them into a table above or below the table that has the row w/ the multiple columns. This essentially makes your table have multiple columns, but only one row, or multiple rows. This is extremely annoying, yet useful, if you have multiple columns, want someone to see your email in html, and send it to anyone using outlook 07.

Anyways, that's just my annoyance, so this flexplitive rant really isn't much about Flex and more about html and how much Outlook 07 really stinks...

Remoting

2009-11-13T07:57:00.001-08:00

During this project I’ve learned that it is important to try and limit the number of calls back to the server. I understand it is important to make sure any progress is saved, but it is even more important that the system not constantly rely on asynchronous calls to make future progress. While small calls might not bring down the system, it is important, in my experience, that the fewer calls made to the back-end, the better.

This rant is brought to you by the remoting services of Flex, Fluorine, and WebOrb. All three have their benefits, which are documented on their respective sites. However there doesn’t seem to be a list of best practices for using them. It is true that a RIA should be Rich, connect to the Internet, and be an Application. But that connection to the Internet shouldn’t happen every turn of the page or every mouse click. In my experience, you can achieve a better user experience if a whole bunch of miniscule calls can be tracked by the app, then uploaded when truly required. Interaction with the backend is important, don’t get me wrong, Flex can only do so much. Yet the code shouldn’t beat a dead horse, like this blog post, with too many of the same calls.

Miscommunication

2009-11-12T08:45:00.001-08:00

Has anyone ever read a Harvard Business Review? Or what about a case study? Or anything business related that talks about efficiencies, sales relationships, processes, etc? I’ve read several of them over the last decade, and one of the most important lessons I’ve learned from them is the balance a company must strike between internal and external resources. I’ve learned (oft the hard way) that sales people are happy to go and sell anything and everything to everyone and anyone. However it must be understood that without their efforts, a company probably wouldn’t survive (so what if Beta was better than VHS, their sales team sucked). So in that vein, I also must say that resources that support sales, or develop products that the sales team is responsible for selling, must also be understood. Regardless of product, there is a symbiotic relationship between the two sides, and the most successful organizations are the ones that realize that. The companies that insist on superstar R&D folk, or only go after rockstar sales people often learn the hard way that success isn’t from them. It is from being able to continuously improve a product that customers like, while at the same time increasing the breadth and depth of understanding that the people who interact with the product have. If it means that the Sales department take some time to learn more about the product, then they should. If the other departments want to learn more about the sales process, or management, or what not, then they should, in order to understand why success is defined through teamwork and understanding.

This long rant is brought to you by too angry Sales and R&D staffers.

Flex Embedded Fonts, Images, and Compile Times

2009-11-10T06:10:00.001-08:00

A couple of recent projects that I've worked on have had the requirement to add special fonts, and generally this means adding them via CSS, and every time I clean or build my project for testing, the compile speed becomes horrendous (read - compile times went from just a few seconds up to a minute in some cases). This was horrible, especially if all I did was change something simple in the app, like spacing between labels. Other problems included running out of memory in my eclipse environment and CPU consumption. For my own efficiencies, that was just too annoying and aggrevating to deal with.

I dug around the internet and found a few resources that made some suggestions. Two I found here. They include changing the heap size of Eclipse and turning off auto-spell checking. While this didn't alleviate everything, it at least has kept my MacBook from freezing up and my workbench from vomiting everywhere.

The next option I found comes from axelscript. His suggestion to improve compile time by getting the font (and possibly images - although he admittedly didn't have time/nor need to test) into a separate project, then compiling it into a swf that would build into the current project's folder. This helps compile times, but it does require a few extra steps and maybe a good look at Flex's StyleManager.

One more option I found very convenient (especially if you pre-initialise a few fonts or want to lazy-load some fonts) comes from this Russian site. It provides an excellent loader that allows you to load fonts dynamically (although again, nothing about embedding images) from anywhere, locally or remotely. The setup is extremely easy and can be incorporated dynamically add fonts at runtime.

What I would really like to know from Adobe is why compile times turn horrendous when adding new fonts. And why do they need to be included in every build, shouldn't there be a simple way to introduce and embed multiple fonts without bloating an app and without killing my compile times? Nothing in Jira points to this as being a bug, just a standard feature. Will these same problems exist in FB4, Catalyst, or FP10?

TCPProxy and Grinder

2009-11-09T06:25:00.000-08:00

I recently was working on a project and it was necessary to see what I was sending across the wire. Without having done much in the past w/ reading my data while in transit (go figure, I normally only worry about the end results), I needed to know if Flex or my backend was regurgitating my data because the transmission was garbled or what. To watch what was happening, I started using Grinder. Grinder's a really easy to use tool: you just download the zip, unzip it, then from a command line, simply type:

java -cp Downloads/grinder-3.2/lib/grinder.jar net.grinder.TCPProxy -console

My java from the command line is horrendous, but from what I understand, the first part tells the command line it's a java file to look for, the second part says what it is about to search for, the third part says where, the fourth part says what operation should be invoked, and -console says when you run the engine, pop-up the console (for mac users like me, this last part was crucial because shy of shutting down the terminal, I have no other way of telling the Grinder engine to stop grinding.

It was also important that I set my browser's proxy configuration to run through 8001, so I made my changes to the settings and now, every page loaded horrendously slow, but grinder was spitting out all the data I needed. (I tried to upload the image, but couldn't get it out...sorry).

Now I had access to everything I was posting across the wire and what it looked like. Grinder has many other important features than just watching your internet traffic. It can help you record user actions to make test scripts for testing network traffic. It comes w/ an awesome library of test scripts (and if you look hard enough can find some really funny comments)

Anyways, before I completely sign off on Grinder as being the only tool to use, I'll mention briefly another tool (you have to pay for) that is quite nice. It's called Charles, and I must say it does a pretty good job of telling me what resources are being called too often, and does a pretty good job of interpreting AMF. It isn't perfect, doesn't have all the flexibility of Grinder, but again, I didn't pay for it, I just tested it out.