Yahoo Flex Map Component Part 3 available
Part 3 in my multi part series on building a flex component out of the Yahoo! Maps API is available over at the Flexcoders group.
In part 1 of this series I talked about the reasons why you would want to make a flex component out of something you can do in actionscript. In part 2 I discussed the basics of the component architecture. From that second article you can create a component that works however you still haven't handled most of the reasons to make a component in the first place. In this article I will take care of those issues the issues of data binding, event handling and making it easier for non coders( sometimes called designers or managers :) ) to work with.
YahooFlexMap part 2 is available
Part 2 in my multipart series about creating a Flex component fromt he new Yahoo! map API for actionscript 3 is now available in the my.opera Flexcoders group blog.
In part 1 of my series on making a flex component out of the new Yahoo! Maps API for actionscript 3 I talked about the reasons I was taking the time to componentize something I could easily build with pure actionscript. Today I will be talking through the basics of creating a visual component. While these basics are covered at the LiveDocs for Flex 3, I will go over them in a slightly different way, as well as talk about how they affect the Yahoo! map component in particular.
Also make sure to join the Flexcoders group as it is new and looking for new members. At the very least, feel free to ask questions in the forum.
Flex 360 - Atlanta
This week I am at the Flex 360 conference in Atlanta. As this is the first Flex conference I've been able to go to I am very excited. Today is the official first day and I am sure they will talk about how Flex 3 and AIR are now currently live, since that is exactly what happened as of sometime last night. I wonder what other nuggets of information they have in store for us. I'll share with you what I can. ...
Today may be the official first day of the conference but yesterday was the day of hands on pretraining. Since I got here early in the morning I went to the all day Flex 101 session. While the session was very basic, it was a 101 session after all, I learned that many people coming from other backgrounds might need more help jumping into the fray. So, while I will still try to write my articles on cool tips and tricks you might not know about, I will start to write more articles at the 101 level to help people jump right into the Flex platform. With AIR finally in release, it is an exciting time to be a part of the flex community.
Well, off to the keynote. I'll write more as I hear it.
Friday Humor with LOL cats?
I think the whole lolcats phenomenon is silly. It's kind of funny and some of the parodies are much better than the originals. However I think the following lol cat sums up the phenomenom quite well. ...
Friday Humor with Mr. T
I have already posted a Friday humor post today, but hey it's almost Christmas so consider it a present. Of course, being the holiday season you may not have time for the jibba jabba but this video is worth it.
...
It may not be quite as good but here is William Shatner doing his commercial for WOW.
That Mr. T vid almost makes me want to try World of Warcraft, but EQ2 is where I spend my online gaming time and I don't have much of it to give.
---
Special thanks to the Mr. T Jibba Jabba Archive
Flex Builder for Linux Alpha 2
Just checked adobe labs today and I'm a couple of days late. Flex Builder for Linux Alpha 2 was posted on December 18th. ...
What's New in This Release
The additions to this version of Flex Builder Linux Alpha are:
JSEclipse plugin installation
Datavisualization Trial
Automated Testing Trial
Flash Player 9 Update 3 (9.0.115.0)
Installer with better messages to help installation on a 64-bit machine
Bug fixes
Unsupported Flex Builder Features
This section lists unsupported Flex Builder features in Flex Builder Linux:
Design view
States view
Refactoring
AIR support
Data Wizards
Cold Fusion - Data Services Wizard
Web Services introspection
Profiler
Hidden Gems - mouseFocusChange
Here's a sample of my MXML code for the icon bank
<?xml version="1.0" encoding="utf-8"?><mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml"
itemRenderer="com.provismedia.dashboard.views.Icon"
backgroundAlpha="0" dataProvider="{model.userIconData}"
doubleClickEnabled="true"
itemDoubleClick="this.selectedItem.event.dispatch()"
mouseFocusChange="this.selectedIndex=-1" >
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import com.provismedia.dashboard.model.DashboardModel;
[Bindable]
private var model:DashboardModel = DashboardModel.getInstance();
]]>
</mx:Script>
</mx:TileList>
----
Daryl "Deacon" Ducharme is currently Director of Application Development for the Interactive Agency Provis Media Group, LLC which helps organizations enhance identity, connect with customers and increase productivity.
AMFPHP $_explicitType understood
I've been using AMFPHP for a while now. Up until recently I have been using dumb objects and simple NetConnections to pass things back and forth between Flex and PHP. Over time, the objects I was passing back and forth got more complex and strong typing of the objects looked like a better way to go, but there was a lot of code that would have to change in my libraries to make it happen so I kept putting it off. ...
Recently, a couple projects I was working on had me take a look at the Cairngorm micro-architecture to help speed up (re)development. After finding some great tutorials on getting starting with Cairngorm I decided it fit the bill for my needs.
Cairngorm would allow me to refactor some basic frameworks I was going to use for these and future projects while allowing for easier customization and modification. The architecture makes use of RemoteObjects to pass data back and forth instead of raw NetConnection objects. Between RemoteObjects and the ValueObject design (anti?)pattern I felt it was time to work on strong typing my variables, specifically the ones traveling from PHP to Flex.
Two important parts to making this work are the RemoteClass meta tag in Flex and the $_explicitType variable in PHP. The RemoteClass meta tag lets your application know the fully qualified name of an alias class on your server. It works the same for AMFPHP, ColdFusion, Java and others. It should look something like this:
package path.to.asClasses
{
[RemoteClass(alias="path.to.MyAliasClass")]
public class MyASClass
{
public var id:uint;
public var name:String;
}
}
My first thought about the $_explicit type variable was that it would be the inverse of the RemoteClass meta tag and point to the actionscript class. With that in mind I wrote something like this:
<?php
class MyAliasClass
{
var $_explicitType = "path.to.asClasses.MyASClass";
var $id;
var $name;
public function MyAliasClass( ){}
}
?>
Unfortunately, the data that got passed back to Flex was typed as an ObjectProxy object instead of as a MyASClass object as intended. I did all the basic troubleshooting. I made sure everything was spelled the same. I tried to do searches online and got mostly references passing VOs from Flex to PHP and/or Patrick Mineaults opinion that doing so is wasteful. Not many of the search results talked about going from PHP to Flex and those that did just said you needed to use $_explicitType. Unfortunately I can't find the posting again, but I came across a short post that said they had a similar problem and got it to work by changing $_explicitType to a string representing the fully qualified path of the PHP class. He didn't know why it worked, and neither did I, but I tried the following code and class typing occured as expected:
<?php
class MyAliasClass
{
var $_explicitType = "path.to.MyAliasClass";
var $id;
var $name;
public function MyAliasClass( ){}
}
?>
As usual, I got it working and now I needed to understand why. Not only why did it work but why did they use the term explicit type? It turns out the use of the RemoteClass meta tag takes care of mapping in both directions. When the Flex app encounters an alias object from remoting ( in this case path.to.MyAliasClass ) it knows what AS class is equivalent. As for explicitType, you just have to think about the full notation ( MyAliasClass::_explicitType ). In object oriented languages an object's properties should represent it's state. In this case it represents the explicit type of MyAliasClass. This is required due to the constraints of PHP. PHP is not case sensitive when it comes to class names. Also, PHP doesn't actually use classpaths. When you include a file there is no reference to the directory structure passed along with it. Though one could be derived, it isn't built into AMFPHP natively.
--
Some other good news related to AMFPHP. While looking for answers I see that AMFPHP now has a new lead who is working on getting version 2.0 out and ready to go. Supposedly he already got authentication working again. His name is Wade Arnold from T8Design. This is good news as it once again assured the future of the AMFPHP project.
----
Daryl "Deacon" Ducharme is currently Director of Application Development for the Interactive Agency Provis Media Group, LLC which helps organizations enhance identity, connect with customers and increase productivity.
Simple Yahoo! Maps Workaround
The Yahoo! Maps Flash Component and API is a nice system to work with. For a simple to use map plug in for flash that looks decent without much work, its the best there is. However I like to work with it and see what hidden gems I can find. Or, as is the case in this article, delve deep inside of it and try to find out how to make it work as I want it to. It's still technically beta, so it has it's own little quirks. ...
As great as the Yahoo! Maps component is, it has one quirk I've run into a couple of times. If you unload the map while it is loading data and tiles it loads excruciatingly slow when you load the map again. In fact, it seems like it isn't loading at all. Usually when I've created a map for a web page or RIA, I create it as a separate SWF movie to be loaded at runtime. The fix for the problem in this situation is simple, if not obvious.
// make sure yahoo map library is removed from global namespace// so that it will always reload.
this.yMap.onUnload = function()
{
_global.com.yahoo = null;
}
Unfortunately, this is one of those wild ass guess debug moments - where you just try it and hope it works. I'm not sure what class in the yahoo tree is causing the problems but I figured something was so I just got rid of them all. It probably also helps that the entire yahoo map library is a larger chunk of data so making it all available for garbage collection in that way makes garbage collection actually occur.
Recently, I had a project where my boss wanted me to embed map movie clip in the main movie rather than load it in at runtime. I still had the same type of problem, where the map could get, and is like to be, unloaded while it is in the middle of a data/tile load cycle. Since the Yahoo! map library isn't getting loaded in as it does with an external SWF, deleting the library is worse than the original quirk. Then the map won't even show the copyright info.
So into the problem I dove. I tried everything I could think of. I looked in the classes that I unzipped from the components SWC file to see if I could make some adjustments to unofficial parameters on unload. I used wireshark to see if any HTML requests were missing when the quirk occurred. I even took the SWC apart with Buraks Actionscript Viewer and tried to sort through that mess of code to see if I could find the answer. While I made many interesting discoveries along the way, I made no difference in the issue at hand.
So I made my way to my boss's office to tell him the status. As I walked toward his office I knew he would have a very simple answer for me that would work. I'm stubborn. I'm a programmer. I like to do things my way. I want elegant solutions to my programming problems. He is a designer. He just wants it to work. He's not worried about how it works ( note to other programmers, most people are this way ). I walk into his office and tell him the news. He thinks about it for maybe one second and tells me not to unload it, just move it off the stage.
Don't unload it?! That's like going to a doctor and telling him, "it hurts when I do this." To which the doctor will respond, "Then don't do that." In other words, it makes perfect sense and I can't believe I didn't think about it. Maybe I should have taken a break instead of pushing on for as long as I did to figure it out.
Now, instead of moving it off the stage I just set it's _visible property to false. That just seems a bit more elegant to me, and it just works. In fact in this situation it works better than the other system. Anyone who has used the Yahoo! Maps component knows that before the first tiles load in there is nothing but copyright info. By doing it this way the map loads in the background so when a user click the button to see the map, it comes up instantly.
So to wrap things up, here are my lessons learned:
- If you can't make it elegant, just make it work
- Ask for help from people who don't think like you
- Your mind needs a rest from time to time, take breaks
- load Yahoo! Maps in the background - they work better that way
- Sometimes the answers are simple, if you are racking your brain step back and look at things from different perspective
----
Daryl "Deacon" Ducharme is currently Director of Application Development for the Interactive Agency Provis Media Group, LLC which helps organizations enhance identity, connect with customers and increase productivity.
Geek Humor
I won't proclaim to be a linux geek, even though I'm geeky enough to try it out. This may be because the latest version of Ubuntu has taken the geekiness out of linux( or rather hidden it - it's still there ). But I do understand hardcore linux fanboys and their devotion to being cool because they program in Emacs or VI. Well, the adobe linux presentation at MAX Chicago played on this syndrome of linux geeks who always seem to be coding in command line text editors. ...
The video below is the MAX presentation for the alpha release of Flex Builder on Linux. Very exciting news and they used humor to show a point. The presenter has a thick accent, but the main point of the jokes comes through clearly. Not VI? How about Emacs? Okay, well there is this other thing we have been working on...