Archive for November, 2007

Crossing the language barrier

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 =
["走 狗","甘 心 情 愿","形 满 足","反 义 词","名 物 品","内 容","容 量","近 义 词"];

Image provided for those without languagesets

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.

Font rendering in browser platforms

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:

Comparison of 'Courier' font on multiple browsers/OSes
(Click for view full size image!)

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

Comparison of 'Arial' font on multiple browsers/OSes

(Click for view full size image!)

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

***

Special thanks to Jeffry Houser

Flex Builder Tips & Tricks

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!)

Horizontal Bar

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

Horizontal Bar

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.

Horizontal Bar

IV. Highlight All Instances in Code

Step 1: Highlight an instance in ActionScript.

Highlight Code

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

Highlight Icon

Step 3: The result is all instances are highlighted.

Highlight Result

Horizontal Bar

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

Highlight Auto-Complete

Horizontal Bar

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”

Compare

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.
Code Comparison View

Horizontal Bar

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

Syntax Coloring

Horizontal Bar

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”.

New Editor Window

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.

Recticle

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.

Result

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.

Extreme Example

Horizontal Bar

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.

No auto-copy to bin

Horizontal Bar

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

Horizontal Bar

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).

Ctrl + Shift + R will open a filterable search dialog that supports the use of wildcards. [Thanks Alex]

Horizontal Bar