Writing your own Titanium Studio Snippets

Today, I’m going to write a short tutorial on how to write your own snippet using Titanium Appcelerator. What are snippets you say? Well a code snippet is a programming term for a small region of re-usable source code, machinecode or text. Normally snippets when defined into an IDE or editor (that’s supports em) will appear in auto-completion / auto assist when users are typing in a snippet like trigger word. For example, if you have a snippet that triggers from the word “info”, just by typing info, the auto assist popup will appear suggesting user to use the code snippet.

Snippets are very useful and should always be shared or placed in a common and centralized place like dropbox, somewhere in the net I find it easier to access as I travel from workplace to another. Not only this improves your coding speed but also improves your quality output by reducing error made in typos and such. I have a general rule of making a snippet, if the code is so useful and you find yourself repeatingly using it.. then, please code it into a snippet bundle.

Appcelerator Titanium Studio is an IDE modified fork from the IDE called Aptana IDE. They both support ruby like bundle as their snippet programming language. For those using Aptana IDE, I think this tutorial works for that IDE as well. To write snippet bundle scripts, one needs to learn a little bit of ruby code. Don’t worry is not that hard only a few lines to get things done – in fact you can just copy paste code from here then modify the parameters if you like. Some important note to remember before starting…

• First off, we need to know how Titanium Appcelerator accesses it Snippet Bundle Source File. It is always located at your Users /documents/Aptana Rubles/ folder. This folder will be created once, you installed Titanium Appcelerator.
• You also need to enable the bundle Viewer. This allows you to check to see if your snippet bundle is successfully “recognized” by the IDEand that there’s no error in the lines of code which prevents the snippet from triggering. Follow steps below to enable the Viewer.
  1. Go to Window > Show View > Other…
  2. Expand the Studio category
  3. Select the Bundles item
     A view appears showing all currently loaded bundles
  4. You should see the bundle with the name you gave above in the list
  5. For detailed information on selected items in the Bundles View, go to Window > Show View > Other…
  6. Expand the General category
  7. Select the Properties item
  8. A view appears showing detailed information on your Bundles View selection
     If your bundle has an error, you should see output in the Console view.
• Next just Create a folder, in /documents/Aptana Rubles/ , and a ruby file called bundle.rb inside this folder.

Start by adding this code to your bundle.rb file. Code below shows, the “definition of your snippet group”. Notice, that once you save your file, it will appear somewhere in the bundle viewer, (sorted in alphabetical order).

require 'ruble'

bundle do |bundle|
  bundle.display_name = 'My Snippets'
end

• Next, let’s add the code Titanium.API.info(something) into our snippet, since we also use that for displaying stuff in console.

snippet "API Info" do |snip|
  snip.trigger = "API.info"
  snip.expansion = "Titanium.API.info(${1:variable});"
end

• snip.trigger, is what the IDE is constantly looking for to trigger this snippet. In my case, I wanted the snippet to appear once, I type API.info
• snip.expansion is where all your actual snippet code will be.Notice I added ${} into the code, this means to place the cursor within after inserting, and 1:variable the word “variable” can be anything you defined it to be, is just for your reference and it will appear in code assist and the number 1 means is expecting 1st input, if there’s more than one, just add in another number, the IDE will jump from another variable input to another after user hits enter. However these are optional and most of the snippets doesn’t even need an input parameter assist.
• To add new snippet simply, add copy paste the snippet “API Info” do… to end line to a new line and modify from there
• Last thing you should know about snippet is that, sometimes, they failed to load and this may due to cache file corrupted. This cache is created automatically, by IDE. To clear the cache of the snippet file, just move the cache.yml to the trash and relaunch the IDE.

I hope this tutorial helps you titanium developers out there, to speed up your development to at least 3 fold haha as it did to mine. CODE STRONG! Happy holidays and have a great year ahead!

[source]