A step-by-step tutorial to build a new extension

**François Marchal** · 04-24-2012 01:21 PM

Here is a little tutorial to show you how to create your own Wakanda extension.

I got the idea after using the JSLint extension. I found on Douglas Crockford website another cool tool named JSMin http://www.crockford.com/javascript/jsmin.html which could be very handy to make faster website.

So I decide to create an extension to minify javascript source code in Wakanda, based on Douglas Crockford tool.

The first point is that original source code is written in C. I could of course compile it on both Mac and Windows, then use a system worker to launch the application.

.

Hum.... before doing that, let's see if someone has not translated this source code in javascript

Let's google "JSMin in javascript"... http://www.google.fr/search?q=jsMin+in+javascript

Bingo! Here is an online minifier based on Douglas Crockford work! http://fmarcia.info/jsmin/test.html

Interesting, let's see source code of the web page...

Code:

<head>
	<title>JS Minifier</title>
	<script type="text/javascript" src="fulljsmin.js"></script>
	<script type="text/javascript">

Now let's see the source code... http://fmarcia.info/jsmin/fulljsmin.js

So, here it is, I save the file on disk and now have a "fulljsmin.js" file on my computer that seems to do in javascript what original C source code of D. Crockford does. And good new, I can use it because it still uses the original Crockford Licence, "The Software shall be used for Good, not Evil.".

That's fine, I want to use it in this little tutorial, which is obviously for Good

**François Marchal** · 04-24-2012 01:56 PM

OK, now we have the raw material for the extension, let's go deeper in the extension system and build our own.

Let's open the Wakanda Studio folder, and open the "Extensions" folder.

Click image for larger version

Name: extensionFolder.jpg
Views: 14
Size: 21.5 KB
ID: 439

Every extension is based on a folder, so let's create a JSMin folder, and drop our "fulljsmin.js" file into.

Now, we need to create two mandatory files, "manifest.json" and "index.js". They are the two masterpiece of an extension.

Let's duplicate them from the JSLint folder. We now have :

Click image for larger version

Name: start.jpg
Views: 11
Size: 20.7 KB
ID: 440

**François Marchal** · 04-24-2012 03:07 PM

OK, let's edit now the manifest. We can open it of course using Wakanda

We can quickly edit the first fields of the file to make it match our new JSMin extension.

Code:

		"name": "JSMin",
		"version": "1.0.0",
		"description": "Wakanda Studio JSMin extension",
		"icon": "jsmin.png",

Now we have a "senders" section, that shows all the places where the extensions commands will be called. We want only one, with just a button in the code editor toolbar.

So let's keep only the first sender, and edit it as following :

Code:

		"senders": [
					{
						"location": "codeEditorToolbar", 
						"tips": "Make your code smaller for faster execution",
						"actionName": "minify"
					}
		],

It means that the action "minify" will be sent by a button in the code editor toolbar. No need to specify a title or an icon for the button, it will use by default the extension icon ("jsmin.png") and the title will be given by the action.

Now we can go to the second part of the manifest, describing the action.

Let's edit the first action of our original file, and remove the others.
We change the name and title for the following:

Code:

		"actions": [
					{
						"name": "minify",
						"title": "JSMin",
						"targets":["com.netscape.javascript-source"]
					}
		],

We now have a complete manifest, with one action named "minify", that will address only Javascript files. This action will be called from a button of the code editor toolbar.

**François Marchal** · 04-24-2012 03:21 PM

And now we need to finally write the code of the extension itself.

An extension is a module, where a "handleMessage" function is called each time an action is called. In the "message" parameter, we have a field "action" with the action name.

But first, we need to include in our file the "fulljsmin.js" file.

So the first line of our source code will be

Code:

include("fulljsmin.js")

We now need to write the handleMessage function, and check when it is called with a message.action named "minify".

Code:

exports.handleMessage = function handleMessage(message) {
    if (message.action == 'minify') {

    }
}

Now we have the body of our extension, we are ready to write the action code!

First we need to get the content of the editor, so let's browse documentation: http://doc.wakanda.org/Wakanda-Studi...901574.en.html

We see that "currentEditor" is the object representing the current code editor where the action occured, and we have all we need to get the text, set the selection and insert some text, using "getContent()", "selectFromStartOfText()" and "insertText()". The object "currentEditor" belongs to the object "studio", which represents the Wakanda Studio application.

The "fulljsmin.js" file we include exposes the "jsmin" function we will call with the content of our source code.

So we can now write our code!

Code:

exports.handleMessage = function handleMessage(message) {
    if (message.action == 'minify') {
        var original_code = studio.currentEditor.getContent();
        var smaller_code = jsmin(original_code, 2);
        studio.currentEditor.selectFromStartOfText(0, 1000000);
        studio.currentEditor.insertText(smaller_code);
    }
}

And that's it !!!!

**François Marchal** · 04-24-2012 03:41 PM

That's now the artistic moment of our work, designing the icon. I use the JSLint icon, and edit it to get this. Note the 4 states of the icon, displayed in one picture. The icon is 32x32, which makes with the 4 states a 32x128 picture. We use a .png with a mask.

Click image for larger version

Name: jsMin.png
Views: 7
Size: 3.2 KB
ID: 441

Ok now we can run our Wakanda Studio, open a JS File, and watch our new extension on the code editor toolbar!

Click image for larger version

Name: jsmin.png
Views: 7
Size: 6.8 KB
ID: 442

Time to see how it works on my source code... Ready to click ?

Click image for larger version

Name: jsmin.jpg
Views: 14
Size: 17.2 KB
ID: 443

And OMG ! NO ! What happens to my code

Click image for larger version

Name: jsmin.jpg
Views: 20
Size: 37.9 KB
ID: 444

I hope you enjoyed this little tutorial, and that it will give ideas to write your own

**François Marchal** · 04-24-2012 03:47 PM

JSMin.zip

Here is the zip file with the extension described in this tutorial.

**Ibtissam OMALA** · 04-24-2012 04:16 PM

thank you François for this tutorial, i will try it this night

**djdancy** · 05-09-2012 04:55 AM

This is great - thanks François. Does the extension minify the whole Wakanda framework? Or just the current project?

**François Marchal** · 05-09-2012 08:24 AM

This extension just minify the content of the current code editor.

I already made some improvements to make my extension work at file level, allowing to minify a whole code file and creating a xxx-min.js file beside a xxx.js file.

Your idea is great, it could be also easily modified to minify the whole project. I will write a new tutorial to explain how to apply extensions action at both file and project level.

**djdancy** · 05-10-2012 02:03 AM

François

My projects are not yet at the point where I think they would benefit greatly from being minified. However, the WAK framework itself looks like it would. Do you know if it has already been minified, or if there are plans to do so? It would help a lot in delivering mobile solutions over 3G. I find that the startup cost of downloading WAK for the first time is around 20 seconds on my 3G and I'm hopeful that this would improve substantially if it were minified.

Thanks!

Secondary menu

Thread: A step-by-step tutorial to build a new extension

Thread Tools

Search Thread

Display

A step-by-step tutorial to build a new extension

Creating extension folder

The manifest file

The index.js file

Running our extension!

Tutorial material

Posting Permissions