RIA CFML Flex Flash

Fireworks FXG to Flash Builder

Sat, 01 May 2010 09:39:00 -0700

Fooling around with the FXG capabilities to embed optimized graphics that can be scaled I found a few issues, not sure if they're bugs but here's my findings. I'm using Fireworks CS4 and Flash Builder 4. I basically created a rectangle with a border and gradient fill then placed large text with border as well. Not really sure what the FXG limitations are but this didn't work. Without any other changes I exported to FXG. First of all, no matter what I do, if the FXG export includes any images that has to be embeded I get an error right away saying: com.adobe.fxg.FXGException: Error 'Error reading image' occurred while embedding image: '/test.assets/Image_0.png'. Then I have to open the FXG file and delete the foward slash before the path to test.assets. There's a fix I'm sure but I'm just posting this quick fix for now. Secondly, the gradient is broken like a .gif does to .jpg images. Not sure what to do about that for now but I have to flatten the gradient pieces, making the FXG vector scaling useless. Third, the text is improperly placed. Originally I had the text centered but Flash Builder placed it lower right of the rectangle. Finally I had to flatten the text in FW to get it right. I think the text placement is correct but the scale throws it off. *Eventually I had to convert the text into paths, duh vectorized, and it worked. This seems to also fix the gradient issue. Doing this however makes editing the text combersome, having to delete it and replace it then export it again. I am however impressed with the file size, an 84k png exported to FXG is less than 3k. Cheers.

GraniteDS for Flex 3 and Glassfish

Mon, 08 Feb 2010 12:46:00 -0700

Is it just me or is GraniteDS just too complicated? I'm an expert using FMS Flash Media Server and I understand BlazeDS but Granite Data Services is beyond plug-n-play. First, what is the stack and why is it hard to figure out? Tide, EJB, Gravity, Pojo, Seam, Spring, Guice, etc.. I have Glassfish v3 installed on my Windows PC along with MySQL and I want to create a Flex 3 application that uses GraniteDS 2.0.x with consumer and publisher, possibly along with Cairngorm Enterprise and no, I do not want an example, I want steps. I'm using Eclipse with Flex 3 plugin, and I don't want to use Maven or Gas3. 1. How do I get GDS installed on the Glassfish server so that I have a gateway (http://xxxxxx/graniteamf/amf), what files, how and where to put them, etc.. 2. Do I use Gravity? Tide? EJB? etc.. 3. What are all of the configuration pieces and minimum params? I'll take anything I can get to work locally that touches GDS for real time data services with push. I've read everything I can online including the GDS web site and can not find a clear concise simple step by step tutorial or documentation. And if I ever figure it out I will certainly write a tutorial for my blog; sadly it'll be the only clear tutorial available. So if anyone can tell, show, or point me to the right location, thank you. And I have to warn you, for over 2 weeks now I have tried everything I can find with no success. Please help.

Adobe Misses Flex Boat

Tue, 02 Feb 2010 19:51:00 -0700

It's my opinion that Adobe is making a mistake renaming Flex Builder to Flash Builder. Simply put, when it comes to business applications, businesses still don't want to buy a Flash solution. Adobe should catch this wave created by the Flex craze and call it just that, Flex.

OVP Open Video Player for Flex

Sat, 05 Dec 2009 13:11:00 -0700

I'm working on creating a simple video chat component for my application and came across this open source solution from the good folks at OpenVideoPlayer.com. You can download the latest open source flash video player version from SourceForge. Open it up and go to the core\bin and drag the ovp_core.swc to your project's asset folder. Now open project properties within your project and add the swc file through the Flex Build Path, Library path. Now the openvideoplayer package and akamai package will be available for development from the org and com packages. Below is a very basic Hello World I used to make sure it operated correctly as expected. I'm not sure yet if I'll use it for my specific needs which are very basic. This OVP brings a lot of other features I may or may not need, like running ads, which I may need. But for now I'll go through and see if it has the features I require before making a commitment.

Notice that you don't include the usual rtmp:// when connecting. I believe it does some of it's own decision making about connection protocols, meaning you don't have to test connections and try HTTP tunneling etc.. becuase it'll do it for you. Now to put up a simple video UI, connect it to my camera, and then stream it to FMS and back again.

Starter bare-bones AS camera class

Fri, 04 Dec 2009 19:15:00 -0700

Just starting on this class and thought I'd post a good starting point for learning.


