This blog post got moved to adobe!!! boo yah!!

John wrote up, and used screen shots, and outlined the application better than I did, but I built it, but he’s the one with the contacts at adobe that wanted the example apps of sfdc… glad I could be a part of it.

To view my running application click here to view the source click here

The Video

(it takes a minute to load)

This blog post has been moved to ADOBE! boo yah!

John’s the one who wrote the documentation and took the screen shots and got the deal with adobe to get the project and example put on adobe.com, so they wanted him to be the author.

but here is the video

To view my running application click here to view the source click here

The Video

(it takes a minute to load)

We have a product right now that has a basic shopping cart in it… and one of the options is to save the cart and view it as a pdf… so we send the request to the server, and return a link back with a link to the pdf, and
because we may have many messages come back from this one service we just use a simple alert box to show the user the feedback and that the application has saved successfully… if we need to put a link in there, the user must copy and paste the link in order to use it… WELLL, the small challenge was to make that a clickable link, and in the least amount of time possible… (15 minutes, rather than 2 hours for styling and the component itself) (it actually took longer to write the blog post, and put up the example than it did to fix the issue)

I was asked to create a component that allows for htmlText to be added to it, and the component has to have all the functionality of an Alert box… so why not extend the alert box, and make something like a BaseAlert.as file that extends Alert…

because you still have to use Alert.show in your application to use it… so rather than going to all the work of creating a way to popup the popup from anywhere in the app, and making sure it dispatches CloseEvents like the original Alert box does, I did some digging and found a forum list that gave the greatest tip EVER! I never really use mx_internal… frankly it confuses me a little bit… the syntax is a little wonkey to me… I’ve never used the whole “::” thing and don’t really understand what it does… someone care to explain?

anyway, I thought this persons simple code was absolutely great!

var a:Alert=Alert.show("dump text");
a.mx_internal::alertForm.mx_internal::textField.htmlText =
some HTMl text goes here;

here is a link to the message post

They do neglect to mention that you have to import the internal namespace though, so in my example thats included. This is a very quick and cheap solution to the problem and just provides a way to fancy up the alert box a little bit by adding the “limited” html text that the flash platform supports… maybe flash 10 will add better htmlText support…. I would assume so with all of the text changes to the platform… but I havent looked into it so don’t quote me…

Application - Source

When you have a project that requires a dynamic interface, and you are adding and removing tabs, lets say you need to reset the selectedIndex of the TabNavigator back to 0, because you may be adding tabs that are not relevant to what you originally had on the screen… when you simply do a “tabNav.removeAllChildren()” on the TabNavigator, and change the selectedIndex in the same function, it just simply doesnt work… there is a bug for it… http://bugs.adobe.com/jira/browse/SDK-14157

So the more elegant solution that also pays attention to the flex framework is by using commitProperties() when you use commitProperties it guarantees that things will be done after the initialization is done in the component, it also is guarantees things will only run once per frame I believe… (don’t quote me on that, i’m just to lazy to look up where I read that, because I’ve got to get back to work)

anyway… when you use invalidateProperties() when you want to remove the children, you would simply set the selectedIndex before you invalidate, and then do the work in commitProperties… and it should just work because of the way commitProperties is supposed to work…

when in reality, it doesnt work either…

so what you end up having to do is use callLater( commitProperties )

private var _tabNavChanged:Boolean = false;
public function resetTabNav():void
{
tabNav.selectedIndex = 0;

_tabNavChanged = true;
callLater( commitProperties )
}

_tabNavChanged = false;
}


}//end function

Hope this helps someone… didn’t really take long i suppose I’m just used to using commitProperties

Application - Source

When you use an itemRenderer in your TileList, as well with any of the listBase components, it reuses renderers, there are tons and tons of posts a lot from a colleague Ben Clinkenbeard on renderer issues with data, and one of the things I do normally is override the data setter in the renderer, and bind to a value object…

The problem I recently came across using the TileList, was that we were using the TileList to display a list of products, and there could be a lot… hundrends… when you use the TileList, and you scroll, it reuses the renderer for efficiency… 

