Here’s how you can replicate. Create a new Flex project. Edit the index.template.html file and add in the wmode param, setting it to ‘transparent’. Debug your Flex app in Chrome. Resize the window back and forth a couple of times. Wait a second. Flash crashes in Chrome.

Weird, and it took a long time to track down.

I’ve been playing around with Sass and took a look at Less as well. I’m hoping to do a deeper dive into these awesome ways to do CSS, but here’s what you should know for starters. Sass files are programmatic CSS files that get compiled into standard CSS files. You can use Compass to compile them and add in a ton of functionality, most notably cross-browser support for things like web fonts and rounded corners. It reduces the amount of CSS you have to write and makes your CSS more maintainable to boot. Less is similar, but is usually done at request time through Javascript. If you want to compare Sass and Less, this comparison by Jeremy Hixon is a good starting point.

If you want to get started with Sass, the tutorial for Sass is a great place. They give a great way to get ramped up on the subject. If you’re coding in Dreamweaver, Sass needs an little extra help getting started. You need to add in the file type to Dreamweaver’s recognized file types to get it to even open the files easily. To get code-hinting for CSS, you need to add the scss file type to DW’s CSS definition. This Adobe tech note on file associations gives the individual steps for  doing it.

If instead you’re coding in Aptana, setting up Sass associations is a bit easier. These instructions give you the basics. Aptana recognizes the SCSS file type, but in order to get code-hinting, you need to add the CSS editor to the SCSS file type, then set that editor as the default.

Then to get going with Compass, you can check out the Compass site. They have instructions on how to install Compass, though they are not particularly clear. You need to understand the command line, though there are some GUI apps out there for Compass listed on the install page. Once you get comfy with Compass, you may want to configure it to get it to use your site structure instead of the assumed structure Compass wants you to use. The search on the site is pretty ineffectual, so make sure you check out this configuration documentation.

Hopefully I’ll be back with a more thorough rundown of Sass and Compass, but for the mean time, check out these awesome bits of tech!

Xavi Beumala has the answer. In his post, he tells about how you can enable RTE dialogs in installed AIR apps. It’s super simple. You just go to the application’s install directory, then go into the META-INF/AIR directory and create a directory named debug there. You don’t have to put anything into it. You just make the directory and you’ll get RTE dialogs in your AIR app. Pretty useful.

I should note that Xavi has quite a few other suggestions in his post that may be more useful for debugging, but this was a quick win.

CKEditor is a Javascript-based rich text editor that is super easy to implement and has an amazing breadth of functionality. All it requires is an include of the JS file and giving a text area tag a particular class. Boom. That’s it.

Of course, there’s a lot of configuring you can do. You can configure the different toolbars used in the editor, removing or adding functionality. You can specify stylesheets that get incorporated with the editor. There’s a whole host of options that I didn’t explore, but for even for the basics, it is tremendous.

One thing that impressed me quite a bit was how it handles images. People can include images that are already on the web in a handy dialog box. If you configure CKEditor correctly, you can even put in the means for users to upload images. You specify a page that handles image uploads, and the dialog automatically populates the URL field with the URL your page returns.

That subject, however, brings up one of the sore points with CKEditor. The documentation is pretty good at telling you what code you need to put in for configuration, but not where pieces of code need to go. And in the case of image uploading, it took me a long time to find the information on what the image upload page needed to do in order to get the image URL back to the upload dialog.

So here are the two things I learned that I wanted to pass on:

1. You can configure all the CKEditor instances in your site from one config file. However, if you want to configure one instance of the editor differently, you can put in configuration code into the page to override the global config. The trick is that you need to put in that configuration code AFTER the text area that will be used for CKEditor. Otherwise it gets ignored.
    <textarea id="myHTML" class="ckeditor" name="myHTML"> #html# </textarea>
<script type="text/javascript"> // <![CDATA[
CKEDITOR.replace( 'myHTML', { toolbar : 'Basic' });
// ]]> </script>

2. When you create the form page that uploads the image, what it needs to return is this:
    window.parent.CKEDITOR.tools.callFunction( 'CKEditorFuncNum', 'imageURL', 'myMessage');
