RobotLegs makes me smile every time

Hi All,

I have been using the RobotLegs MVC framework for flex for about a month and a half now, I have been using MATE before that and PureMVC before that, I have never got so much out of an MVC framework, it is so flexible, so customizable (the code is on git) and helps me with my tasks all of the time.

So, why have I posted it on the blog and not just tweeted about it? Well, I have tweeted about it for quite a bit, but the real reason for posting it on the blog is that I have made a new category on the blog called RobotLegs.

I plan on posting some example code for it and being involved in the community.

You can keep yourself updated through my RSS FEED.

Thanks!

Flash media server security hardening

Today, while browsing my feed in google reader, I found something very interesting.
This link is a hardening guide for flash media server.

For quite some time now I have been developing and consulting on flash media server advanced topics. I have been teaching students and consulting companies on issues regarding this great peace of software.

Adobe seemed very silent about this product for some time, not publishing any new materials what so ever, so it was very nice to see this link. I read it and it has some good observations and very well written instructions on how to harden your server.

I highly recommend you to open the link and read it.

Set button width to text width in flex

Well, I have been working on a very interesting project recently, really stretching flex to the limits :-)
I needed to set buttons, linkButtons, Labels and more components width to the width of the text inside them.
Usually, flex does it for you, but the width was hardcoded in compile time and I needed to change the text and the width in runtime and resize the component according to that.

I have written a nifty helper function for that.

Here it is:

[as3]
/**
* This function will accept the text and the UI component and set the width to the width of the text
* @param text the text or label of the component
* @param container the container casted to a UIComponent
*
*/
public static function measureTextWidthAndResizeComponent(text:String, container:UIComponent):void
{
var _measuredWidth:Number = 0;
var _paddingLeft:uint = 0;
var _paddingRight:uint = 0;
var _horizontalGap:uint = 0;
var _addedToWidth:int;

if(text == null)
return;

if(text.length <= 1)
return;

_paddingLeft = container.getStyle("paddingLeft");
_paddingRight = container.getStyle("paddingRight");
_horizontalGap = container.getStyle("horizontalGap");

_addedToWidth = int(_horizontalGap + _paddingLeft + _paddingRight);

var lineMetrics:TextLineMetrics = container.measureText(text);

_measuredWidth = (lineMetrics.width + _addedToWidth);
container.width = _measuredWidth;
}
[/as3]

That’s it, enjoy!

Empty dialogs in flex builder 3 + Flash builder 4

This week I needed to work with My PC on a flex project. I usually stay away of the PC with flex projects, I’m used to working on the mac with these project, but I needed to work on the PC.

While trying to configure the project in flex builder 3 (and with 4 as well), I stumbled upon a weird bug that made me scratch my head for a while.  The bug was that all of the dialogs appeared empty, no configuration, almost no buttons.

Here’s a screenshot of the problem:

Now, I remembered a teammate I had a while back that had the same problem and it appeared to be a WACOM with a windows 7 driver that caused the problem, so I started disabling devices one after the other.

The problem was a logitech mouse software I have installed on the pc. Once I quited this application everything went back to normal.

Here’s the icon on the taskbar (not hard to trace).

Hope this post helps you and you won’t scratch your had for hours like I did.

Access flex application through the SWFLoader component

As you know, I’m a web developer and I love learning new stuff and blogging about it here. My blog post for today is about access flex application through the SWFLoader component.

Often you load flex applications through another flex application using the SWFLoader component.
It’s not that common knowledge that you can actually access all of that application exactly the same way you are accessing your own application.

What does that mean?

It means you can access that application components, get the children and get a good knowledge on how this application is build. You can also access it’s component and dispatch events.

OK, how?

Let’s start doing it. We will create a simple application, put a SWFLoader on stage and create a listener for the complete event.
Lets’s also add 2 global variables – one for SystemManager, another for IUIComponent (I will explain later).

This is what the application code should look like:

[actionscript3]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
import mx.core.IUIComponent;
import mx.managers.SystemManager;

private var _systemManager:SystemManager;
private var _innerApplication:IUIComponent;

protected function loader_completeHandler(event:Event):void
{
_systemManager = SystemManager(loader.content);
}
]]>
</mx:Script>

<mx:SWFLoader id="loader" source="VistaRemix.swf" width="800" height="600" autoLoad="true" complete="loader_completeHandler(event)"/>
</mx:Application>
[/actionscript3]

