DanDev.comDaniel's Dev Blog..ish

If you are on a host that has short_open_tag off you won’t be able to use the latest Gallery 3 version(as of this writing). The developers have made this a requirement to allow template development to be a little simpler:

Why do you use PHP’s short open tags?

Short open tags are considered harmful by some, but they result in much tighter syntax in our PHP based templates. Here are some possible ways to print ‘Hello World’ in different template systems:

   PHP long tags: <?php echo $Hello_World ?>
  php short tags: <?= $Hello_World ?>
             ASP: {% $Hello_World %}
          Django: {{Hello_World}}
          Smarty: {Hello_World}

As you can see, PHP with long tags is the noisiest. The main reason for deprecating short tags is because the <? token conflicts with XML tags. In our case, this is highly unlikely to ever be a problem, and even if it is it’s a vanishingly small edge case. We’re optimizing for a good developer experience here by requiring them to type less to do more. If at some point PHP short tags goes away, we can pretty easily convert the entire app over to using long tags.

Short open tags will still be enabled by default in all future versions of PHP. While there was initially an idea to change this in PHP 6, plans have changed and short open tags are here to stay.

Source: http://codex.gallery2.org/Gallery3:FAQ#Why_do_you_use_PHP.27s_short_open_tags.3F

So, if your host doesn’t have short tags on, or if you just don’t like to use code that requires them in general you can try out this fork I made of Gallery v3 on github:

Repo | Download Zip

In the Adobe AIR application descriptor file there are many options you can set. One of which is the tag(or in Flex SDK v4.1 and below), which lets you differentiate your release as well as utilize the Adobe AIR updater library.

