Jonathan.Rowny

So I put together a real quick new site layout. You need to use the arrow keys or your mousewheel to switch between posts. I will add some arrows and such later to make it more clear. I realize that this is not the most practical way to read a blog and many people won't like it. Thankfully, hardly anyone reads my blog, so I can't be upsetting too many people.

I also noticed that the animation runs a LOT smoother on Chrome/Safari than it does on Firefox 3.5. Haven't even bothered to test with IE yet.

I ran out of songs!!!!! OH NO!! Guess I'll have to upgrade. This post is very twitterish... I don't like it. I better add some context to it so that it goes beyond 160 characters.


Here's the last few albums I downloaded:
-Jamboree by Beat Happening
-Beat Romantic by Talkdemonic
-Little Things by Hanne Hukkelberg
-Post-nothing by Japandroids


And I'm upgrading to grab School of Language.

EDIT: Nevermind! Emusic apparently jacked up all their rates by a HUGE amount. I think we've lost a great music service due to the greed of the record labels who won't just accept death. Dear record labels: you loose. One day artists will no longer rely on you and they will get ALL of the money they deserve.

You might have seen a lot of errors in the last few days, that's because I did a very uncoordinated move to a new server! YAY! Anyway, things are lookin good now I think. I'm on MediaTemple's DV basic now.

So if you compare the nutritional facts of Peanut Butter Captain Crunch and Kashi Go Lean honey nut something or another... you'll notice that the Captain Crunch actually has fewer calories (138 per cup) and less fat (about 3 gs) than Kashi Go Lean. To be fair, I didn't compare the other nutritional benefits, and I'm sure Kashi wins at least some of those.

Anyway, at half the price and three times the nostalgic awesomeness, I went with Peanut Butter Captain Crunch. Nothing against Kashi, I'm sure they make a fine cereal... but it's no fun!

Getting a roll over to work properly in Flex is no fun.

The Scenario

Mouse rolls over a tab, then the tab "slides out" revealing a tool bar or something.

The Tutorial

There are a few things you need to do to get this working right, let's walk through the steps.

1. There's a few ways to do this, but I'm shooting for easiest. Let's say you have a top-oriented menu (top-right) that needs to slide down from 25 pixels to 80 pixels tall. Start by making our canvas.
   

   <mx:Canvas y="-55" right="10"  height="80" width="600" id="slider">
       <mx:Label text="Slider content"/>
   </mx:Canvas>
   

   Now you should have a nice canvas with only 25 pixels showing.

2. Now we need to know something... is a transition happening or not? To do this, we'll create a variable called transitionHappening.
   

   private var transitionHappening:Boolean=false;
   

3. Now let's make some effects! Simple move in and move out will do.
   

   	<mx:Move yFrom="-55" yTo="0" duration="400" target="{slider}" id="moveOut" effectStart="transitionHappening=true;" effectEnd="transitionHappening=false;"/>
   	<mx:Move yFrom="0" yTo="-55" duration="500" target="{slider}" id="moveIn" effectStart="transitionHappening=true;" effectEnd="transitionHappening=false;" />	
   

   Pretty straight forward eh? Moving from -55 to 0 and back, targeting the slider, and setting the boolean off and on. We'll later use this boolean to reduce errors in rolling over and prevent duplicate calls to the rollover and rollout events.

4. Now let's get jiggy with some action script... my favorite part. We only need 3 lil' functions. An init, a rollover, and a rollout. This is the most important concept in this post. If you do not remove listeners and add them again, you will get duplicate calls... I don't know why. For some reason Flex is not the greatest and firing events at the appropriate time.
   

   private function init():void{
   	slider.addEventListener(MouseEvent.ROLL_OVER,rollOver);
   }
   			
   private function rollOver(event:MouseEvent):void{
   	if(!transitionHappening){
   		moveOut.play();
   		slider.removeEventListener(MouseEvent.ROLL_OVER,rollOver);
   		slider.addEventListener(MouseEvent.ROLL_OUT,rollOut);
   		}
            }
   	private function rollOut(event:MouseEvent):void{
   		if(!transitionHappening){
   			moveIn.play(); 
   			slider.removeEventListener(MouseEvent.ROLL_OUT,rollOut);
   			slider.addEventListener(MouseEvent.ROLL_OVER,rollOver);
   		}
   	}
   

