Flex Character Counting Tool

If you need to quickly count characters in text then this little flex application might be useful. It uses Courier font for fixed width display, so you will need this font on your computer to use this tool. Type or paste text into the area below and see the number of characters in your text.

Note: In case you’re not familiar with this concept, there are hidden characters for line-breaks. If you wish to count these characters, you can include these characters with the checkbox at the bottom. You can also enable word wrap.

Flex Calendar Component

This calendar component is great. It’s still has some bugs in it, but it’s my favorite Flex calendar component out there.

It was originally developed by Ely Greenfield and some bug fixes and enhancements were made by Jove Shi. This post exists because Jove’s site is offline and I’m sure people would like to benefit from his hard work, so I am hosting what I believe to be Jove’s latest source (download below). If Ely or Jove have a problem with me hosting it, please let me know and I’ll take it down.

Ely’s post about it
http://www.quietlyscheming.com/blog/components/interactive-calendar/

Ely’s Example Page:
http://demo.quietlyscheming.com/calendar/app.html

Jove’s enhancements and bug fixes:
Download (.zip) 823KB

Essential Flex 3 Links

As a Flex 3 developer, there are a number of links I think you should have. Some of these are tools that help me perform tasks faster and better, others are for quick reference and news.

Tools
Component Explorer
Style Explorer (CSS generator)
Color Picker

Plugins
TODO / FIXME
XML Buddy (XML color coding, validation…etc)
Subclipse (Subversion source control support for eclipse)
Perforce (Source control)
FlashTracer (FireFox Plugin)

Reference
Language Reference (Live Docs)
Runtime Error Codes
Compiler Error Codes

News and Community
RIA News Aggregate
Flex.org
Flex Developer Center
Flex Coders (Yahoo Group)

Blogs
Alistair McLeod
Christophe Coenraets
Ely Greenfield
RIApedia (Mike Potter)
Everything Flex (Rich Tretola)

Maximum Concurrent HTTP Requests from Adobe AIR

The limit is 450.

Why did you test this and who cares?
I care. I was working on an application that has (potentially) hundreds of concurrent data requests and I needed to know if that was going to be a problem.

Methodology
I built a Flex 3 application that had 1 HTTPService object and I called the send() method 1000 times using a for loop. I had a script that tracked the number of iterations, which reached 1000 instantly. I had a script that counted the number of responses received by the result handler. It got to 450.

My first test made requests from localhost (apache) and the responses totaled 450 within about a second. My second test made requests from another apache server about 50 miles away in a large data center; they totaled 450 within about 3 seconds. For my third test I sent 1000 requests and after about 250 were received I sent another 1000 requests. From 2000 requests, about 700 were received.

I concluded from this that there can be a total of 450 concurrent http requests pending at any given time. I tried more tests with multiple HTTPService objects and called them each 500 times. Still, the total number of received was 450. So it seems the limit is part of AIR itself and not the HTTPService object.

That made sense because when a Flex application is deployed in a browser, you’re limited by the browser’s maximum number of http connections. Typically, that number is between 2 and 50 – many modern browsers will let you adjust this number.

To adjust this number in FireFox: type “about:config” in the address bar and hit enter. Then, type “connections” in the filter box. You’ll see a number of connection settings that you can adjust. The faster your connection, the more simultaneous requests you can allow and still maintain a comfortable browsing experience.

450 connections is a lot and in most cases, far more than you need. I’m glad the AIR limit is very high; because this is one of the few ways to get information in and out of AIR. With some hard work, this is a viable way to communicate with other localhost software that may provide connections to USB or other devices – one of the current limitations of AIR.

– Chad Upton

Guided Setup, Using Perforce with Flex Builder

Perforce software makes a plug-in for Eclipse that makes life a lot easier when using the two together. This setup guide is directed specifically at using Perforce with Flex Builder 3.

As we know, Flex Builder 3 (FB3) is based on Eclipse 3.3.1. Since Flex Builder 2 is based on Eclipse 3.1.2, it probably won’t work – the release notes for the plug-in suggest is works on 3.2 and 3.3 only. I have not tested it, but if you were to upgrade Eclipse and use the Flex Builder plug-in then you should be OK.

Setup

  1. Open Flex Builder 3.
  2. Choose the following menu command: HELP > Software Updates > Find and Install.
  3. Select “Search for new features to install” and click Next >.
  4. Click “New Remote Site”.
  5. In the dialogue box, enter the Name “Perforce Plugin”.
  6. In the dialogue box, enter the URL: http://www.perforce.com/downloads/http/p4-wsad/install/
  7. Click OK.
  8. Click Finish.
  9. You will be prompted to “Select the features to install”.
  10. Be sure to check, “Show the latest version of a feature only” (at the bottom of the window)
  11. Fully expand the “Perforce Plugin” tree.
  12. Choose the last item in the tree that begins, “P4WSAD”.
  13. Click Next.
  14. Accept the terms in the license agreement to continue.
  15. Click Next.
  16. Click Finish.
  17. The feature will be downloaded and you may receive a Feature Verification warning
  18. Click “Install” if you receive the Feature Verification warning.
  19. The installation should occur and you need to restart Flex Builder.
  20. When Flex Builder restarts, we’ll tell the plugin where it can find Perforce on our system.
  21. Choose: Window > Preferences.
  22. In the left column, browse to: Team > Perforce.
  23. Under “Location of p4 executable” select “Location” and click “Browse”, then locate and select p4.exe. The default location is C:\Program Files\Perforce\p4.exe.
  24. Click Open.
  25. Click Apply.
  26. Click OK.
  27. Now, locate and open the project that you wish to use with Perforce.
  28. Right click on the project folder and choose: Team > Share Project.
  29. Select Perforce and click Next.
  30. The “Recent” field will probably be blank and that’s fine.
  31. Port will be the IP address and port of your Perforce server. (ex. 192.168.254.55) If you already have P4V or P4Win setup then you can find this in the title bar of the application.
  32. User is going to be your Perforce username, likely given you to by an administrator.
  33. Client Workspace should also be found in the title bar of P4V or P4Win if you’ve got those setup.
  34. Charset can probably be left to the default (none) but may require changing in certain circumstances.
  35. Click Finish.
  36. You will likely be prompted for your Perforce password – the one that goes with the Perforce username you entered.

