Archive for the Flash Builder Category

Adobe AIR Launchpad Update

Posted in Adobe AIR, Adobe AIR Launchpad, Adobe Flex, Flash Builder, Flex 4 with tags , , , on September 7, 2010 by devgirl

An update to the Adobe AIR Launchpad Beta has been made available today and includes the following fixes/changes in version 1.0.1:

  • Fixed Windows OS path issue for generated icon paths set in the app-descriptor.xml file. Paths will now have the correct path separator.
  • Allow badge graphics other than JPG to be used and named with the correct extension type. The badge image selected in Adobe AIR Launchpad will now be prefixed with the application name followed by _badgeImage and the extension of the type of file chosen in the generated project; for example: MyApp_badgeImage.jpg or MyApp_badgeImage.png..
  • Changed the size of the image required for the install badge to 215×100 to match the default badge
    from the Flex 4 SDK install badge sample.
  • Fixed issue where Alert import statement was not generated in certain option combinations.
  • Updated the readme in the generated project with more details and a link to the Flex 4.1 SDK.

Note: If you’ve already installed Adobe AIR Launchpad, you will be notified of the available update on next run, otherwise to get the latest version, download it now from Adobe Labs.

Also, check out the Adobe AIR Launchpad Forum for more details on the latest feedback and comments related to the Adobe AIR Launchpad, or feel free to comment directly here!

Flash Builder 4 Shortcuts and Tips

Posted in Flash Builder, Flex 4, Flex/AIR with tags , , , on July 26, 2010 by devgirl

I’ve been collecting a summary of Flash Builder 4 tips I find useful to help me be more productive as a developer and thought I would share them here. I’m including the shortcut for the feature where possible (based on Mac OS, for Windows use Ctrl in place of Cmd). Please feel free to comment on other features or tips you find useful that I may not have covered!

  • Content-Assist – Ctrl-Spacebar – I’m sure most developers know of this, but if for some reason you don’t, you MUST start using this. It displays a pop up of all properties and functions available on this object. What many of you maybe do not know though, is that you can further filter this list to show only Properties, or only Events or Effects etc by pressing Ctrl-Spacebar again and again. They’re calling it ‘proposal cycling’ and it will have the name of the items you’re looking at in the bottom of the popup (All, Events, Effects, Properties etc). I am so dependent on this now I don’t think I could live without it!
  • Organize ImportsShift-Cmd-O – Cleans up unused import statements and organizes them by package. This option was available in Flex Builder but only for ActionScript files, in Flash Builder it works in MXML now too, yay!
  • Quick Outline – Cmd-O – quickly jump to a variable or function from here. Start typing the first few letters of what you’re looking for and select it to take you to it. This is one you should definitely take away from this post and use.
  • Quick Access – Cmd-3 – quickly execute a command or open a certain editor or view here. You can type a substring of what you’re looking for and it will show all matches, and you can even type the first letter of multiple words to bring it up, for instance if you’re looking for the Test Case Class command you could just type TCC and it will show (or tcc). Note that this camelCase typing approach works for most of the features including the code hinting. What’s really cool too is that it keeps your history, so for instance if you’re debugging an app, the Debug command will show up first in your history since it’s the last thing you used and you can quickly execute it again. I also love this feature for using the Tour de Flex Eclipse plugin view for Flash Builder, I can simply hit Cmd-3 and ‘tdf’ and it will show me that view in the popup (assuming you have installed the plugin, and if you haven’t, you should certainly do so!! Info on this plugin can be found here). Below is a screenshot this feature in use:
  • Word Completion – Ctrl-. – start typing a word and use this command (Ctrl-period) and it will guess what word you might be typing. Keep hitting it to suggest new words if it doesn’t match the first time. This works similarly to cell phone texting.
  • Fix indentation – Cmd-I – just select the block of code that needs fixing and Cmd-I will do it for you without having to manually tab.
  • Duplicates lines of code – Option(Alt)-Cmd-Up arrow
  • Move lines of code – Option(Alt)-Down or Up arrow
  • Delete line without using clipboard – Cmd-D
  • Delete last word – Cmd-Backspace
  • Quick access to definition – hold down Cmd key and highlight a function name for instance and it will turn it blue like a hyperlink and allow you to go straight to it when clicked.
  • Flash Builder built-in version control – Flash Builder actually keeps a history of your file states internally and can allow you to compare to a previous version or even revert to one using the Compare With… or Replace With… The Compare with will use an internal diff based on your current version and a version you worked on previously.
  • Set number of open editors – Flash Builder now has a setting that allows you to set a number of editors to be allowed open at any given time rather than opening an unlimited number of them. When it hits the set number it will begin closing older ones. This option is not set by default, you need to go to Window | Preferences | General | Editors and check the box and set your desired value.
  • Cycle States – Cmd-\ and Shift-Cmd-\ – when using states, this option will grey out any code not in a particular state for easier view. It will cycle to the next state or back depending on the option you choose.
  • Open Call Hierarchy – Ctrl-Option-H – shows where this function is being called from. This is useful to see how many changes would be needed for instance if you want to change or remove a function.
  • Cycle through open files/editors – Ctrl-tab – quickly hop to a different open editor. Related to this is Open Type (Shift-Cmd-T) or Open Resource (Shift-Cmd-R). These options allow you to quickly open source code files for objects in the Flex SDK or with Open Resource you can actually open any type of file.
  • Check or Modify Key Mappings – go to ‘Windows | Preferences | General | Keys’ to change your key mappings to whatever you want, or add additional ones here.

  • Generate Event Handler – if you select an event from the code hinting and hit enter you will now get an option to generate an event handler for that particular event. For instance, inline on a button, if you start typing click and select it from the intellisense popup and hit enter, you will then see an option to ‘Generate Click Handler’. If you select it, Flash Builder will add a new function to your Script block (and if there is no Script block yet will create one). Tip: set an id on your MXML component before generating event handlers and it will name the function with that id. For instance, if my button id is myBtn, the click handler generated will be myBtn_clickHandler.
  • Generate Skin Class – this option allows you to quickly create a custom Spark skin while inline on the component. While inline on a Spark component select the skinClass property and hit enter, and you will then be prompted with an option to ‘Create Skin’. If selected you will be prompted with a new dialog like this:

    Notice that you can generate a copy of the default Spark skin and then modify as needed which speeds up the process greatly. Also note the checkbox for ‘Remove Styling Code’. If you don’t need to set any exclusions for styling then you should check this box.
  • Generate item renderer – this option works similar to the above option but for creating item renderers quickly. The option is available on all components that use an itemRenderer (including MXML).
  • Code Commenting Shortcuts – to quickly comment a block of code in ActionScript, take advantage of the Cmd-/ option. For a block of MXML code use the Shift-Cmd-C. Definitely take note of these code commenting shortcuts because I find that I’m constantly using them during debugging if I need to comment something out quickly to test, or when I don’t always like to commit to a full delete of a block of code I may be changing but rather just comment it out first.
  • Generate Getter/Setter – generates getter/setter functions for variables. This is one I often used in Eclipse for Java development and I find very useful. This option is located in the ‘Source’ menu either from the main menu or right-click context menu. Note that you need to have your cursor on the line of the variable definition in order for it to work.
  • Quick Import Statement Addition – this might be the ultimate of lazy tips, but I find myself doing it all the time. If I do not know exactly which package a particular event or something is in that does not require a variable to be created (which would add the import automatically for you), or even if I do know what package it’s in but don’t want to scroll up to add it, I will simply go up a line and quickly type a variable declaration to use the code hinting to find the Class I need and let it add the import for me, then do Cmd-D to delete that line and leave the import.

