The Saj - S.A.S.S.I.E.

UPDATE: I have found the issue with IE & pop-up blocking. It was not in fact the fault of SWFObject. Rather, the issue was a particular parameter entry: wmode=”transparent”

Yes, the simple removal of this entry caused IE’s pop-up blocking to cease. It appears I finally have a working solution - I tested on: XP (IE6, Firefox, Safari 3, Opera) & OSX (Firefox, Safari 3, Safari 2). The only caveat now being that the use of wmode=”transparent” causes IE to pop-up block.
Okay, I am putting this out to all of my readers…

---

I’ve almost got every browser working for my “_blank” clicks. The final exception is that on IE clicking is triggering a pop-up blocker. Surprisingly, it is not my code that appears to be the issue - or at least not directly - rather, it appears to be caused by the use of SWFObject to embed the .swf file. (We use SWFObject for our .swf embedding for a variety of reasons.)

Below are three links to my “Example 2″ , each using a different loading method. Standard as generated by Flex, SWFObject 1.5, & SWFObject 2

http://www.easternstorm.net/sassie/example2/example2.html

http://www.easternstorm.net/sassie/example2/example2-swfobject.html

http://www.easternstorm.net/sassie/example2/example2-swfobject2.html

If anyone can provide insight as to why the use of SWFObject is triggering the IE pop-up blocker, please, please let me know!

- The Saj

PS - Here are a few additional links on “_blank” issues. These demonstrate examples of using Callback, which I have not implemented but might consider incorporating.

Insideria

AssertTrue

UPDATE: I believe the example will work in all common browsers (Firefox, Safari, IE, Opera) on both PC & Mac platforms.

NOTE - If you’re using SWFObject 2.0, you need to upgrade to RC2!

*******************

I created a bug tracker listing for this issue a while back at bugs.adobe.com. It was closed - I believe improperly so.

Please consider visiting the listing for this issue. While you cannot vote because it’s been closed. You can comment, and you can add the listing to those items you are watching.

http://bugs.adobe.com/jira/browse/SDK-12987

---

UPDATE: I revised the code to handle for Safari 2 (sort of). Essentialy, I was not getting a response from Safari 2 on the browserAgent request. My conditional was failing unexpectedly.I’ve revised the code, and confirmed that it now reaches the “Undefined” option. Which uses the standard navigateToURL(). And should work in Safari 2.Too those readers who still have access to Safari 2, if you could confirm that it is now working for you - much appreciated.- The Saj

PS - Special thanks to multi-Safari and to Subtlegradient for the fix that re-enables multi-safari. Which allowed me to install Safari 2 on my Mac for testing purposes. (Why Apple & Microsoft fail to see the need for us developers to run multiple browsers we will never know.)

---

One of the very first headaches I encountered with Flex was when I tried to pop-out a link using “_blank”. ActionScript 2.0 used _getURL(), in ActionScript 3.0 this was changed to navigateToURL().Imagine my horror when after uploading my new Flex app live to discover that clicking was caught by Firefox’s pop-up. The old _getURL() worked fine, but I really didn’t want to go back and re-write my app in Flash / AS 2.0A little research revealed a work-a-round using the externalInterface command to call out to the browser and pop open the window using the window.open command.However, I would more recently discover all of my Flex applications failing to work in the new Safari 3.0, Safari 2.0 works with the externalInterface work-a-round but for whatever reason Safari 3.0 does not. Further research led to another work-a-round to check the browser brand then use conditional if/else logic to enable the application to either use the externalInterface() method if Firefox or the navigateToURL() method if another browser.Now for my applications I have made these into two separate re-usable classes. However, so as not to confuse those new to Flex and still unfamiliar with classes, I have made a simple and stupid example that incorporates all of the code in one MXML file. Hopefully this example will help you if you’ve encountered this issue:

http://www.easternstorm.net/sassie/example2/example2.html
(right-click to view source)

- The Saj

Adobe has recently launched a site re-design. A fair amount of chatter as to what features individuals view as improvements and which are viewed as cumbersome. (ie: Home page has nearly half the page taken up by an animation. Nice animation…but 1/2 the site area is gone to an ad.)

That said, what I find most interesting to note is that nearly all the links point to folders rather than files. I can see a number of advantages with this sort of design implementation. First and foremost being that if you change back end server technology you do not need to change your paths.  It’s no longer page.html, .cfm, .php, etc. Now it’s simply www.domain.com/page/

You can change your whole backend and people’s book marks would remain valid. There is a lot to be said for such a design implementation.