I liked that it was fairly efficient and wanted to keep it that way… some of the other options would be to use a repeater, but that’s not a very good option anyway… especially if you are going to filter data… 

Because I was binding to a vo, (or the data object) in my renderer, when you scroll the data setter gets called over and over, and the renderer pretty much stays the same, and it just changes the data…. so the tilelist really just fakes you out by putting a scroll bar there… at least somewhat anyway…

so when you scroll, and you are binding to the source of the image like so: <mx:Image source=”{data.imageURL}”/>

the imageURL constantly gets changed when you scroll… so when you scroll it causes the image to be redownloaded… 

I want the image to be downloaded only ONCE! so what I’m doing now just for this project (there probably is no need to do this if your tilelist all fits on one page, or has pagination) is using a ImageMap class, that is dynamic and when the image comeback for the first time it is stored in that class, and whenever the data changes in the renderer, it checks to see in that file if it has the image it needs, and then uses that one rather than downloading another one, and it does it fairly efficiently.  Check out the example app, you can right click to view source.

Application - Source

so I simply passed the number in with a .toString()
as
//mySSN is a number
ssnV.validate(mySSN.toString() );

mxml:
<mx:SocialSecurityValidator
id = "ssnV"
/>

<mx:TextInput restrict="[A-Z]" />

simple stuff.

I thought my internet was down, just by chance, so I reset my router, that didn’t do the trick so I restarted the computer… and figured something was just messed up… I didn’t put 2 and 2 together to realize that it was WHEN I INSTALLED the software is when things stopped working…

After realizing that I uninstalled the software because I figured that may fix it, and that didn’t help either… at the same time I’m battling my laptop with no internet, I am battling not being able to print on another computer… I have no clue why… so I’m working through that… at the same time, the thing I need to print is an upgrade form from etrade which I need to fax in to try to get them to upgrade my account because they won’t let you apply for upgrades more than once in 90 days… so I had to call them, and get that worked out and plead my case for the upgrade… Then I needed to go online to get to salliemae to see how much left is on my school loans, and I couldn’t log into that, and after 3 times of trying to remember my username and password, they locked my account… so because I couldn’t get it unlocked without calling them, I called, and waited 15 minutes on hold, and had an Indian guy who was very scripted tell me my account was locked and that he could reset it to a one time password… I told him the reason I can’t remember my password is because they are so strict on their password rules…

I know that its for my own good, and my account protection, but I only have 3 or 4 passwords that I use that meet certain criteria for a good password… I think 3 or 4 is pretty good… so when a place locks me out for trying the different passwords after 3 times… it pisses me off! especially since I have to call them and wait on hold, then talk to a foreigner that is probably out sourced, that talks like a fucking robot because of the script he has to stay verbatim to…

Seriously SallieMae blows ass when it comes to support as well as password rules to log in, again, I realize that they are just trying to protect me, but when you can’t remember your password, you go to their forgot password, then they email you a link to change the password, and then when you try to change it, it tells you YOU CAN’T CHANGE IT TO ANY OF THE PAST FIVE PASSWORDS YOU’VE USED PREVIOUSLY!!!!! so then you have to make a new one up, that you happen to forget by the time you log in again, and have to go through the whole friggin process again!!!! seriously they should shoot themselves in the head for the head aches they cause…

So what do I do… I put the password on a sticky not and put it on my monitor (which from being an IT guy you hear about all the time) and that just kinda blows their security out of the water… they really piss me off… now they wont consolidate loans either which just adds to the crap load of stuff that is sort of piling on…

