Flex/Flash/Actionscript

What my Eclipse/Flex Builder setup looks like

A few months ago I decided that my Eclipse setup was far from optimal. I was using slightly customized versions of the default Flex Development and Debugging perspectives that ship with Flex Builder. I had customized them to suit my personal preferences (things like making the Variables pane take up the full screen height). But the biggest problem I had was the debugging perspective. When you have all the panes you need open on the same screen (code editor, debug panel for stepping through lines, variables pane for inspecting variables, console for reading log statements, navigator for selecting different files) you end up with a tiny area for actually reading the code in the code editor.

The old single-screen perspective
Here’s a screenshot showing how bad my debugging perspective could become:

singlescreen_debugging

I’d usually try to edit code within a maximized code editing window by double clicking the code editor I was working in, then restoring it back to the small size when I was stepping through debugging. And often I’d hide the console view or move it around so I could get more vertical space. But in the end it was always a struggle to have access to all the pieces I needed and still be able to edit code.

The new dual-screen perspective
So I finally decided that having Eclipse within a single monitor just wasn’t going to cut it. For most of my development work, I plug my laptop into an external 22-inch monitor, which gives me a resolution of 1680×1050 on my external monitor and 1440×900 on my laptop monitor. When I was using Eclipse on a single screen I would always put it on the larger screen to maximize space. But now I decided to move all the panels other than the code editor and file navigator to my laptop screen instead (which sits just to the left of my external monitor).

My current setup looks like this (this image is small, but full res images of each screen follow):

side_by_side

My main external monitor screen is the one on the right and is dedicated to viewing and editing code. I’ve stripped everything else out, and even stripped down the default Eclipse toolbar items to only those that I actually use on a daily basis.

Right screen (external monitor):

dualscreen_right_annotated

Left screen (laptop):

dualscreen_left_annotated

Now I always have a code editor that takes up the maximum amount of space I have. I originally tried moving the File Navigator to the left screen as well, but found that a) it was a bit of a pain visually to have to move my eyes to the left and then to the right after selecting a file, and b) it’s the vertical space that counts the most in the code editor, not maximizing all possible horizontal space.

So when I debug I use the debugger and variable inspector on the left screen to step through line by line, while viewing the actual code on the right.

I’ve setup 4 main perspectives that include a Debug and a Development perspective for both a single-screen setup (when I unplug) and a dual-screen setup. I have all those shown at the same time in the perspective switcher toolbar, so I can easily jump back and forth between them. Also shown in this screenshot are the Team Synchronization and SVN Repo Exploring perspectives and single and dual screen versions of the Flex Profiling perspective. These 8 perspectives are pretty much the only ones I ever use, and are always a single click away.

screenshot085

Drawbacks
The most annoying issue I’ve run into has to do with the popped out Debug window and how Eclipse manages window focus. Usually when debugging it works great, I click the step-over or step-into buttons in the Debug panel and it works just like I want. But sometimes (and I can’t figure out why) Eclipse decides that when I step over a line of code (or maybe it’s only when hitting a breakpoint) that the main code window should get the focus, which means that it takes a click on the Debug panel just to bring it back into focus, then a second click to step over the next line. It doesn’t sound like a big deal, but when you’re used to a single click always making the Debugger do the next step, and then that turns into two clicks, it gets really annoying and frustrating.

The only other drawback is that Eclipse isn’t smart enough to know that I have one perspective for my dual monitor setup and one perspective for when I unplug my laptop from the external monitor. So the default behavior when I unplug is to end up with something horrendous like this:
singlescreen_messedup

That’s easy enough to fix though, by simply right clicking on the perspective icon the toolbar and selecting “Reset”:
screenshot079

It also took a little getting used to to be able to share my attention between both screens and quickly scan my eyes back and forth. Usually I’m used to keeping my laptop screen for certain tasks (email, chat, RSS reading, etc), so I have a bit of a mental block against using both monitors for the same task. But I’ve gotten pretty used to that by now.

What about you?
I’m curious what other Flex developers do in terms of laying out their IDE. I’d love to see screenshots of what other people have figured out. I haven’t experimented with too many different dual-monitor layouts, the one I’m using now was sort of the first one I made on the fly and have stuck with. But if you have a better system then I’d love to see it!

