Godaddy Sucks

I've always hated godaddy. Below is just another reason. It takes them 30 to 40 minutes usually to setup a mysql database. Every hosting provider I've ever used has had this task automated so that in only takes a few seconds. Why must I wait for godaddy?

Godaddy Sucks: One of the many reasons godaddy sucks.Godaddy Sucks: One of the many reasons godaddy sucks.

btw, I do not use GoDaddy for my own host. And I never will, nor will I ever recommend them.

Another new site layout

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.

Touroni, Application to find your favorite bands on tour

I used the Eventful API to create an Adobe AIR application which scans your MP3 music files, compiles a list of bands/artists, and then tells you their tour schedule based on the Eventful web service. This is what I consider a beta! There are not many features, very basic stuff here. The file call isn't asynchronous so you get a freeze for a second or two while it scans your MP3 directory. I will fix this.
Download

The sadest day for my eMusic account

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.

Cross browser CSS, margins, and padding

One problem I've always had is developing websites that look exactly the same in all browsers. I'm usually able to get Safari & Firefox perfect and nearly so with IE7+. I've learned a number of things over the years and I'm going to put them in this post. I'll probably update it a few times as things evolve and we move towards CSS3.

CSS Consistency

Start your CSS by setting all your padding and margins to 0!

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,ol {margin:0;padding:0;}

or

*{margin:0;padding:0;}

We do this because it gives us an even starting point. In the future you can use classes and IDs to further stylize and move your objects around.

Make sure you're not inheriting styles from other stylesheets.

When I'm working with someone elses design I often find multiple style sheets with the default tags already styled with funky margins, font sizes, etc.

More on this subject coming shortly!

On a new server!

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.

Hoooray for Syntax Highlight!

Well, as you may have noticed, I finally went through all the posts and used a standard way to do code highlighting. It's called Syntax Highlight and you can get it here: http://alexgorbatchev.com/wiki/SyntaxHighlighter

Fortunately, there's a Drupal Plugin so I didn't actually have to do anything except edit all my old posts to use this format:

<pre class="brush:as3">
     This is my code
</pre>

The one thing I wish it could do is combine brushes, so I can have MXML and AS3 in one block.

One thing I noticed while doing this is that I have come a long way in terms of my AS3/Flex ability.

Also, I should be getting a new theme in the next 24-48 hours depending on my workload. Hopefully I'll be wrapping up about 4 projects this week to add to the portfolio!

Interesting Discovery about Breakfast, Captain Crunch > Kashi Go Lean

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!

New Website

Well, the new site is up.... yes, a default Drupal install. I'm so done with blogger. I can add whatever I want to this site now.

The perfect roll over slide out menu in Flex

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>

How to Debug Flex while listening to Internet Radio

This is probably pretty obvious, but for some reason I did not do this at first. If you're debugging an app in Flex Builder, you'll notice that the flash player stops... so does Pandora, Live365, Grooveshark, or any other internet radio that's flash based. Even if it's in a separate window. The solution is incredibly simple... download Google Chrome, open your internet radio, debug Flex in Firefox.

... I suppose you could also use IE8 or Safari.

PureMVC is not complicated

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 hate my website

I hate my website. I've never been satisfied with it. I'm going to completely rewrite the whole thing. I might use Drupal. Blogger sucks.

RTF output from Flex

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.

RadioButtonGroup inside of Repeater

If you've ever tried to use repeater to create radiobutton groups, you probably found that setting the ID doesn't work and the group won't initialize. That's because flex wants "visual" objects in the repeater. To fix this problem, you simply create the groups before you repeat like so.
<mx:Script>
  <![CDATA[
   import mx.controls.RadioButtonGroup;
   import mx.collections.ArrayCollection;
   [Bindable] 
   private var rbGroups:ArrayCollection;
   
   private function createRBGroups():void{
    rbGroups= new ArrayCollection();   
    var rbGroup:RadioButtonGroup;
    for each(var item:Object in someRepeater.dataProvider as ArrayCollection){
     rbGroup = new RadioButtonGroup();
     rbGroups.addItem(rbGroup);
    }
   }
  ]]>
</mx:Script>
<mx:Repeater repeatStart="createRBGroups()" id="someRepeater">
<mx:HBox>   
  <mx:RadioButton group="{RadioButtonGroup(rbGroups.getItemAt(someRepeater.currentIndex))}"/>
  <mx:RadioButton group="{RadioButtonGroup(rbGroups.getItemAt(someRepeater.currentIndex))}"/>
  <mx:RadioButton group="{RadioButtonGroup(rbGroups.getItemAt(someRepeater.currentIndex))}"/>   
   
 </mx:HBox>
</mx:Repeater>

Flex iFrame stealing focus!

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!

Using callLater in a PureMVC Mediator

This may seem obvious to most people but I needed to use calllater today in a mediator because its view component was not done initializing and I realized "callLater is a method of the flex framework, specifically the UIComponent, and the mediator, being an AS3 only class, doesn't have a callLater function! OH NO!"

Okay, so the solution is so simple. A mediator has a view it is responsible for, viewComponent... right? So just callLater on that.

viewComponent.callLater(someFunction);

The function in this example, "someFunction", is inside the mediator.

The Same LabelFunction for DataGrid and ComboBox

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!

Presentation next week

Next Wednesday I'll be giving a presentation that covers
  • Installing Drupal
  • Configuring Drupal Services for AMFPHP
  • Configuring Flex for AMFPHP
  • Never having to code a backend ever again
  • Building a Flex app with a Drupal backend
All this in under an hour. It's that easy. See dc-flex.org for more info on the meeting. If no one else volunteers to speak we might make it into an all-night presentation where we build an entire web app.

XMLListCollection, Descendants function is very important!

I've been struggling today with a minor issue of making all of the children in a complex XML structure go through a repeater. The first step is to create an XMLListCollection which can then be used as a dataprovider for a repeater object. But if you simple do this:
menuCollection:XMLListCollection = new XMLListCollection(menu.children());
You're only going to see the elements at the top of the list. At first I was thinking "well crap, now I have to go flatten my XML or flatten the collection somehow." But then I always remember, the simplest solution is the best and if there isn't a simple solution that I can think of, search the docs! And then I discovered the decendants function which will go all the way down to the very last item in a XML tree and return them all as a list to your collection. This means that a repeater will repeat through all of them, and not just the parent nodes.
menuCollection:XMLListCollection = new XMLListCollection(menu.descendants());