Debugging Tips

  • Conditional Breakpoints – you can now set a condition on a breakpoint that will cause it to only fire a certain number of times, or based on a certain expression or boolean (for instance it will only halt at that breakpoint when a given variable is a certain value). To set a conditional breakpoint, first set a breakpoint on a line (Shift-Cmd-B), then right click and select ‘Breakpoint Properties’. You can set multiple expressions and just separate them with a comma or even modify a line of code from here without recompiling. See the Adobe TV video link I included at the bottom of this post for some interesting things you can do with this feature.
  • Watchpoints – new to Flash Builder 4 and allows you to monitor a variable instance during a debugging session. To use a watchpoint you need to set a breakpoint and when it stops at the breakpoint, go to the variables view and right click on the variable instance to toggle a watchpoint. More information about how to debug with watchpoints can be found in this article.
  • Expressions – you can actually drag any expression into this dialog directly from your code to quickly monitor that expression. Note: if you are in the editor dialog for the Expression you can type Shift-Enter to close it quickly rather than go to a newline.
  • Run to Line – Cmd-R – while in a debug session and stopped at a breakpoint, you can choose a line further in the code to run to by going to it and doing Cmd-R or right click and find ‘Run to Line’ in the context menu to continue to run to that specific line of code.
  • Network Monitoring – new to Flash Builder 4 and allows you to inspect and monitor network traffic from your Flex/AIR apps that use HTTPService, WebService, RemoteObject, URLRequest etc. It can be used to examine XML, AMF, and JSON data sent using SOAP, AMF, HTTP, and HTTPS protocols. Note: this feature requires Flash Builder Premium and does not work with SSL or Data Management services provided by LiveCycle Data Services.

Ok, so I realize that I’ve mentioned a lot of key mappings here that may be hard to remember at first, but fortunately there’s a key mapping to show the current list of key bindings quickly that you can refer to anytime in your source using Cmd-Shift-L!