5. The last step is to add a creationComplete call to init, and you're done!

The finished code

<mx:Application creationComplete="init()"  xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" >
	<mx:Script>
private var transitionHappening:Boolean=false;
private function init():void{
				slider.addEventListener(MouseEvent.ROLL_OVER,rollOver);
			}
			
			private function rollOver(event:MouseEvent):void{
				if(!transitionHappening){
					moveOut.play();
					slider.removeEventListener(MouseEvent.ROLL_OVER,rollOver);
					slider.addEventListener(MouseEvent.ROLL_OUT,rollOut);
				}
			}
			private function rollOut(event:MouseEvent):void{
				if(!transitionHappening){
					moveIn.play(); 
					slider.removeEventListener(MouseEvent.ROLL_OUT,rollOut);
					slider.addEventListener(MouseEvent.ROLL_OVER,rollOver);
				}
			}
        </mx:Script>
<mx:Move yFrom="-55" yTo="0" duration="400" target="{slider}" id="moveOut" effectStart="transitionHappening=true;" effectEnd="transitionHappening=false;"/>
	<mx:Move yFrom="0" yTo="-55" duration="500" target="{slider}" id="moveIn" effectStart="transitionHappening=true;" effectEnd="transitionHappening=false;" />
<mx:Canvas y="-55" right="10"  height="80" width="600" id="slider" backgroundColor="#ff0000">
<mx:Text text="YAY!" />
</mx:Canvas>
	
</mx:Application>

I've heard of quite a few people lately being turned off of PureMVC because it's "Needlessly complicated." I truly respect Cliff Hall and I love his creation, PureMVC, but the documentation for PureMVC is what's needlessly complicated, not PureMVC. As a community we need to step up and help Cliff advertise this wonderful framework better. So let's get one thing straight, PureMVC is not complicated. It's actually incredibly simple.. When you get 6 months into programming a huge application and a requirement drastically changes and all you need to do is modify a few commands, or send a new notification, you'll realize why PureMVC is so simple and beautiful. The power comes from the observer pattern. That's a fancy way of saying "everything in your application can know about everything else, if it wants to." I'm swamped right now, but as soon as I get some free time I'm gonna make a PureMVC for people who think PureMVC is complicated guide. So what do you think is most confusing about PureMVC? Let me know and I'll include it in the guide.

I created a new project, http://code.google.com/p/rtflex/. I got the idea from AlivePDF. Basically it exports RTF binary to a file. Nice tool for saving documents that need to be opened by Word.

If you're using Christopher Conraet's and Brian Deitte's Iframe component for Flex and you try to change the URL in it to a page with a form, you've probably run into the "stolen focus" issue. In IE, the focus is completely gone from Flex, and will not return! After a lot of frustration, I finally figured out a solution that's really easy. First add this Javascript to your index.template.html.

<script type="text/javascript">
 function SetFocus(){

  window.focus();
  document.getElementById('${application}').focus();
 }
</script>

The first line of code puts the focus back in the parent window (as opposed to the iFrame window) and the second one puts the focus directly on the Flex application. But wait! There's more! We have to call this function right? Simple! Just modify iFrame.as on line 143 in the static var FUNCTION_LOADIFRAME.

 onLoad='SetFocus();'

And that's it! Now your iframe won't steal your focus when you change the URL!

In Flex, some label functions accept two arguments, i.e. item and column in a datagrid, and some accept one, i.e. item in a combobox. If you're not using the data from the column, which is typically just the dataField anyway, then you don't need two labelFunctions. The easiest way to fix the problem is by making the column field optional.

private function fullName(item:Object,dgc:DataGridColumn=null):String{
 return item.FIRST_NAME+" "+item.LAST_NAME;
}

Just add "=null" and you're done!