At least when I called etrade I only had to push 1 button to talk to someone instaed of 15… (”use your touch tone phone to put in your account number, if you do not know your account number press 1, use your phone to type in your social security number, then your phone number, then your username, then your password… if you are calling for technical support press 1, if your calling for a new account press two… to hear this menu again press #, or *, or to hang on the line press 0….) I’M SO SICK OF PHONE MENU’S THAT ARE ABSOLUTELY HORRIBLE, then after you put in all the information, they have to verify that you are you, and you have to pass a little quiz when you actually get someone on the phone… AGAIN, I UNDERSTAND ITS ALL FOR MY OWN GOOD, but I just want to be able to work, and get info when I need it, I want to be able to call my ISP and get support without dailing 15 numbers to talk to someone, then have them tell me they didnt recognize my number because of the way cell phone towers transmits numbers depending off what tower they bounce off ( I heard that somewhere… dunno if its true… but for one company I call it never recognizes my phone number, and then i have to enter it twice, then i get on the phone and they ask me it again… )

so anyway… service capture… lol

I think service capture turns on a proxy setting in IE and you have to shut it off… either that or I already had it on from some other project or environment setting… but because when i installed service capture it made stuff not work, I’m lead to believe it may have been that….

so go to tools > Internet Options > Connects Tab > in the bottom click on LAN Settings > UNCHECK ‘use a proxy server for your LAN…’

http://www.kevinlangdon.com/serviceCapture/images/ie_settings.jpg

sorry for the bitching… but it makes me feel better…

 
This post is a video on Cairngorm with UM Extensions and cairngenum. It explains some of the subtle differences between cairngorm, and cairngormUM, and what the extensions allow you to do that cairngorm doesnt allow very easily. The Video is listed at the bottom of the post

• CairngormUM
  • Prerequisites:
    • Cairngorm
    • Cairngen
    • know what “ant” is
    • have “ant” up and running on your computer
    • link to brief setup of ANT
      • http://www.axelscript.com/2008/10/07/publishing-air-apps-with-ant-and-ftp/
  • Files and links:
    • http://www.axelscript.com/2008/10/13/cairngen-with-cairngorm-with-um-extensions/
    • http://www.axelscript.com/wp-content/Examples/CairngenUM/cairngenum.zip
    • http://www.returnundefined.com
    • http://code.google.com/p/flexcairngorm/
    • http://code.google.com/p/cairngen/
  • Main differences:
    • the ability to add CallBacks()
  • Project
    • create a blank project
      • paste cairngenum into root project folder
      • change project.properties to match current project
      • open cairngenum/Build.xml in ant editor (should open by default in ant editor)
      • in “outline” view right click “main” > run as > ant build
      • in your console you’ll see if build is successful or if it failed, and why it failed
    • create a mock up xml file that we are going to use to hold some dummy xml to act as our information we retrieve from the service
      • create the file under your src directory “/src/assets/data/users.xml” and format it like the following:

      <root>
<users>
<user name="Axel"/>
<user name="Ben"/>
<user name="Ryan"/>
<user name="Tom"/>
<user name="David"/>
</users>
</root>

      • we will now create the sequence that retrieves this information from the file and return it back into our code for us to manipulate.
    • create a sequence
      • a sequence is an event, command, and adding the command to the controller, and Optionally could be creating the delegate as well, in cairngenum the delegate must be created with the create-delegate target in the build.xml file.
      • with build.xml open in outline view right click “create-sequence” > run as > ant build
        • when you do this you will be prompted for an event stub name
          • type “UserRead” click OK
        • now you will be prompted for the event constant name
          • type “USER_READ_EVENT” click OK
        • now you will be prompted for the event type constant
          • type “UserReadEvent” click OK
        • now you will be prompted for the delegate name
          • type “UsersDelegate” click OK

the message in the console should look something like this

Buildfile: E:\fb3Workspace\TestUMCG\cairngenum\build.xml
log:
create-sequence:
[echo] @Invoking Cairngenum on [TestUMCG] --> Generating file(s): UserReadCommand.as and UserReadEvent.as, using UsersDelegate.as
internal-create-custom-event-class:
[copy] Copying 1 file to E:\fb3Workspace\TestUMCG\src\com\axelscript\tempCairngenUM\events
create-command:
[copy] Copying 1 file to E:\fb3Workspace\TestUMCG\src\com\axelscript\tempCairngenUM\commands
[copy] Copying 1 file to E:\fb3Workspace\TestUMCG\test\com\axelscript\tempCairngenUM\commands
internal-register-sequence:
BUILD SUCCESSFUL
Total time: 3 minutes 34 seconds

• now you need to create the delegate class that talks to the service that will retrieve the data or execute the function you need to do.
  • with build.xml open, in outline view right click “create-delegate”
    • now you will be prompted for the stub name of the delegate
      • type “Users” click OK

the message in the console should look something like this
Buildfile: E:\fb3Workspace\TestUMCG\cairngenum\build.xml
create-delegate:
[echo] @Invoking Cairngenum on [TestUMCG] --> Generating file(s): UsersDelegate.as
[copy] Copying 1 file to E:\fb3Workspace\TestUMCG\src\com\axelscript\tempCairngenUM\business
BUILD SUCCESSFUL
Total time: 39 seconds

• Now open business/Services.xml and add the following code

<?xml version="1.0" encoding="utf-8"?>
<service:ServiceLocator xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:service="com.universalmind.cairngorm.business.*">

<mx:Script>
<![CDATA[
public static var USERS_SERVICE:String = 'usersService';
]]>
</mx:Script>

<mx:HTTPService
id="usersService"
resultFormat="e4x"
url="assets/data/users.xml"
/>
</service:ServiceLocator>

• This is where there are some slight differences in Cairngorm vs. CairngormUM because the UM version lets its base class handle the service and the responder, where as you used to have to rewrite the two variables every time.
• You now need to adjust the Constructor Function in the the UsersDelegate so it looks like this
  • super( handlers, Services.USER_SERVICE );
• You need to add a function to your delegate class that actually connects to the service, and returns the data back to the command.
  public function readUsers():void
{
var token:AsyncToken = service.send();
token.addResponder( this.responder );
}
• now you need to adjust your UserReadCommand to call the delegates function “readUsers()”
  override public function execute( event:CairngormEvent ):void
  {
  super.execute( event );

  var evt:UsersReadEvent = event as UsersReadEvent;
  var delegate:UsersDelegate = new UsersDelegate( new Callbacks( handleDelegateResult, handleDelegateFault ) );

  delegate.readUsers();
// insert delegate method call here
}

• Finally you need to dispatch the event in this case we’ll do it on the initialize event of the main application file
  • TestUMCG.mxml

  <mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import com.universalmind.cairngorm.events.Callbacks;
import com.domain.project.events.UsersReadEvent;
private function handleInitialize():void
{
new UsersReadEvent( new Callbacks(usersReadResult,usersReadFault) ).dispatch();
}

  private function usersReadResult( event:ResultEvent ):void
  {
  trace(event);
  }

  private function usersReadFault( event:FaultEvent ):void
  {
  trace(event);
  }

  ]]>
