Today, I’m gonna 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 (thats supports em) will appear in autocompletion / 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.

Titanium Appcelerator 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 IDE and 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
   A view appears showing detailed information on your Bundles View selection
8. If your bundle has an error, you should see output in the Console view.
• Next just Create a folder, in /documents/Aptana Rubles/ <your snippet folder name – anyname of your choice> ,  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!

Today’s tutorial, I’m covering on how to write a simple Loader class in AS3 to load external image. Why the hassle? Well loader Class is useful to load lots of stuff, image being one of em – loading externally thus, swf size is reduced.

You can then design your movieclip with nice spinning preloader animation while waiting for image to load externally. See swf below is the sample.

package  
{
	// Importing all the class needed for the job.
        import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
	/**
	 * Description : A Simple Class to Load External Images.
	 * URL : http://www.isgoodstuff.com
	 * @author Alex T.
	 **/
	public class Main extends MovieClip
	{
		public var mcPreloader:MovieClip;
		public var mcContainer:MovieClip;
		public var myImgLoader:Loader = new Loader();
 
		public function Main() 
		{
			// Inside the flas contains two onStage movieClip named mcPreloader and mcContainer.
			// Once the image is loaded, mcPreloader will disappear and mcContainer will be used
			// to contain the new image. (Jessica Alba's Pic)
			myImgLoader.load(new URLRequest("http://www.isgoodstuff.com/wp-content/uploads/2011/11/sample.png"));
			myImgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleLoadCompleted);
		}
 
		private function handleLoadCompleted(evt:Event):void {
			mcPreloader.visible = false;
			// Once loaded, you can set it's height and width
			myImgLoader.width = 300;
			myImgLoader.height = 300;
			mcContainer.addChild( myImgLoader );
		}
 
	}
}

For Today’s Tutorial click on the link below…

Download Here

Over the weekend, I’ve been doing javascripting and some one messaged me on how to write an encapsulating javascript functions which is a common practice in web development nowadays. Especially when we involved in mobile where memory and processor is critical

I remember around 8 years ago when, javascript was just a simple procedural language used for web development then it evolved into DHTML which we can use to make cool effects. Later, comes AJAX and wonderful js frameworks we had today.

Today this script language evolved into some kind of magical development language of wonders – you can even write a full mobile to desktop app using this scripting language with the help of cross compilers.

Because of that, developing a javascript application can lead to complex scripting due to huge number of variables and objects you control.

Therefore for best practice sake,

1. You need to keep your javascript functions in main webpage as minimal as possible and js files must be as human readable as possible. e.g. <script src=”calculate.js”></script> should at least have calculate related functions in it like  ”calculate.sum( myNumberList );” so that, is easy to use calculate.js like an util file.
2. Don’t pollute the global scope! – A complex javascript script will have alot of variable flowing everywhere thus polluting the global scope and making it easier to read. (this means, we don’t overuse var VariableName everywhere in our js file – put in an encapsulated js instead) To control that, we use encapsulated function. An Encapsulated function are  more than a function, less than a traditional OOP class but better than nothing .
3. There’s several ways I found can achieve this but, I’m gonna list this one first because is one of my favorites.

What is a self-triggering function?, Self -triggering function is a function construct which fires straightaway. We normally use that for “container” – to contain variables, and related functions.

Here is how to write a self triggering function,

(function(){
	alert('fired immediately');
})();

Let’s write a chained self triggering function. Follow the code below.

var trigger = function(){
       alert('chained function');
}();
 
//try calling it using
trigger();
// and compare with
trigger;

Noticed, the behaviour of trigger, is no longer regarded as function in browser. In-fact, if you use trigger(); you will get an error in firebug. Notice also that, when you just call trigger without brackets, and yet it fires the function. This is how we do our namespace in encapsulating js.

Let’s work on other namespace – this time with proper function, namespace are used to clearly define and separate our javascript so that, same function names and variables don’t get mixed up. It’s like writing a class with methods all encapsulated within.

var calc = function(){
    return {};
}

The code above simply creates a function that returns nothing. We normally use this as our namespace starter/definer. Then, we proceed further with writing a specific function / method like construct e.g. calc.sum.

Note calc.sum is undefined, if you do not declare a namespace starter/definer which is a chained self-triggering function in memory that returns nothing.

//Secondary Namespace calc.sum - wrapped using self triggering function
calc.sum = function(){
	/* private variables only to calc.sum see how variables are kept within */
	var value1 = 0;
	var value2 = 0;  
 
	// private method to calc.sum
	function calc(){
	var sum = parseInt(value1) + parseInt(value2);
	    return sum;
	}
 
	// public functions
	return {
	    init: function(external_value1, external_value2){
	         this.setValue1(external_value1);
	         this.setValue2(external_value2);
	    },
 
	    setValue1: function(val){
	        value1 = val;
	    },
 
	    setValue2: function(val){
	        value2 = val;
	    },
 
	    getSum: function(){
	       // calling an internal private function
               // (requires no "this.")
		return calc();
	    }
	}
}();

Now, we have a “class util” like javascript, and everything is kept within…isn’t that neat?

To use, we simply need to init it.

//init calc.sum which requires two integer,
calc.sum.init(10,30);
alert(calc.sum.getSum());
// should return you 40

Today’s tutorial in HTML :

Download Here

Ever wonder, is there an easier way instead of making loops and check for every hitTest with all sorts of  shapes and sizes? Well, may I present to you – Collision Detection Kit!

Check out CDK in action below!

Developing games like Shooter in As3 can be boring without good explosion effects. Over the weekends, I ported a simple class ( from As2 )which does some randomized explosion movie-clips.

This is to be used when there’s an explosion in the game. The class allows you to create explosion effect based on number of particles, size of distance and alpha. All you need is to instantiate it and pass in the variables needed. See sample below.

Download the source here, when you use make sure you have to use the movie-clip from the library folder as well.

Every wonder that, there’s something to display your run-time variables smoothly without using the laggy trace.

Not to say trace command is useless, but at times is much less cpu intensive to debug values especially on enterFrame run time to an on screen textbox instead of using trace.

But, lately I stumbled upon a good console interface like debugger called Flash Console in a form of as3 class package!

Aside from the being able to watch your values real time , it also came with various handy feature such as.

• Command line
• Display info/properties checker (known as Roller)
• RunTime Measurement Ruler

All you need to do is to import the class into your main.as and attach C (the singleton class) method startOnStage.

import com.atticmedia.console.C;
C.startOnStage(this, "");
 
// To debug a value
C.info(variableName);

If you are interested click here to get it .