package classes{
	import flash.media.*;
	import flash.net.*;
	
	import mx.core.UIComponent;

	public class Chatcam extends UIComponent{
		private var netconnection:NetConnection;
		private var nsPlayer:NetStream; 
		private var video:Video;
		private var vidPlayer:Video; 
		private var camera:Camera; 
		private var microphone:Microphone;
		private var uic:UIComponent;
		
		public function Chatcam(nc:NetConnection,publishedCam:String=""){
			netconnection = nc;
		}
		public function detectCamera():Boolean{
			return Camera.getCamera();
		}
		public function publishCamera(cameraName:String,publishType:String="live"):void {
			camera = Camera.getCamera();
			camera.setQuality(0,100);
			camera.setKeyFrameInterval(15);
			camera.setMode(240,180,15,false);
			//cam.setMotionLevel(35,3000);
		    microphone = Microphone.getMicrophone(); 
		    microphone.setUseEchoSuppression(true);
		    microphone.setSilenceLevel(0,2000); 
		    var ns:NetStream = new NetStream(netconnection); 
		    ns.attachCamera(camera); 
		    ns.attachAudio(microphone); 
		    ns.publish(cameraName,publishType); 
		}
		public function displayPublishingVideo():void {
			video = new Video(); 
		    video.attachCamera(camera); 
		    addChild(video);
		}
		public function displayPlaybackVideo(cameraName:String):void {
			nsPlayer = new NetStream(netconnection); 
		    nsPlayer.play(cameraName); 
		    vidPlayer = new Video(); 
		    vidPlayer.attachNetStream(nsPlayer); 
		    addChild(vidPlayer); 
		}
		
	}
}

Example usage:




	
	
		";
			}
		]]>

Using do as the event name in Coldbox, don't.

Tue, 20 Oct 2009 07:10:00 -0700

It took me a day to figure this out, live and learn right. I used 'do' as the event name in one of my Coldbox applications as opposed to 'event' given as the default. If you're considering what to name your events in Coldbox, don't. Just use the default 'event' name given. I was just trying to be unique but it backfired. The 'do' term is a reserved keyword in Flex, ActionScript actually. The lesson I got from this is to not ever use any keywords from any language for which you may mix. In this case I was using Flash remoting from my Flex application to to fire remote ColdFusion functions from the Coldbox framework remote proxy. Here is the code I was using in my Flex actionscript. Notice the 'event' object param passed to the proxy process function, you can't use 'do', well technically you can but don't because it won't work.


private function authenticateClient():void {
	var cProxy:RemoteObject = getColdBoxProxy();
	cProxy.addEventListener(FaultEvent.FAULT,faultHandler);
	cProxy.process.addEventListener(ResultEvent.RESULT,authenticateHandler);
	cProxy.process({event:"general.doRemoteLogin"});
}
/* UTILITY METHOD TO GET A CBPROXY OBJECT, You can separate all this to a delegate class */
public function getColdBoxProxy():RemoteObject{
    var cProxy:RemoteObject = new RemoteObject("ColdFusion");
    cProxy.source = _model.cbProxyPath;
    cProxy.showBusyCursor = true;
    return cProxy;
}

Flex 3: Who changed the shared object?

Fri, 16 Oct 2009 19:40:00 -0700

So you have a shared object connected and your setting properties to fire off the SyncEvent handler but you want the client to know if it did it or did another client do it. Not confused are you? Just take a look at this code to use on a SyncEvent to tell who changed the shared object's property.


private static const SUCCESS:String = "success";
private static const CHANGE:String = "change";
//SharedObject Sync Handler

private function soSync(e:SyncEvent):void {
	switch(e.changeList[0].code) {
		case SUCCESS:
			trace(e.changeList[0].code + "! I did it.");
		break;
		case CHANGE:
			trace(e.changeList[0].code + "D by someone else.");
		break;
	}
}

This comes from the 'changeList' property of the SyncEvent class in the flash.events package. Additional code values include 'clear', 'reject', and 'delete'. There's also a 'name' param with the property name and an 'oldValue' param with the old value if the code is reject or change.

Flex 3: TextArea Scrolling for Chat

Fri, 09 Oct 2009 04:59:00 -0700

