I will go on putting the details of my learning in the coming posts, but for the time being if one needs to play around the codes, please download and start researching.
Keep in mind that every language has its own way of doing things and the more ignorant you become (at least pretend to become) about other languages while picking up one, the faster you will master the one you are studying.
The example and source files convey, how to make and use your own javascript library, how to make a reusable Object in javascript (i am not saying to make a Class here, but a reusable Object, there is a very big difference in those two), how to make a basic CSS3 usage of rounded corners, multiple shadows, custom fonts and text shadows.
This is kind of looking at javascript from a fresh perspective. It does not assume you to know anything about it. Knowing another scripting language is always an advantage to know things better but sometimes it may come to a negative effect. If you know anything before, its better to assume you do not know that so that we can get up to speed in javascript as quickly as possible.
I hope you have a basic understanding of how to include external javascript and css files inside an HTML document. If not, then please go ahead and follow the posts mentioned below for a quick understanding. Introduction to HTML Getting used to the terms Getting into web design action
Lets setup our experiment with the files listed below
index.html
general.css
saumyaJS.js
general.js
Now, the code inside index file is as below
Hello World.
Hello you, this is JS.
Here we are clearly adding all the CSS and JS files into it. The “general.js” file is where we are going to write the experiment codes. The “saumyaJS.js” is kind of a library we are going to write so as to know the javascript basics and help the experiment. The first line of javascript library includes the JQuery library, if you are not sure about it now, do not worry, just remember that I have used it to select HTML elements from my index.html file. And the JQuery library itself is a huge project,so we will get to that in a future post may be.
First and the most important thing is variables in javascript. They are by default “Global”, that means if we define a variable as
a="name";
b=2;
c="message";
Then all these variables are global variables by default. That will allow anyone to access these variables from anywhere. Well, to make local variables we have to define them with “var” keyword. So the definition will go as
var a="name";
var b=2;
var c="message";
Well as you can already guess that there is no restriction in datatype for a variable. And the scope of these local variables are inside a function. In short javascript variables have function level scope. Now lets define a function and add some local variables into it,
myFunction=function(){
var d=0;
var firstName='saumya';
counter = 1;
alert('reset');
};
That means anywhere we need to call this function, we have to call it as below
myFunction();
Thats simple as we define a function with name “myFunction” and invoked it with “myFunction()”. Thats how a function is called.
Now one thing to understand and know is, its better to add as little as possible in global scope. Its a best practice and saves a ton of headache later in the development process. Now in our previous example, we are adding the variable “myFunction” in the global scope. But the variables “d” and “firstName” are in local scope. But then the variable “counter” is in global scope!! Thats the scary part of it. Yeah, anything without a “var” keyword is exposed to Global scope.
The previous example showed how to make a function with a name. It is possible to make a function without a name also, those are called anonymous functions. And since we know, to call a function we have to use “()” at the end of a function, the code below describes how to define an anonymous function and call it.
//makes anonymous function
function()
{
//Code for function
};
//make the anonymous function and call it at the same time
function()
{
//Code for function
}();//look at the "()" at the end of the function definition
The problem here is, once the function is called and executed, everything inside the function along with the function itself is not accessible any more. In order to get a reference to the function itself, we need to store it with some name. Thats where the named function comes into picture, that we have seen already as to how to define a named function.
Next we want to make an anonymous function, call it and then save the returned value of the function. A function can return value by using a “return” keyword. Example of a function which returns a value is as below
var myFunction=function(){
return 5;
}();
Now we have a variable named “myFunction” with a value of 5. This is simple but as you can imagine this return type can be anything. The code below shows how to return an “Object”.
var myFunction=function(){
return {one:'fistName',two:'lastName'};
}();
Now “myFunction” simply contains an object with properties “one” and “two”. If we want to access these properties, the call would be as below
myFunction.one;
myFunction.two;
With these knowledge we can write something like below,
var saumyaJS=(function(){
// --------------- Define -----------------------
var a,b,c,d,e;//define properties and methods
// --------------- Configure --------------------
a='saumya';
b='ray';
c=function(msg){
d++;
alert(d+':'+msg);
};
d=0;
e=function(){
d=0;
alert('reset');
};
// --------------- Expose -------------------------
return {
firstName:a,
lastName:b,
show:c,
reset:e
};//expose the properties and methods to outer world
}());
Here simply some local variables are defined, then configured them with values and finally whatever needs to be exposed to outside world, is retuned.
Whoaa!!! We have simply written a simple Javascript library.
If you look into the code a little bit, then its visible that the variable and functions inside the main function is accessible only by the names they are given at the time of returning. If one needs to access the value of “a” from outside then the call would be
saumyaJS.firstName;
But if one tries to access the value as
saumyaJS.a;
then one will get “undefined”!! This is how encapsulation works or simply, how one can hide values of an object in javascript.
This is a very basic concept of javascript, but I think this is the most important concept of javascript too.
Now we can see that whatever we want to access, we have to access through the “saumyaJS”, everything inside that function is not exposed outside or there is no more than one variable exposed to the outside world.
It’s very exciting to see these people at geek mentors doing a nice job porting angrybirds to a local version.
Flash is not always about flashplayer, its much more than that if we really follow the philosophy of Flash community. These guys at this startup began their career in Flash, but as of any cool dude in Flash, they always tried to push the technology and dove into new platforms for the learning and broadening the horizon. They are hungry for technology and fun, both at once.
The momentum is always there for fun and learn new things all the time. The work never seem to be complete but then they never seem to rest that does not mean they are working under pressure, that means simply they keep on working for what they love. Apart from developing games for Apple appstore, there is a quality mentoring option for people who want to learn things the fun way by doing it. The best part is there is no project manager to manage you, come to work and do it by how you want to do.
There is a heavy investment on new technology learnings. When the world was fighting for whether to Html5 or Flash, this new startup solely concentrate on GameSalad. A solid platform for publishing your games to IPhone, iPad and even HTML5. The point is if there is a tool which can produce quality applications, why fight over how many lines of code one need to write in a particular platform! GameSalad link for Angry Anna : http://www.angryanna.com/
The content below is kind of an interview with the company
Introduction of the team :
Mohd Shah Nawaz : Co-Founder,
Mohd Faisal: Co-Founder,
Himanshu Himthani: Art Director,
Abhishek Chawla: Production Lead.
Ajay Joshi: Educational Advisor
Experience till now : Don’t know what to write…..
Vision : At Geek Mentors Studios, our vision is to be the best company in the world–in the eyes of our customers, shareholders, communities, Employees and people.
I learned it the hard way that once you have a site up and running its better to keep a backup of the same locally in your machine. There are chances that the whole of the content might get erased!! You call it a server failure, no backup plan or anything, but the end result would be loosing all your content along with the conversations. In my quest to get a simpler and straight forward backup plan, I found this nice plugin for WordPress, called “WordPress Backup to Dropbox“. This plugin allows a direct, scheduled backup of the site to Dropbox. All one has to do is, schedule the time and frequency of backup and thats all, everything else is simply automated.
Hope that helps someone out there.
While learning OpenPlug|Studio and diving into the code, my third Android application is here. Its a simple drawing board, kind of slate. As an user one has option to select different color and pen thickness for drawing on it. Again a simple but usable application, which can be downloaded from this link.
The source code is availbale at Github too.
After my first application for Android with OpenPlug|Studio, I tried my hands on game development with it. So here is the basic Tic-Tac-Toe game done with it. The source code is available at GitHub.
Well, I must say if you are developing for Android, then it cannot be one size fit all. Every device is of different configuration in terms of screen size, resolution and capabilities.
This is again a wild trip, a sudden decision and a fast move I must say if you want to feel real India, go with a friend, to his/her own place. Nothing like getting the raw experience. And if you do that, I am sure you will be amazed by the Indian tradition, hospitality and the thousand year old culture we still preserve on our country. Kerala, often know as “The God’s own country” is truly stand up to its name. If you are by any chance in Bangalore, then there are buses and trains to reach the place. And my destination was Kannur.
View Larger Map
And I was travelling from Bangalore, so it was 9 hours journey in a bus on an average, though it took us 12 hours to reach as of traffic.
I was all tired and restless, but once we reach the place and spend some minutes there, then suddenly I regained the energy!! Well, its all nature every where and I mean every where. We went through trees all the time with narrow road and this is just beautiful experience. At night we visited local club and I am glad, people have just accepted me apart from the language barrier. I could not speak / understand Malayalam so my friend became the translator. Thanks a lot to him.
Next day was the visit to the sea, beaches and the town. We travelled with a motorbike and the pictures tell a thousand words!
First time ever I was in a beach where one can drive bikes,scooters or four wheelers.
Amazed to see the beauty.
The same river, which I rafted earlier in my first water rafting experience, is grown in width and I saw it here too. The small river, flowing through the hills with its massive potential of forces, is grown to a huge river, some what calm and widespread.
Then the spring and the diving experience in it, is just one has to experience.
The atmosphere was cold, i was expecting chilling cold water in the fountain, but it was kind of warm water!!
Nature surely knows how to manage things and what best fits everyone.
This is again a wild trip, a sudden decision and a fast move I must say if you want to feel real India, go with a friend, to his/her own place. Nothing like getting the raw experience. And if you do that, I am sure you will be amazed by the Indian tradition, hospitality and the thousand year old culture we still preserve on our country. Kerala, often know as “The God’s own country” is truly stand up to its name. If you are by any chance in Bangalore, then there are buses and trains to reach the place. And my destination was Kannur.
View Larger Map
And I was travelling from Bangalore, so it was 9 hours journey in a bus on an average, though it took us 12 hours to reach as of traffic.
I was all tired and restless, but once we reach the place and spend some minutes there, then suddenly I regained the energy!! Well, its all nature every where and I mean every where. We went through trees all the time with narrow road and this is just beautiful experience. At night we visited local club and I am glad, people have just accepted me apart from the language barrier. I could not speak / understand Malayalam so my friend became the translator. Thanks a lot to him.
Next day was the visit to the sea, beaches and the town. We travelled with a motorbike and the pictures tell a thousand words!
First time ever I was in a beach where one can drive bikes,scooters or four wheelers.
Amazed to see the beauty.
The same river, which I rafted earlier in my first water rafting experience, is grown in width and I saw it here too. The small river, flowing through the hills with its massive potential of forces, is grown to a huge river, some what calm and widespread.
Then the spring and the diving experience in it, is just one has to experience.
The atmosphere was cold, i was expecting chilling cold water in the fountain, but it was kind of warm water!!
Nature surely knows how to manage things and what best fits everyone.
Talking about one code base and multiple devices is a tricky affair. In that case there are various frameworks and platforms which strive to do that. One of the most beautiful platform I found is OpenPlug|Studio. Well, being an Actionscript developer and working on Flex SDK, one will certainly feel at home with OpenPlug|Studio. Being said that, there are some very subtle differences to consider while creating applications with this platform compared to Flex itself.
1. Its loosely based on Flex 3 SDK. That means there are things like “mx” components like “WindowedApplication” is present in it. The work flow is similar to any Flex 3 based project. But then it is recommended to use “mob” namespace based components for they are mobile optimized for almost all devices. Again this OpenPlug|Studio SDK, which is known as Elips SDK only supports a subset of Actionscript 3.
2. Almost all the “mob” components are final classes. The immediate effect is one can not extend native “mob” components to create a new component.
3. The display object containers do not include “MovieClip”.
4. Using the available flex/actionscript frameworks is a strict no, as to one will end up writing the whole framework again for this OpenPlug|Studio (Elips SDK). For this ElipsSDK is a subset of Actionscript 3.
5. I was trying to open an image in the device with the default photo viewer application on Android, but then at the end came to know that this is not possible. Though Elips SDK provides the component, which can display the photo. I think, that indicates we can use Elips SDK to view images, run videos/audios with SDK components but can not directly force the default players/viewers of the device to launch the files.
6. About the “List” component I have already shared my views in the blog post earlier. Just use a default “ItemRenderer” to use the “List” component for the time being, until the Elips SDK fixes the bug.
7. Accessing the file system is a little tricky! I was trying to access file system of an Android phone , both phone memory and SD card memory. While the document says, it could be accessed as
Path to access memory card is: app-storage:/ExternalStorage/
Path to access internal memory is: app-storage:/InternalStorage/
In AIR, it corresponds to subfolder in app-storage:/, to keep Flash compatibility for simulation.
But in reality I could never get into the file system with them. The in-phone memory access I still have to find a way, the SD card file system can be accessed as
var extFolderPath:String = File.applicationStorageDirectory.nativePath+ "ExternalStorage";
var externalFolder:File=new File(extFolderPath);
8. Javascript can be used inside the Application with “script” tag as
mx:Script source="test.js"
This is interesting as from inside javascript file one can access the components with their “id” as one accesses them in Actionscript. But take care not to use any javascript libraries here as this is not DOM manipulation we are doing but using javascript syntax to do our Application. I have not tested the loose typing metaphor of javascript with a project, will update when I do that.
9. The OpenPlug|Studio is a free IDE and it works on both Mac and Windows. There is a plugin version, which could be installed over a FlashBuilder and a standalone version which could be installed separately without any dependencies. And the forum at the OpenPlug|Studio site is quite active, though it may not be instant but at least you will get your answers within a decent amount of time.
I thought would put my experiences here, so as to it may help someone out there with similar kind of problem.
Talking about one code base and multiple devices is a tricky affair. In that case there are various frameworks and platforms which strive to do that. One of the most beautiful platform I found is OpenPlug|Studio. Well, being an Actionscript developer and working on Flex SDK, one will certainly feel at home with OpenPlug|Studio. Being said that, there are some very subtle differences to consider while creating applications with this platform compared to Flex itself.
1. Its loosely based on Flex 3 SDK. That means there are things like “mx” components like “WindowedApplication” is present in it. The work flow is similar to any Flex 3 based project. But then it is recommended to use “mob” namespace based components for they are mobile optimized for almost all devices. Again this OpenPlug|Studio SDK, which is known as Elips SDK only supports a subset of Actionscript 3.
2. Almost all the “mob” components are final classes. The immediate effect is one can not extend native “mob” components to create a new component.
3. The display object containers do not include “MovieClip”.
4. Using the available flex/actionscript frameworks is a strict no, as to one will end up writing the whole framework again for this OpenPlug|Studio (Elips SDK). For this ElipsSDK is a subset of Actionscript 3.
5. I was trying to open an image in the device with the default photo viewer application on Android, but then at the end came to know that this is not possible. Though Elips SDK provides the component, which can display the photo. I think, that indicates we can use Elips SDK to view images, run videos/audios with SDK components but can not directly force the default players/viewers of the device to launch the files.
6. About the “List” component I have already shared my views in the blog post earlier. Just use a default “ItemRenderer” to use the “List” component for the time being, until the Elips SDK fixes the bug.
7. Accessing the file system is a little tricky! I was trying to access file system of an Android phone , both phone memory and SD card memory. While the document says, it could be accessed as
Path to access memory card is: app-storage:/ExternalStorage/
Path to access internal memory is: app-storage:/InternalStorage/
In AIR, it corresponds to subfolder in app-storage:/, to keep Flash compatibility for simulation.
But in reality I could never get into the file system with them. The in-phone memory access I still have to find a way, the SD card file system can be accessed as
var extFolderPath:String = File.applicationStorageDirectory.nativePath+ "ExternalStorage";
var externalFolder:File=new File(extFolderPath);
8. Javascript can be used inside the Application with “script” tag as
mx:Script source="test.js"
This is interesting as from inside javascript file one can access the components with their “id” as one accesses them in Actionscript. But take care not to use any javascript libraries here as this is not DOM manipulation we are doing but using javascript syntax to do our Application. I have not tested the loose typing metaphor of javascript with a project, will update when I do that.
9. The OpenPlug|Studio is a free IDE and it works on both Mac and Windows. There is a plugin version, which could be installed over a FlashBuilder and a standalone version which could be installed separately without any dependencies. And the forum at the OpenPlug|Studio site is quite active, though it may not be instant but at least you will get your answers within a decent amount of time.
I thought would put my experiences here, so as to it may help someone out there with similar kind of problem.
so that we can get up to speed in javascript as quickly as possible.
that does not mean they are working under pressure, that means simply they keep on working for what they love. Apart from developing games for Apple appstore, there is a quality mentoring option for people who want to learn things the fun way by doing it. The best part is there is no project manager to manage you, come to work and do it by how you want to do.