</mx:Script>

The Video

(it takes a minute to load)

To use email with ant you need the following 3 jar files installed.

• ant-javamail.jar
• activation.jar
• mail.jar

After you download the files you need to put them into your ant directory under your eclipse install “/plugins/org.apache.ant_******/ folder. If you watch the video, I explain how to find the ant folder if you don’t know where it is. For me it is “C:\Program Files\Adobe\Flex Builder 3\plugins\org.apache.ant_1.7.0.v200706080842\lib”. That is where all the ant jar files are held. You need to put the jar’s you downloaded into that folder, and then in eclipse you need to do the following.

1. Window > Preferences > (on left tree) Ant > Runtime
2. Once you’ve clicked on “Runtime” you’ll see a tree in the right side and the first entry should say “Ant Home Entries(Default) you need to click that, and then all of the buttons on the right will become enabled to click on
3. click on “Add External JARs
4. browse to your ant directory where all the jars are (for me its C:\Program Files\Adobe\Flex Builder 3\plugins\org.apache.ant_1.7.0.v200706080842\lib)
5. highlight your jar files that you downloaded and click ok (ant-javamail.jar,activation.jar,mail.jar)
6. click apply
7. restart flex builder or eclipse (whichever you are using)

Now we are finally ready to get into the ANT part…

Start by going into whatever flex project you want (or creating one) and then create two files under the root.

project.properties
##### EMAIL PROPERTIES #####
email.server = smtp.gmail.com
email.ssl = true
email.user = someemail@gmail.com
email.from = someemail@gmail.com
email.password = myReallyStrongPassword
email.to = someemail@gmail.com
email.port = 465

