iio Quick Start Guide


Get the Development Tools

Before you get started developing HTML5 apps with iio, you'll need:

The iio Engine JS File

Download right here: iioEngine.min.js (also included in the SDK)

A Solid Text Editor

I would recommend Sublime Text 2. Its free until you decide to buy it, has code hinting, and it can make your whole monitor look like this:

SublimeText2

Another good option is Notepad++. It's also free (and you never have to buy it), and it also has some pretty cool skins.

A Web Browser

You already have one of these, you are using it right now. Any modern (HTML5 compatible) web browser will do.

That's it. Lets make an app.

 

Hello iio


We're going to make our first iio Application. We'll create an app that draws "Hello iio" onto the middle of our screen.

Create a new folder somewhere called Hello iio and put the iioEngine JavaScript file into it.

Now create a new HTML file called hello-iio.htm in that folder.

Open this new file in your text editor and input this code:

<!doctype html>
  <body>
    <script type="text/javascript" src="iioEngine.min.js"></script>
    <script type="text/javascript">
        //application script...
    </script>
  </body>
</html>

This code defines an HTML document, loads the iio Engine, and then opens up the script area where we will code our app.

We now need to define a main application function. Put this line where the 'application script' comment is now:

Helloiio = function(io){
  //application code...
};

This is an iio App main function. The parameter io refers to our AppManager, which is a structure that will help us manage all of our application's assets.

Creating a Text object can be done in two simple steps: create the object, then give it to our AppManager.

These steps can be written in the same line of code. Replace the 'application code' comment in the previous sample with this:

//Give our AppManager a new text object
io.addObj(new iio.Text('Hello iio!!', io.canvas.center)
    .setFont('30px Consolas')
    .setTextAlign('center')
    .setFillStyle('black'));

All thats left to do is to start our app. Put this code after the closing bracket of the Helloiio function:

iio.start(Helloiio);

Now open the HTML file in a web browser.

Hello, and welcome to iio Engine development.

The full HTML file:

<!doctype html>
  <body>
    <script type="text/javascript" src="iioEngine.min.js"></script>
    <script type="text/javascript">

        Helloiio = function(io){

          io.addObj(new iio.Text('Hello iio!!', io.canvas.center)
              .setFont('30px Consolas')
              .setTextAlign('center')
              .setFillStyle('black'));

        }; iio.start(Helloiio);

    </script>
  </body>
</html>
 

Next Steps


If you've never coded before or aren't too familiar with HTML and CSS, I'd recommend reading through the HTML & CSS Tutorial.

If you are new to JavaScript programming, or want a step-by-step walk through of the development of a full iio Application, you should check out the Tic Tac Toe Tutorial.

If you have some JS experience and want to jump right in to a more complex application example, check out the Scroll Shooter Tutorial.

If you have an app in mind already and want to just get started working on it, read through the iio Basics documentation page, or just check out the demos for some quick code samples.