Posted a new version of AgileAgenda over the weekend. Fixed a few minor bugs, redesigned the opening screens, and put in our new logo. The entire initial user experience should be better now. Here’s a quick glimpse of what it looks like now:
Archive for the 'flex' Category
Page 3 of 6
New version is up. It fixes the selectNone() bug, has the correct
metadata for events, and no longer creates event listeners on the
parent object for every single OH you instantiate.
I also added an updateAfterEvent call when things are getting moved,
it really made the motion a lot smoother, never thought it would
matter much.
http://code.google.com/p/flex-object-handles/downloads/list
ASDocs now posted as well, it’s pretty sparse so it looks like I need to add
in a bunch of comments 
http://rogue-development.com/objecthandles/asdocs/
-Marc
UPDATE: http://www.rogue-development.com/blog/2008/03/first-public-release-of-my-flex.html
Last night I wanted to see how my component would work with custom editors that weren’t just text boxes.
Here’s a quick demo of my spreadsheet component with a custom renderer descended from a combo box. Notice a few things:
- 1 click on a cell to open, not one click to activate the cell and another to open it.
- You can keyboard navigate to it, hit the down-arrow, open the list of choices, use the arrows to select one, and then hit enter to select it, just like you should be able to.
I posted a new ObjectHandles build yesterday. It fixes a couple bugs and integrates some patches people have sent me including:
1) Graphical handle support
2) Fixed aspect ratio support
3) Ability to detect transparency & clicks
There will likely be another build in the next week to integrate another patch and fix a few a performance issue.
I usually want to turn off the modal dialog blur in applications but can never remember how. This blog post is here so I can find it quickly next time.
Set this style:
Application {
modalTransparencyBlur: 0;
modalTransparencyDuration: 0;
modalTransparency: 0;
}
(That’s “Die in a fire” for those of you not hip to texting lingo and don’t have a little sister to help make you hip)
Making the DataGrid do things it’s not meant to do is amazingly hard. Look at this gem that’s found in the itemEditorItemEditEndHandler method:
if (event.reason == DataGridEventReason.OTHER || !event.isDefaultPrevented())
{
destroyItemEditor();
}
If the event is canceled it goes ahead and destroys your item renderer.
So if you want to say, NOT end editing and you cancel the event, it goes ahead and kills your editor anyways.
No problem… we could just override the method and fix it. Except someone on the 2.0 SDK team got private method happy with that one.
Are there any good DataGrid alternatives out there? Especially for mimicking spreadsheet functionality where you’re adding and removing rows dynamically through user input?
I’ve worked with both Chris Allen and John Grden on some projects for my employer. During that time, I can’t count the number of times I heard about Red5, but I never got a chance to try it out.
This past week I caught Chris’ “Building Red5 Applications” session at FlashForward. I finally got up the motivation to download and try it out.
Here’s my experience. It’s my first time playing with Red5 (but I have plenty of java & eclipse experience) so it’s almost guaranteed I’m not doing everything the “right way”. But this way worked for me, maybe it’ll help someone else. If it does help you, please leave a comment. Writing this up takes a while and I’m not going to bother in the future for other things if nobody gets value out of it.
Attempt #1
I wanted to try out the .tar.gz package so I would know how to deal with it on Linux as well as Windows. That way I’d be able to deploy anything I built on my webhost fairly easily.
I unpacked it, ran ant, and let it all build. So far so good.
Then I ran the red5.bat file. Lots of exceptions. Like millions, maybe billions, I lost track. Seems my sample applications weren’t found. I poked around a bit, but no good. Screw this.
Attempt #2
I went for the windows installation package. That unpacked everything and the server ran fine. I could open up a web browser to http://localhost:5080/ and view the demos, admin panel, etc.
Note: The default admin username/password is admin/admin. You can change that in conf/tomcat-users.xml I’d suggest changing it.
Eclipse
So now I want to get it rocking with eclipse. I launch eclipse (I’m lazy and like things easy so I use easy eclipse.)
I select File->Import->Existing project, then pick my Red5 project. Bamn, I got an eclipse project set up.
But there’s compile errors.
Severity and Description Path Resource Location Creation Time Id
Project red5_server is missing required source folder: ‘test’ red5_server Build path 1190574481375 173990
The project cannot be built until build path errors are resolved red5_server Unknown 1190574530687 173992
So I closed the red5 eclipse project, fired up a text editor, and looked in my .classpath file inside the red5 folder. It had the offending entry.
<classpathentry kind=”src” path=”test”/>
Note… I delete this line later on:
<classpathentry kind=”con” path=”org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,”/>
You might as well do it now since you’re in there.
So I removed it, and repopened eclipse.
A quick Project->Clean and…
3656 Errors
Ok, seems it doesn’t see some libraries. Right click on my project, select properties. Go into “Java Build Path”, select the “Libraries” tab, click the “Add Jars…” button, and add all of the .jar files in the lib directory.
A quick Project->Clean and…
0 Errors
WOOT
Running it from Eclipse
Now I go into src/org/red5/server, find the StandAlone.java, right click it, and select “Run as…”->”Java Application”.
I check my eclipse console panel and get a bunch of lines the last one being:
[INFO] 2007-09-23 15:14:20,875 main:( org.red5.server.Standalone.main ) Startup done in: 5875 ms
Nice.
I point a web browser at: http://localhost:5080/ and see that the red5 server is indeed running. I launch the ball demo and push the connect button. Then I make a new browser window and launch the demo again. When I move the red5 logo in one window, it moves in the other. That means it’s all working.
Eclipse also helpfully added an entry to my run button (the green circle with the play button) in my toolbar so I don’t have to find the StandAlone.java file again.
I want a quick launch button for debugging too, so I kill the server (click the red square on the console panel) and right click the StandAlone.java and select “Debug as java application”. The server starts in debug mode, and eclipse adds it to my debug button on the toolbar. (the green beetle button)
Making something
Now, I want to make something. But first, I want to get rid of the samples. So I kill the server, close the eclipse project, and edit the .classpath file again. I know there’s a way to do this through eclipse, but I find editing the file quicker.
I get rid of these entries:
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/echo/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/tutorial/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/fitcDemo/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/oflaDemo/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”conf”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/test/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/midiDemo/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/agile/WEB-INF/src”/>
And I add one for my project, I’m going to work on something for AgileAgenda, so I’ll call it agile.
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/agile/WEB-INF/src”/>
Then I go rename the “echo” example to “agile”, and delete all the other samples (I deleted admin too, not sure if that was a good idea or not)
Open up the project in Eclipse again.
And I don’t see my agile webapp. WTF? Oh yeah… Eclipse is retarded. Right Click->Refresh and it shows up.
I want to rename the Application class in my webapps folder (see the picture).
Luckily, Eclipse rocks Java more than it rocks Flex, so I can just right click, select refactor, and pick move. Then I click “Create Package” enter in com.agileagenda.services and click ok a bunch of times.
I delete the rest of the webapp echo source tree.
A project->Clean and…
I think I broke something. Oh well.
Project->Properties->Builders and remove the invalid entry.
Project->Clean and build successful.
I hit the debug button, and search the console output. No errors reported and:
[INFO] 2007-09-23 15:44:45,375 main:( /agile.invoke0 ) Initializing Spring root WebApplicationContext
So I guess it found my new app. Yay!
Kill the server.
So I go back to my Application class and make a new method.
public function login(username:String, password:String) : Boolean
{
return true;
}
Then I remember that this is Java and not Actionscript so I rewrite it…
public boolean login(String username, String password)
{
return true;
}
I go to my project menu and turn on “Build Automatically” and get…
Severity and Description Path Resource Location Creation Time Id
Unbound classpath container: ‘org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,’ in project red5_server red5_server Build path 1190576857156 182811
WTF?
Close the project, open my .classpath file, remove the offending line:
<classpathentry kind=”con” path=”org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,”/>
Open the project, Project->Clean, build success.
I have no idea why that didn’t bite me earlier.
I press the debug button. The red5 server launches.
[INFO] 2007-09-23 15:51:26,062 main:( org.red5.server.Standalone.main ) Startup done in: 4937 ms
Yay.
Writing some actionscript
Now that I have a (dumb) login method, I want to try it out in Flex.
I have a “Sandbox” AIR application set up in Eclipse that I use when I want to quickly play with something. I highly suggest everyone do that. So I open my sandbox, open the MXML and create a quick login form.
<mx:Label x="26" y="43" text="Username:"/>
<mx:TextInput x="101" y="41" id="txtUsername"/>
<mx:TextInput x=”101″ y=”71″ id=”txtPassword” displayAsPassword=”true”/>
<mx:Label x=”26″ y=”73″ text=”Password”/>
<mx:Button x=”196″ y=”101″ label=”Login” click=”onLoginClick()”/>
<mx:Label x=”58″ y=”148″ text=”Label” id=”lblResult” width=”281″/>
And then add in some code (remembering that this is Actionscript!)…
private var netConn:NetConnection;
protected function onLoginClick() : void
{
NetConnection.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;
SharedObject.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;
netConn = new NetConnection();
netConn.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus );
netConn.addEventListener( SecurityErrorEvent.SECURITY_ERROR, errorHandler );
netConn.addEventListener( AsyncErrorEvent.ASYNC_ERROR, errorHandler );
netConn.addEventListener( IOErrorEvent.IO_ERROR, errorHandler );
netConn.connect(“rtmp://localhost/agile”);
}
protected function sendLogin() : void
{
var responder:Responder = new Responder( onLoginResult );
netConn.call(“login”,responder,txtUsername.text, txtPassword.text);
}
protected function onLoginResult( result:Boolean ) : void
{
lblResult.text = result ? “Login Success!” : “Login Fail!?!”;
}
protected function onNetStatus(event:NetStatusEvent) : void
{
switch( event.info.code )
{
case “NetConnection.Connect.Success”:
lblResult.text = “Connected, sending login”;
sendLogin();
break;
default:
lblResult.text = “ERROR!! ” + event.toString();
break;
}
}
protected function errorHandler(event:Event) : void
{
lblResult.text = “ERROR! ” + event.toString();
}
I start the server, run my sandbox app, click the login button, and get a connection error. Something went wrong somewhere.
I bet it’s a configuration problem. I open webapps/agile/WEB-INF and notice 3 config files.
in web.xml I make this change:
<context-param>
<param-name>webAppRootKey</param-name>
<param-value>/agile</param-value>
</context-param>
In red5-web.xml I make this change:
<bean id=”web.handler”
class=”com.agileagenda.services.Application”
singleton=”true” />
In red5-web.properties, I make this change:
webapp.contextPath=/agile
Kill the server, restart it (debug mode), try my app again. “Login Sucess” YES!
Now I head into the java class and put a breakpoint on the “return true;” line. I hit the button on my AIR app and Eclipse correctly breaks on the line. Yay!
I inspect the username and password parameters, and the values I had filled into the AIR app are present. Yay!
I’m now to the point where I can start actually writing my application.
Last night I submitted agile agenda for the AIR derby. I wasn’t going to originally since I didn’t think I had a chance in hell, but then I got thinking. Even making some kind of entry-list might generate some good publicity. With beta starting within the next week or two, I could use a little press.
Yesterday, I wrote about the XRayViewer AIR application.
There’s now a download page with a slightly updated version. Any future releases will be there.
A lot of the time a designer gives me a swf, and I want to know how they structured it. I have two options.
1) Open up the Flash IDE and explore it
2) Add an instance of it to my project, and then use XRay to explore it.
Now, I have a third option. I can open it up in the XRayViewer AIR application I just put together and then use XRay to look through it.
All this little app does is host the XRay connector and let you load a local swf (File->Open). Then it displays the swf with some simple controls to play/stop/advance/back.
But the real power is you can go off to the XRay interface and look through that loaded swf!