In a chat application you want the message entered to be placed into the textarea component possibly all the way down or up and scrolled to the last entry line. However just placing a new line a text always adds to the textarea but does not scroll automatically. What we want to do is automatically scroll the textarea on input of a new message using the textarea's verticle scroll position. Basically all you have to do is update the component's verticalScrollPosition attribute with the component's maxVerticalScrollPosition value. But there is a problem with the amount it scrolls when subjected to the change, it doesn't scroll all the way. To fix the scroll position so it butts up to the edge or end of the list we'll need to use the callLater() performance method. Follow my example and try it for yourself. I'm just creating a simple button and textarea example. Each time the button is clicked it inserts text into the text area, growing it the more you click it. The click also resets the scroll position to the bottom, just like chat should.




	
	
		Mauris blandit vehicula turpis. " + 
					"Aenean lacus quam, adipiscing in, sodales non, viverra " + 
					"euismod, odio. Donec nec sem commodo massa vestibulum posuere.";
					
			private function init():void {
				textOutput.htmlText = "Welcome
";
			}
			
			private function updateTextArea():void {
				textOutput.htmlText += string;
			}
			
			private function doUpdateTextArea(e:MouseEvent):void {
				updateTextArea();
				callLater(setMaxScroll);
			}
			
			private function setMaxScroll():void {
				textOutput.verticalScrollPosition = textOutput.maxVerticalScrollPosition;
			}
		]]>

Clicking on the button calls the doUpdateTextArea() function concatenating the htmlText value with the string variable causing the scroll bar to grow with content. Then a callLater() method is called with the setMaxScroll() function, setting the verticalScrollPosition to equal the textArea's maxVerticalScrollPosition. The callLater() method simply makes Flex wait to call the function only after it makes sure that everything else has finished. Without doing so the scroll will take place before all the text is updated and will miss a line or two.

Is Flex now Flash? New Flash Builder name stinks.

Wed, 07 Oct 2009 16:26:00 -0700

It sickens my stomach to think what a big mistake this name change is, changing Flex Builder to Flash Builder. I've never seen so many new jobs open up for a single product than I have with Flex. Flex jobs are everywhere and paying good. Flex, Flex, Flex. Not Flash or Flash Applications Developer, just Flex. The main point here not matter what you think of the whole ontology of Adobe products is that FLEX is to the industry a seperate paradigm, even though it's not quite that much of a shift. We (developers) know the underlying truth but it won't hurt if the client doesn't know that the application your proposing and demonstrating is in fact a Flash based application built using the Flex framework. All they need to know is that, sure, it's a Flex application. Technically it's an Internet application that runs in the Flash player developed using a Flex framework MXML markup and ActionScript through a Flash Builder IDE. If you want to specialize in Flex, fine, you're a Flex Developer. However, if you want to create an Internet application that runs in the Flash player developed using the Flash IDE then you are a Flash Developer. I just don't think it's fair that Flex Developers have to work in a product named for a totally seperate skill set. The most difficult thing for myself to understand is whether or not to continue to call myself a Flex Developer or should I say Flash Developer? If I say I'm a Flex Developer in 3 years and there's no "Flex" product, will they know what I'm talking about? Flash Builder is I think going to kill the Flex momentum. In war momentum is everything. This was a bad decision and I don't know if they can ust change their minds now or not but what can it hurt, better than killing it altogether. Adobe needs to get a backbone, admit to the mistake and go back to calling it Flex. It really is a totally different business solution from Flash. Please, I'm trying to save future careers here.

Fireworks PNG imported to Flash shrinks or resized

Sat, 03 Oct 2009 12:49:00 -0700

I was stuck on this one issue for a while looking for a solution or answer on Google. I never found an answer but I finally figured it out myself. If you have any more information to clear this up please share. I'm working on a Flex application that requires image assets for the layout such as the logo, a nice title image, buttons, borders, and so on. I created the assets in Fireworks and saved them as PNG's (PNG32), ready to be imported into the Flash CS3 library. What I'm doing is creating an image assets SWC file I can add to my Flex build library path. In case your new to doing this, it is a way to embed image assets into your Flex project and use them as components. As opposed to using the Embed metatag. Maybe I'll blog about that too, but back to my issue. So after saving my PNG's in Fireworks, I import them to the Flash library, ready to configure for Flex using the Convert Symbol to Flex Component command. However I notice that the images, if you place it on the stage or look at them in the Flex output, are much smaller than my originals back in Fireworks. I couldn't figure out why Flash was resizing or shrinking my images when I imported them. I tried it on jpg's also but they turned out fine, it was just PNG's. For some reason I thought about the image resolution in Fireworks and played around with it. I'm not a designer or a graphics person so sue me for not knowing. What I found was that the resolution I was using, 98, was the problem and resetting it to different sizes had different results. I really does matter to Flash what resolution PNG's are saved in. And what works 100% of the time is to use a resolution of 72. Also, if you use the correct resolution of 72 on your PNG's you'll not need to use the Allow Smoothing option on the bitmap properties. Rule #178: Always use an image resolution of 72 when creating PNG images in Fireworks for Flash authoring.

Flex 3 PopUpWindow custom event

Fri, 02 Oct 2009 09:37:00 -0700