As you can probably see, we are assigning a value to _systemManager when the loader (SWFLoader) finished loading. This enables us to work with that application system Manager and access properties.

Continuing…

We will add 2 Event listeners inside that function:

[actionscript3]
_systemManager.addEventListener(FlexEvent.APPLICATION_COMPLETE, sysManage_ApplicationComplete_Handler);
_systemManager.addEventListener(FlexEvent.UPDATE_COMPLETE, sysManage_UpdateComplete_Handler);
[/actionscript3]

Now that we have those in place, let’s add the closure functions:

[actionscript3]
private function sysManage_UpdateComplete_Handler(event:FlexEvent):void
{
_innerApplication = _systemManager.application;
}

private function sysManage_ApplicationComplete_Handler(event:FlexEvent):void
{
_innerApplication = _systemManager.application;
}
[/actionscript3]

Great! Now _innerApplication is actually an application. You can get it’s children, get properties, get components, dispatch events and more.

This comes in very handy when you want control over an application and you don’t have the source. You can create a clone of that application and create your own GUI for it. It’s an amazing feature!

This here is a screenshot of debugging mode. Check out the debugger watch section, these are all methods you can use on that variable, you can of course use much more.

Debug view of the application in Flash builder 4

Good luck!

Dynamic streaming (Adaptive bitrate) using Flash media Server

Video and the web are long time friends already. You see lots of websites with some sot of player for video content.  Also, you can see media companies and television channels serving video over the wire to the end users.

Video can be downloaded (progressive download) to the client like YouTube or can be streamed to him.

I won’t discuss the pro’s & con’s of streaming and progressive. We’ll only be discussing streaming in this post.

So, What is the post worthy problem we have when streaming video to the client?

Continue reading and find out.
Continue reading Dynamic streaming (Adaptive bitrate) using Flash media Server

Flash media server statistics using sawMill

I have been using Flash Media Server for a while now, at least 3 years, I implemented solutions on top of this amazing products for clients in wide ranges like Start-Up companies, E-Learning systems and more.

Flash media server has some disadvantages, one of those is definitely the lack of normal statistics. The terminal will give you the real time data but if you want to drill down into last month and 3 month ago or more, you won’t be able to get any data in a comfortable and nice view.
Continue reading Flash media server statistics using sawMill

RTMP being blocked by firewalls – Flash media server

If you ever worked with Flash media server or any other media server for that matter, you probably know they are not working with the regular Internet protocol which is HTTP. All of the media servers (almost all at least) are working on top of a protocol called RTMP.

Now, if you have users working behind a firewall, they probably can’t get passed it’s restrictions and they will (in most cases) be blocked and unable to see your application / video.

If you are working on a server like WebOrb (I’m working with it) then the data will also be blocked, and that is a bug issue.

Today we’re going to solve the problem together. Here’s a way to solve it.
Continue reading RTMP being blocked by firewalls – Flash media server

xml.load problem with IE6

FlashHey all,

IE6 has been for a very long time an enemy for web developers because of the way it renders HTML and CSS.

Fortunately, Flash has always been a rescue for me, because I develop RIA as well as HTML websites I have always enjoyed the way flash is always the same with IE6 as with other browsers.

This has been the case until the first and persistent bug. Continue reading xml.load problem with IE6

Phase 1 – first consulting meeting.

Hey all,

This is the second post in the upcoming long posts series.
I thought it would be a great idea to post about my experiences as an independent consultant for companies.
The posts will not be about personal experiences but instead about the knowledge I’m getting and passing thoughts. Whether its in the shape of a meeting, researching or sample applications

If you want to learn more about the series, please head here and read.

 

Okay, so this is the post about the first meeting.

BXP28324 Usually when you come to a consulting meeting you know where you are going. You know what the client wants and so you can better prepare yourself for it.
However, this meeting was different, the client had many questions, he wasn’t sure what he wanted and how he wanted to do it.
Because the client is a start-up company that deals with a lot of money and has somewhere between 20-30K users, there is no rush in their behalf (unbelievable I know), they want it done in the best possible way.

So, I had no preparations as to what they want. I knew the general idea though. They have an Html client and they want to transfer to flex. That’s pretty much all I knew.

 

 

When I got there, we started talking.
The first question that popped into the room was what communication method they should use. Should they use AMF/xmlSocket/Http service or what….

So, lets break it down.
Each method has pro’s and con’s.
Flex has the advantage of not limiting you into a single method, you can use a couple or more methods of server side communication in a single flex application.
You will need a very good team of developers and a superman project manager, but it is totally not an impossible mission, it can and it has been done before.

