thb_aptana-snippetst

October 19, 2009

All, Productivity, Tutorials

Create Code Snippets in Aptana to Improve Productivity

Article written by Jeeremie

If you have been writing the same bits of code over again to develop Web sites or applications, this article is for you. Today, I will show you how to add or use existing snippets in Aptana 1.5. As the Aptana Team says, “The code Snippets feature in aptana lets you quickly insert small pieces of code into your HTML, CSS, JavaScript, and XML files. Snippets can save you time and hassle of typing out bits of code that you frequently use by adding them into your files by simply double-clicking the name of the Snippet.

Let’s get started

For this tutorial, I will assume you are familiar with Aptana and have installed it on your Computer. If not, you can download it for free here. As we speak, version is 1.5.

Launch Aptana Studio and open the Projects and Snippets Views (Window > Show View).
aptana-panels-projects-snippets

How to Use Code Snippets in your projects

You might not be aware of it but everytime you click on a button in your toolbar you are actually using a code snippet:
aptana-toolbar

Alternatively, you can just expand a folder in the Snippets view and double click a snippet or right click and “Apply snippet” to quickly insert a piece of code into your HTML, CSS, JavaScript, PHP, XML… files.

Edit an existing Snippet

If you want to edit a Snipppet, expand a folder in the Snippets View (e.g. HTML, CSS…), right-click on the snippet you want to edit and select “Edit Snippet”.

Add a new snippet (step by step tutorial)

For this tutorial, we are going to create a new HTML snippet to Wrap text with <a> and prompt users to type link url and title. Our snippet will generate this code: <a href="http://domain.com" title="Your Title Here" target="_blank" rel="nofollow">selected text here</a>.

  • To add a new Snippet, you must create a new folder named snippets in any top-level folder of your Project View. You only need to do this the first time you create a snippet.
  • In your snippets folder, create a blank HTML file and give it a name (e.g. wrap-with-a-options.html).

     

    aptana-new-file

     

  • In Snippets View, expand Snippet Templates and select “HTML Snippet Template”. It will open a dialog box and prompt you to enter the name of your Snippet (e.g. “Wrap with <a> (Options)”):

     

    aptana-snippets-templates

     

    Aptana will generate the following code for you on top of your HTML file:

    ?View Code HTM4STRICT
    1
    2
    3
    4
    5
    
    <!--
    	category: HTML
    	name: Wrap with <a> (Options)
    	toolTip: Wrap with <a> (Options)
    -->
  • Next, add your code snippet:

    ?View Code HTM4STRICT
    1
    2
    3
    4
    5
    6
    
    <!--
    	category: HTML
    	name: Wrap with <a> (Options)
    	toolTip: Wrap with <a> (Options)
    -->
    <a href="" title="" target="_blank" rel="nofollow"></a>
  • Now, we need create some variables to prompt users to enter url and title for the link they want to generate. We will use prompt(var_name): promptText where var_name is the name of the variable and promptText is the text that you want the Snippet to prompt the user with. Here how it goes:

    ?View Code HTM4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    
    <!--
    	category: HTML
    	name: Wrap with <a> (Options)
    	toolTip: Wrap with <a> (Options)
    	prompt(url): Enter URL
    	prompt(title): Enter Title
    -->
    <a href="${url}" title="${title}" target="_blank" rel="nofollow"></a>
  • We will go one step further and wrap our code around ${selection}. This will let you select the text you want to link:

    ?View Code HTM4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    
    <!--
    	category: HTML
    	name: Wrap with <a> (Options)
    	toolTip: Wrap with <a> (Options)
    	prompt(url): Enter URL
    	prompt(title): Enter Title
    -->
    <a href="${url}" title="${title}" target="_blank" rel="nofollow">${selection}</a>
  • Save your file. This snippet is ready to use and should now be filed in the Snippets View under HTML. To use it, place your cursor somewhere in a HTML file or select the text you want to link, and click twice on your snippet to insert it.

Add Snippet to toolbar (optional)

Following our previous example, we are now going to add our snippet to the toolbar:

?View Code HTM4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
<!--
	category: HTML
	name: Wrap with <a> (Options)
	toolTip: Wrap with <a> (Options)
	prompt(url): Enter URL
	prompt(title): Enter Title
 
	toolbar: true
	icon: com.aptana.ide.snippets/icons/link.png
	language: text/html
-->
<a href="${url}" title="${title}" target="_blank" rel="nofollow">${selection}</a>

toolbar : if set to “true”, show snippet in toolbar
icon : relative path to icon toolbar item. (default path: com.aptana.ide.snippets/icons/)
language : MIME type of content to wich this item is related. Options: text/html, text/css, text/javascript…

Unfortunately, there seems to be no easy way to add your own set of icons. This has been reported in a ticket and we just have to hope someone will work on this. However, all is not lost. Icons are stored in a JAR archive: C:\Program Files\Aptana\Aptana Studio 1.5\plugins\com.aptana.ide.snippets_1.5.0.24896.jar\icons in Windows (please note path to this folder might be slightly different for you). Copy your icons to this folder and change the name of your icon in the code above and it will appear in toolbar (you will have to restart Aptana first).

The End Result

In the screenshot below, you can see the new icon in the toolbar on the right. Select the text you want to link, click on the button and you will be prompted to enter the url and title for this link:

aptana-wrap-with-a-end-result

Last word

I hope you enjoyed this tutorial. Do not hesitate to share your snippets with us in the comments.

Smashing Magazine put together a great list of code snippets repositories. Check their article: 45+ Excellent Code Snippet Resources and Repositories

And you? What software or application do you use to store your snippets?

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Want to become a guest author on this blog?

7 Comments

  1. Fird says:

    24 Oct, 2009

    Fantastic tip! I’m using Aptana mainly and this helps tons!

    Thank you!

  2. Lalit says:

    29 Oct, 2009

    A good content for reusing the code

  3. Stephane says:

    31 Oct, 2009

    Excellent! I didn’t know you could create new snippets with Aptana.
    Thanks.

  4. Webdesign Thailand says:

    24 Jan, 2010

    I’ve been using Coda for long time. Aptana is a good free alternative (for Mac, of course). I didn’t know it’s this great until now. Thanks for introducing this to me!

  5. Dalius says:

    20 Feb, 2010

    Nice! I need to try Aptana, never used it before. Looks really promising…

    Great tutorial, very easy to understand :)

    Thanks.

  6. Ville says:

    14 May, 2010

    Like your new site – great work!

    • Jeeremie says:

      14 May, 2010

      Thanks Ville. I didn’t want to launch it before I was 100% satisfied :)

Leave a Reply

Sorry, comments are closed