Category Archives: html5

Dartlang for devices with Rikulo

Posted on by

While working with Rikulo is as straight forward as working with any other packages of Dart, to make this work in devices, one has to keep following things in mind.
First of all “Rikulo” itself is not capable of doing device level development, rather it depends upon “phonegap” (now cordova) and to compile against this, there is another package named “Rikulo Gap“. So the basic pub setup looks as this.

dependencies:
  rikulo:
  rikulo_gap:

Once installed the development process is straight forward as Dart itself while taking advantage of the Cordova APIs.
Upon completion of the development process, jump into “Dart to Javascript” compiler and generate the javascript file for the project. Fortunately thats as simple as going to “Tools” menu and clicking “Generate Javascript” in the Dart Editor. One has to select the “.dart” file first, for which the javascript file has to be generated. Upon successful generation of the file, the generated file name would be something like “myProject.dart.js”.
Now you have to add this “js” file in your “html” file like the usual “script” tag. That means to deploy to Cordova, you have to add two script tags as below.

Once done, open up the Eclipse or which ever IDE you are using to develop the Cordova (phonegap) applications, copy the “.html” and “.js” file into the respective folders of the Cordova project.
Lastly, but most importantly, remove the version number from the cordova JS file (for example cordova-2.3.0.js to cordova.js).
Now we have a workable native application built with Dart, Rikulo and Cordova.

Happy Darting !

Dartlang, the basics

Posted on by

The basic things, which will help one, moving ahead in the Dart language are as below.
Its class based.
Every class has got a constructor. If one is not written, its been added by the language itself.
Constructor is not inherited.
Multiple constructors are possible.

Private properties are written with an underscore. 

int _age=20;

The getter and setter are just methods with “get” and “set” added before it. 

int get userAge{}

Inside a string the if something is written between “${” and “}” that value will be evaluated and appended to the string. 

 'Person is of age ${j.userAge}'

Hope that helps to get you started in the language.

Two absolutely necessary Node packages, within a week of Nodding

Posted on by

As my learning continues with NodeJS, it is now becoming obvious to me that probably I could never live without Node in future from now on, even if I do not continue developing on NodeJS. In just about a week there are the below two packages which became absolutely necessary for me in day to day work, while doing front-end web work or just playing around with javascript in general.
serve
nodemon
These two enable any folder to act as a web server. Once installed from “npm” one can directly fire up these commands and see the folder as a website through a browser.
If you want to run the webserver at port “1234″, just navigate to the folder you want to serve as a website and fire up the command below.

serve -p 1234

If you do not care about the port, just

serve

will do the job, where the site will be served at a default port “3000″.
Now to access the website go to “http://localhost:3000/” in your favorite browser.
If you change a file, you have to manually restart the server.
Now “nodemon” helps us in automatically restarting the server on any file change. If one is working on any web application and does continuous changes to the files, one just have to refresh the webpage (No need to restart the server over and again for updates). That gives continuous focus on development.
Happy Nodding :)

NME 3.2 is released

Posted on by

This seems to be one of the most active projects. The last beta release and this final release of NME 3.2 is a proof of that.
Well with this release it is now confirmed that NME supports SWF assets to publish to SWF and C++ targets. This is just one of the many advantages one get while using NME.

The new project file improvements are noted here.
Again I am putting the same here for a quick reference.

Happy haXe -ing

haXe : Conditional compiling

Posted on by

A nice and exciting feature about haXe is conditional compilation. That means one can specify which code to compile depending upon the target chosen at the compile time. Hah, that does not make sense ? Ya, I know. Let me explain again.
There is a compiler and while providing argument to it we have to specify which target we are compiling to. Like in case of haXe and NME we can compile it to a lot of different targets. The compiler argument for flash or swf output looks as below

haxelib run nme test app.nmml flash

Now we can compile the code to HTML5 with the following argument

haxelib run nme test app.nmml html5

Thats the beauty of the language. Most of the time its the same code, but then there are times when we need to write different codes for different targets (may be layout, view elements, can be anything). But then one does not need to keep a separate project for all the different cases. The solution is conditional compiling. What it does is depending upon the target type specified to compiler, it picks up the right code from the same file. Whoaa!! Magic :)
How does it do it or how we make it aware of this ?! You asked it. Lets see it.

#if flash
//Code for SWF output
#elseif js
//Code for HTML5/js output
#else
#end

Thats simple. Its one file, completely in itself, but when it comes to compiler it picks up the right code part depending upon the target type.

One thing to remember though, that when specifying HTML5 target, it picks up conditions from “js”, it does not have a “html5″ option. This particular thing took me sometime to figure out. Just thought would point out here saving someone’s time out there.

Happy haxe -ing :)

NME 3.2 Beta is here

Posted on by

This is another exciting release of NME. And with this comes the support of SWF directly. Though its only for creating SWF and C++ targets but thats huge (Windows, Mac, Linux, Android, iOS, webOS), only thing not present is HTML5.

Now I am waiting to get my hands dirty with the new version.

The official blog entry.
A tutorial for the SWF support.

Happy haXe -ing :)

haXe : adding image to a project

Posted on by

Well, while its all well and good to create graphics and animations on runtime with code. We must agree that there are situations, when we need to external images in our project. This is done by defining a tag in our .nmml file. The exact thing looks as below.

<assets path="src/assets/" rename="assets/all/" include="*"></assets>

In the tag above we are defining that all the files inside “src/assets” folder will be copied over to our final project under folder “assets/all”. Thats one part of the story. Now in our haXe code, we access the assets with their path as below.

import nme.Assets;//import the Class
var img:Bitmap = new Bitmap (Assets.getBitmapData ("assets/all/home.jpg"));//get the asset

The code above the pretty self explanatory. First we need to import the “nme.Assets” and then use it to get the asset into our project. Things to note, while providing path to access the resource, its the “renamed” path we define in the “XML” while adding the asset.
Happy haXe -ing

haXe : doing a regular update and NME

Posted on by

This came to me as a surprise while trying to write a script, which can run in iOS, HTML5, Flash and Neko. I knew it can be done by cross-compiling through NME to all these target platforms. While this hold good almost in every case but when it comes to regular stage update or the ENTER_FRAME event, it is a problem.
Well, if you are a flash developer and depend on ENTER_FRAME event for a long time, then it may come to you as a surprise like me. The game loop as the gaming engines call it, now has to be worked upon. Fortunately we have a timer function in haXe and that quite fits the game.
Before going ahead in timer, lets see the unreliable nature of ENTER_FRAME for all targets. Firstly I was creating different circles in stage area with an ENTER_FRAME, while that worked well in all platforms, I thought its good to go for all. But then I tried to rely upon the same ENTER_FRAME event with a drag and drop and position change of the elements. Whoa!! That does not work! I stopped relying on the ENTER_FRAME event and changed that with Timer and everything is back in the action again.
The haXe timer code is a little different than Flash timer and the code looks as below.

var timer = new Timer(10); //10 is the time difference in milliseconds between the timer call
timer.run = onEachTimerTick;//its kind of event listener
function onEachTimerTick():Void {}

For me, ENTER_FRAME event only worked for Flash targets and nothing else. So be careful if you want to target other delivery methods.

Happy coding!