Downside? Well, for Adobe, considering they sell Coldfusion (a back end server), it now reduces the presence of the .cfm pages.  So there could be a marketing loss.

I am a new convert to OS X. That said, I am NOT an adherent to the religion that is Mac. While I think OS X is a good environment it is far from perfect. Both OS X and Windows have their advantages and disadvantages. However, overall I’ve found OS X to be a fairly solid platform and a bit more responsive than Windows. In conjunction with Parallels it becomes the most diverse of development environments allowing you to run Mac & Windows software.

***

That said, OS X has it’s quirks and there are a number of things I miss from Windows. One of those items was Windows “Start Menu” which allowed me to easily organize and group my applications. While OS X’s “Dock” is nice eye candy and great for users who only use a handful of porgrams. I found it insufficient for a user like me who has about 2-3 dozen regularly used applications.

Previews of Leopard showed Apple adding “Stacks” to the “Dock”. I was quite excited about this feature. Upon upgrading to Leopard my feelings were mixed. The “Stacks” have a lot of potential but the implementation left me wanting. Stacks for those who don’t know, allow the contents of a folder to be fanned out or displayed as tiles. However, all the icons of the contents are displayed atop of each other. Adding or removing files changes the top icon making it difficult to keep track of a given folder. This can be quite confusing I have since found a number of enhancements to the “Toolbar” that have allowed me to create a working environment that is quite satisfactory for me. In the remainder of this post I will detail these enhancements.

***

1. “Drawer-icons” a Japanese designer created some nifty icons. Put these inside your stack folders (rename them with an _***** or number in front so they float to the top). They will then be the top icon displayed. These icons are designed to look like semi-transparent buckets, each with a distinguishing logo in front so you can easily identify the folder. (For the graphically gifted there are master files for creating your own icons as well. Here is a tutuorial I recently discovered for customizing the drawer icons.)

I also created a folder called “Menu” and then created sub-folders for different types of applications. I placed “Alias/Shortcuts” of my apps in these sub-folders along with one of the nifty icons mentioned above that best corresponded to the application group. Which I rename with an underscore so that it floats to the top and becomes the uppermost icon image. I now have a windows like application menu (though it does not support as many depths as Windows “Start Menu”).

Be sure to sort your stack by “Name”. You can do so by right-clicking the stack and selecting sort. (Thanks to Wombat for chiming in on this.)

2. “Dock Dividers” this is simply a dumby app with a straight narrow icon. They’re useful for dividing your “dock” into segments. (ie: I will use it to separate my finder & show desktop icons from my running applications). Note, there are several copies as each divider in your dock must be unique!

3. “Show Desktop” application replicates the behavior of the “Show Desktop” icon in Windows. And while I find “Expose” to be beautiful, I dislike the fact that as soon as I click on an application all my windows rush back in. This “Show Desktop” app “hides” your windows. They won’t come back on your screen until you re-activate them.

Here is an image of what my desktop now looks like. See how all my applications are neatly contained in recognizable containers/drawers:

If these enhancements sound like something you would like to implement on your “Leopard” system. I’ve wrapped all three into a single zip file download. Enjoy!

***

I also ran into this interesting bit of code from here that allows you to create a “stack” for “recent items”. Simply open up your terminal and type the following two commands:

defaults write com.apple.dock persistent-others -array-add ‘{ “tile-data” = { “list-type” = 1; }; “tile-type” = “recents-tile”; }’

killall Dock

You can right click and select whether you want recent applications or recent documents displayed. You can also run again to create a second copy in order to have both a recent apps & docs stack.

***

I am of the opinion that Apple should release a mini-update incorporating many of these features (drawers, dividers, recent items, etc) as native behaviors for “Leopard”.

Wishlist for “Spaces” enhancements:

- be able to click and temporarily lock a folder or app window so that it remains present when switching spaces.