Assuming everything went smoothly, you should now be able to edit files and Flex Builder will automatically add that file to the default changelist and make the file writable so you don’t get that annoying message.

Some other useful things that this plug-in does. Go to Window > Other Views…
In this dialogue box you can open the Perforce folder and select “P4 Pending Changelists”. This view will show you the files you have opened for editing and allow you to right click on the changelist or individual file for submitting.

Also, you’re probably used to seeing error and warning messages in the Problems view. Now you’ll see info messages when some things are out of sync with the repository. For example, if you add a new file your project but it’s not in the repository then you’ll see an info message warning you. Right click on the file and choose “Open for Add” then Submit the changelist and it will be added.

I hope this makes your life easier and please send me a quick line if you found any errors in my instructions, that will help other people!

Further details on setup are available at the Perforce website: http://www.perforce.com/perforce/doc.073/user/p4wsadnotes.txt

Rotate On Center in Adobe Flex

Sometimes our programs have visual objects that need to be rotated. The default registration point in Flex is the top left corner, but that’s not always ideal. In Flash, we have the freedom to change that registration point — not in Flex.

We have to work around this limitation in Flex and I have seen a few different approaches. There are some blog posts out there that suggest using the Rotate effect, this seems messy to me. If you want to rotate around any point using a MatrixTransformer: Joel Connett has a great post on it here. I quite like that method, but I think I’ve found a more simple solution for center rotation.

Here’s a sample you can play with:


Click Here for Source Code

Try clicking the "show canvas" button, you'll see a white box that surrounds the bottom right quadrant of the spiral circle. It is only that quarter of the circle which is actually in the canvas. I have placed the center of the circle at the top left corner of the canvas. The canvas will (by default) crop content that exceeds it's boundaries; however, there is a property on the canvas called "clipContent". Set that to false and voila.

I know this is really simple solution, but it wasn't obvious to me until recently. Leave a comment to let me know if this helped to you.

This method works with Flex 2 and Flex 3.

Flex 2 Shortcuts

Interest in Adobe Flex has really heated up with the release of Flex 2, and because so many people are starting to use Flex there is huge demand for training courses. I am certified by Adobe to teach Flex (among other technologies) and during my Flex courses I demonstrate a lot of useful short-cuts. I am constantly asked for a site that lists these; therefore, I have compiled a short list of the Flex Builder short-cuts I use every day:

(ordered by usefulness)

  • Ctrl+Space … Content assist (aka Code Hinting) – Shows you most of the available tags or properties appropriate for your cursor position
  • Shift+Enter … Adds a new line below the current line (extremely useful in mxml as you enter tag properties, this means you don’t have to hit the arrow key to move outside the quotation marks
  • Crtl+Enter … Adds a new line above the current line
  • Ctrl+D … Delete the current line
  • Alt+Down … Moves the current line down (passing through any lines below it).
  • Ctrl+L … Go to line number (popup window).
  • Ctrl+Shift+C … Adds a comment around the currently selected text (MXML and ActionScript).
  • Ctrl+Alt+Up … Duplicates current line.
  • Ctrl+Click … Allows you to click on a class in AS or MXML and open that class file.

Indenting: Since we all use good coding form and properly indent all child tags it is important to know some tricks to this. Most code editors support multi-line code indenting, which means you can highlight multiple lines and press the Tab key to indent all of those lines. Try that in a word processor and it will delete the text, but most code editors (Flash, Se|py ActionScript Editor and Flex Builder/Eclipse) support this. Also, you can reduce the indent across multiple lines by pressing Shift+Tab.

There are also some workflow tricks I find very useful. First, I always use “Build Automatically” available in the “Project” dropdown menu (unless the project is extremely large, and you’ll know when it’s too large for this). With this enabled, Flex Builder will automatically generate the SWF and HTML file for viewing. Watch the bottom right corner of Flex Builder in the status bar for the building status; when “Building Workspace” disappears, you can simply hit F5 (refresh/reload) in your browser to see any changes you made to your Flex project. If you try to refresh or reload before the workspace has been built you will get an empty SWF file.

This isn’t a Flex Builder shortcut, but when you have the Flex Data Services server console open, you can use Ctrl+C to “Close” (shutdown) the server.

This list is by no means complete, but simply a list of my favorite shortcuts. This list will continue to grow as other shortcuts creep into my daily finger dance. To see a complete list of shortcut keys, press Ctrl+Shift+L in Flex Builder.

Chad