So, lets dig further in…
Before stepping into the pro’s and con’s lets handle what they want to achieve
(again, without compromising any data or even the company name).

They have users, the users are divided into groups, each group can contain X amount of users (x is a variable not a constant :-))
Above the group is an organization, an organization can have X amount of groups.

The data in the group is personal and cannot be compromised to other groups or users.
the same goes with users of course. No data should leak between users, groups or organizations.

The calculated data is group specific. Meaning each group has their financial data,
the calculations are based on their data and their data only.

Calculations, ok we are getting there…
Question by me: Does the user/Group/Organization need to do an action in order for the data to be calculated?
Answer: No. The calculations are done periodically (1 time per second in average) and need to be sent to the client without him even knowing about it, the data should be updated on his screen.

scratching_head Okay, that sounds about right and a well known scenario. you guys using webforms or any other request/response are probably scratching your head right now… Don’t worry, it’s quite simple actually.

Lets move forward please, lunch is almost here… :-)

Question: What about other data on the screen, any other data needs this amount of crazy updating or should everything else be pretty standard?
Answer: The rest of the screen, containing somewhere between 10-20 parts should not be updated in these time periods. The other data is sometimes the result of a user action or a group action.

Question: Should an action from a group be alerted to all the users inside it?
Answer: Yes. Sometimes the group did something that caused the users to loose/gain money so they should be alerted about it.

Lunch :-)

Client: The final thing we want to accomplish is the ability to reach every user/group/organization separately and send them admin messages about everything from a version update to a hosting change.

Okay.

Great, I have my data and asked my questions (I gave you a brief version of course).
Now lets start talking.

1st – 1s calculated data.
Method of implementation.

Server – 1 Calculating server based on SQL server 2005/2008 (we will not get into the configuration) a caching solution (sometimes the data is the same as before, why should the server sweat if the data has not changed).
2 – Messaging server connecting to that Calculation server.
3 – Windows service using an XMLsocket connection based on clientIP, groupID, organizationID, when the data for an entity of those that has changed you simply push the data to them. If the data has not changed you send out nothing. The GUI at the client will not change and the NET traffic will not overflow.

This way you keep it simple. You calculate the data on server 1, you send the data using server 2, connection to server 1 using a windows service which you can monitor performance.

Pro’s: Very rapid communication, no overflowing the servers with requests, if the data has not changed nothing happens.
Just for a reference, the client implemented the same feature in their current application using a 1 second JavaScript timer and a service.

Can you guess what happened? (Hint: Guess who crashed first: the server or the client)

Con’s: Scale up in this solution is not always easy and it isn’t done just in software. You need some hardware changing too. Though in the beasts they have over there, they have time to worry about that.

2nd communication – Client or group does something and data should change in the GUI.
For this solution I think the webOrb.net would be perfect, you get out of the box push in HTTP while the data changed and you don’t have to write any custom code for it.

The WebOrb.net is a solution that lets you use AMF3 or AMF0 or RTMP communication with a Flex client. It is very robust, easily configured and even has a built in monitoring solution.

Pro’s: The weborb solution is hosted on top of IIS6/7 so you can configure it with the flexibility of your choice.
you can write custom code, use the classes you already have in an asp.net application or generate a new application from scratch using the code generation solution.
Scale up is very easy, using a load balancer and 2 servers you multiply the users that can use the system at once.
Clouding: you can pass this service into the cloud at AmazonEc2 or at any other clouding service and get out of the box scale up when needed.

Con’s: The push is not always in a heart beat, mainly when you are talking about 20-30K users.
As always in a 3rd party solution, you can’t actually do ANYTHING you want.

3rd Method: Admin Messages
Since the messages are not meant to be urgent, (urgent messaging will be sent on the socket already connected) the most efficient thing to do is by using FileSystem on the server for every group, user, organization and have the flex client check it once every 24 hours using an http request to the file it is using.
That way, the solution is not using any database in real time and will not slow down the db which is well needed on other crucial actions.

That’s it…
That wasn’t all of the meeting, but that’s enough to chew on for this post. On the next post I will continue with the questions and answers that came up on the same meeting at this client.

Some of the subjects that we will discuss on the next post:
1. Handling disconnect
2. Multilanguage
3. Skins
4. Group work
5. SVN
6. Flex builder versions
7. Graphic’s team brief
8. Graphic artist–developer–project manager. Why? How? When? Who???