<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://rawgithub.com/thegameofcode/iris/v0.6.0/dist/iris.min.js" type="text/javascript"></script>
<script src="iris-path.js" type="text/javascript"></script>
<script src="init.js" type="text/javascript"></script>
</head>
<body></body>
</html>
Hello World Iris
================
In this plunk we are going to learn the minimal elements of an Iris app.
### iris.baseUri([path])
*Since*: `v0.5.0`
Set the base URL applied to load Iris components like screens, UIs & resources.
```javascript
// You can define paths as
iris.path = {
screen : {
js: "./path/to/iris/components/screen.js",
html: "./path/to/iris/components/screen.html"
}
};
// Or you can use iris.baseUri to short paths
iris.path = {
screen : {
js: "screen.js",
html: "screen.html"
}
};
iris.baseUri("./path/to/iris/components/");
```
### iris.welcome(path)
*Since*: `v0.5.0`
The welcome screen is the root of all screens.
You must define always the welcome screen in your initial script.
This function establishes the welcome screen and navigates to it.
```javascript
// All Iris applications start in the welcome screen
// Remember to define iris.path before
iris.welcome(iris.path.welcome.js);
```
### iris.screen(function(self){...}, path)
*Since*: `v0.5.0`
Defines a Screen component.
```javascript
iris.screen(
function (self) {
//Called once when the Component is created
self.create = function () {
self.tmpl(iris.path.screen.example.html);
};
//Called when the Component is showed.
self.awake = function () {
...
};
//Called when the component is hidden because you navigate to another Screen
self.sleep = function () {
...
};
//Called before sleep()
//If the method returns false, the navigation is interrupted and not hidden nor self.seelp method is called
//This method only is applied to the Screens components
self.canSleep = function () {
...
};
//Called when the component is destroyed
self.destroy = function () {
...
};
}, iris.path.screen.example.js
);
```
### iris.Screen Class
Inherits methods from [iris.Component](https://github.com/thegameofcode/iris/blob/v0.6.0/docs/api.md#iriscomponent-class), [iris.Settable](https://github.com/thegameofcode/iris/blob/v0.6.0/docs/api.md#irissettable-class) and [iris.Event](https://github.com/thegameofcode/iris/blob/v0.6.0/docs/api.md#irisevent-class) classes. See [Iris Class Map](https://github.com/thegameofcode/iris/blob/v0.6.0/docs/api.md#iris-class-map) for more details.
#### Screen life cycle
There are four methods almost all screens will implement:
* `create()` is where you initialize your screen. Most importantly, here you will usually call <code>self.tmpl()</code> with a template resource defining your UI, and using <code>self.get()</code> to retrieve the components in that UI that you need to interact with programmatically.
* `awake()` is where you can add event listeners, execute intervals or initialize heavyweight tasks as play sound or video.
* `canSleep()` is called before self.sleep() function. If this returns `false`, the navigation is interrupted and the self.sleep() mehod is not called.
If the method returns false, the navigation is interrupted and not hidden nor self.seelp method is called
* `sleep()` is where you deal with the user leaving your screen. Most importantly, remove event listeners or stop heavyweight tasks.
* `destroy()` is where you will perform operations after screen dying.
```javascript
iris.screen(function (self) {
self.create = function() {
console.log('create');
self.tmpl(iris.path.screen.example.html);
};
self.awake = function (params) {
console.log('awake');
};
self.sleep = function () {
console.log('sleep');
};
self.canSleep = function () {
console.log('canSleep');
return true;
};
self.destroy = function () {
console.log('destroy');
};
}, iris.path.screen.example.js);
```
#### self.param(name)
*Since*: `v0.5.6`
Retrieve the parameter value using the parameter name.
You can define pretty URLs using path & matrix parameters.
E.g. navigate to the welcome screen with matrix params (`#;paramName=paramValue`):
```js
// Welcome screen
iris.screen(function (self) {
self.awake = function () {
...
console.log( self.param("paramName") ); // prints "paramValue"
...
}
}, iris.path.screen.welcome.js);
```
E.g. navigate to a example screen with path params (`#/user/1234`):
```js
// Welcome Screen
iris.screen(function (self) {
self.create = function () {
...
self.screens("screens",[
[ "user/:user_id", iris.path.screen.user.js]
]);
...
}
}, iris.path.screen.welcome.js);
// User screen (iris.path.screen.user.js)
iris.screen(function (self) {
self.awake = function () {
...
var id = self.param("user_id"); // id == "1234"
...
}
}, iris.path.screen.example.js);
```
#### self.screens(container_id, screens)
*Since*: `v0.5.0`
Registers Screens and allows to navigate to them.
This method can be called once for each component.
```javascript
self.screens("screens", [
["home", iris.path.home.js],
["help", iris.path.help.js]
]);
//The first parameter is the data-id attribute of the container
```
You can register screens with path params and the `/` character is also allowed, e.g.:
```javascript
// Welcome screen
iris.screen(function (self) {
self.create = function () {
...
self.screens("screens", [
["user/:user_id/detail", iris.path.screen.user_detail.js],
["user/:user_id/friends/list", iris.path.screen.friends.js],
["user/:user_id/friend/:friend_id/detail", iris.path.screen.friend_detail.js]
]);
...
}
}, iris.path.screen.welcome.js);
// Friend detail screen
iris.screen(function (self) {
self.awake = function () {
...
// If the current hash is: #/user/1234/friend/4321/detail
var userId = self.param("user_id"); // "1234"
var friendId = self.param("friend_id"); // "4321"
...
}
}, iris.path.screen.friend_detail.js);
```
### self.tmpl(path)
*Since*: `v0.5.0`
Loads the template of the component into the DOM.
This method must be called in the *self.create* method.
Example:
```javascript
// UI
iris.ui(function(self) {
...
self.create = function () {
self.tmplMode(self.APPEND);
self.tmpl(iris.path.ui.login.html);
}
...
});
```
```javascript
// Screen
iris.screen(function(self) {
...
self.create = function () {
self.tmpl(iris.path.ui.login.html);
}
...
});
```
**Mode**: When *self.APPEND* or *self.PREPEND* are passed as the third parameter, the template container will not be replaced with the template, otherwise the container will be replaced by the template. The default mode is *self.REPLACE*.
iris.path = {
"screen": {
"welcome": {
"html": "welcome.html",
"js": "welcome.js"
}
}
};
$(window.document).ready(function () {
iris.baseUri('./');
// show the initial screen
iris.welcome(iris.path.screen.welcome.js);
});
iris.screen(function (self) {
self.create = function() {
self.tmpl(iris.path.screen.welcome.html);
};
}, iris.path.screen.welcome.js);
<div>
<h1>Hello World!</h1>
</div>