FlexBuilderEclipse Tips and Tricks

1
FlexBuilder/Eclipse Tips and Tricks
Robert Munn President, Emergent Path
2
Eclipse Plugin Mode

• Plugin works well if you do other development in
  Eclipse
• Plugin mode has some peculiarities
• Eclipse has a big memory footprint

1
FlexBuilder Standalone or Eclipse Plugin
3
Standalone Mode

• Installs a full version of Eclipse with JVM
• 300 MB disk space used
• You can install other plugins on top of
  Standalone FlexBuilder
• Can be difficult to find and install dependencies
• Some plugins may be incompatible

1
FlexBuilder Standalone or Eclipse Plugin
4
FlexBuilder on Small Screens

• Maximize the Editor View
• Group other Views together and save as new
  Perspective -gt Window Save Perspective As
• Hide the Toolbar
• Right click the toolbar and select Hide Toolbar
• Select Window Show Toolbar to restore it
• Use Code Folding
• Minimize grouped views and restore them with a
  click

2
Make the Most of Your Workspace
5
FlexBuilder on Multiple Monitors

• Leave your browser open in separate space
• Break the Editor View into two panes to view two
  files at once
• Maximize the Editor View in a screen by itself
• Undock grouped views and move to a separate screen

2
Make the Most of Your Workspace
6
Build a Single Source Tree

• Root contains flex-src folder, other source
  folder if appropriate (e.g. Java), other folders
  for db, config files, etc., plus web root for
  locally running application
• Set Flex build path and output folder and URL to
  the path to the web root so you can build, run,
  or debug with a single click

3
Organize for Productivity
7
Use an SCM Plugin

• Eclipse has plugins for most SCM providers
• http//www.eclipse-plugins.info/eclipse/plugins.j
  sp?categorySCM
• Subclipse has lots of dependencies
• Do not add compiled SWF or associate Flex build
  output to SCM
• No way to know what is in the compiled SWF
• Exceptions are for SWC files that are maintained
  separately
• Always build when you update

3
Organize for Productivity
8
Outline View

• Click an element to go to that element in your
  code
• MXML view find specific elements quickly
• Class view see variables and methods in a neat
  outline

4
Coding in FlexBuilder
9
Re-factoring

• Right-click on a variable or method and select
  Refactor Rename...
• In Navigator View, right click a file and select
  Re-name
• Check Update References
• Check Rename textual matches in strings to find
  additional references, e.g. in code comments.
  Requires preview.

4
Coding in FlexBuilder
10
Quick-linking

• Hold Ctrl key and mouse over a reference to a
  variable, method, or class
• FlexBuilder creates a dynamic link to the
  declaration of the resource
• Click the link to go to the resource

4
Coding in FlexBuilder
11
Find Open Files

• If you have more files open than the editor can
  display in tabs, a link appears gtgt30, for
  instance, to show how many files you have open.
• Click the link to show the list of files
• Type into the blank line at the top of the list
  to filter files

4
Coding in FlexBuilder
12
Using Help

• Click Help Help Contents
• Limit search scope for better results
• Next to the Search function at top left, click
  Search scope
• Select the Flex topics and click OK
• Search will now only search Flex topics, ignoring
  irrelevant topics and performing faster
• Toggle Highlight Search terms top right chisel
  link to toggle

4
Coding in FlexBuilder
13
Inline Help View

• Provides a separate search mechanism from the
  Eclipse Help system
• Searches local content, remote Info Centers, and
  the Web
• Add custom Web search
• Bookmarks broken(?)?

4
Coding in FlexBuilder
14
Debugging

• Using Debugging Perspective all the time
• Create sets of breakpoints
• Save them to a file
• Shared breakpoint sets with other team members
• Use Export and Import breakpoints

4
Coding in FlexBuilder
15
Debugging - Watch Expressions

• You can watch a top level expressions, e.g.
  model, or lower-level expressions, e.g.
  model.myvariable
• Copy expressions for later reference
• Change values during debugging to help find
  potential fixes to problems

4
Coding in FlexBuilder
16
Bookmarks

• Double-click the left margin on a file in Editor
  View to create a bookmark
• Name the bookmark as appropriate
• Useful in a large codebase

4
Coding in FlexBuilder
17
Tasks

• Set a task by right clicking in the editor pane
  left margin and selecting Add Task
• Name your task, set priority
• Tasks are visible from the Tasks View
• Click on a task in the Task View to go to the
  line in the code

4
Coding in FlexBuilder
18
Navigating Your Code

• Click Navigate Open Type to quickly find class
  files you need
• With a Flex file open, click Navigate Show
  Quick Outline to see a preview of the class
• Type into the blank line at top of the quick
  outline to filter items
• Click Navigate Last Edit Location to find the
  last Flex code you changed

4
Coding in FlexBuilder
19
Assorted Tips

• With the Navigator View open, right click an open
  MXML/AS file and the file location will pop up in
  the Navigator View
• Watch auto-complete!
• If you copy and paste a set of imports into a
  file, then you use auto-complete to shorten
  typing in your code, FlexBuilder will remove
  unused references from your import statements

4
Coding in FlexBuilder
20
Overview

• Surprise! Flex applications use a lot of memory
• Optimizing memory usage is a key component of
  building well-behaved Flex applications
• Profiling allows you to see memory usage and
  object stack traces in real time as your
  application runs
• Using Profiling, you can find and eliminate
  problems with memory management in your
  applications

5
Profiling
21
Running the Profiler

• Open the Flex Profiling Perspective
• Select your Flex application in the Flex
  Navigator and click Profile, or right-click the
  application file and select Profile As .. Flex
  Application
• Flex asks you to configure your profiling session
• You may have to close your browser

5
Profiling
22
Analyzing Memory

• Watch the memory allocation graph change as you
  move around in the application (this process can
  be time-consuming)
• From Profiler you can
• Filter classes
• Take memory snapshots to analyze the objects in
  memory
• Find loitering objects
• View Allocation Traces
• View Object References
• View Object Statistics

5
Profiling
23
Overview

• Use regular expressions (\r, \n, \t)?
• Match case as needed
• Create different sets of file extensions to
  search as needed
• Watch your search scope!
• By default the scope should be the current
  project
• Sometimes the scope will reset itself to the
  entire Eclipse workspace, which can slow down
  searching tremendously

6
Search and Replace
24
Working Sets

• Create a working set for related sets of code,
  e.g. events, controller, services, and commands
  for a Cairngorm application
• Select the proper Working Set as your search
  scope to search only those files

6
Search and Replace
25
Searching with Ctrl-H

• Select a folder or file in the Flex Navigator
• Hit Ctrl-H and select Selected Resource as
  search scope
• Quick way to limit scope without using Working
  Sets

6
Search and Replace
26
Quick Searches

• Select a variable, method, or class name in code
  and select Search (Declarations / References /
  Text) on the search menu, or right click the
  editor pane and select Declarations / References
  and Workspace/Project/File as scope
• Search matches declarations or references or all
  text throughout the search scope good for
  finding specific items in code

6
Search and Replace
27
Find/Replace

• Uses standard key combinations
• Select a block of text and hit Find/Replace to
  search only the selected text
• If you do a second search with the text still
  selected, make sure selected text is still
  selected as the search scope
• Lots of optional switches regular expressions
  (\n for newline, \r for carriage return, etc.),
  match case, match whole word

6
Search and Replace