My flex application has settings that can be changed by the user. The settings window is accessible from a menu link control that pops up the settings window. Some of the settings are for changing attributes of other custom components within the app. For this demonstration my application has a custom component for which the user can change background images from the settings popup component. The click event from the popup component will fire an event in the parent which chages another component's background, passing it the image class to use. At first I tried to create a custom event in the popup window but it wasn't working like it does for custom components so I had to search for another solution. Eventually I settled on adding events to the popup window object in the main app mxml. This also covers passing data back to the main app from the popup window as well. No need to create a custom event class. 1. Create a titlewindow component for the settings popup with the required embeded images and a tilelist to display them for selection. Selection will immediatly change the background for another child component, the main content canvas component in the main app mxml. Notice the tilelist has no click event handler, it is added in the main mxml.

2. Create the popup window function in the main mxml with a link to make it pop up.


//the main.as used as the source for a script tag in main.mxml
import flash.events.Event;
import mx.managers.PopUpManager;
import comps.SettingsWindow; //the settings popup window custom component

//create a public SettingsWindow variable

public var settings:SettingsWindow;

[Embed(source="assets/title.png")]
[Bindable]
public var Title:Class;

//function to call for opening the settings window

private function openSettings():void {
	//Open a window with settings forms

	settings = SettingsWindow(PopUpManager.createPopUp(this,SettingsWindow,true));
	PopUpManager.centerPopUp(settings);
	//event handler for popup window close button

	settings.addEventListener("close",removeSettings);
	//adding an event listener to a control from the settings window component

	settings['backgroundsList'].addEventListener("click",setMainBackground);
}

//function to remove popup window on close

private function removeSettings(event:Event):void {
	PopUpManager.removePopUp(settings);
}

3. Create the main.mxml with the popup link button and the main content component for which the background will be changed.

New York and Atlantic City Vacation

Fri, 25 Sep 2009 04:01:00 -0700

The wife and I took a 6 day retreat together, first stopping off in Virginia to hook up with friends then on to Atlantic City for some gambling and NYC for sight seeing. The drive from here just outside Atlanta to their house in VA was about 8 hours, stayed overnight then they drove the 5 hours to AC in New Jersey. We stayed 3 nights at the Harrahs hotel and casino and liked it so much we extended another night. The casinos were our main attraction and we enjoyed the boardwalk just as much as it took 2 days to explore it. It's pretty long and a little busy with people of all walks of life. It was the weekend but even on Sunday it was a feastive atmospher with the Steel Pier, kind of like a mini Coney Island. Much to do and see with lots of little shops. You don't have to walk if you pay for a ride on a two seater stroller pushed around by some guy. The weather was excellent, food good, and beach was littered with shell pieces and dirty sand. The casinos we visited were Harrahs, Bally's, Wild Wild West Casino, Ceasers, and one other I think. Ceaser was the most impressive with it's Roman themed architecture and the WWWC was neat with it's big western thing looking like a California gold rush scene complete with animatronics and sound effects. That's were we tried the ponies for the first time, horse racing. We won some and lost a little. Our friend hit a thousand dollar jackpot on a slot. I played some Blackjack and enjoyed it as usual. Our friends played BJ for the first time too and loved it. We did a lot, too much to fit it all here without rambling on. The New York city excursion was done on a Sunday, arrived by car via the Lincoln tunnel about 2pm and left around 9pm. We parked at a public parking place on 54th street near Times Square for about $20, no problems. The streets were bustling but not jam packed and it was pleasent. Our walk took us to the visitor center were we looked into tours but passed on the $80 per person price on a 2 hour dubble decker bus ride. We followed the advice of a local for food and ate at Johns Pizzeria on Times Square and it was excellent. For $8 each (unlimited rides) we took the A train subway down to ground zero for a look and pictures. Then back uptown to 34th street to visit the Empire State building. The Empire was empressive as the tallest building around without the trade towers. We toured to the 89th'ish floor for $20 each and it took about 30 minutes to get there through the crowd and security. Be prepared to be treated like your at the airport, including metal dectectors. There's a gift shop, the view is spectactular if you can wedge up to the edge, and they take a picture of your group that you can purchase later if you want. Coming out of the Empire State building we visited the shops across the street then headed for the subway again stopping at a hot dog stand vendor for a dog and pretzel. Headed again uptown on the A train to 59th street to get back to the car and stopped for pictures at Studio 54. Getting in and out and around was fine. You can't drive around unless you have all day and there's plenty of parking, for a normal Sunday any ways. I was a little dissapointed with Times Square but it wasn't New Yorks fault. I wanted to stand there and take it in you know, like you see on TV but you couldn't. Some stupid loud Christian music choir concert thing took up the entire square with a thousand other idiots actually listening to it while delusionist tried to pushed pamplets and ideas into your hands and head, a very unpleasant mob. Driving around up passed Virgina and Atlantic City I never seen so many tolls. It cost probably about $15 in tolls to get to NYC and $15 to get back. Then we went back to Atlantic City to gamble on some ponies and walk on the boardwalk one last time before heading back. The trip back was uneventful and I'm glad to be home again, but can't wait to go back too. Next time I think we'll try Vegas as we haven't done that yet. We have pictures I haven't gone through yet and may post them later but you should go yourself if you haven't yet. Now, back to work..

