Aptana Zen Coding

[serge.che]

Hello,

I've just released a first beta for Aptana Zen Coding — a new way of hi-speed writing of HTML-code.
The idea of this project is to use CSS-like syntax (like modern JavaScript frameworks do) for writing large code blocks. For example:

Code: Select all

div#content.wide.column>h1+ul#nav>li.item$*5>a

will be expanded into

Code: Select all

<div id="content" class="wide column">
   <h1></h1>
   <ul id="nav">
      <li class="item1"><a href=""></a></li>
      <li class="item2"><a href=""></a></li>
      <li class="item3"><a href=""></a></li>
      <li class="item4"><a href=""></a></li>
      <li class="item5"><a href=""></a></li>
   </ul>
</div>


with just a single keystroke. You can see Aptana Zen Coding in action at YouTube and download it from Google Code.

How to install
Install is as a regular AptanaMonkey script (described in Aptana Docs). You shoud see Zen Coding menu item inside Scripts view and menu.

Customizing
You can add your own code snippets and tags inside settings.js file.

[IceBox]

I've just released a first beta for Aptana Zen Coding — a new way of hi-speed writing of HTML-code.

Very, very cool!

I see it useful in creating on-the-fly html for the mockup pages.
The syntax, replicating Sizzle syntax, jQuery selector, is very nice.

Congrats,
IceBox

[exceptione]

@serge.che
This is the most valuable contribution I've ever seen. This really helps. In eclipse there is the concept of user-defined templates that can be filled in by tabbing over the hooks, but you take it a mile further. Really nice. I hope you will keep improving this add-on/in, it is much appreciated!!!!!!

The characters in the youtube video are unreadable, even with HD on. The textmate video on http://pepelsbey.net/pro/2008/08/zen-html/ is clear and give a good impression though.

tnx!

[Psy]

@serge.che
This is the most valuable contribution I've ever seen. This really helps. In eclipse there is the concept of user-defined templates that can be filled in by tabbing over the hooks, but you take it a mile further. Really nice. I hope you will keep improving this add-on/in, it is much appreciated!!!!!!

Totally agree. As jQuery did to Javascript, this concept can really make a change on the way we code HTML. The use of CSS-like expressions is clever and easy to memorize. Well done!

[serge.che]

@serge.che
I hope you will keep improving this add-on/in, it is much appreciated!!!!!!

I'm working hard on new version, adding new features and extending editors support. The latest version is in the SVN: http://code.google.com/p/zen-coding/sou ... unk/aptana

PS: sorry for poor video quality, I'll make a new one when the next version comes out.

[imageaid]

This looks fantastic. I'm curious if there's a way to install in either Eclipse 3.4 (Studio plugin)? I can't seem to find any Eclipse Monkey information on 3.4 and wasn't sure how to go about installing it, unless I just can't. Sure looks awesome though!!

[serge.che]

This looks fantastic. I'm curious if there's a way to install in either Eclipse 3.4 (Studio plugin)? I can't seem to find any Eclipse Monkey information on 3.4 and wasn't sure how to go about installing it, unless I just can't. Sure looks awesome though!!

You just need to install Aptana plugin on Eclipse 3.4, create sample project (for example: ZenCoding), create 'scripts' folder and extract Zen Coding zip-file in it and you're fone. Also, you might need to refresh workspace/project to let Aptana know that there are new script files.

[imageaid]

That's awesome. Thank you! I'm going to try that this morning. Thanks for your hard work on this. It truly looks amazing (I also installed the TextMate bundle for when I'm using it on non-project related files ! ). Cheers! Craig

[imageaid]

For those, like me, who haven't delved into the Aptana Scripting world yet (i.e., Eclipse Monkey, etc.), when you setup your base project, I used ZenCoding per serge's suggestion, make sure you name your folder scripts (plural-with the 's' at the end). Then, refresh your workspace and/or restart Aptana.

Finally, and this is what I did not know, you can use the Zen Coding features in ANY project! I thought, incorrectly, that it would only be available for the project in which it is created. Nope! It's across all your projects (including PHP files, which I thought was cool). Also, I installed this and have just tried it in Andretti Alpha 2 without any issues.

Thanks, again!

[serge.che]

This script works in all Aptana editors by default. It tries to determine current region's content type (i.e. HTML, CSS, XML) and use appropriate snippets. If it can't determine content type — nothing happens.

Zen Coding currently supported by all Aptana editors and XSL editor from Eclipse WTP Project (there are unknown issues XML editor of this project). But you can add support for all Eclipse editor by doing the following:

1. Open 'Expand Abbreviation.js' file
2. On line 24 replace this:

Code: Select all

var editor_type = zen_coding.getEditorType();

on this:

Code: Select all

var editor_type = zen_coding.getEditorType() || 'html';

3. Save the file
4. You may also need to refresh project and Scripts view to make sure that Aptana reloads script.

That's it, now Zen Coding can be used in all Eclipse editors (it was tested on PDT PHP Editor, Spket IDE, Ant Editor).

[pabbec]

Thanks serge.che! It's a very cool tool!

Congratulations!

Pablo

[bobdobs]

The zen-coding scripts are awesome!
Thanks!

I'm having a problem though: I can't seem to use the keyboard shortcut.

When I use Alt+E, the 'edit' menu in the eclipse toolbar becomes active.
I can still use the zen-coding from scripts menu, but I'd really like to use the shortcut. Or, at least configure a usable shortcut.

I suspect that this might have to do with my window-manager.
I am using gnome under ubuntu 9.04.

Does anyone know how I can make Alt-E work ?

Thanks.

[serge.che]

Read Aptana Help about how to change keybinding: http://www.aptana.com/docs/index.php/Ad ... key_script

[wazp]

I suspect that this might have to do with my window-manager.
I am using gnome under ubuntu 9.04.

Does anyone know how I can make Alt-E work ?

It took me a while, but finally found a way. You need to edit the gtkrc file of the theme you are using (resides under /usr/share/themes/<theme>/gtk-2.0/gtkrc

Add this line to the end of this file:
gtk-enable-mnemonics = 0

Please note that you need to be superuser to edit this file so use gksu or regular su from a terminal to open the file.

This will disable the alt-<letter> mnemonic shortcut in Ubuntu, so it doesn't take the keypress and shows the menu. After that just logout/login and you can happily press alt-e in Aptana to get the, if I may say so, fabulous Zen Coding to work

[dd09]

UPDATE: nevermind... I obviously forgot the 'lib' folder lol...