It can be useful to display your version number inside of your app to inform the user as well as help with bug reports among other reasons. In order to prevent you from having to update the version number in multiple places you can use AS3 to grab it from the application descriptor and update your text for your app on the fly, as it loads. Here is an example of how to do that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   creationComplete="windowedapplication1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
			{
				var appXML:XML = flash.desktop.NativeApplication.nativeApplication.applicationDescriptor;
				var ns:Namespace = appXML.namespace();
				versionLabel.text = 'v' + appXML.ns::versionNumber;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Label id="versionLabel" />
 
</s:WindowedApplication>

Flex Builder Project

You may have noticed MouseEvent.Click is not an event available to be set on the BitmapImage Spark primitive(in the current Flex SDK). But, there is a simple workaround for this. All you have to do is place it inside of a Graphic primitive wrapper. In MXML it would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
 
			protected function graphic1_clickHandler(event:MouseEvent):void
			{
				Alert.show('Nope!', 'Click Event');
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:HGroup id="container">
		<s:Graphic click="graphic1_clickHandler(event)">
			<s:BitmapImage source="path/to/image.jpg"
						   smooth="true"
						   smoothingQuality="high" />
		</s:Graphic>
	</s:HGroup>
 
</s:Application>

Flex Builder Project

In AS3 it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="application1_creationCompleteHandler(event)">
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
 
			import spark.primitives.BitmapImage;
			import spark.primitives.Graphic;
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				var myBI:BitmapImage = new BitmapImage();
				myBI.source = 'path/to/image.jpg';
				myBI.smooth = true;
				myBI.smoothingQuality = 'high';
 
				var myG:Graphic = new Graphic();
				myG.addElement(myBI);
				myG.addEventListener(MouseEvent.CLICK, graphic1_clickHandler);
 
				container.addElement(myG);
			}
 
 
			protected function graphic1_clickHandler(event:MouseEvent):void
			{
				Alert.show('Nope!', 'Click Event');
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:HGroup id="container">
	</s:HGroup>
 
</s:Application>

Flex Builder Project

If you have run across this error recently: VerifyError: Error #1014: Class IIMEClient could not be found.

You may be wondering what it means, and more importantly how to fix it. What appears to be the sole cause of this error is your versions not matching up between your Flex/AIR SDK and the AIR application descriptor file. This can happen after you update/reinstall Flash Builder, or the SDK folder manually.

The fix is pretty easy: Just open your AIR descriptor file(generally the only XML file in the project src folder) and change the xmlns to the current version of the SDK you are using(1.5.3 => 2.0 for instance). See screenshot below for an example(warning: it’s big):

I ran across an interesting case today while looking into an issue for someone else related to capturing the double-click event on the divider for a HDividedBox. It’s a little tricky to get the event to be captured by Flex. A quick search of the interwebs turned up nothing but people with the same issue. There is even an open bug in the Adobe Flex bug tracker(you have to login) that seems to be the exact issue, but there is no resolution named. Through some quick experimentation I figured out you can get it to work like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    width="600" height="588"
    applicationComplete="start()">
    <mx:HDividedBox id="divBox"
    	height="100%" width="99%"
    	liveDragging="true"
    	doubleClickEnabled="true">
          <mx:Canvas width="50%">
          		<mx:Text text="Some example text" />
          </mx:Canvas>
          <mx:Canvas width="50%">
          		<mx:Text text="Some example text" />
	      </mx:Canvas>
     </mx:HDividedBox>
     <mx:Script>
          <![CDATA[
               private function start():void {
                    divBox.getDividerAt(0).addEventListener(MouseEvent.DOUBLE_CLICK, handleDoubleClick);
               }
 
               private function handleDoubleClick(e:MouseEvent):void {
                    Alert.show('Event captured!');
               }
          ]]>
     </mx:Script>
</mx:Application>

The specific resolution was to enable liveDragging and add the event to the divider itself(most people try to set it on the doubleClick property of the DividerBox).

Hopefully this post will be helpful to some people out there with the same issue!

So, I took the GAIQ certification test the other day and passed. It was a little harder than I expected, but not too crazy. I definitely recommend you watch all of the Google Conversion University videos about GA and be ready to look things up if you aren’t sure. A lot of the questions were common sense, but there were a few tricky ones that required some advanced knowledge.

Every once in a while you might run across a case where you need to access a property or method from the parent application, and you don’t have the ability to pass the value you need to the class. Or, for example, you’re debugging and you don’t want to write a bunch of code that you’ll have to remove later just to test the value of a variable.

So, with that said the process is fairly simple. The following is a hypothetical example of a class you have imported into your application:

package com.example.scope
{
    private var myVar:String = "This is NOT the value we're trying to get";
 
    public class scopeExample
    {
        public function scopeExample()
        {
            // Flex 4
            import mx.core.FlexGlobals; // make "FlexGlobals" available in the current scope
            trace(FlexGlobals.topLevelApplication.myVar); // outputs the value of myVar in the main application
 
            // Flex 3
            import mx.core.Application; // make "Application" available in the current scope
            trace(Application.application.myVar); // outputs the value of myVar in the main application
        }
    }
}

You could also use:

trace(parentDocument.myVar); // if the component is a child of the main application

I ran across a post on Holly Schinsky’s blog the other day that had good descriptions of the various scope keywords, and a few tips. All of which is good knowledge to possess, so check it out.

If you ever have the urge to capture a specific key pressed in Flex or AS3 in general, there is an excellent list of the keycodes, and costants you can use to represent them in your code here: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/ui/Keyboard.html

You can use them statically(without instantiating an object) like so:

trace(Keyboard.TAB); // 9

While wandering through the ginormous forest that is Flex I’ve noticed how the filesize grows exponentially when you start to add a lot of content, or some external libraries. This is annoying, especially when the app I’m making is supposed to be used by a large group of people at the company I work for. So, I went looking for ways to slim it down, and I have found a couple of gems that work really well. First of all there is an excellent video posted by Serge Jespers of the Adobe Platform Evangelism – European team that gives some detailed tips with an example of how to make your application smaller with Flex Builder.

Namely:

1. Use “Release” build — by default the SWF is built with Debug mode and has debug & profiler code in it that your application doesn’t need.
2. Move your panels into modules(see movie)
3. Use the RSLs instead of compiling the Flex framework into your SWF

Using these suggestions has removed over 500K from my app.

The video shows you how to do all of these in Flex Builder.

Here is how you can perform the same optimizations in FlashDevelop:

Number 1 is fairly easy: Just find the only drop-down menu in the main interface, and change it from “Debug” to “Release”.

With number 2 you follow the same instructions, but you can get to the menu to add an item by right-clicking on your project in the “Project” pane of the right column, or by going to “File”->”New”.

Number 3 is slightly more complicated. First you need to get to your project’s properties menu, which you can do one of several ways. Here is a screenshot of going through the “Project” menu:

Then, click on the “Compiler Options” tab, and select the “Advanced Compiler Options” by clicking on it and clicking the “…” button. Then add the line “-static-rsls=false” to it as shown(or append it on a new line if you have other options set already).

Now, you have to copy the “framework_3.2.*.swf” and “framework_3.2.*.swz” files to the “bin” directory in your project, and upload them to your site when you upload your app. These contain the Flex framework that will be cached by the Flash Player when you run your app. They are located in “flex_sdk_3\frameworks\rsls” in the Flex 3 SDK folder. Note that whatever version of the SDK you compiled your app with is the version you have to use the RSLs from. If you compile your app on on build, and then try to use the RSLs from another one(ie. you switched machines/reinstalled the sdk/use another ide that uses a different sdk version, etc.) you will get a message when your app loads about RSL 1 loading(but it never will). So, if you reinstall the SDK, or any of the things I mentioned recompile your app with the new version. *phew*

I hope these tips are helpful to you!

I’ve started dabbling in Flex recently, and something that was apparent(and annoying at times) to me  early on was it’s strongly-typed nature. Not type as in a keyboard, but variable types. Flex cares very much whether your variable is an Array, or ArrayCollection as it’s knowledge of types is key to it’s processing. This is quite the converse to a language like PHP, which is loosely-typed to say the least.

Anyway, I came upon a case where I needed to know the type a variable was so I could cast it properly(and for debugging), and I found that Flex doesn’t have a function to simply return a variable’s type. There is describeType(), but this returns an XML object with all of the information about the variable — not just the type. Plus you have to import the proper class to use it. So, I threw together this function quickly that will perform the import, and return/alert the type as needed:

private function getType(value:*, alert:Boolean = false):String
{
	import flash.utils.*;
	var description:XML = describeType(value);
	if(alert)
		Alert.show(description[0].@name);
	return description[0].@name;
}

I hope someone else can find it useful.