- define certain apps to show in multiple spaces. [UPDATE: This is possible, not sure if was always possible, but in System Preferences > Spaces, where you select which space you want the app to display in. There is an option at the very top for "Everywhere". This requires you to click on the double-arrows to the far right of the app listing.  I think this is why I missed it. I simply dragged the app to the "space" I wanted it in before.]
- multi-monitor support (allow me to define a space to a particular monitor, so ’space 1′ would be on ‘monitor 1′ and ’space 2′ on ‘monitor 2′.

*****

Here is a link (with further links) with insights for those transitioning from the Windows environment to the Macintosh OS X platform.

Yesterday, I encountered a surprising situation while working in Flex Builder 3 (Beta 2) on OS X (Leopard). I was working on a project that being designed to handle multiple languages. While in the code I create three simple arrays with Latin, Hebrew and Chinese characters. (See below)private var labelArrayENU:Array =
["Tools","Contents","Zoom","Magnify","Print","Save","Link","Send"];

private var labelArrayHEB:Array =
['אמצעי','תכולה','בצילום','להגזים','ספר','ש"ע','להתחבר','סלנג'];

private var labelArrayCHN:Array =
["走 狗","甘 心 情 愿","形 满 足","反 义 词","名 物 品","内 容","容 量","近 义 词"];

But something bizarre and unexpected happened when I began to create the array of Hebrew. I attempted to copy and paste the word into the array. However, when I pasted the Hebrew text at the end of the array it was moved to the beginning. Try as I might this kept happening. It dawned on me that my system has become aware of the fact that Hebrew is a “R2L” language. That means it is written from right to left as opposed to the common right to left of Western languages. (Note: I use Western as most non-modernized eastern languages write R2L.)

After some further experimentation I was confirmed in my assumption that my system had become R2L aware. First off, using the right & left arrow keys in the Hebrew text actually caused the cursor to move in the opposite direction. Now, I was concerned in part by the fact that this might be OS X acting on the text…while Flex Builder 3 remained unaware. I was concerned that my array was being constructed in reverse order. A quick test of output while looping over my array showed that while the order was being reversed in the code; the index was being reversed to correspond as well.

What I mean by this is that “index 0″ was now the right most entry instead of the left most entry. Therefore, my array outputs correctly. And the output of all three arrays corresponded to one another.

This is pretty impressive, especially in the globally connected world of our today. However, there are a few caveats. I still found it challenging to do what I want because the system makes some assumptions based on my activities. For instance, when I actually wanted to add another entry before my first entry. The system still assumed I was trying to add an entry to the end of my array and automatically moved it for me. (Which is NOT what I wanted.)

So my thoughts on this are:

a) it’s cool, and insightful to the future
b) it’s can catch you unawares and leave you momentarily confused
c) it’s still a bit quirky and can make it challenging to complete an action as you intend, even after you understand what’s going on.

Anyways, I just thought I’d share with everyone this interesting encounter. Not everyone deals with multiple languages, especially non-western R2L languages in their projects. But in case you ever do…you can be aware of this behavior which might save you some time pondering your sanity.

- The Saj

PS - I endeavored to see if this was an OS X only action by trying it in my Parallels instance of Windows XP. The action occurred there as well, but that may be from OS X’s influence.

Would love to know from a stand-a-lone Windows XP & Windows Vista user if this behavior is seen on your machine as well, or not.

We are seeing a growing trend on the web of platform diversification. There have always been a variety of operating systems and browsers on the web, but for sometime the vast majority of users have been Windows/IE. In recent years this trend has been changing, first with Firefox and now with the expanding adoption of OS X. The result is an increase in the diversity of commonly used web browsing platforms.

I recently encountered some issues relating to how fonts are rendered in different platforms. I was commented on a friend’s blog that I found it hard to read the code sections of his blog as the font rendered quite small.

Having recently moved to a Mac OS X system for development in conjunction with Parallels running Windows XP allows me to review and test several web browsing platforms from a single machine. My results are below:

(Click for view full size image!)

Note that in Safari the text is so small and choppy that it is nearly unreadable.

(Click for view full size image!)

Arial tends to be much more uniform in display size across all examples.

***

Special thanks to Jeffry Houser

The following are some tips, tricks, and little nuggets within Flex Builder.
NOTE - some of these tips only work in Flex 3 Beta.

I. Code Hinting:
CNTRL-SPACE pops up coding hint-menu. (Most of the time!)

ﾠII. Find Closing Bracket:
CNTRL-SHIFT-P or APPLE-SHIFT-P toggles cursor between the first “{” and the corresponding closing “}” when editing ActionScript code.

III. Moving a Block of Code
Highlight or click a line or lines - hold the ALT key down while moving the up/down arrows. This will shift the code block up or down respectively. This is very useful for relocating code blocks.

IV. Highlight All Instances in Code

Step 1: Highlight an instance in ActionScript.

Step 2: Click on the “Mark Occurences” icon.

Step 3: The result is all instances are highlighted.

V. Auto Comment ActionScript
CNTRL + “/” or Apple + “/” = auto comment all highlighted/selected lines.

