1 | # XJS
|
2 | ## View
|
3 | In all this document, we will call __special object__ any object with an implicit attribute name.
|
4 | That is any object with an attribute named __"0"__, like `{boolean init: true}` for instance.
|
5 | Other objects, strings, numbers and so on are called __standard values__.
|
6 |
|
7 | * [`focus`](xjs.view.focus.md): Bind the focus of an element to a linkableproperty.
|
8 | * `innerhtml`: Bind a property to the innerHTML of an element.
|
9 | * `textcontent`: Bind a property to the text content of an element.
|
10 | * `value`: To use with INPUT, TEXTAREA, ...
|
11 | * [`view.attribs`](xjs.view.view.attribs.md): Define linkable attributes of the view.
|
12 | * `view.debug`: Boolean used to activate/deactivate the debug mode.
|
13 | * `view.id`: .
|
14 | * `view.init`: The function (defined in the code behind) to call just after construction.
|
15 | * [`view.statics`](xjs.view.statics.md): Define static functions on the View.
|
16 | * [`view.prototype`](xjs.view.prototype.md): Define member functions on the View.
|
17 | * [`view.children`](xjs.view.view.children.md): Bind children of an element to an array or a list.
|
18 | * `attrib.<names>`: .
|
19 | * [`class.<names>`](xjs.view.class.md): Add a CSS class depending on the value of a bound boolean.
|
20 | * [`class.*`](xjs.view.class.md): Add CSS classes depending on values of a bound booleans.
|
21 | * [`event.<event-name>`](xjs.view.event.md): Adding events and gestures handlers.
|
22 | * [`on.<attrib-name>`](xjs.view.on.md): Call a function from code behind as soon as the attribute's value changed.
|
23 | * `style.<name>`: .
|
24 | * [`{Bind ...}`](xjs.view.bind.md): .
|
25 | * `{Intl ...}`: Get internaTionalisazion string.
|
26 |
|
27 | ### Code behind
|
28 | Even if XJS.View has been made as powerful as possible, there are still cases where Javascript code is needed.
|
29 | Here is a dummy example to show you how to use code behind. The view will add a new line when its `value` attribute will be set.
|
30 |
|
31 | __foobar.js__
|
32 | ```js
|
33 | var CODE_BEHIND = {
|
34 | onValueChanged: function( value ) { this.$.appendChild( document.createTextNode( value + "\n" ) ); }
|
35 | };
|
36 | ```
|
37 |
|
38 | __foobar.xjs__
|
39 | ```
|
40 | {View PRE
|
41 | view.attribs: {
|
42 | value: {string behind: onValueChanged }
|
43 | }}
|
44 | ```
|
45 |
|
46 |
|
47 | ### Defining HTML elements
|
48 | ```
|
49 | {TEXTAREA cols: 80 rows: 5 "Hello world!"}
|
50 | ```
|
51 |
|
52 | ```
|
53 | {UL [
|
54 | {LI [{B First} ": Arthur."}]}
|
55 | {LI [{B Second} ": Bonjovi."}]}
|
56 | ]}
|
57 | ```
|
58 |
|
59 | * `"0"`: The element name must be uppercase.
|
60 | * `"1"`: The children cvan be of three types:
|
61 | * __array__: array of elements to add.
|
62 | * __string__: textContent.
|
63 | * __binding__: content is binded to a linkable property.
|
64 | * Named attributes are directly mapped to the HTML element attributes.
|
65 |
|
66 | #### Events
|
67 |
|
68 | #### CSS Classes manipulation
|
69 | You can set CSS classes in a static way:
|
70 | ```
|
71 | {DIV class: "elevation-8 round"}
|
72 | ```
|
73 | or in a bounded way:
|
74 | ```
|
75 | {DIV class: {Bind style}}
|
76 | ```
|
77 |
|
78 | You can also bind the existence of a given class to a boolean property:
|
79 | ```
|
80 | // Add class `elevation-8` if and only if `pressed === true`.
|
81 | {DIV class.elevation-8: {Bind pressed}}
|
82 | ```
|
83 | ```
|
84 | // Add class `highlight` if and only if `pressed === false`.
|
85 | {DIV class.|highlight: {Bind pressed}}
|
86 | ```
|
87 | ```
|
88 | // If `pressed === true`, add class `elevation-8`, otherwise add class 'elevation-2'.
|
89 | {DIV class.elevation-8|elevation-2: {Bind pressed}}
|
90 | ```
|
91 |
|
92 | And if you need a more complex logic to set classes, you can use code behind:
|
93 | ```
|
94 | // As soon as `flat` or `pressed` has changed, call teh code behind function
|
95 | // `computeClass()` to return an array of classes to set.
|
96 | {DIV class.*: {Bind [flat, pressed] computeClasses}}
|
97 | ```
|
98 |
|
99 | It is possible to define a list of functions:
|
100 | ```
|
101 | {DIV class.*: [
|
102 | {Bind [flat, pressed] computeClassesWhenPressed}
|
103 | {Bind [flat, enabled] computeClassesWhenEnabled}
|
104 | ]}
|
105 | ```
|