ovto 0.6.2 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/Gemfile.lock +15 -16
- data/Rakefile +2 -9
- data/book/SUMMARY.md +15 -11
- data/book/book.toml +10 -0
- data/docs/.nojekyll +1 -0
- data/docs/404.html +189 -0
- data/docs/FontAwesome/css/font-awesome.css +4 -0
- data/docs/FontAwesome/fonts/FontAwesome.ttf +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.eot +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.svg +2671 -0
- data/docs/{gitbook/fonts/fontawesome → FontAwesome/fonts}/fontawesome-webfont.ttf +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.woff +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.woff2 +0 -0
- data/docs/api/Array.html +4 -4
- data/docs/api/Hash.html +4 -4
- data/docs/api/MightyInspect.html +238 -0
- data/docs/api/Ovto/Actions.html +4 -4
- data/docs/api/Ovto/App.html +4 -4
- data/docs/api/Ovto/Component/MoreThanOneNode.html +5 -5
- data/docs/api/Ovto/Component.html +4 -4
- data/docs/api/Ovto/Middleware/Actions.html +4 -4
- data/docs/api/Ovto/Middleware/Base.html +5 -5
- data/docs/api/Ovto/Middleware/Component.html +5 -5
- data/docs/api/Ovto/Middleware.html +8 -8
- data/docs/api/Ovto/PureComponent/StateIsNotAvailable.html +4 -4
- data/docs/api/Ovto/PureComponent.html +4 -4
- data/docs/api/Ovto/Runtime.html +4 -4
- data/docs/api/Ovto/State/MissingValue.html +4 -4
- data/docs/api/Ovto/State/UnknownStateKey.html +4 -4
- data/docs/api/Ovto/State.html +12 -12
- data/docs/api/Ovto/WiredActionSet.html +4 -4
- data/docs/api/Ovto/WiredActions.html +4 -4
- data/docs/api/Ovto.html +8 -8
- data/docs/api/_index.html +5 -5
- data/docs/api/actions.html +215 -426
- data/docs/api/app.html +226 -432
- data/docs/api/component.html +268 -480
- data/docs/api/fetch.html +188 -393
- data/docs/api/file.README.html +4 -4
- data/docs/api/frames.html +1 -1
- data/docs/api/index.html +4 -4
- data/docs/api/middleware.html +249 -460
- data/docs/api/pure_component.html +186 -398
- data/docs/api/state.html +226 -438
- data/docs/api/top-level-namespace.html +4 -4
- data/docs/ayu-highlight.css +78 -0
- data/docs/book.js +688 -0
- data/docs/book.toml +10 -0
- data/docs/clipboard.min.js +7 -0
- data/docs/css/chrome.css +545 -0
- data/docs/css/general.css +203 -0
- data/docs/css/print.css +54 -0
- data/docs/css/variables.css +255 -0
- data/docs/elasticlunr.min.js +10 -0
- data/docs/favicon.png +0 -0
- data/docs/favicon.svg +22 -0
- data/docs/fonts/OPEN-SANS-LICENSE.txt +202 -0
- data/docs/fonts/SOURCE-CODE-PRO-LICENSE.txt +93 -0
- data/docs/fonts/fonts.css +100 -0
- data/docs/fonts/open-sans-v17-all-charsets-300.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-300italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-600.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-600italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-700.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-700italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-800.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-800italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-regular.woff2 +0 -0
- data/docs/fonts/source-code-pro-v11-all-charsets-500.woff2 +0 -0
- data/docs/guides/debugging.html +184 -390
- data/docs/guides/development.html +171 -383
- data/docs/guides/install.html +206 -409
- data/docs/guides/tutorial.html +309 -525
- data/docs/highlight.css +82 -0
- data/docs/highlight.js +6 -0
- data/docs/index.html +390 -391
- data/docs/mark.min.js +7 -0
- data/docs/print.html +958 -0
- data/docs/searcher.js +483 -0
- data/docs/searchindex.js +1 -0
- data/docs/searchindex.json +1 -0
- data/docs/tomorrow-night.css +102 -0
- data/examples/sinatra/Gemfile.lock +25 -25
- data/examples/static/Gemfile.lock +8 -8
- data/lib/ovto/component.rb +2 -3
- data/lib/ovto/version.rb +1 -1
- metadata +47 -26
- data/docs/gitbook/fonts/fontawesome/FontAwesome.otf +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.eot +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.svg +0 -685
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff2 +0 -0
- data/docs/gitbook/gitbook-plugin-fontsettings/fontsettings.js +0 -240
- data/docs/gitbook/gitbook-plugin-fontsettings/website.css +0 -291
- data/docs/gitbook/gitbook-plugin-highlight/ebook.css +0 -135
- data/docs/gitbook/gitbook-plugin-highlight/website.css +0 -434
- data/docs/gitbook/gitbook-plugin-lunr/lunr.min.js +0 -7
- data/docs/gitbook/gitbook-plugin-lunr/search-lunr.js +0 -59
- data/docs/gitbook/gitbook-plugin-search/lunr.min.js +0 -7
- data/docs/gitbook/gitbook-plugin-search/search-engine.js +0 -50
- data/docs/gitbook/gitbook-plugin-search/search.css +0 -35
- data/docs/gitbook/gitbook-plugin-search/search.js +0 -213
- data/docs/gitbook/gitbook-plugin-sharing/buttons.js +0 -90
- data/docs/gitbook/gitbook.js +0 -4
- data/docs/gitbook/images/apple-touch-icon-precomposed-152.png +0 -0
- data/docs/gitbook/images/favicon.ico +0 -0
- data/docs/gitbook/style.css +0 -9
- data/docs/gitbook/theme.js +0 -4
- data/docs/search_index.json +0 -1
data/docs/guides/tutorial.html
CHANGED
|
@@ -1,516 +1,334 @@
|
|
|
1
|
-
|
|
2
1
|
<!DOCTYPE HTML>
|
|
3
|
-
<html lang="" >
|
|
2
|
+
<html lang="en" class="sidebar-visible no-js light">
|
|
4
3
|
<head>
|
|
4
|
+
<!-- Book generated using mdBook -->
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
|
-
<
|
|
7
|
-
<title>Getting Started · GitBook</title>
|
|
8
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
9
|
-
<meta name="description" content="">
|
|
10
|
-
<meta name="generator" content="GitBook 3.2.2">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<link rel="stylesheet" href="../gitbook/style.css">
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<meta name="HandheldFriendly" content="true"/>
|
|
53
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
54
|
-
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
55
|
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
56
|
-
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
|
|
57
|
-
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<link rel="next" href="install.html" />
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<link rel="prev" href="../" />
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
</head>
|
|
67
|
-
<body>
|
|
68
|
-
|
|
69
|
-
<div class="book">
|
|
70
|
-
<div class="book-summary">
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<div id="book-search-input" role="search">
|
|
74
|
-
<input type="text" placeholder="Type to search" />
|
|
75
|
-
</div>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<nav role="navigation">
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<ul class="summary">
|
|
83
|
-
|
|
84
|
-
|
|
6
|
+
<title>Getting Started - Ovto Reference Manual</title>
|
|
85
7
|
|
|
86
|
-
|
|
87
8
|
|
|
88
|
-
|
|
9
|
+
<!-- Custom HTML head -->
|
|
89
10
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
<a href="../">
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
Introduction
|
|
98
|
-
|
|
99
|
-
</a>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
</li>
|
|
104
|
-
|
|
105
|
-
<li class="chapter active" data-level="1.2" data-path="tutorial.html">
|
|
106
|
-
|
|
107
|
-
<a href="tutorial.html">
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
Getting Started
|
|
111
|
-
|
|
112
|
-
</a>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
</li>
|
|
117
|
-
|
|
118
|
-
<li class="chapter " data-level="1.3" data-path="install.html">
|
|
119
|
-
|
|
120
|
-
<a href="install.html">
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
Install
|
|
124
|
-
|
|
125
|
-
</a>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</li>
|
|
130
|
-
|
|
131
|
-
<li class="chapter " data-level="1.4" >
|
|
132
|
-
|
|
133
|
-
<span>
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
API
|
|
137
|
-
|
|
138
|
-
</span>
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<ul class="articles">
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
<li class="chapter " data-level="1.4.1" data-path="../api/app.html">
|
|
146
|
-
|
|
147
|
-
<a href="../api/app.html">
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
Ovto::App
|
|
151
|
-
|
|
152
|
-
</a>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
</li>
|
|
157
|
-
|
|
158
|
-
<li class="chapter " data-level="1.4.2" data-path="../api/state.html">
|
|
159
|
-
|
|
160
|
-
<a href="../api/state.html">
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
Ovto::State
|
|
164
|
-
|
|
165
|
-
</a>
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
</li>
|
|
170
|
-
|
|
171
|
-
<li class="chapter " data-level="1.4.3" data-path="../api/actions.html">
|
|
172
|
-
|
|
173
|
-
<a href="../api/actions.html">
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
Ovto::Actions
|
|
177
|
-
|
|
178
|
-
</a>
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
</li>
|
|
183
|
-
|
|
184
|
-
<li class="chapter " data-level="1.4.4" data-path="../api/component.html">
|
|
185
|
-
|
|
186
|
-
<a href="../api/component.html">
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
Ovto::Component
|
|
190
|
-
|
|
191
|
-
</a>
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
</li>
|
|
196
|
-
|
|
197
|
-
<li class="chapter " data-level="1.4.5" data-path="../api/pure_component.html">
|
|
198
|
-
|
|
199
|
-
<a href="../api/pure_component.html">
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
Ovto::PureComponent
|
|
203
|
-
|
|
204
|
-
</a>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
</li>
|
|
209
|
-
|
|
210
|
-
<li class="chapter " data-level="1.4.6" data-path="../api/middleware.html">
|
|
211
|
-
|
|
212
|
-
<a href="../api/middleware.html">
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
Ovto::Middleware
|
|
216
|
-
|
|
217
|
-
</a>
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
</li>
|
|
222
|
-
|
|
223
|
-
<li class="chapter " data-level="1.4.7" data-path="../api/fetch.html">
|
|
224
|
-
|
|
225
|
-
<a href="../api/fetch.html">
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
Ovto.fetch
|
|
229
|
-
|
|
230
|
-
</a>
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
</li>
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
</ul>
|
|
238
|
-
|
|
239
|
-
</li>
|
|
240
|
-
|
|
241
|
-
<li class="chapter " data-level="1.5" >
|
|
242
|
-
|
|
243
|
-
<span>
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
Guides
|
|
247
|
-
|
|
248
|
-
</span>
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
<ul class="articles">
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
<li class="chapter " data-level="1.5.1" data-path="debugging.html">
|
|
256
|
-
|
|
257
|
-
<a href="debugging.html">
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
Debugging
|
|
261
|
-
|
|
262
|
-
</a>
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
</li>
|
|
267
|
-
|
|
268
|
-
<li class="chapter " data-level="1.5.2" data-path="development.html">
|
|
269
|
-
|
|
270
|
-
<a href="development.html">
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
Development
|
|
274
|
-
|
|
275
|
-
</a>
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
</li>
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
</ul>
|
|
283
|
-
|
|
284
|
-
</li>
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
<li class="divider"></li>
|
|
290
|
-
|
|
291
|
-
<li>
|
|
292
|
-
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
|
293
|
-
Published with GitBook
|
|
294
|
-
</a>
|
|
295
|
-
</li>
|
|
296
|
-
</ul>
|
|
11
|
+
<meta name="description" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
13
|
+
<meta name="theme-color" content="#ffffff" />
|
|
297
14
|
|
|
15
|
+
<link rel="icon" href="../favicon.svg">
|
|
16
|
+
<link rel="shortcut icon" href="../favicon.png">
|
|
17
|
+
<link rel="stylesheet" href="../css/variables.css">
|
|
18
|
+
<link rel="stylesheet" href="../css/general.css">
|
|
19
|
+
<link rel="stylesheet" href="../css/chrome.css">
|
|
20
|
+
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
298
21
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
</div>
|
|
22
|
+
<!-- Fonts -->
|
|
23
|
+
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
24
|
+
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
303
25
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
<div class="book-header" role="navigation">
|
|
311
|
-
|
|
26
|
+
<!-- Highlight.js Stylesheets -->
|
|
27
|
+
<link rel="stylesheet" href="../highlight.css">
|
|
28
|
+
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
29
|
+
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
312
30
|
|
|
313
|
-
|
|
314
|
-
<h1>
|
|
315
|
-
<i class="fa fa-circle-o-notch fa-spin"></i>
|
|
316
|
-
<a href=".." >Getting Started</a>
|
|
317
|
-
</h1>
|
|
318
|
-
</div>
|
|
31
|
+
<!-- Custom theme stylesheets -->
|
|
319
32
|
|
|
33
|
+
</head>
|
|
34
|
+
<body>
|
|
35
|
+
<div id="body-container">
|
|
36
|
+
<!-- Provide site root to javascript -->
|
|
37
|
+
<script>
|
|
38
|
+
var path_to_root = "../";
|
|
39
|
+
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
43
|
+
<script>
|
|
44
|
+
try {
|
|
45
|
+
var theme = localStorage.getItem('mdbook-theme');
|
|
46
|
+
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
47
|
+
|
|
48
|
+
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
49
|
+
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
53
|
+
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
54
|
+
}
|
|
55
|
+
} catch (e) { }
|
|
56
|
+
</script>
|
|
57
|
+
|
|
58
|
+
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
59
|
+
<script>
|
|
60
|
+
var theme;
|
|
61
|
+
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
62
|
+
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
63
|
+
var html = document.querySelector('html');
|
|
64
|
+
html.classList.remove('no-js')
|
|
65
|
+
html.classList.remove('light')
|
|
66
|
+
html.classList.add(theme);
|
|
67
|
+
html.classList.add('js');
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<!-- Hide / unhide sidebar before it is displayed -->
|
|
71
|
+
<script>
|
|
72
|
+
var html = document.querySelector('html');
|
|
73
|
+
var sidebar = null;
|
|
74
|
+
if (document.body.clientWidth >= 1080) {
|
|
75
|
+
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
76
|
+
sidebar = sidebar || 'visible';
|
|
77
|
+
} else {
|
|
78
|
+
sidebar = 'hidden';
|
|
79
|
+
}
|
|
80
|
+
html.classList.remove('sidebar-visible');
|
|
81
|
+
html.classList.add("sidebar-" + sidebar);
|
|
82
|
+
</script>
|
|
83
|
+
|
|
84
|
+
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
85
|
+
<div class="sidebar-scrollbox">
|
|
86
|
+
<ol class="chapter"><li class="chapter-item expanded "><a href="../guides/tutorial.html" class="active"><strong aria-hidden="true">1.</strong> Getting Started</a></li><li class="chapter-item expanded "><a href="../guides/install.html"><strong aria-hidden="true">2.</strong> Install</a></li><li class="chapter-item expanded affix "><li class="part-title">API</li><li class="chapter-item expanded "><a href="../api/app.html"><strong aria-hidden="true">3.</strong> Ovto::App</a></li><li class="chapter-item expanded "><a href="../api/state.html"><strong aria-hidden="true">4.</strong> Ovto::State</a></li><li class="chapter-item expanded "><a href="../api/actions.html"><strong aria-hidden="true">5.</strong> Ovto::Actions</a></li><li class="chapter-item expanded "><a href="../api/component.html"><strong aria-hidden="true">6.</strong> Ovto::Component</a></li><li class="chapter-item expanded "><a href="../api/pure_component.html"><strong aria-hidden="true">7.</strong> Ovto::PureComponent</a></li><li class="chapter-item expanded "><a href="../api/middleware.html"><strong aria-hidden="true">8.</strong> Ovto::Middleware</a></li><li class="chapter-item expanded "><a href="../api/fetch.html"><strong aria-hidden="true">9.</strong> Ovto.fetch</a></li><li class="chapter-item expanded affix "><li class="part-title">Guides</li><li class="chapter-item expanded "><a href="../guides/debugging.html"><strong aria-hidden="true">10.</strong> Debugging</a></li><li class="chapter-item expanded "><a href="../guides/development.html"><strong aria-hidden="true">11.</strong> Development</a></li></ol>
|
|
87
|
+
</div>
|
|
88
|
+
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
89
|
+
</nav>
|
|
90
|
+
|
|
91
|
+
<div id="page-wrapper" class="page-wrapper">
|
|
92
|
+
|
|
93
|
+
<div class="page">
|
|
94
|
+
<div id="menu-bar-hover-placeholder"></div>
|
|
95
|
+
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
96
|
+
<div class="left-buttons">
|
|
97
|
+
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
98
|
+
<i class="fa fa-bars"></i>
|
|
99
|
+
</button>
|
|
100
|
+
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
101
|
+
<i class="fa fa-paint-brush"></i>
|
|
102
|
+
</button>
|
|
103
|
+
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
104
|
+
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
|
|
105
|
+
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
106
|
+
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
107
|
+
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
108
|
+
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
109
|
+
</ul>
|
|
110
|
+
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
111
|
+
<i class="fa fa-search"></i>
|
|
112
|
+
</button>
|
|
113
|
+
</div>
|
|
320
114
|
|
|
115
|
+
<h1 class="menu-title">Ovto Reference Manual</h1>
|
|
321
116
|
|
|
117
|
+
<div class="right-buttons">
|
|
118
|
+
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
119
|
+
<i id="print-button" class="fa fa-print"></i>
|
|
120
|
+
</a>
|
|
322
121
|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
<div id="
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div id="search-wrapper" class="hidden">
|
|
126
|
+
<form id="searchbar-outer" class="searchbar-outer">
|
|
127
|
+
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
128
|
+
</form>
|
|
129
|
+
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
130
|
+
<div id="searchresults-header" class="searchresults-header"></div>
|
|
131
|
+
<ul id="searchresults">
|
|
132
|
+
</ul>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
137
|
+
<script>
|
|
138
|
+
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
139
|
+
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
140
|
+
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
141
|
+
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
142
|
+
});
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
<div id="content" class="content">
|
|
146
|
+
<main>
|
|
147
|
+
<h1 id="getting-started"><a class="header" href="#getting-started">Getting Started</a></h1>
|
|
332
148
|
<p>This is a tutorial of making an Ovto app. We create a static app (.html + .js) here,
|
|
333
149
|
but you can embed Ovto apps into a Rails or Sinatra app (See <code>./examples/*</code>).</p>
|
|
334
150
|
<p>This is the final Ruby code.</p>
|
|
335
|
-
<pre><code class="
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
item
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
(celsius *
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
new_celsius = (value -
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
o
|
|
360
|
-
o
|
|
361
|
-
o
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
151
|
+
<pre><code class="language-rb">require 'ovto'
|
|
152
|
+
|
|
153
|
+
class MyApp < Ovto::App
|
|
154
|
+
class State < Ovto::State
|
|
155
|
+
item :celsius, default: 0
|
|
156
|
+
|
|
157
|
+
def fahrenheit
|
|
158
|
+
(celsius * 9 / 5.0) + 32
|
|
159
|
+
end
|
|
160
|
+
end
|
|
161
|
+
|
|
162
|
+
class Actions < Ovto::Actions
|
|
163
|
+
def set_celsius(value:)
|
|
164
|
+
return {celsius: value}
|
|
165
|
+
end
|
|
166
|
+
|
|
167
|
+
def set_fahrenheit(value:)
|
|
168
|
+
new_celsius = (value - 32) * 5 / 9.0
|
|
169
|
+
return {celsius: new_celsius}
|
|
170
|
+
end
|
|
171
|
+
end
|
|
172
|
+
|
|
173
|
+
class MainComponent < Ovto::Component
|
|
174
|
+
def render
|
|
175
|
+
o 'div' do
|
|
176
|
+
o 'span', 'Celcius:'
|
|
177
|
+
o 'input', {
|
|
178
|
+
type: 'text',
|
|
179
|
+
onchange: ->(e){ actions.set_celsius(value: e.target.value.to_i) },
|
|
180
|
+
value: state.celsius
|
|
365
181
|
}
|
|
366
|
-
o
|
|
367
|
-
o
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
182
|
+
o 'span', 'Fahrenheit:'
|
|
183
|
+
o 'input', {
|
|
184
|
+
type: 'text',
|
|
185
|
+
onchange: ->(e){ actions.set_fahrenheit(value: e.target.value.to_i) },
|
|
186
|
+
value: state.fahrenheit
|
|
371
187
|
}
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
188
|
+
end
|
|
189
|
+
end
|
|
190
|
+
end
|
|
191
|
+
end
|
|
376
192
|
|
|
377
|
-
MyApp.run(
|
|
193
|
+
MyApp.run(id: 'ovto')
|
|
378
194
|
</code></pre>
|
|
379
|
-
<p>Let
|
|
380
|
-
<h2 id="prerequisites">Prerequisites</h2>
|
|
195
|
+
<p>Let's take a look step-by-step.</p>
|
|
196
|
+
<h2 id="prerequisites"><a class="header" href="#prerequisites">Prerequisites</a></h2>
|
|
381
197
|
<ul>
|
|
382
198
|
<li>Ruby</li>
|
|
383
199
|
<li>Bundler (<code>gem install bundler</code>)</li>
|
|
384
200
|
</ul>
|
|
385
|
-
<h2 id="setup">Setup</h2>
|
|
201
|
+
<h2 id="setup"><a class="header" href="#setup">Setup</a></h2>
|
|
386
202
|
<p>Make a Gemfile:</p>
|
|
387
|
-
<pre><code class="
|
|
388
|
-
gem
|
|
389
|
-
gem
|
|
203
|
+
<pre><code class="language-rb">source "https://rubygems.org"
|
|
204
|
+
gem "ovto", github: 'yhara/ovto' # Use git master because ovto gem is not released yet
|
|
205
|
+
gem 'rake'
|
|
390
206
|
</code></pre>
|
|
391
207
|
<p>Run <code>bundle install</code>.</p>
|
|
392
|
-
<h2 id="html">HTML</h2>
|
|
208
|
+
<h2 id="html"><a class="header" href="#html">HTML</a></h2>
|
|
393
209
|
<p>Make an index.html:</p>
|
|
394
|
-
<pre><code class="
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
210
|
+
<pre><code class="language-html"><!doctype html>
|
|
211
|
+
<html>
|
|
212
|
+
<head>
|
|
213
|
+
<meta charset="utf-8">
|
|
214
|
+
<script type='text/javascript' src='app.js'></script>
|
|
215
|
+
</head>
|
|
216
|
+
<body>
|
|
217
|
+
<div id='ovto'></div>
|
|
218
|
+
<div id='ovto-debug'></div>
|
|
219
|
+
</body>
|
|
220
|
+
</html>
|
|
405
221
|
</code></pre>
|
|
406
|
-
<h2 id="write-code">Write code</h2>
|
|
222
|
+
<h2 id="write-code"><a class="header" href="#write-code">Write code</a></h2>
|
|
407
223
|
<p>app.rb:</p>
|
|
408
|
-
<pre><code class="
|
|
224
|
+
<pre><code class="language-rb">require 'ovto'
|
|
409
225
|
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
226
|
+
class MyApp < Ovto::App
|
|
227
|
+
class State < Ovto::State
|
|
228
|
+
end
|
|
413
229
|
|
|
414
|
-
|
|
415
|
-
|
|
230
|
+
class Actions < Ovto::Actions
|
|
231
|
+
end
|
|
416
232
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
o
|
|
420
|
-
o
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
233
|
+
class MainComponent < Ovto::Component
|
|
234
|
+
def render # Don't miss the `:`. This is not a typo but
|
|
235
|
+
o 'div' do # a "mandatory keyword argument".
|
|
236
|
+
o 'h1', "HELLO" # All of the Ovto methods take keyword arguments.
|
|
237
|
+
end
|
|
238
|
+
end
|
|
239
|
+
end
|
|
240
|
+
end
|
|
425
241
|
|
|
426
|
-
MyApp.run(
|
|
242
|
+
MyApp.run(id: 'ovto')
|
|
427
243
|
</code></pre>
|
|
428
244
|
<ul>
|
|
429
245
|
<li>The name <code>MyApp</code> is arbitrary.</li>
|
|
430
246
|
<li>The id <code>ovto</code> corresponds to the <code>div</code> tag in <code>index.html</code>.</li>
|
|
431
247
|
</ul>
|
|
432
|
-
<h2 id="compile">Compile</h2>
|
|
248
|
+
<h2 id="compile"><a class="header" href="#compile">Compile</a></h2>
|
|
433
249
|
<p>Generate app.js from app.rb.</p>
|
|
434
250
|
<pre><code>$ bundle exec opal -c -g ovto app.rb > app.js
|
|
435
|
-
</code></pre
|
|
251
|
+
</code></pre>
|
|
252
|
+
<p>(Compile will fail if there is a syntax error in your <code>app.rb</code>.)</p>
|
|
436
253
|
<p>Now you can run your app by opening <code>index.html</code> in your browser.</p>
|
|
437
|
-
<h2 id="trouble-shooting">Trouble shooting</h2>
|
|
254
|
+
<h2 id="trouble-shooting"><a class="header" href="#trouble-shooting">Trouble shooting</a></h2>
|
|
438
255
|
<p>If you see HELLO, the setup is done. Otherwise, check the developer console
|
|
439
256
|
and you should see some error messages there.</p>
|
|
440
257
|
<p>For example if you misspelled <code>class State</code> to <code>class Stat</code>, you will see:</p>
|
|
441
|
-
<pre><code>app.js:5022 Uncaught $NameError
|
|
442
|
-
</code></pre
|
|
443
|
-
<
|
|
258
|
+
<pre><code>app.js:5022 Uncaught $NameError {name: "State", message: "uninitialized constant MyApp::State", stack: "State: uninitialized constant MyApp::State"}
|
|
259
|
+
</code></pre>
|
|
260
|
+
<p>because an Ovto app must have a <code>State</code> class in its namespace.</p>
|
|
261
|
+
<h2 id="tips-auto-compile"><a class="header" href="#tips-auto-compile">(Tips: auto-compile)</a></h2>
|
|
444
262
|
<p>If you get tired to run <code>bundle exec opal</code> manually, try <code>ifchanged</code> gem:</p>
|
|
445
263
|
<ol>
|
|
446
264
|
<li>Add <code>gem "ifchanged"</code> to Gemfile</li>
|
|
447
265
|
<li><code>bundle install</code></li>
|
|
448
|
-
<li><code>bundle exec ifchanged ./app.rb --do
|
|
266
|
+
<li><code>bundle exec ifchanged ./app.rb --do 'bundle exec opal -c -g ovto app.rb > app.js'</code></li>
|
|
449
267
|
</ol>
|
|
450
268
|
<p>Now you just edit and save <code>app.rb</code> and it runs <code>opal -c</code> for you.</p>
|
|
451
|
-
<h2 id="add-some-state">Add some state</h2>
|
|
269
|
+
<h2 id="add-some-state"><a class="header" href="#add-some-state">Add some state</a></h2>
|
|
452
270
|
<p>In this tutorial, we make an app that convers Celsius and Fahrenheit degrees to
|
|
453
271
|
each other. First, add an item to <code>MyApp::State</code>.</p>
|
|
454
|
-
<pre><code class="
|
|
455
|
-
item
|
|
456
|
-
|
|
272
|
+
<pre><code class="language-rb"> class State < Ovto::State
|
|
273
|
+
item :celsius, default: 0
|
|
274
|
+
end
|
|
457
275
|
</code></pre>
|
|
458
276
|
<p>Now an item <code>celsius</code> is added to the global app state. Its value is <code>0</code> when
|
|
459
|
-
the app starts. You can read this value by <code>state.celsius</code>. Let
|
|
277
|
+
the app starts. You can read this value by <code>state.celsius</code>. Let's display the
|
|
460
278
|
value with <code>MyApp::MainComponent</code>.</p>
|
|
461
|
-
<pre><code class="
|
|
462
|
-
|
|
463
|
-
o
|
|
464
|
-
o
|
|
465
|
-
o
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
279
|
+
<pre><code class="language-rb"> class MainComponent < Ovto::Component
|
|
280
|
+
def render
|
|
281
|
+
o 'div' do
|
|
282
|
+
o 'span', 'Celcius:'
|
|
283
|
+
o 'input', type: 'text', value: state.celsius
|
|
284
|
+
end
|
|
285
|
+
end
|
|
286
|
+
end
|
|
469
287
|
</code></pre>
|
|
470
288
|
<p>Now you should see <code>Celsius: [0 ]</code> in the browser.</p>
|
|
471
|
-
<h2 id="add-a-method-to-state">Add a method to State</h2>
|
|
472
|
-
<p>Next, we want to know what degree is it in Fahrenheit. Let
|
|
289
|
+
<h2 id="add-a-method-to-state"><a class="header" href="#add-a-method-to-state">Add a method to State</a></h2>
|
|
290
|
+
<p>Next, we want to know what degree is it in Fahrenheit. Let's add a method to
|
|
473
291
|
convert.</p>
|
|
474
|
-
<pre><code class="
|
|
475
|
-
item
|
|
292
|
+
<pre><code class="language-rb"> class State < Ovto::State
|
|
293
|
+
item :celsius, default: 0
|
|
476
294
|
|
|
477
|
-
|
|
478
|
-
(celsius *
|
|
479
|
-
|
|
480
|
-
|
|
295
|
+
def fahrenheit
|
|
296
|
+
(celsius * 9 / 5.0) + 32
|
|
297
|
+
end
|
|
298
|
+
end
|
|
481
299
|
</code></pre>
|
|
482
300
|
<p>Now you can know the value by <code>state.fahrenheit</code>. Update <code>MainComponent</code> to show the value too.</p>
|
|
483
|
-
<pre><code class="
|
|
484
|
-
|
|
485
|
-
o
|
|
486
|
-
o
|
|
487
|
-
o
|
|
488
|
-
o
|
|
489
|
-
o
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
301
|
+
<pre><code class="language-rb"> class MainComponent < Ovto::Component
|
|
302
|
+
def render
|
|
303
|
+
o 'div' do
|
|
304
|
+
o 'span', 'Celcius:'
|
|
305
|
+
o 'input', type: 'text', value: state.celsius
|
|
306
|
+
o 'span', 'Fahrenheit:'
|
|
307
|
+
o 'input', type: 'text', value: state.fahrenheit
|
|
308
|
+
end
|
|
309
|
+
end
|
|
310
|
+
end
|
|
493
311
|
</code></pre>
|
|
494
|
-
<h2 id="add-an-action">Add an action</h2>
|
|
312
|
+
<h2 id="add-an-action"><a class="header" href="#add-an-action">Add an action</a></h2>
|
|
495
313
|
<p>Now we know 0 degrees Celsius is 32 degrees Fahrenheit. But how about 10 degrees or
|
|
496
|
-
100 degrees Celsius? Let
|
|
314
|
+
100 degrees Celsius? Let's update the app to we can specify a Celsius value.</p>
|
|
497
315
|
<p>You may think that you can change the value with <code>state.celsius = 100</code>, but this is
|
|
498
316
|
prohibited. In Ovto, you can only modify app state with Actions.</p>
|
|
499
317
|
<p>Our first action looks like this. An action is a method defined in <code>MyApp::Actions</code>.
|
|
500
318
|
It takes an old state (and its own parameters) and returns a Hash that describes
|
|
501
319
|
the updates to the state. This return value is <code>merge</code>d into the global app state.</p>
|
|
502
|
-
<pre><code class="
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
320
|
+
<pre><code class="language-rb"> class Actions < Ovto::Actions
|
|
321
|
+
def set_celsius(value:)
|
|
322
|
+
return {celsius: value}
|
|
323
|
+
end
|
|
324
|
+
end
|
|
507
325
|
</code></pre>
|
|
508
326
|
<p>This action can be called by <code>actions.set_celsius</code> from MainComponent. Replace the
|
|
509
327
|
first input tag with this:</p>
|
|
510
|
-
<pre><code class="
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
328
|
+
<pre><code class="language-rb"> o 'input', {
|
|
329
|
+
type: 'text',
|
|
330
|
+
onchange: ->(e){ actions.set_celsius(value: e.target.value.to_i) },
|
|
331
|
+
value: state.celsius
|
|
514
332
|
}
|
|
515
333
|
</code></pre>
|
|
516
334
|
<p><code>onchange:</code> is a special attribute that takes an event handler as its value.
|
|
@@ -519,114 +337,80 @@ JavaScript. In this case you can get the input string by <code>e.target.value</c
|
|
|
519
337
|
<p>Now reload your browser and input <code>100</code> to the left input box. Next, press Tab key
|
|
520
338
|
(or click somewhere in the page) to commit the value. Then you should see <code>212</code>
|
|
521
339
|
in the right input box. 100 degrees Celsius is 212 degrees Fahrenheit!</p>
|
|
522
|
-
<h2 id="what-has-happend">What has happend</h2>
|
|
340
|
+
<h2 id="what-has-happend"><a class="header" href="#what-has-happend">What has happend</a></h2>
|
|
523
341
|
<p>In case you are curious, here is what happens when you give 100 to the input box.</p>
|
|
524
342
|
<ol>
|
|
525
|
-
<li>JavaScript
|
|
343
|
+
<li>JavaScript's <code>onchange</code> event is executed.</li>
|
|
526
344
|
<li>Ovto calls the event handler.</li>
|
|
527
345
|
<li>It calls <code>actions.set_celsius</code>. <code>actions</code> is an instance of <code>Ovto::WiredActions</code>.
|
|
528
346
|
It is a proxy to the <code>MyApp::Actions</code>. It has the same methods as those in
|
|
529
|
-
<code>MyApp::Actions</code> but does some more
|
|
347
|
+
<code>MyApp::Actions</code> but does some more:</li>
|
|
348
|
+
</ol>
|
|
349
|
+
<ul>
|
|
530
350
|
<li>It passes <code>state</code> to the user-defined action.</li>
|
|
531
351
|
<li>It merges the result to the global app state.</li>
|
|
532
352
|
<li>It schedules re-rendering the view to represent the new state.</li>
|
|
533
353
|
</ul>
|
|
534
|
-
</
|
|
535
|
-
</ol>
|
|
536
|
-
<h2 id="reverse-conversion">Reverse conversion</h2>
|
|
354
|
+
<h2 id="reverse-conversion"><a class="header" href="#reverse-conversion">Reverse conversion</a></h2>
|
|
537
355
|
<p>It is easy to update the app to support Fahrenheit-to-Celsius conversion.
|
|
538
356
|
The second input should be updated to:</p>
|
|
539
|
-
<pre><code class="
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
357
|
+
<pre><code class="language-rb"> o 'input', {
|
|
358
|
+
type: 'text',
|
|
359
|
+
onchange: ->(e){ actions.set_fahrenheit(value: e.target.value.to_i) },
|
|
360
|
+
value: state.fahrenheit
|
|
543
361
|
}
|
|
544
362
|
</code></pre>
|
|
545
363
|
<p>Then add an action <code>set_fahrenheit</code> to <code>MyApp::Actions</code>. This action convers the
|
|
546
364
|
Fahrenheit degree into Celsius and set it to the global state.</p>
|
|
547
|
-
<pre><code class="
|
|
548
|
-
new_celsius = (value -
|
|
549
|
-
|
|
550
|
-
|
|
365
|
+
<pre><code class="language-rb"> def set_fahrenheit(value:)
|
|
366
|
+
new_celsius = (value - 32) * 5 / 9.0
|
|
367
|
+
return {celsius: new_celsius}
|
|
368
|
+
end
|
|
551
369
|
</code></pre>
|
|
552
370
|
<p>Now your app should react to the change of the Fahrenheit value too. </p>
|
|
553
371
|
|
|
554
|
-
|
|
555
|
-
</section>
|
|
556
|
-
|
|
557
|
-
</div>
|
|
558
|
-
<div class="search-results">
|
|
559
|
-
<div class="has-results">
|
|
560
|
-
|
|
561
|
-
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
562
|
-
<ul class="search-results-list"></ul>
|
|
563
|
-
|
|
564
|
-
</div>
|
|
565
|
-
<div class="no-results">
|
|
566
|
-
|
|
567
|
-
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
568
|
-
|
|
569
|
-
</div>
|
|
570
|
-
</div>
|
|
571
|
-
</div>
|
|
372
|
+
</main>
|
|
572
373
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
374
|
+
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
375
|
+
<!-- Mobile navigation buttons -->
|
|
376
|
+
|
|
377
|
+
<a rel="next" href="../guides/install.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
378
|
+
<i class="fa fa-angle-right"></i>
|
|
379
|
+
</a>
|
|
380
|
+
|
|
381
|
+
<div style="clear: both"></div>
|
|
382
|
+
</nav>
|
|
383
|
+
</div>
|
|
576
384
|
</div>
|
|
577
385
|
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
<i class="fa fa-angle-right"></i>
|
|
587
|
-
</a>
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
</div>
|
|
386
|
+
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
387
|
+
|
|
388
|
+
<a rel="next" href="../guides/install.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
389
|
+
<i class="fa fa-angle-right"></i>
|
|
390
|
+
</a>
|
|
391
|
+
</nav>
|
|
392
|
+
|
|
393
|
+
</div>
|
|
592
394
|
|
|
593
|
-
<script>
|
|
594
|
-
var gitbook = gitbook || [];
|
|
595
|
-
gitbook.push(function() {
|
|
596
|
-
gitbook.page.hasChanged({"page":{"title":"Getting Started","level":"1.2","depth":1,"next":{"title":"Install","level":"1.3","depth":1,"path":"guides/install.md","ref":"guides/install.md","articles":[]},"previous":{"title":"Introduction","level":"1.1","depth":1,"path":"readme.md","ref":"readme.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"guides/tutorial.md","mtime":"2019-04-19T07:38:37.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
|
|
597
|
-
});
|
|
598
|
-
</script>
|
|
599
|
-
</div>
|
|
600
395
|
|
|
601
|
-
|
|
602
|
-
<script src="../gitbook/gitbook.js"></script>
|
|
603
|
-
<script src="../gitbook/theme.js"></script>
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
|
|
627
|
-
|
|
628
|
-
|
|
629
396
|
|
|
397
|
+
|
|
398
|
+
<script>
|
|
399
|
+
window.playground_copyable = true;
|
|
400
|
+
</script>
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
<script src="../elasticlunr.min.js"></script>
|
|
404
|
+
<script src="../mark.min.js"></script>
|
|
405
|
+
<script src="../searcher.js"></script>
|
|
406
|
+
|
|
407
|
+
<script src="../clipboard.min.js"></script>
|
|
408
|
+
<script src="../highlight.js"></script>
|
|
409
|
+
<script src="../book.js"></script>
|
|
410
|
+
|
|
411
|
+
<!-- Custom JS scripts -->
|
|
412
|
+
|
|
413
|
+
|
|
414
|
+
</div>
|
|
630
415
|
</body>
|
|
631
416
|
</html>
|
|
632
|
-
|