The imageURL and myMessage are replaced with the image’s URL and any message you want displayed. The message parameter is optional. The CKEditorFuncNum is replaced with a parameter of the same name that is also passed in with the form.

Other than that, I have few complaints. This is an incredible piece of code and functionality that is given away for free. I have barely even touched on its awesomeness. So if you need a rich text editor, give CKEditor a try, and you’ll be wowed.

One other thing I found was that on Windows 7, in order to add the cert to the keystore, you have to run CMD as an Administrator. Otherwise the keytool will say it added the key, but then could not find the keystore because access was denied. Once I ran CMD as an admin, all was well with the world. I restarted ColdFusion and was able to connect using CFLDAP. I don’t think of LDAP as exciting, but once I got this working, I wanted to run a victory lap around our office.

I tried a variety of things involving invalidateSize and invalidateDisplayList to kick the VGroup in the head and get it to realize its children were a different height. Nothing worked. The final thing I did though, did work. Once the children were added to the VGroup, I added an event listener for FlexEvent.UPDATE_COMPLETE. In the handler for that, I immediately removed the listener and then looped through the children and set their height explicitly to their contentHeight. The contentHeight was unavailable before the display list had been updated, but afterwards, it had the correct height, while the explicit height was still wrong.

Here’s what I ended up with in the handler of my UPDATE_COMPLETE event:

private function _onUpdateComplete( event:FlexEvent ):void
{
	formContainer_vg.removeEventListener( FlexEvent.UPDATE_COMPLETE, _onUpdateComplete );
	var numChildElements:int = formContainer_vg.numElements;
	for( var i:int = 0; i < numChildElements; i++ )
	{
		var child:Group = Group( formContainer_vg.getElementAt( i ) );
		child.height = child.contentHeight;
	}
}

I work with the REOPS framework, so I went ahead and integrated it in. I have the code below, but first a word on what I had to do. There are some limitations to how REOPS currently can take in Plugin metadata, so I ended up doing a little trickery in the config XML for the plugin:

<plugin path="assets/plugins/AdvertisementPlugin.swf">
	<metaData namespace="preroll">
		<value key="preroll" type="class">
			<url><![CDATA[http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv]]></url>
		</value>
	</metaData>
	<metaData namespace="midroll">
		<value key="midroll" type="class">
			<url><![CDATA[http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv]]></url>
		</value>
	</metaData>
	<metaData namespace="midrollTime">
		<value key="10">10</value>
	</metaData>
</plugin>

There are three types of metadata for this plug-in. The first are the components, the MediaContainer and the MediaPlayer. Those are handled in the application class below. In the config, I’m handling the other two types: files and times. The files are fairly straightforward, but due to REOPS handling of plug-in metadata, I had to cast them as OSMF URLs using the org.osmf.utils.URL class. I can then pull the URL out in the application class. The times I didn’t want to handle as URLs, so I fudged it a bit and just made the keys the number of seconds to wait before displaying a midroll ad.

The reason for this is that the Advertisement Plugin is expecting its metadata as a simple string or number, but REOPS casts metadata as Metadata objects. So in the app file, I extracted the data from the plugin’s metadata and reapplied it in the format it was expecting. In addition to that, the plugin metadata needs to hold references to the MediaPlayer and MediaContainer. Since REOPS dynamically creates its media elements and plugins, I had to hijack that process a little and pass in the two components before the plugin was loaded. I also had to change the start up order for REOPS around a bit, because it loads its plugins before it creates the MediaPlayer and MediaContainer it uses. I called the initMediaPlayer method early and blocked later calls to it. Unfortunately this breaks the authorized domain functionality in REOPS, but for this proof of concept I didn’t feel the need to circumvent that.

Once the plug-in was integrated, it simply was a matter of knowing when to hide the controls for the player. The plugin works by running two media players, and swapping the media element in the media container for the ad and then swapping back. By listening for the LayoutTargetEvent.ADD_CHILD_AT event, I could check to see if the media element that was added was my main media element. If it was, I would make the skin visible. If it wasn’t, I would make the skin invisible. That seemed to do the trick. I’m rather pleased to find this plugin, as it does something many people want and makes an otherwise difficult task much easier.

