At the next Flash Platform UG meeting in Nashville I will be speaking about Flex and PHP. This is a joint meeting with the Nashville PHP UG.
Well you don’t want to miss this meeting now ….. Adobe Evangelist Ryan Stewart sent me an email the other day and we where talking about the next meeting (thanks to Cal Evans for introducing Ryan to the Nashville UG community), anyway long story short Ryan offered to allow me to give away of MASTER COLLECTION! This is a $2600 value.
Someone is going to walk away with it. It might as well be you so, be there or you will kick yourself. I will also be giving out a few t-shirts and stickers from our friends at influxis
I am amazed at how much I learn every week. I have been coding Actionscript for a long time and no matter what sometimes you learn the most simple cool things. At least I thought it was cool for something as simple as this. Sometimes no matter how many projects you have been on you just don’t run across situations where you have to use parts of the language so you just never find the little nuggets of goodness that make your coding life a little easier.
Enter dynamic variables
Now if you have used just plain old Object you pretty much know that you can do something like the following.
var obj:Object = {}; obj.var1 = 1; obj.var2 = “mystring”; obj["some crazy var with spaces"] = new Array();
Anyway you get the idea.
I am on a project now where we are working with a lot of very generic objects that come back from server requestes and we are decoding JSON so using Object made a lot of sense to the other developers who are mainly have a lot of javascript knowledge and are learning Flex and Actionscript as they go. Naturally they thought JSON was the best way to go. I can’t really argue with that although I would have gone with using something like Blaze being that all of there backend is Java. That way we could use AMF and strictly typed objects that could be passed back and forth. Anyway … I digress.
In order to make our life a little easier and to make the code on the Flex side more understandable I started moving the team away from using plain objects on the actionscript side into using strictly typed objects or Value Object (VO’s), as I like to refer to them.
For examples sake let’s say that data coming back from the server contains Date and Time information. On the actionscript side I create an object like this.
package {
public class TimeVO {
public var start:Date; public var end:Date; public var name:String;
}
}
This is all great because you can just pass around the TimeVO object to all the components and you know what type of data it contains and there is less room for errors when creating new components that will be working with time data.
In some of the components we do some data visulization with some of the Flex Chart components. Long story short, so that the chart that I was working with grouped data in the correct manner all the TimeVO objects needed a dynamic object created with a number value. Basically telling me that all the TimeVO’s belong to a particular “group” or “event” in time. I thought, “Hey, everything in Actionscript extends Object, right? All I should have to do is do something like this”.
var timeVO:TimeVO = new TimeVO(); timeVO["123234345"] = value;
Not so fast! If you try this you will get a Big fat Error! The simple solution is to make the class “dynamic” like this.
Set the class to dynamic
package
{
public dynamic class TimeVO {
public var start:Date; public var end:Date; public var name:String;
I am starting to do a lot more AIR development and found something that baffled me a bit the other day. I am creating new Windows in my AIR app and I wanted to create the window and then have it open on screen where I would like. An example of this is I have a window that acts like a menu for my app so I wanted the window I create to open at 4px on the Y and 25px on the Y.
You would think it would be a easy as doing the following:
var mywindow:Window = new Window();
mywindow.x = 4;
mywindow.y = 25;
mywindow.open();
However this does not work as you would expect. This was a bit lame if you as me and the answer was not obvious unless you have doen a lot of AIR development and know what I am about to say. You have to listen for the window open to complete and then call the move() function and pass it the x and y for this to work.
Checkout the following code:
protected function creationCompleteHandler(event:FlexEvent):void
In Flex 4 you have the ability to use the mx components or the new spark components. I started a project the other day and wanted to use a ToggleButtonBar and noticed the only on available was the mx component. Spark does come with a toggle button but it is a single button. Also I wanted to be able to use the ToggleButtonBar as a vertical menu and the mx component, to my knowledge, only lays out horizontally, and extending that component to get it to layout vertical just seemed like to much of a pain.
After thinking about the issue for a moment I dove right in and here is the resulting code that I came up with.
package com.mswallace.components.menus { import flash.events.FocusEvent; import flash.events.KeyboardEvent; import flash.events.MouseEvent; import mx.collections.ArrayCollection; import mx.collections.ArrayList; import mx.events.FlexEvent; import spark.components.Group; import spark.components.ToggleButton; public class ToggleMenu extends Group { public function ToggleMenu() { super(); this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete); } private function onCreationComplete(event:FlexEvent):void { this.addEventListener(FocusEvent.FOCUS_IN, onFocusIn); } private function onFocusIn(event:FocusEvent):void { this.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); } private function onKeyDown(event:KeyboardEvent):void { trace(event.keyCode); } private function createMenu():void { if(this.numChildren > 0) this.removeAllElements(); for (var i:String in toggleButtons) { var value:String = toggleButtons.getItemAt(int(i)) as String; var toggleButton:ToggleButton = new ToggleButton(); toggleButton.label = value; toggleButton.id = 'bn_' + value; toggleButton.addEventListener(MouseEvent.CLICK, onClick); this.addElement(toggleButton); } //this is optional code to select the first item } private function onClick(event:MouseEvent):void { if(event.currentTarget.selected == false) { event.currentTarget.selected = true; selectedIndex = this.getChildIndex(event.currentTarget as ToggleButton); } for(var i:int=0; i< this.numChildren; ++i ) { var button:ToggleButton = this.getElementAt(i) as ToggleButton; if(event.currentTarget != button) button.selected = false; } } ///////// vars \\\\\\\\\\\\ //array of string values that is passed in to create the buttons private var _toggleButtons : ArrayCollection; public function get toggleButtons():ArrayCollection { return _toggleButtons; } public function set toggleButtons( value : ArrayCollection ):void { _toggleButtons = value; if(value != null && value.length > 0) createMenu(); } //selected index private var _selectedIndex:int; public function get selectedIndex():int { return _selectedIndex; } public function set selectedIndex(value:int):void { _selectedIndex = value; } } }
Here is the component implemented in MXML after creating the Actionscript Class. I only did this so that I could control the layout in mxml tags but you could also implement the layout in the Actionscript class if you like.
I tend to follow a “code behind” method when creating some of my components.
<?xml version="1.0" encoding="utf-8"?> <menus:ToggleMenu xmlns:menus="com.mswallace.components.menus.*" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <menus:layout> <s:VerticalLayout /> </menus:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> </menus:ToggleMenu>
With out getting into a long explanation. If you feel like compiling your Flex or Actionscript project on OSX takes forever do the following and I am pretty sure you will notice an improvement. This is most noticeable on large projects with lots of files.
Start System Preferences, select the Spotlight icon, then the Privacy tab, then click the Add button (“+”) and find your workspace directory that your projects are in the dialog that appears, or you could just open finder and drag the directory into the window.
SharedObject in your flash project can make for a much improved user experience, and can help you do things faster and more behind the sense so that your applications and web sites work the way users expect them to work. Recently I had to discover the power of SharedObject myself in a chat applications that I am building in Flex.
Because our application will live on each page of a web site I needed a way to keep the user from having to login to chat everytime they do a page load. The chat app will basically store the users login info locally so that I can easily get their login creds and log them back into the server as they navigate the site. I also went a step farther and store the last few messages that they have either sent or received and load them back into the view when the app loads.
In these examples I am going to go over a couple of fundamental things you can do to store user info locally with SharedObjects. Everything in this post was coded using the new Flash Builder Beta but SharedObject has been around for a long time and should work even back in AS2. For my examples we will of course be coding for AS3 and Flash 10.
Remembering User Cardinals Here we have an example of storing user login information so when they return to our application we can remember there user name and password for them. Remember that all this data is stored local to the user’s hard drive so we are not transmitting anything over the internet at this point because flash player itself has the data we need.
If this is your first time viewing the the app what you need to do is fill in the info and check the box remember me. Then you will refresh the page and you will see that your info was stored. Unchecking the box will clear the data and if you refresh the page you will have to start all over. To show that your data was stored or cleared, click the check SO button. I have some code that will see if the sharedobject data matches what is in the text input controls or not and alert you if the data matches or does not match.
RIGHT CLICK SWF TO VIEW SOURCE AND DOWNLOAD SOURCE ZIP FILE
Remembering what the user did last This next example will pretty much do the same thing with sharedobject. Remember all we are really doing is choosing what type of data we need from flash player at runtime.
What we are going to do is remember the last thing the user did so they can pickup where they left off. In this simple app we create a ball. The starting X and Y location of the ball is 50px. As you click on the stage the ball will move to the location of the ball to your mouseX and mouseY location. The next time you load the app the ball will move to the last location you clicked. We do this by storing the last mouseX and mouseY location in the sharedobject. Give it a try by clicking around a few times and refreshing the page.
If you don’t want the app to remember the location then check the box in the bottom of the app and it will not store the x and y by clearing out the data.
RIGHT CLICK SWF TO VIEW SOURCE AND DOWNLOAD SOURCE ZIP FILE
The ball example could let you do something like not skip a flash intro if the user has been to the site before or maybe you only want an animation to play on the home page so after the user goes past that point in the site you store a Boolean value to let you know if they have been there before.
Keep in mind that sharedobject data should remain simple. I have gone as far as storing my own value objects in an Array within sharedobjects but if the data grows beyond 100k flash player will warn the user and get their permission before allowing the data to be stored., so you want to keep the data storage small.
Hope some of you found this useful and please feel free to leave your comments, suggestions or questions.
Something that has really been bugging me for a long time about Eclipse IDE / Flex Builder is the fact that I could not figure out how to remove items from the toolbar at the top after I install some needed plugins. Well all the plugins are needed but some of them don’t really get used all that much. A good example for me would be that I have the cfeclipse plugin but I really don’t use CF all that much and the cfeclipse plugin once installed puts a lot of extra stuff at the top in the toolbar.
Here is a screen grab of what kind of mess I was dealing with before I figured this out.
Now if you have been looking for this solution it is pretty easy once you know where to look. It is actually easier than changing your code editor font size. If you have ever had to figure that one out you know what I mean. Pretty damn difficult if you don’t know where to look.
Here are the steps
1. After Eclipse / Flex Builder is open you need to go to the Window menu and select Customize Perspective.
2. Once the Customize Perspective panel is open you need to select Commands tab.
3. In my case I clicked on CFEclipse in the left hand menu and to the right you will see all the buttons and short cuts displayed for that plugin. All I did was uncheck the box next to CFEclipse then then click OK. Now I have a toolbar that is not over loaded with buttons Yeah!
Let me know if this works for you guys as well cause for me it has been months of wondering how to do this.
One of my most trafficked section of my blog is on installing the Flex and Actionscript 3 bundles for TextMate. Don’t let the title fool you. I still really really really enjoy TextMate. It has some great features for sure, but I have to say that Adobe has made a great move in using the Eclipse Platform for code editing Flex and Actionscipt 3 projects.
In the past I have done a tutorial on how to using Flex Builder for your Flash projects and it was a bit of a pain in the ass to set this up. Hence the reason I did a tutorial on how to do it. Even Flash Evangelist Lee Brimelow was linking to my post on how to install the Flex and AS3 bundles. Well leave it to Lee to one up me and I am so glad that he did. For the last week or so Lee has been experimenting and creating tools for better setting up Eclipse so that you can do all your Flash “Actionscript 3″ coding in Eclipse. He is utilizing some existing plugins, creating some plugins of his own and has also created an AIR application that does a really good job of creating the project files and directories needed for editing AS3 code that is part of a Flash CS4 project. The last post he talked about moving this AIR app over to be an Eclipse plugin as well. I can’t wait to see what he comes up with.
Do yourself a huge favor and head over to Lee’s site “TheFlashBlog.com” and check out what he has been doing. It will make your Actionscript and Flex development life a lot better and you will feel like you have all the tools that you need. It also sounds like this set up is only going to get better and better.
In this video I am going to show you the basics of starting your first Red5 java application and we will use Flex to talk to the server and the server will keep track of a list of users that are logged in to the application. As soon as a user closes there browser or leaves the applications page the user will be removed from the applications list of users. This is really helpful for building applications where users are interacting with other users. This could be a Chat or Video application or even an online game where users can play against each other.
Before you can start you will need a couple of things installed. Eclipse with Flex Builder plugin, The Java EE development environment, and finally the Red5 Server Plugin for Eclipse. In the video I will explain a little bit about why you need this setup and where to go to get it but I will not cover installation at all.
I hope you guys enjoy and let me know if you have any questions.
Groovymag