Wednesday, August 23, 2006

CairngormEvent Anti-Pattern!

We all know that the big downside to the Cairngorm framework when building Flex apps is the explosion of classes that result. My big issue is that to add, edit, and delete a widget, you have to create 3 seperate classes named "AddWidgetEvent", "UpdateWidgetEvent", and "DeleteWidgetEvent"....3 classes that are identical EXCEPT for their class name and command name that is passed to the contructor....

package com.widget.control{
import org.nevis.cairngorm.control.CairngormEvent;
import com.widget.control.WidgetController;
import com.widget.vo.WidgetVO;

public class AddWidgetEvent extends CairngormEvent
{
/** Constructor */
public function AddWidgetEvent(widgetVO : WidgetVO){
super(WidgetController.EVENT_ADD_WIDGET);
this.widgetVO = widgetVO ;
}
public var widgetVO : WidgetVO ;
}
}

I don't see the point of creating separate CairngormEvents for each action. Instead, pass in the commandName into the single, resuable event. So the call would look like this:

var addEvent : WidgetEvent = new WidgetEvent(WidgetController.EVENT_ADD_WIDGET, widgetVO);
dispatchEvent(addEvent);

And the CairngormEvent for ALL the widget events can now be a single class like so:
package com.widget.control{
import org.nevis.cairngorm.control.CairngormEvent;
import com.widget.control.WidgetController;
import com.widget.vo.WidgetVO;

public class WidgetEvent extends CairngormEvent
{
/** Constructor */
public function WidgetEvent(commandName : String, widgetVO : WidgetVO){
super(commandName);
this.widgetVO = widgetVO ;
}
public var widgetVO : WidgetVO ;
}
}

Tuesday, July 18, 2006

On a current project I have, I had to build a Microsft Windows style windowing application that allows new TitleWindow compoents to be added and managed on a menu bar...with all the features of minimizing (docking), maximizing, and restoring windows.

I didn't see much in the community that had anything built like this so I dove straight in. It's by no means a polished product, but it works nice. Click the link below to demo it (and view source).

You'll notice that Minimizing the window docks it (I have not added Transitions in yet). Click the "Start" button to open a new window (which is added to the menu bar).

http://www.vandalaysolutions.com/flex/minimize/testMinimizable.html

keywords: Flex 2.0 2 Adobe Panel

Monday, June 12, 2006

I recently had a requirement where HTML was sent over the XMLSocket and I needed to display it within a Flex screen or browser window. The HTML I received from the server was a FULL HTML document. It had embedded 'style' tags 'class' attributes set on most of the components, and your basic 'p' and 'font' tags. Flex 2 (Beta 3) still is not able to handle HTML perfectly.

Christophe had a blog about embedding html in an iFrame, but this didn't help me since iFrames point to static HTML pages.

Here's an example of the working example where in-memory HTML is written to a new browser window:
http://www.vandalaysolutions.com/flex/html/testHTML.html

If you have a AS3 String like so:
var htmlStr : String = " this is my <b>bolded</b> and <i>italic</i> String";

Then by assigning it to the "htmlText" attribute of a mx:Text or mx:RichTextEditor tag, it will diplay correctly.

However, most HTML has far more crap in it, so you're really left with 2 options...parsing the HTML to get rid of all the crap (using RegEx) or pass the HTML off to the browser.

Using RegEx to parse everything was not a good solution for me b/c there are endless possibilites of how the HTML could appear. However, passing the HTML to the browser at first was causing problems.

The HTML that I received from the server had lots of empty lines....which the Javascript method was failing on.

var html : String = "<html>

<title>Website Title</title>

<body>
this is bold
</body>
</html>";

If you pass this to the javascript method via the ExternalInterface, you'll get the following javascript error:
Error: unterminated string literal
Source Code:
try { __flash__toXML(changeDocumentTitle("<html>

As you can see, the javascript can't handle the line break. So if you create a Regular Expression to replace all the line breaks and form feeds with an empty space, it essentially makes the HTML String one long String. Thus it can write the String to the new browser window:

//Flex method: htmlXML is of type: htmlXML : XML
var pattern:RegExp = /\n|\r|\f/gi
var htmlstr : String = htmlXML.toXMLString().replace(pattern, "");
var m:String = ExternalInterface.call("popNewWindow",htmlstr);
trace(m);//m is what the js method returns and Flex receives

//Method we need to add to the wrapper HTML page.
<script> language="JavaScript">
function popNewWindow(a) {
var generator=window.open('','name','height=550,width=700,resizable=yes,scrollbars=yes,status=yes,menubar=yes,toolbar=yes');
generator.document.write(a);
generator.document.close();
return "successful"; //passed back to Flex
}
</script>

The full code can be accessed here:
http://vandalaysolutions.com/flex/html/htmlExampleCode.zip


keywords: Flex Beta 3 adobe macromedia post html dynamic browser iframe mozilla firefox ie internet explorer ff

Thursday, June 01, 2006

"Quik-Schema Data Modeler" is a Flex 2 beta 3 application that provides a visual way to create your database tables and joins. It also provides the ability to generate the SQL code for the tables and columns you create. Due to time constraints of the Flex Derby deadline, the SQL Code generator only supports Oracle, but I plan to add MySQL soon. I'm also going to spend some time to clean up the code so I can make it publicly available. This app is featured on the Adobe labs Flex Derby website. Any suggestions are welcome.


Click to view Quik-Schema Data Modeler