MySQL Find and Replace

Wed, 09 Sep 2009 16:40:00 -0700

I didn't know until now about the replace function in MySQL. Evidently you can do case-sensitive search and replace pretty easily. update table set field = replace(field,'before','after'); I'm not sure about using regex but you can do multiple fields at once. Like this: update tblblogentries set body = replace(body,'ColdFusion','ColdFusion'), title=replace(title,'ColdFusion','ColdFusion') Don't even say it ;p

ColdFusion with Javascript with ColdFusion

Wed, 09 Sep 2009 06:30:00 -0700

I had a situation where I wanted to pass a query param to a ColdFusion page that would use it to find a record in a cfquery then pass that record to a Javascript function used to display that record in that ColdFusion page. Thats a lot to say all at once. Let me see if I can explain it better. My ColdFusion page displays a list of private messages for a user in their user account. This list is at the top of the page and shows date, time, sender, and subject. When the user clicks on the subject of any message in the list, Javascript Ajax is used to fetch the message details from a component and display the message fully below the list, kind of like an email program. Also when the page loads, as a default the first message in the list is automatically passed to that Javascript Ajax and displayed. That's easy enough so far. It gets more complicated when you allow that same page to be passed a URL query param equalling a message id you want specifically to be shown first, instead of just the first row in the query. It's hard to explain but try to follow me. It's not my intention to explain everything like a tutorial so here's the code I implimented to solve my issue. The page would be called like so, http://www.site.com/showPrivateMessages.cfm?privatemessageid=2435. But remember that the page can be called without the URL param, in which case it would just use the first record in the query of private messages. Including the param would tell the page to display that particular message's details first. So on the called page I get my private messages query: privateMessagesQuery = event.getValue('privateMessagesQuery'); (I'm using the Coldbox framework) Set up the param to use with a default of 0: privatemessageid = event.getValue("privatemessageid","0"); Then I need to define which row in the record matches the one I want, but I must set this up first: rowtouse = 0; Now I need to recurse through the query in a loop to set the rowtouse variable equal to the row found for the id:

Ad now in my Javascript I want to use that row number to set some variables to use in a function call that displays the message details for the message who's id matches that passed in the URL param. I'm not showing the function that does the actual displaying of details, just the function name for time and space's sake (I'm busy).

<$cript>
window.onLoad = loadFirstRequestedMsg(#rowtouse#);
function loadFirstRequestedMsg(rowtouse){
	if(rowtouse > 0){
		xPrivatemessageid = "#privateMessagesQuery.privatemessageid[rowtouse]#";
		xRead = "#privateMessagesQuery.readed[rowtouse]#";
		xSubject = "#privateMessagesQuery.subject[rowtouse]#";
		xFrom = "#privateMessagesQuery.fromUserName[rowtouse]#";
		xMessage = "#privateMessagesQuery.message[rowtouse]#";
		showMessageDetails(xPrivatemessageid,xRead,xSubject,xFrom,xMessage);
	}
}
function showMessageDetails(messageid,read,subject,from,message){
....
}

The showMessageDetails just sets values in span tags, DHTML Ajax stuff. Any ways, you can see here how I'm using ColdFusion inside of Javascript to use back in ColdFusion, or HTML to be technically correct.

Trigger Javascript after loading ColdFusion page

Wed, 09 Sep 2009 05:04:00 -0700

Once apon a time, and still only if I must, I used the 's onLoad attribute to call a Javascript function after a page loaded. I no longer follow that pattern opting instead to use a window DOM method, window.onload, also called a global event handler. Here is an example of calling a Javascript function on page load in the script block.


<$cript language="javascript">

It sets the cursor focus to a selected field in my form on page load. And I found this cool resource while looking around, it's a book: Structure and Interpretation of Computer Programs or SICP. What does that have to do with this you ask? Well if you need something like the following example of a complexed javascript onload, it might come in handy.


<$cript language="javascript">