Also, to find out even more tips and tricks you can do with Flash Builder, check out this Flash Builder 4 Advanced Tips and Tricks video on AdobeTV by Scott Evans from the Flash Builder team. There’s also an article on Adobe Devnet to take a look at called Flash Builder 4 Developer Productivity Improvements by Jason San Jose. He also shares tips on his blog which can be found here.

Framework RSL’s in Flex Builder vs Flash Builder, Performance and Important Info

Posted in Flash Builder, Flex 4, Flex Builder, Flex/AIR with tags , , , , , , , on April 8, 2010 by devgirl

If you are running multiple Flex applications on a server you should seriously consider using Flex Framework RSLs (runtime shared libraries) to reduce redundancy by eliminating the loading of the same core framework libraries used by all applications. The result could be a reduction in the size of your application SWF file to 1/10th of the original size! I recently implemented this approach for Tour de Flex since each of our hosted samples is its own application and would ultimately contain a large amount of code shared by all the other samples. I saw the size of the swf’s for the samples go from 572k to 57k just by making one small change, removing the core Flex Framework RSL’s from the resulting swf.

The good news is, in Flex 4 previously optimized core framework RSL’s are enabled by default and dynamically linked at runtime (versus compiled into the code via the ‘merged into code’ option). This option is specified in the project properties under Flex Build Path. Under the Library Path tab there you will see a Framework linkage selection that should look like the screenshot below and use runtime shared libraries by default. If it does not show that as the default, you can also select Runtime Shared Libraries from the drop-down list to ensure they are used.

Using Flex Builder you will see that the default option is set to Merged into Code, such as the following:

It’s important to understand what is happening here whether you are using Flex Builder or Flash Builder. Obviously with Flex Builder you will need to modify that option if you want to take advantage of the performance gain of having those libraries externalized. However even with Flash Builder and using Flex 4 it’s important to note what is happening, because though the RSL’s are enabled by default, the default configuration settings currently create a copy of the RSL locally for each of the different SWZ files (the extension of the core framework RSL). This means that when you export your release build for your application (File -> Export -> Release Build) you will have a copy of the each of those 6 .swz files created ranging from 60kb to 620kb. The 6 .swz files (release build number will vary) are:

  • framework_4.0.0.14159.swz
  • osmf_flex.
  • rpc_4.0.0.14159.swz
  • spark_4.0.0.14159.swz
  • sparkskins_4.0.0.14159.swz
  • textLayout_1.0.0.595.swz

This may not be a big deal, but in the case of Tour de Flex samples there was no reason to have a copy of these files for every single sample on our server. I thought it would be useful to share this in case others were faced with this same issue or wondering what the heck all those .swz files were in their release directory. If you want to make a change to how this works, you can change your Flex configuration file to point to a different location for the runtime shared libraries other than creating them locally. There are two XML tags that specify an RSL location in the configuration file for each of the shared libraries. The first one points to the official Adobe path where they are located and you should leave that one as is. The 2nd one specifies the failover URL that you would want to change to point to a single location on a server somewhere for instance. For Tour de Flex I modified each of the failover URL paths in the configuration file to point to our Tour de Flex server that had all of those SWZ files (RSL’s) in one location. Then when I compiled each sample (or any application for that matter once these settings are changed, so be careful) it would no longer generate those local .swz files.

Here’s an example of one of the six default RSL path settings from the flex-config.xml file that comes with the Flex 4 SDK. The flex-config.xml file is the Flex configuration file and located on Mac for instance at /Applications/Adobe Flash Builder 4/sdks/4.0.0/frameworks/flex-config.xml:

	 <!-- Spark SWC-->

with these settings you will see the RSL files generated in the local bin-release directory when the application is built for release.

In the case of Tour de Flex, I changed that 2nd tag to point to our TDF Server location. For example:

        <!-- Spark SWC-->

When Flash Builder was then restarted with these settings and a sample recompiled, the local SWZ files were no longer output in the local release directory. IMPORTANT NOTE: if you keep Flash Builder open while you modify your flex-config.xml file you must restart it to pick up the changes. You also may need to delete the bin-release folder of your project first before seeing the change from recompiling.

There is also an option in Flash Builder that will create local copies of the runtime shared libraries in your bin-debug folder by default. If you look at the same Build Path -> Library Path settings in the Flash Builder screenshot above (1st screenshot), notice the checkbox for ‘Use local runtime shared libraries when debugging’, you will see that same set of files (but .swf) generated in your bin-debug output. When you uncheck this box they will not be generated. I thought it would be useful to point this out as well.

The last thing I want to note is that you can also use command line compile to change the option of where to load the RSL file from. Loads of information on how to do that, as well as more information on Framework RSL’s in general can be found here.