<!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>
iris.UI Class
=============
UIs define the view of the application.
Template is a pasive HTML file.
```html
<div style="margin-left: 20px;">
<h2>I am an UI (created at <span data-jq-text="date">now</span>)</span>
<button data-id="btn-create">create nested UI</button>
<button data-id="btn-clear" style="display:none;">clear nested UI</button>
<div data-id="container"></div>
</div>
```
Presenter is a JavaScript file and defines the view logic.
```javascript
iris.ui(function (self) {
self.create = function() {
self.tmpl(iris.path.ui.my_ui.html);
self.inflate({date: iris.date(new Date(), 'H:i:s')});
self.get('btn-create').click(function() {
self.ui('container', iris.path.ui.my_ui.js, {}, self.APPEND);
self.get('btn-clear').show();
});
self.get('btn-clear').click(function() {
self.destroyUIs('container');
self.get('btn-clear').hide();
});
};
}, iris.path.ui.my_ui.js);
```
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) & [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.
#### UI life cycle
UIs can implement four life cycle methods:
* `create()` is where you initialize your UI. Most importantly, here you must call to `self.tmpl()` with a template resource defining in the iris.path, and you can use `self.get()` 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.
* `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 UI dying.
```javascript
iris.ui(function (self) {
self.create = function() {
console.log('create');
self.tmpl(iris.path.ui.example.html);
};
self.awake = function (params) {
console.log('awake');
};
self.sleep = function () {
console.log('sleep');
};
self.destroy = function () {
console.log('destroy');
};
}, iris.path.ui.example.js);
```
#### self.tmplMode(mode)
*Since*: `v0.5.0`
Sets the template mode. This method must be called before the *tmpl.method*.
The possible values are:
* `self.APPEND` : Adds the UI to as the last element in the container.
* `self.PREPEND` : Adds the UI to as the first element in the container.
* `self.REPLACE` : Replace the container with the UI template. This is the default behavior.
*
#### self.ui(container_id[, path, settings, tmpl_mode])
*Since*: `v0.5.0`
Create a new UI Component and replaces or adds it to the container.
Example:
In the template of the parent:
```html
...
<div data-id="ui_container"></div>
...
```
In the presenter of the parent:
```javascript
...
self.ui("ui_container", iris.path.ui.my_ui.js, {name: "John"}, self.APPEND);
//The name parameter may be recovered in my_ui's presenter with the *self.setting* method.
...
```
For help about the *templateMode* parameter see *self.tmpl* method.
Since `v0.5.2` you can use `self.ui(<data-id>)` to retrieve UIs, e.g.:
- When the UI has template mode == `self.REPLACE` (default)
```js
iris.screen(function (self) {
...
self.create = function () {
self.ui("example", iris.path.ui.example);
}
function example () {
self.ui("example").sayHi();
}
...
}
```
- When the UI has template mode == `self.APPEND`
```js
iris.screen(function (self) {
...
self.create = function () {
self.ui("example", iris.path.ui.example);
self.ui("example", iris.path.ui.example);
self.ui("example", iris.path.ui.example);
}
function example () {
// Destroy the first UI for example
self.ui("example")[0].destroyUI();
}
...
}
```
#### self.destroyUI([ui_component])
*Since*: `v0.5.0`
Destroy the UI component. If `ui_component` is not specified, destroy the current UI (auto-destroy).
```javascript
var my_ui = self.ui("ui_container", iris.path.ui.my_ui.js);
self.destroyUI(my_ui);
```
```javascript
// Auto-destroy
self.destroyUI();
```
#### self.destroyUIs(container_id)
*Since*: `v0.5.0`
Destroy all the UI in a container.
```javascript
var my_ui = self.ui("ui_container", iris.path.ui.my_ui.js);
self.destroyUIs("ui_container");
```
### iris.locale([locale][, regional])
*Since*: `v0.5.0`
Defines or gets the locale format.
You can use the [available locales](../localization).
```javascript
//Example of regional definition. Sets de locale to "en_US" if locale is not set:
iris.locale(
"en_US", {
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
dateFormat: "m/d/Y h:i:s",
currency: {
formatPos: "s n",
formatNeg: "(s n)",
decimal: ".",
thousand: ",",
precision: 2,
symbol: "$"
},
number : {
decimal: ".",
thousand: ",",
precision: 2
}
}
);
```
```javascript
//To set the locale
iris.locale("en_US");
//To get the current locale
var locale = iris.locale();
```
### iris.date(date, format)
*Since*: `v0.5.0`
Formats a Date object or timestamp to the specified format and according to the current locale.
See [Language & Regional](https://github.com/thegameofcode/iris/blob/master/docs/api.md#language--regional) for more information.
You can use the following special characters:
* __a__ 'a.m.' or 'p.m.'
* __A__ 'AM' or 'PM'
* __b__ Month, textual, 3 letters, lowercase. 'jan'
* __d__ Day of the month, 2 digits with leading zeros. '01' to '31'
* __D__ Day of the week, textual, 3 letters. 'Fri'
* __F__ Month, textual, long. 'January'
* __h__ Hour, 12-hour format. '01' to '12'
* __H__ Hour, 24-hour format. '00' to '23'
* __i__ Minutes. '00' to '59'
* __l__ Day of the week, textual, long. 'Friday'
* __m__ Month, 2 digits with leading zeros. '01' to '12'
* __M__ Month, textual, 3 letters. 'Jan'
* __n__ Month without leading zeros. '1' to '12'
* __s__ Seconds, 2 digits with leading zeros. '00' to '59'
* __U__ Seconds since the Unix Epoch (January 1 1970 00:00:00 UTC)
* __y__ Year, 2 digits. '99'
* __Y__ Year, 4 digits. '1999'
```javascript
iris.date(new Date(),"ymd");
iris.date(1331954654564,"d/m/y h:i:s"); // "17/03/12 04:24:14"
iris.date("Thu Feb 14 2013 12:42:49 GMT+0100 (CET)", "d-m-Y"); // "14-02-2013"
```
iris.path = {
"screen": {
"welcome": {
"html": "welcome.html",
"js": "welcome.js"
}
},
"ui": {
"my_ui": {
"html": "my_ui.html",
"js": "my_ui.js"
}
}
};
$(window.document).ready(function () {
iris.baseUri('./');
iris.locale(
"en_US", {
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
dateFormat: "m/d/Y h:i:s",
currency: {
formatPos: "s n",
formatNeg: "(s n)",
decimal: ".",
thousand: ",",
precision: 2,
symbol: "$"
},
number : {
decimal: ".",
thousand: ",",
precision: 2
}
}
);
// 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);
self.ui('container', iris.path.ui.my_ui.js);
};
}, iris.path.screen.welcome.js);
<div>
<h1>Nested UIs</h1>
<div data-id="container"></div>
</div>
iris.ui(function (self) {
self.create = function() {
self.tmpl(iris.path.ui.my_ui.html);
self.inflate({date: iris.date(new Date(), 'H:i:s')});
self.get('btn-create').click(function() {
self.ui('container', iris.path.ui.my_ui.js, {}, self.APPEND);
self.get('btn-clear').show();
});
self.get('btn-clear').click(function() {
self.destroyUIs('container');
self.get('btn-clear').hide();
});
};
}, iris.path.ui.my_ui.js);
<div style="margin-left: 20px;">
<span>I am a my_ui UI (created at <span data-jq-text="date">now</span>)</span>
<button data-id="btn-create">create nested UI</button>
<button data-id="btn-clear" style="display:none;">clear nested UI</button>
<div data-id="container"></div>
</div>