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

Reply to Thread >
Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Team Member
    Join Date
    May 2011
    Location
    Montgrésin, France
    Posts
    37
    Thread score
    -1

    1

    +1

    You must log in to vote for this post.

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

    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

  2. #2
    Team Member
    Join Date
    May 2011
    Location
    Montgrésin, France
    Posts
    37
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

    Creating extension folder

    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

  3. #3
    Team Member
    Join Date
    May 2011
    Location
    Montgrésin, France
    Posts
    37
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

    The manifest file

    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.

  4. #4
    Team Member
    Join Date
    May 2011
    Location
    Montgrésin, France
    Posts
    37
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

    The index.js file

    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 !!!!

  5. #5
    Team Member
    Join Date
    May 2011
    Location
    Montgrésin, France
    Posts
    37
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

    Running our extension!

    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

  6. #6
    Team Member
    Join Date
    May 2011
    Location
    Montgrésin, France
    Posts
    37
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

    Tutorial material

    JSMin.zip

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

  7. #7
    Team Member Ibtissam OMALA's Avatar
    Join Date
    Mar 2012
    Location
    Clichy, France
    Posts
    646
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

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

  8. #8
    Junior Member
    Join Date
    May 2011
    Location
    Sydney, Australia
    Posts
    24
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

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

  9. #9
    Team Member
    Join Date
    May 2011
    Location
    Montgrésin, France
    Posts
    37
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

    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.

  10. #10
    Junior Member
    Join Date
    May 2011
    Location
    Sydney, Australia
    Posts
    24
    Post score
    -1

    0

    +1

    You must log in to vote for this post.

    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!

Reply to Thread >

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Copyright © 2013 4D - All Rights reserved