Related:

  • The compiled list of code samples from our Flex for Dummies book have been posted on the dedicated Flex for Dummies page of my blog. Each chapter (other than chapters 1, 4, 19, and 20) contains source code samples, and you can browse through them all online or download the…
    Tags: code, flex, builder
  • This is a Flex component that adds a draggable bar between two slider thumbs. This is very similar to the "Dual Slider Component" developed by Brendan Meutzner that has been on Flex Exchange for a while now. I'm posting my version because 1) I created it a while ago without…
    Tags: flex, code, builder
Standard

25 thoughts on “What my Eclipse/Flex Builder setup looks like

  1. I really don’t get why you would want to use a whole monitor for your code editor. I mean, I see it as a waste of space because half (or more than half) of it is whitespace anyway. Unless you write extremely long lines of code.

  2. @mrm- it’s really about vertical size, not as much about horizontal space. The code editor, file navigator, and variable windows work best with as much vertical space as I can give them. The debug window and console work best with as much horizontal space as I can give them (for reading long log messages or reading stack traces). So that means I need to have horizontal components mixed with vertical components, which is why I move everything that needs horizontal space to the left. I could theoretically move the Variables pane to the right monitor without having much negative impact on the code editor, but none of the other panes work well on the right side. And since I use the Variables panel in conjunction with the Debug panel constantly, I want them as close together as possible, which is why I leave Variables on the left. If I had another panel that I used that needed lots of vertical space I could dock it on the right edge of the code editor, but I don’t have any other vertical panels I need.

  3. Erik Westra says:

    I only have my navigator on my left screen. And console as well. My web browser is on my left screen, so I can code and read the same time. The console will popup when it is needed anyway. So if it is in the way I close it.

    On the right hand side I have got outline shared with variables. When debugging I use the same screen. Over the whole width on the bottom I have problems on the left and history/search/debug on right hand side.

  4. @Erik – I used to have the console minimized (which would auto expand when needed), but I had a big problem with the way it worked. Whenever the console had a new message to show it would open (not a big deal) and steal focus from whatever panel had the focus (a huge deal). So if I was using the debugger to step through lines of code and something had a trace statement, it would open the console and steal focus, making me click back on the debugger just to get focus back and then again to continue my debugging.

  5. Didn’t know you can “spread” eclipse over two monitors. Good news! In any case I am still looking for a good way to optimize Flex builder visualization on my 15” macbookpro. I often end up with just the code, the console and the variables views, which is was I usually need.

    Trying to solve this problems I also elaborated some theories of mine about code design:

    – more than 4/5 files open (mxml or as) = you are on working on a specific problem. Close unneeded files.

    – Files longer than 100 lines = you sure you have “correctly designed” your classes? can’t you further break down your code?

    I think those are reflected in the way you organize views in your ide.

    My 2$

  6. I have three monitors and use all of them when I’m working in Flex Builder. What I like best is that I never need to switch perspectives. Just one does it all for me.

  7. What’s great is having a 30″ screen (which I wish I had) — one guy I know was actually frustrated at his large monitor size, until I showed him how to dock editors side-by each, so you can edit three files at the same time — or if you don’t need so much vertical space, dock them in a 3×2 matrix so you can edit 6 files at once. This is perfect for architecture-intensive tasks where you’re constantly switching between class files. A second perspective would give you all the debugging etcetera views you need.

    And if you have two monitors at equal resolution, you simply fullscreen Eclipse over the two monitors, assuming your OS lets you do that — that way you never lose your layout. I do this sometimes when I hook up my 24″ to my laptop (which actually have the same 1900×1280 resolution). And by having different perspectives configured for different monitor combinations, I can have one set of perspective for just the laptop, and another for laptop + monitor. Thing of beauty.

  8. I have the 22″ screen with the laptop setup as well. I’ve tried the split screen in the past but got sick of having to reset everything for when I just use the laptop. However, you’ve inspired me to try it out again, this time I’ve saved the double monitor setup as a custom perspective, and kept the original in tact. Seems to be working, and I can do the majority of my flex dev in debug mode now. Thanks for the post and gl with the Indi gig, I’ll see you there.

  9. Doug…. i have to know how to strip down the tool bar like you have in your set-up. I have only done a little digging but have been unsuccessful in finding the settings to remove stuff and slim down what is there.

  10. Pingback: Flex Monkey Patches » Blog Archive » Rubbernecker’s Review - Week 26

  11. @Matthew – when you right click on the perspective, go to Customize… then select the Commands tab within that properties panel. Then each item that is checked on the left defines both what items appear in the dropdown menus, as well as what items appear in the toolbars. You need to go through all the ones that are checked and see if they have tool bar items (the stuff that appears in the right box labeled “Toolbar details”). Remove any of the checked items you don’t want showing up in the toolbar.

  12. I had a coworker who thought dual monitors were an excuse for poor desktop management… maybe, but I really like my dual 24inch monitor setup. My editor takes up the entire main screen because I hate splitting lines when I can avoid it (horizontal does matter to me). My second monitor is in portrait mode. This gives me ample real estate for things that fit well in vertical space (navigator, variables, expressions). At the bottom of my vertical screen I have the console and problems windows docked together across the width.

    Getting used to the file navigator on a separate screen was wierd, and I was also bugged by the occasional double click on the debug window. This has gotten me in the habit of using the keyboard shortcuts (in Windows f5-f7 for debug stepping, ctrl-shift-r for Open Resource) which I have actually come to prefer over using the mouse.

    A 24-inch screen in portrait mode is also excellent for browsing blogs and API documentation.

  13. I am going to take a rash of shit for admitting this, so here it goes. I have a 24″ widescreen and have been fighting development at home using just the one screen and disabling my laptop screen (17″). What the hell was I thinking?! 🙂 Especially when I use dual monitors at work close to this setup.

    Read a blog and open your eyes; I guess.
    Thanks Doug, I am happily running 2 screens now and have tried some of your setup. I will run it for a week and see if I find any nice tweeks to contribute. You are right there is some weird focus going on in Eclipse, but now I do not have to worry about that as much.

  14. Coincidentally I started breaking out some of the panes onto the other monitor just before reading your post… still fiddling with the arrangement. This is on my main dev machine, a PC.

    I sometimes open a couple of shell windows on my networked Mac to edit source files in vi, for certain tasks that vi handles better than the code editor in Flex Builder. Of course FB notices those file updates and auto-builds if that is turned on.

    I’d REALLY like it if I could open the same project directory with FB on the Mac without the two of them fighting over who’s in charge!

  15. If your monitor hardware supports it, try rotating it 90 degrees so it’s taller than it is wide. It doesn’t seem like it would make that big a difference but it can give you 33% more vert. space on a regular 4:3 monitor!

  16. Michel says:

    When you remove the “Show Console When Standard Out Changes” and “Show Console When Error Changes”, I think the console window wont get focus anymore… at least not here.

  17. Sefi says:

    Hey doug,

    Really like your setup, only problem is that it’s workspace-specific.
    Do you know where the ‘Dual’ perspectives are saved, so they can be copied to other workspaces?

  18. Love the idea that you create different perspectives for when you’re in Duel monitor mode. That’s simple and brilliant. Can’t believe I didn’t think of that!

  19. Doug: hey.. first, great to see your work on the tour-de-flex. and how cool it is that we can utlize the dual montiors with flex builder this way… I was hoping there might be away to create a split screen for the code window?

  20. Pingback: 3D Power Sparks - Flex Builder 3 Provides a Split Screen

  21. I use a 2-monitor setup … it’s an arse when you change perspective but generally pretty SWEEET … also, I have alt-cmd-LEFT & alt-cmd-RIGHT setup as keyboard shortcuts for indenting code left & right. If you use this in combination with alt-ARROW KEY you have a nifty way of moving blocks of code around. By default Shift LEFT & RIGHT do not have keys assigned. My post tells you where to set this … http://blog.lyraspace.com/2009/03/02/handy-unassigned-keyboard-shortcuts-for-eclipse/

Comments are closed.