VI. Compare History of File Changes: this is a pretty nifty and powerful feature that allows you to see older versions of the file you are working on.ﾠﾠ

ﾠStep 1: Right-click on file in the “Navigator” window > Select “Compare With” > “Local History”

Step 2: You will see a list of versions in the “History” pane at the bottom of Flex Builder. Select a timestamp by double-clicking. The two versions will be shown in parallel windows for comparison and review. Differences will be highlighted.

VII. Syntax Coloring (Customize)
Preferences > Flex > Editors > Syntax Coloring

VIII. Multiple Instances of the Text Editor:

For viewing multiple instances of the same file (ie: split file mode) or for viewing multiple files side by side.

ﾠ

Step 1: Create a new editor window instance. Right-click on the .mxml file tab in the source window mode. Select “New Editor”.

Step 2: Click and hold your new tab. You will see a little icon that looks like a stack of file folders. While holding the mouse button down drag tab to the right edge of Flex Builder until you see a square recticle dividing your work area in half.

ﾠ

ﾠ

Step 3: The end result is you now have two code windows for the same file (or different files). This allows you to work at the top of a file in one window (ie: in your ActionScript code) and in the bottom of your file in the other window (ie: your MXML code). Or you could use this method to compare two separate files.

ﾠ

ﾠ

NOTE - you do not have to put the template side by side. You can stack them horizontally or vertically. In fact you can mix and match. Dividing the work area into a left & right, and then further sub-dividing the right side into a top or bottom frame. I am not sure what the limits of this ability is, but the example below shows you that you can get pretty extreme with this feature.

ﾠ

IX: Disable Flex Builder’s Auto-Copying Files to Bin

ﾠ

ﾠ

The default behavior of Flex Builder to copy numerous files into the bin directory can create headaches for developers. Especially those utilizing version control software such as SVN (Subversion), as the SVN files are also copied creating nested arrangements that can break your local working directory’s relationship with your code repository.

The following figure shows you where to disable this:

ﾠ

Step 1: Select a project and select properties.

ﾠ

Step 2: Choose “Flex Compiler”

Step 3: Uncheck the box titled “Copy non-embedded files to output directory” as seen in the figure below.

Hope you found these examples and insights helpful and of use. I think it is always beneficial to share what we learn or discover, as well as that which has been shared with us. If you have any similar tips or tricks - please feel free to post them in reply.

And always…if something wasn’t simple enough to understand, please let me know and I’ll endeavor to clarify it further. Thank you!

- The Saj

X: Additional Tips’n'Tricks (sent from our readers)

CTRL-O: Opens the “quick” outline panel.

SHIFT-CTRL-O: Organizes and alphabetizes import statements in .as files

F3 (function key 3): Jumps to the definition / declaration of the highlighted class, function, or variable.

Double-click on a tab to maximize it; double-click on it again to restore it to its previous size (comes in handy for searching the Console).

Look, we have one cursor….not six! Let’s keep it that way…

Here Sprint does a great little digital mock-up of the upcoming Palm Centro. Lots of nifty “positive” effects and info. But it’s all lost by a really stupid idea to have six cursors show the user where they can click (as if “Click Here” is not enough). Nope, we want to confuse you to the point where you don’t even know which cursor is yours anymore. The effect itself is really nifty, and had they chosen something other than cursor arrows I’d have no issue.

http://www.moreyous.com/?id12=UHP_PhonesTab_092707_CentroPre

Recently I encountered a situation in which the XML feed was being cached by the browser. Thus when the XML feed was updated my app was failing to reflect the changes.

I decided that I would pass a random foo variable over the URL string to encourage the browser to refresh. In order to do this I wanted to use a GUID (or a close approximation of the concept). A GUID for those who do not know is a reference term for “Guaranted Unique IDentifier”. Though truthfully, like most guarantee’s, it carries little weight. That said…it is fairly unlikely to generate a duplicate GUID in limited use.

In order to generate the GUID you must import the following class package:

import mx.utils.UIDUtil;

After that you simply call the class and method as seen below:

“myXMLFeed.xml?foo=” + UIDUtil.createUID();

Note, in the above example I am merely appending the returned GUID value to the end of my XML feed as the value to my parameter “foo”.

Hope you find this little bit helpful.

- The Saj

My friend Jim Robson has posted an insightful blog regarding the use of Flash CS3 integration with Flex 2.

http://jimrobson.wordpress.com/2007/09/05/flash-cs3-flex-2-butterflies-part-two/

Besides, there are butterflies!

- Saj