Zen Coding for Aptana….nice little plugin!

So, I’m finally getting away from Dreamweaver. There is no point to using it anymore anyway, since I never use the design view. Sure it does some things well, and it is for sure the absolute best WYSIWYG editors out there. I’ll use it for some things, but from now on, I’m going with Aptana. Its free and very customizable. I like the way it handles CSS and Javascript. You can create a new project and choose what js libraries you want to include into it. Very cool.

Its not very intuitive, and I’ve had to get a lot of help, but all-in-all, I’m diggin’ it. So, for those that actually already use it, this is for you.

Zen Coding is a nice little plugin with some real crap documentation. I only know how to do a few things with it so far, which I’ll let you know how to do.

First things first….get the plugin here (they have a ton of versions for different frameworks…including Dreamweaver.

Here is how to install it…follow this closely.

  1. Install EclipseMonkey using update site: http://download.eclipse.org/technology/dash/update (you can skip this step if you have Aptana installed)
  2. Create top-level project in your current Eclipse workspace, name it, for example, zencoding
  3. Create scripts folder inside newly created project
  4. Extract contents of downloaded zip plugin into this folder.
  5. Restart Eclipse/Aptana if needed

Soooo…..what do you do with it? Let’s say you want divs with ids of: container, header, content, and footer. Click in the file you are working in where you want these to appear, and type this:

div#container>div#header>div#content

Select it, go to Scripts>Zen Coding>Expand Abbreviation….and you get:

<div id="container">
    <div id="header"></div>
</div>

Now lets say you actually wanted an unordered list with 5 list items containing a tags within the content div….you would type this instead:

div#container>div#header>div#content>ul>li*5>a

and you get:

<div id="container">
    <div id="header">
         <div id="content">
<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>
        </div>
    </div>
</div>

Now, if you wanted a bunch of divs that were not children of each other, you would do this:

div#left+div#right

So…..the + is for non-children elements, > is for children elemts, * is for multiple elements within an element.

At the moment, that is all I’ve worked through. I’ll add more as I find them out. Again, the documentation for this is garbage.

One thing to note, the shortcut keys were not what I wanted….they were set to Command + whatever. I wanted Alt….sooo follow these instructions to change them:

“There’s a Key command describing current shortcut, which is M3+E in this case (M3 stands for Alt). Just change this shortcut and save the file.”

Well, mine was set to M4 when i installed it…so I actually changed it to M3. Which as it says, means Alt.

Have fun with it! And if you know more about it, please let me know.

Leave a Reply