##### ZIP PROPERTIES #####
zip.destinationFile = E:/fb3Workspace/TempPublish/${zip.filename}.zip
zip.filename = src-code
zip.dir = E:/fb3Workspace/TempPublish/src


Build.xml
<project name="Publishing your project via Email with ANT">

<target name="zip-project">
<zip destfile="${zip.destinationFile}" duplicate="preserve">
<zipfileset dir="${zip.dir}" />
</zip>
</target>
</project>

Please see the video for more detail.

Pushing your project via Email with ANT (takes a little bit to load)

NOTE:Please note that the zip format allows multiple files of the same fully-qualified name to exist within a single archive. This has been documented as causing various problems for unsuspecting users. If you wish to avoid this behavior you must set the duplicate attribute to a value other than its default, “add”. (zip tag documentation)

Links:

• zip tag documentation

The Problem

When you create an air app and host it on a server somewhere, you often times have updates, and you need to publish a new .air file to the server so people that continue to download your app, get the newest, healthiest version. The problem with that is that after bug fix (which may take all of 2 minutes), you need to connect to your ftp site, or ssh, or email the new file to yourself, remote desktop into the server, and check your email and put the new file into it’s correct path on the server.

The Solution

Create an ANT Script that logs into you ftp site, and uploads the new files, and it goes from a some what menacing task, to being a delightful 2 or 3 click deployment. There are some things you have to do to eclipse to get the ftp tag to work right in ANT… They are listed below in the steps to take to get ANT up and going in eclipse or flexbuilder.

ftp.username = username
ftp.password = password
ftp.dir = dirToUploadFilesTo
ftp.server = myDomain.com
ftp.localDir = E:/ClickStats_Basketball_1_0/update

<target name="ftp-push-to-server">
<echo>Pushing files to ftp site: ${ftp.server}</echo>
<ftp
server = "${ftp.server}"
userid = "${ftp.username}"
password = "${ftp.password}"
action = "put"
remotedir = "${ftp.dir}"
verbose = "true"
>
<fileset id="ftp.upload.fileset" dir="${ftp.localDir}" />
</ftp>
</target>

The Video

Prerequisite: /using-the-air-update-framework

Your going to need to do a few things to make sure ant is working:

1. follow the steps on adobe’s site
2. once ant is installed (how to is in the previous link) you then need to make sure you have at least java 6 installed
3. now in eclipse or flexbuilder open your prefrences > (in tree on left go to) Java > Installed JREs > click “Add” > Browse for “JRE home directory” > “C:\Program Files\Java\1.6.x” (or something like that) > it should find a bunch of system libs > then click “OK”
4. WHILE STILL IN THE PREFERENCES WINDOW > verify new JRE is checked Preferences > Java > Installed JREs (should have jre1.6.xxx checked, INSTEAD OF Flex builder 3
5. Preferences > Java > Compiler > (in first drop down) Compiler compliance level: select “6.0″ instead of “5″
6. NET Commons Jar file: commons-net-1.4.1.jar
7. Getting FTP to work with Eclipse: getting-ftp-to-work-with-ant-in-eclipse
8. ANT Commons Jar file: ant-commons-net.jar
9. That should be all you have to do to get ANT up and running.

Links:

• Some Noteworthy negatives about deployment using ant: ant-sucks-for-ftp-deployment
• Book: Ant In Action By Steve Loughran
• Adobe: AIR Update Framework

Here are some links that you may need to follow along with the video.

• Download Air Update Framework
  • you will need the update framework
  • as well as the sample files

Here is the video.

Video on using the air update framework

Here is the zip of the Project - SOURCE

The Problem

When you embed a lot of fonts you immediately hurt your compile times. In the video I go about showing you how just embedding a few fonts can’t hurt your compile times, I have about 8 fonts embedded and 2 of them with bold font embeddings as well. This slowed down my compile time to 8 seconds, with barely any mxml, it’s all css and embedding fonts that caused the issue. This post goes to show you how to create a separate project to hold your css and how to include it as runtime css in your original project.

A (possible) Solution

The solution is to create a separate project to hold you css and embedded assets, the reason for this is most the time in your development cycle once you are done setting up the style it just sets there… and then you work on the logic of the application…

So what you do is create a separate project put your css and the embedded assets in the seperate project, and set its output folder to be the actual project’s html-template folder, then you right-click the css file and make sure “Compile CSS to SWF” is checked. This tells flexbuilder to compile a swf just for the css file… NOTE: you may have to make a change to the css file to get it to output the swf.

Once the file is a swf, and the output folder is your destination project you simply use StyleManager.loadStyleDeclarations(’somecss.swf’); to load your css on the “initialize” event of the main application mxml file.

To also help improve compile times you can try using unicode ranges for you font as well, and only embedding what you need Using unicode ranges for fonts

Please see the video for more details

 Here is the zip of the Project - SOURCE

THE VIDEO

(be patient, it takes a minute to load)

http://www.adobe.com/devnet/air/articles/badger_for_air_apps.html?devcon=f3

http://link.brightcove.com/services/player/bcpid1733261879?bclid=1729365228&bctid=1738803895

A friend asked me today how to create a simple slider component… I told him, the simplest way in flex, would probably be to have a MoveEffect that would just move a container.

So basically you use masking to mask some stuff, then turn off horizontalScrollPolicy, and verticalScrollPolicy, and then you just set the moveEffect.xBy to -100 or positive 100, (depending on the distance you want to move it, and what your trying to show… here is a really simple example.

Please don’t take this code too seriosly, it’s nothing fancy, it’s super simple, and all you would have to do to spice it up would be add a black background, and reflection or two, some images instead of vbox’s, and some better looking buttons with arrow icons… but i’m not the one who needs the component, so I’m not gonna put too much more time into this… (not that it took long)

Application - Source 

I really dont have all that much time to blog right now, lots of stuff goin on w/ work… but I was very relieved at the results this time around… I think I may have mislead some people when writing my overview of what i thought the session would be vs. what it ended up being, but that should be fixed next time, because the talk went really well, I think I may try to do it again.

some of the notes i got were things like,  people thought they were gonna hear more about ANT, and how-to’s on svn, and trac… but when i asked everyone in the room, 95% of the people said they were using SVN, so i didnt want to bore people, so i didnt really go over too much, and trac is relatively simple and i covered the stuff i thought was important… i recieve a 3.8 out of 5 or somthing like that… so i was pretty happy about that, definitely nothing too negative was said, most of it was just constructive criticm… 360Flex was great! thanks!

There probably is more than likely a better way to do this, I’m told that when you use “Prepared” sql statements in air, it may fix the issue, but I’m on my first Air project, i’ve been doing flex for like 2 and a half years with CF on the backend, and so i know all the tricks in cf to fix the issues, but in AIR we just wrote a function to do it…

PROBLEM:

I have an object called “TeamVO” it looks like this

• TeamVO
  • TeamName:String
  • TeamID:Number

teamVO:TeamVO = new TeamVO;
teamVO.teamName = "Jakes's Team";

When I insert that into the db, I always get errors back… so we (by we I mean Jake Churchill ) came up with a function to handle that for use… this will only work if your using objects like we are, but more than likely you are… if not, you can still use the replace statment in it.

/**
* this escapes single ticks so they can be stored in the DB correctly
**/
public function escapeStrings( value:Object ):Object
{
// get object details
var objectDescription:XML = flash.utils.describeType(value);
// get object properties as XMLList
var objectProperties:XMLList = new XMLList(objectDescription.accessor);
// create a new object to store modified data in
var newVal:Object = new Object();

// loop over all properties
for( var x:uint = 0; x < objectProperties.length(); x++ )
{
// if the property is a string, escape single ticks
if( objectDescription.accessor[x].@type == “String” )
{
newVal[objectDescription.accessor[x].@name] = String(value[objectDescription.accessor[x].@name]).replace(’\”,’\'\”);
}
// otherwise just grab the value of the property as it is
else
{
newVal[objectDescription.accessor[x].@name] = value[objectDescription.accessor[x].@name];
}
}

// return new value
return newVal;
}

this function loops of the properties of an object, finds out if it’s a string, and replaces the single ticks with something acceptable in the db…