Here’s my application class:

package
{
	import com.realeyes.osmfplayer.model.Plugin;
	import flash.display.Sprite;
	import org.osmf.layout.LayoutTargetEvent;
	import org.osmf.layout.MediaElementLayoutTarget;
	import org.osmf.metadata.Metadata;
	import org.osmf.utils.URL;
 
	public class REOPSAdPluginTest extends REOPS
	{
		public function REOPSAdPluginTest()
		{
			super();
		}
		override protected function _loadPluginsFromConfig():void
		{
			//Call this early so it's available for the plugin
			super._initMediaPlayer();
			_mediaPlayerShell.addEventListener( LayoutTargetEvent.ADD_CHILD_AT, _onContainerAddChild );
			for each( var plugin:Plugin in _playerConfig.plugins )
			{
				if( plugin.path && plugin.path.indexOf( "AdvertisementPlugin" ) >= 0 )
				{
					//Extract strings from normal metadata
					var namespaces:Vector.<String> = plugin.resource.metadataNamespaceURLs;
					for each( var name:String in namespaces )
					{
						var meta:Metadata = Metadata( plugin.resource.getMetadataValue( name ) );
						var key:String = meta.keys[0];
						if( isNaN( Number( key ) ) )
						{
							var value:URL = URL( meta.getValue( key ) );
							plugin.resource.addMetadataValue( key, value.rawUrl );
						}
						else
						{
							plugin.resource.addMetadataValue( name, Number( key ) );
						}
					}
					plugin.resource.addMetadataValue( "MediaPlayer", _mediaPlayerCore );
					plugin.resource.addMetadataValue( "MediaContainer", _mediaPlayerShell );
				}
				_pluginLoader.addPlugin( plugin );
			}
		}
		override protected function _initMediaPlayer():void
		{
			//block the default time this gets called
		}
		private function _onContainerAddChild( event:LayoutTargetEvent ):void
		{
			_skin.visible = ( MediaElementLayoutTarget( event.layoutTarget ).mediaElement == _mediaElement );
		}
	}
}

So I switched my URLLoader out for an HTTPService and looked at changing the request headers around. All to no avail. I couldn’t get the request to show up the same as from an HTML form. After pounding my head against the problem for a long while, I went home.

The next morning I separated out my code into a separate project and ran it. Shazam! The missing parameters object was there. I checked the response and it was a success. I went back to my identical code in the project and ran it. The parameters object was gone … but the response was success. What?! It looks like I had gotten the service to work long before, but because I was seeing the different response, I assumed it was still failing as it had before. Firebug was giving me different information for the same call made from different projects. Firebug! I trusted you!

I guess the lesson is: Always check the response.

After struggling with trying to get the y after all the layout updating had completed, I was stymied and started combing through the UIComponent methods looking for something to give me coordinates in a relative layout. Finally I gave getBounds a try. This did the trick. The rectangle returned by the method had the real y of the component. After a little localToGlobal action, I was able to get the needed y and position my little tool tip over the rest of the form.

I’m also stoked to see that if you get an app approved for the Blackberry App Store before the Playbook launches, you’ll get a free Playbook. Now that’s a good incentive for me to get going, especially since Blackberry is currently waiving the fee for getting set up as an App Store developer. The device looks pretty sweet and sports a dual-core processor. It also weighs in under a pound.

I’ve gotten a start with the development for my app idea. I definitely recommend listening to the webcast series on developing for the Blackberry Tablet OS in order to get started. They have some good advice on setting up the dev environment. They also cover some basic development stuff. If you’re already familiar with AIR dev, you might want to also watch the MAX session on Blackberry AIR dev which focuses in on the Blackberry specifics. Another good starting point is to get the SDK and Playbook simulator.

My app I have planned is niche enough that I’m not worried about anyone duplicating it, so I can safely recommend to all you developers to get developing and get your free Playbooks. I will note that I haven’t had the easiest time getting the dev set up. I can’t get debug to work on the simulator, but I can run my app on it. Thankfully the Blackberry developer community seems to be quite responsive in the forums for Blackberry AIR dev.

Now get coding!