motion-prime 0.5.6 → 0.5.7
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 +8 -8
- data/CHANGELOG.md +5 -0
- data/Gemfile.lock +1 -1
- data/README.md +8 -3
- data/bin/prime +1 -1
- data/doc/code/getting_started.rb +53 -11
- data/doc/code/models.rb +32 -0
- data/doc/code/screens.rb +25 -19
- data/doc/code/sections.rb +27 -3
- data/doc/docs/docco.css +116 -279
- data/doc/docs/getting_started.html +125 -141
- data/doc/docs/models.html +102 -0
- data/doc/docs/public/fonts/fleurons.eot +0 -0
- data/doc/docs/public/fonts/fleurons.ttf +0 -0
- data/doc/docs/public/fonts/fleurons.woff +0 -0
- data/doc/docs/public/images/gray.png +0 -0
- data/doc/docs/screens.html +114 -167
- data/doc/docs/sections.html +90 -93
- data/files/Gemfile +1 -1
- data/files/Gemfile.lock +2 -2
- data/files/app/screens/{application_screen.rb → application.rb} +0 -0
- data/files/app/screens/{help_screen.rb → help.rb} +0 -0
- data/files/app/screens/{home_screen.rb → home.rb} +0 -0
- data/files/app/screens/{sidebar_screen.rb → sidebar.rb} +0 -0
- data/motion-prime/core_ext/time.rb +10 -0
- data/motion-prime/models/_association_mixin.rb +4 -0
- data/motion-prime/models/_base_mixin.rb +12 -3
- data/motion-prime/models/_dirty_mixin.rb +7 -1
- data/motion-prime/models/_nano_bag_mixin.rb +9 -2
- data/motion-prime/models/_sync_mixin.rb +24 -19
- data/motion-prime/sections/base_section.rb +17 -10
- data/motion-prime/version.rb +1 -1
- metadata +13 -6
|
@@ -4,201 +4,185 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<title>getting_started.rb</title>
|
|
6
6
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
7
|
-
<
|
|
7
|
+
<link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
|
|
8
8
|
<link rel="stylesheet" media="all" href="docco.css" />
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
|
-
<div
|
|
12
|
-
<div
|
|
13
|
-
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
<div class="container">
|
|
12
|
+
<div class="page">
|
|
13
|
+
|
|
14
|
+
<div class="header">
|
|
15
|
+
|
|
16
|
+
<h1>getting_started.rb</h1>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<div class="toc">
|
|
21
|
+
<h3>Table of Contents</h3>
|
|
22
|
+
<ol>
|
|
21
23
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
|
|
25
|
+
<li>
|
|
26
|
+
<a class="source" href="getting_started.html">
|
|
27
|
+
getting_started.rb
|
|
28
|
+
</a>
|
|
29
|
+
</li>
|
|
26
30
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
|
|
32
|
+
<li>
|
|
33
|
+
<a class="source" href="models.html">
|
|
34
|
+
models.rb
|
|
35
|
+
</a>
|
|
36
|
+
</li>
|
|
31
37
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
|
|
39
|
+
<li>
|
|
40
|
+
<a class="source" href="screens.html">
|
|
41
|
+
screens.rb
|
|
42
|
+
</a>
|
|
43
|
+
</li>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<li>
|
|
47
|
+
<a class="source" href="sections.html">
|
|
48
|
+
sections.rb
|
|
49
|
+
</a>
|
|
50
|
+
</li>
|
|
51
|
+
|
|
52
|
+
</ol>
|
|
36
53
|
</div>
|
|
37
|
-
</li>
|
|
38
|
-
</ul>
|
|
39
|
-
|
|
40
|
-
<ul class="sections">
|
|
41
54
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
<p><strong> Why MotionPrime? </strong></p>
|
|
60
|
+
<p>Did you ever notice that table views in your RubyMotion application scrolls not smoothly?</p>
|
|
61
|
+
<p>Let's see why:</p>
|
|
62
|
+
<p><img src="https://s3.amazonaws.com/motionprime/prime.png" alt="MotionPrime"></p>
|
|
63
|
+
<p>Each table cell will create 5 UIViews inside and it's very slow operation for mobile device.
|
|
64
|
+
The main feature of MotionPrime is that it creates abstraction layer for "elements" in screen.
|
|
65
|
+
If it's possible in current context, MotionPrime will draw elements directly in table cell using CoreGraphics.
|
|
66
|
+
Just add 'label' element to the section:</p>
|
|
67
|
+
|
|
47
68
|
|
|
69
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">MySection</span> <span class="inheritance">< <span class="parent">Prime::Section</span></span></span>
|
|
70
|
+
element <span class="symbol">:greeting</span>, <span class="symbol">text:</span> <span class="string">'Hello World'</span>, <span class="symbol">type:</span> <span class="symbol">:label</span>
|
|
71
|
+
<span class="keyword">end</span></pre></div>
|
|
48
72
|
|
|
73
|
+
|
|
49
74
|
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<div class="pilwrap ">
|
|
54
|
-
<a class="pilcrow" href="#section-1">¶</a>
|
|
55
|
-
</div>
|
|
56
|
-
<p><strong>1. Install required tools.</strong></p>
|
|
75
|
+
<p>It will be rendered 5 times faster in iPhone 4/4s for cells containing 5 elements.</p>
|
|
76
|
+
<p>You can force it to use UIView instead of CoreGraphics:</p>
|
|
57
77
|
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
<div class="content"><div class='highlight'><pre>---</pre></div></div>
|
|
61
|
-
|
|
62
|
-
</li>
|
|
63
78
|
|
|
79
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">MySection</span> <span class="inheritance">< <span class="parent">Prime::Section</span></span></span>
|
|
80
|
+
element <span class="symbol">:greeting</span>, <span class="symbol">text:</span> <span class="string">'Hello World'</span>, <span class="symbol">type:</span> <span class="symbol">:label</span>, <span class="symbol">as:</span> <span class="symbol">:view</span>
|
|
81
|
+
<span class="keyword">end</span></pre></div>
|
|
64
82
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<ul>
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
<p>MotionPrime contains other features to improve application performance, but performance is not the only feature.</p>
|
|
86
|
+
<p>So let's get started.</p>
|
|
87
|
+
<p><strong>1. Install required tools.</strong></p>
|
|
88
|
+
<ul>
|
|
72
89
|
<li>Ruby 1.9.3 or newer.</li>
|
|
73
90
|
</ul>
|
|
74
91
|
|
|
75
|
-
</div>
|
|
76
|
-
|
|
77
|
-
<div class="content"><div class='highlight'><pre><span class="variable">$ </span>rvm install <span class="number">2.0</span>.<span class="number">0</span></pre></div></div>
|
|
78
|
-
|
|
79
|
-
</li>
|
|
80
92
|
|
|
93
|
+
<div class='highlight'><pre><span class="variable">$ </span>rvm install <span class="number">2.0</span>.<span class="number">0</span></pre></div>
|
|
81
94
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<div class="pilwrap ">
|
|
86
|
-
<a class="pilcrow" href="#section-3">¶</a>
|
|
87
|
-
</div>
|
|
88
|
-
<ul>
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
<ul>
|
|
89
98
|
<li>RubyMotion.</li>
|
|
90
99
|
</ul>
|
|
91
100
|
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<div class="content"><div class='highlight'><pre>Visit http://www.rubymotion.com</pre></div></div>
|
|
95
|
-
|
|
96
|
-
</li>
|
|
97
101
|
|
|
102
|
+
<div class='highlight'><pre>Visit http://www.rubymotion.com</pre></div>
|
|
98
103
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
<p><strong>2. Create MotionPrime project.</strong></p>
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
<div class='highlight'><pre><span class="variable">$ </span>gem install motion-prime
|
|
110
|
+
<span class="variable">$ </span>prime new hello</pre></div>
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
<p><strong>3. Create application delegate.</strong></p>
|
|
115
|
+
<p>E.g. <code>hello/app/app_delegate.rb</code></p>
|
|
116
|
+
<p>Inherit <code>AppDelegate</code> class from <code>Prime::BaseAppDelegate</code> and rewrite the <code>on_load</code> method, which will be runned after starting application.</p>
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">AppDelegate</span> <span class="inheritance">< <span class="parent">Prime::BaseAppDelegate</span></span></span>
|
|
112
120
|
<span class="function"><span class="keyword">def</span> <span class="title">on_load</span><span class="params">(app, options)</span></span>
|
|
113
121
|
open_screen <span class="symbol">:main</span>
|
|
114
122
|
<span class="keyword">end</span>
|
|
115
|
-
<span class="keyword">end</span></pre></div
|
|
116
|
-
|
|
117
|
-
</li>
|
|
123
|
+
<span class="keyword">end</span></pre></div>
|
|
118
124
|
|
|
125
|
+
|
|
119
126
|
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<p><strong>3. Create the main screen.</strong></p>
|
|
127
|
-
<p>You should rewrite the <code>render</code> method, which will be runned after first opening screen.</p>
|
|
128
|
-
<p>NOTE: it's recommended to use instance variables for sections, e.g. <code>@main_section</code> instead of <code>main_section</code>.</p>
|
|
129
|
-
|
|
130
|
-
</div>
|
|
131
|
-
|
|
132
|
-
<div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">MainScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
127
|
+
<p><strong>4. Create the main screen.</strong></p>
|
|
128
|
+
<p>E.g. <code>hello/app/screens/home.rb</code></p>
|
|
129
|
+
<p>Inherit screen from <code>Prime::Screen</code> and rewrite the <code>render</code> method, which will be runned after first opening screen.</p>
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">MainScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
133
133
|
title <span class="string">'Main screen'</span>
|
|
134
134
|
|
|
135
135
|
<span class="function"><span class="keyword">def</span> <span class="title">render</span></span>
|
|
136
136
|
<span class="variable">@main_section</span> = <span class="constant">MyProfileSection</span>.new(<span class="symbol">screen:</span> <span class="keyword">self</span>, <span class="symbol">model:</span> <span class="constant">User</span>.first)
|
|
137
137
|
<span class="variable">@main_section</span>.render
|
|
138
138
|
<span class="keyword">end</span>
|
|
139
|
-
<span class="keyword">end</span></pre></div
|
|
140
|
-
|
|
141
|
-
</li>
|
|
139
|
+
<span class="keyword">end</span></pre></div>
|
|
142
140
|
|
|
141
|
+
|
|
143
142
|
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<div class="pilwrap ">
|
|
148
|
-
<a class="pilcrow" href="#section-6">¶</a>
|
|
149
|
-
</div>
|
|
150
|
-
<p><strong>4. Create your first section.</strong></p>
|
|
143
|
+
<p><strong>5. Create your first section.</strong></p>
|
|
144
|
+
<p>E.g. <code>hello/app/sections/home/section.rb</code></p>
|
|
151
145
|
<p>"Section" is something like helper, which contains "Elements".</p>
|
|
152
146
|
<p>Each element will be added to the parent screen when you run <code>section.render</code></p>
|
|
153
147
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
<div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">MyProfileSection</span> <span class="inheritance">< <span class="parent">Prime::Section</span></span></span>
|
|
148
|
+
|
|
149
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">HomeSection</span> <span class="inheritance">< <span class="parent">Prime::Section</span></span></span>
|
|
157
150
|
element <span class="symbol">:title</span>, <span class="symbol">text:</span> <span class="string">"Hello World"</span>
|
|
158
151
|
element <span class="symbol">:avatar</span>, <span class="symbol">image:</span> <span class="string">"images/avatar.png"</span>, <span class="symbol">type:</span> <span class="symbol">:image</span>
|
|
159
|
-
<span class="keyword">end</span></pre></div
|
|
160
|
-
|
|
161
|
-
</li>
|
|
152
|
+
<span class="keyword">end</span></pre></div>
|
|
162
153
|
|
|
154
|
+
|
|
163
155
|
|
|
164
|
-
<
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<div class="pilwrap ">
|
|
168
|
-
<a class="pilcrow" href="#section-7">¶</a>
|
|
169
|
-
</div>
|
|
170
|
-
<p><strong>5. Create your first stylesheet file.</strong></p>
|
|
156
|
+
<p><strong>6. Create your first stylesheet file.</strong></p>
|
|
157
|
+
<p>E.g. <code>hello/app/styles/home.rb</code></p>
|
|
171
158
|
<p>Styles will be applied to each element in section.
|
|
172
159
|
The simplest rule by default is: <code>:section-name_:element-name</code>.</p>
|
|
173
160
|
<p>E.g. if you have "MyProfileSection" (the name for section by default will be - <code>my_profile</code>)
|
|
174
161
|
and "title" element, then you should use <code>my_profile_title</code> style name.</p>
|
|
175
162
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
<div class="content"><div class='highlight'><pre><span class="constant">Prime::Styles</span>.define <span class="keyword">do</span>
|
|
163
|
+
|
|
164
|
+
<div class='highlight'><pre><span class="constant">Prime::Styles</span>.define <span class="keyword">do</span>
|
|
179
165
|
style <span class="symbol">:my_profile_title</span>, <span class="symbol">width:</span> <span class="number">300</span>, <span class="symbol">height:</span> <span class="number">20</span>
|
|
180
|
-
<span class="keyword">end</span></pre></div
|
|
181
|
-
|
|
182
|
-
</li>
|
|
166
|
+
<span class="keyword">end</span></pre></div>
|
|
183
167
|
|
|
168
|
+
|
|
184
169
|
|
|
185
|
-
<
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<a class="pilcrow" href="#section-8">¶</a>
|
|
190
|
-
</div>
|
|
191
|
-
<p>You can pass namespace to <code>define</code> method.</p>
|
|
192
|
-
|
|
193
|
-
</div>
|
|
194
|
-
|
|
195
|
-
<div class="content"><div class='highlight'><pre><span class="constant">Prime::Styles</span>.define <span class="symbol">:my_profile</span> <span class="keyword">do</span>
|
|
170
|
+
<p>You can pass namespace to <code>define</code> method.</p>
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
<div class='highlight'><pre><span class="constant">Prime::Styles</span>.define <span class="symbol">:my_profile</span> <span class="keyword">do</span>
|
|
196
174
|
style <span class="symbol">:title</span>, <span class="symbol">width:</span> <span class="number">300</span>, <span class="symbol">height:</span> <span class="number">20</span>
|
|
197
|
-
<span class="keyword">end</span></pre></div
|
|
198
|
-
|
|
199
|
-
|
|
175
|
+
<span class="keyword">end</span></pre></div>
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
<p><strong> Next </strong></p>
|
|
180
|
+
<p><a href="screens.html">Read more about Screens</a></p>
|
|
181
|
+
|
|
200
182
|
|
|
201
|
-
|
|
183
|
+
|
|
184
|
+
<div class="fleur">h</div>
|
|
185
|
+
</div>
|
|
202
186
|
</div>
|
|
203
187
|
</body>
|
|
204
188
|
</html>
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>models.rb</title>
|
|
6
|
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
7
|
+
<link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
|
|
8
|
+
<link rel="stylesheet" media="all" href="docco.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div class="container">
|
|
12
|
+
<div class="page">
|
|
13
|
+
|
|
14
|
+
<div class="header">
|
|
15
|
+
|
|
16
|
+
<h1>models.rb</h1>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<div class="toc">
|
|
21
|
+
<h3>Table of Contents</h3>
|
|
22
|
+
<ol>
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
<li>
|
|
26
|
+
<a class="source" href="getting_started.html">
|
|
27
|
+
getting_started.rb
|
|
28
|
+
</a>
|
|
29
|
+
</li>
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
<li>
|
|
33
|
+
<a class="source" href="models.html">
|
|
34
|
+
models.rb
|
|
35
|
+
</a>
|
|
36
|
+
</li>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<li>
|
|
40
|
+
<a class="source" href="screens.html">
|
|
41
|
+
screens.rb
|
|
42
|
+
</a>
|
|
43
|
+
</li>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<li>
|
|
47
|
+
<a class="source" href="sections.html">
|
|
48
|
+
sections.rb
|
|
49
|
+
</a>
|
|
50
|
+
</li>
|
|
51
|
+
|
|
52
|
+
</ol>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
<p><strong> What is a Model? </strong></p>
|
|
60
|
+
<p>"Model" will help you to store any information in database and sync this information with server.</p>
|
|
61
|
+
<p><strong> Create a model. </strong></p>
|
|
62
|
+
<p>Just inherit it from <code>Prime::Model</code>.</p>
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">Event</span> <span class="inheritance">< <span class="parent">Prime::Model</span></span></span>
|
|
66
|
+
<span class="keyword">end</span></pre></div>
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
<p><strong> Add some attributes to model. </strong></p>
|
|
71
|
+
<p>E.g. we want event to have title and description.</p>
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">Event</span> <span class="inheritance">< <span class="parent">Prime::Model</span></span></span>
|
|
75
|
+
attribute <span class="symbol">:title</span>
|
|
76
|
+
attribute <span class="symbol">:description</span>
|
|
77
|
+
<span class="keyword">end</span></pre></div>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
<p><strong> Create some item. </strong></p>
|
|
82
|
+
<p>This event will be saved to database and accessible after restart of application.</p>
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
<div class='highlight'><pre>event = <span class="constant">Event</span>.create(
|
|
86
|
+
<span class="symbol">title:</span> <span class="string">'MotionPrime release.'</span>,
|
|
87
|
+
<span class="symbol">description:</span> <span class="string">'Check out new features.'</span>
|
|
88
|
+
)</pre></div>
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
<p><strong> Retrieve all events </strong></p>
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
<div class='highlight'><pre><span class="constant">Event</span>.all</pre></div>
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
<div class="fleur">h</div>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
data/doc/docs/screens.html
CHANGED
|
@@ -4,170 +4,120 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<title>screens.rb</title>
|
|
6
6
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
7
|
-
<
|
|
7
|
+
<link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
|
|
8
8
|
<link rel="stylesheet" media="all" href="docco.css" />
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
|
-
<div
|
|
12
|
-
<div
|
|
13
|
-
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
<div class="container">
|
|
12
|
+
<div class="page">
|
|
13
|
+
|
|
14
|
+
<div class="header">
|
|
15
|
+
|
|
16
|
+
<h1>screens.rb</h1>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<div class="toc">
|
|
21
|
+
<h3>Table of Contents</h3>
|
|
22
|
+
<ol>
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
<li>
|
|
26
|
+
<a class="source" href="getting_started.html">
|
|
27
|
+
getting_started.rb
|
|
28
|
+
</a>
|
|
29
|
+
</li>
|
|
21
30
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
31
|
+
|
|
32
|
+
<li>
|
|
33
|
+
<a class="source" href="models.html">
|
|
34
|
+
models.rb
|
|
35
|
+
</a>
|
|
36
|
+
</li>
|
|
26
37
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
38
|
+
|
|
39
|
+
<li>
|
|
40
|
+
<a class="source" href="screens.html">
|
|
41
|
+
screens.rb
|
|
42
|
+
</a>
|
|
43
|
+
</li>
|
|
31
44
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
45
|
+
|
|
46
|
+
<li>
|
|
47
|
+
<a class="source" href="sections.html">
|
|
48
|
+
sections.rb
|
|
49
|
+
</a>
|
|
50
|
+
</li>
|
|
51
|
+
|
|
52
|
+
</ol>
|
|
36
53
|
</div>
|
|
37
|
-
</li>
|
|
38
|
-
</ul>
|
|
39
|
-
|
|
40
|
-
<ul class="sections">
|
|
41
|
-
|
|
42
|
-
<li id="title">
|
|
43
|
-
<div class="annotation">
|
|
44
|
-
<h1>screens.rb</h1>
|
|
45
|
-
</div>
|
|
46
|
-
</li>
|
|
47
|
-
|
|
48
54
|
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
|
|
49
58
|
|
|
50
|
-
<
|
|
51
|
-
<div class="annotation">
|
|
52
|
-
|
|
53
|
-
<div class="pilwrap ">
|
|
54
|
-
<a class="pilcrow" href="#section-1">¶</a>
|
|
55
|
-
</div>
|
|
56
|
-
<p><strong> What is a Screen? </strong></p>
|
|
59
|
+
<p><strong> What is a Screen? </strong></p>
|
|
57
60
|
<p>"Screen" is the most common class in MotionPrime, you can create entire application using only "Screens".
|
|
58
61
|
Generally it's just a "UIViewController" wrapper with some syntax sugar.
|
|
59
62
|
For RubyOnRails developers the nearest analogy would be "Controllers".</p>
|
|
60
|
-
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<div class="content"><div class='highlight'><pre>---</pre></div></div>
|
|
64
|
-
|
|
65
|
-
</li>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<li id="section-2">
|
|
69
|
-
<div class="annotation">
|
|
70
|
-
|
|
71
|
-
<div class="pilwrap ">
|
|
72
|
-
<a class="pilcrow" href="#section-2">¶</a>
|
|
73
|
-
</div>
|
|
74
|
-
<p><strong> Create a screen. </strong></p>
|
|
63
|
+
<p><strong> Create a screen. </strong></p>
|
|
75
64
|
<p>Just inherit it from <code>Prime::Screen</code>.</p>
|
|
76
65
|
|
|
77
|
-
</div>
|
|
78
|
-
|
|
79
|
-
<div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
80
|
-
<span class="keyword">end</span></pre></div></div>
|
|
81
|
-
|
|
82
|
-
</li>
|
|
83
66
|
|
|
67
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
68
|
+
<span class="keyword">end</span></pre></div>
|
|
84
69
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<div class="pilwrap ">
|
|
89
|
-
<a class="pilcrow" href="#section-3">¶</a>
|
|
90
|
-
</div>
|
|
91
|
-
<p><strong> Render the screen. </strong></p>
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
<p><strong> Render the screen. </strong></p>
|
|
92
73
|
<p>You should rewrite the <code>render</code> method of <code>Prime::Screen</code>, which will be runned after first opening screen.</p>
|
|
93
74
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
75
|
+
|
|
76
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
97
77
|
<span class="function"><span class="keyword">def</span> <span class="title">render</span></span>
|
|
98
78
|
<span class="variable">@main_section</span> = <span class="constant">MyProfileSection</span>.new(<span class="symbol">screen:</span> <span class="keyword">self</span>, <span class="symbol">model:</span> <span class="constant">User</span>.first)
|
|
99
79
|
<span class="variable">@main_section</span>.render
|
|
100
80
|
<span class="keyword">end</span>
|
|
101
|
-
<span class="keyword">end</span></pre></div
|
|
102
|
-
|
|
103
|
-
</li>
|
|
81
|
+
<span class="keyword">end</span></pre></div>
|
|
104
82
|
|
|
83
|
+
|
|
105
84
|
|
|
106
|
-
<
|
|
107
|
-
<div class="annotation">
|
|
108
|
-
|
|
109
|
-
<div class="pilwrap ">
|
|
110
|
-
<a class="pilcrow" href="#section-4">¶</a>
|
|
111
|
-
</div>
|
|
112
|
-
<p><strong> Set screen's title </strong></p>
|
|
85
|
+
<p><strong> Set screen's title </strong></p>
|
|
113
86
|
<p>Title will be used in screen's navigation controller and will be shown on top of screen.</p>
|
|
114
|
-
<p>NOTE: screen should be created with enabled navigation (see "Initialize screen" block).</p>
|
|
115
87
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
88
|
+
|
|
89
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
119
90
|
title <span class="string">'Foo screen'</span>
|
|
120
|
-
<span class="keyword">end</span></pre></div
|
|
121
|
-
|
|
122
|
-
</li>
|
|
91
|
+
<span class="keyword">end</span></pre></div>
|
|
123
92
|
|
|
93
|
+
|
|
124
94
|
|
|
125
|
-
<
|
|
126
|
-
<div class="annotation">
|
|
127
|
-
|
|
128
|
-
<div class="pilwrap ">
|
|
129
|
-
<a class="pilcrow" href="#section-5">¶</a>
|
|
130
|
-
</div>
|
|
131
|
-
<p>You can pass block to define screen's title</p>
|
|
95
|
+
<p>You can pass block to define screen's title</p>
|
|
132
96
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
97
|
+
|
|
98
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
136
99
|
title { params[<span class="symbol">:title</span>] }
|
|
137
|
-
<span class="keyword">end</span></pre></div
|
|
138
|
-
|
|
139
|
-
</li>
|
|
100
|
+
<span class="keyword">end</span></pre></div>
|
|
140
101
|
|
|
102
|
+
|
|
141
103
|
|
|
142
|
-
<
|
|
143
|
-
<div class="annotation">
|
|
144
|
-
|
|
145
|
-
<div class="pilwrap ">
|
|
146
|
-
<a class="pilcrow" href="#section-6">¶</a>
|
|
147
|
-
</div>
|
|
148
|
-
<p><strong> Initialize screen. </strong></p>
|
|
104
|
+
<p><strong> Initialize screen. </strong></p>
|
|
149
105
|
<p>Available options:</p>
|
|
150
106
|
<ul>
|
|
151
107
|
<li><code>:navigation</code>. When this options is true, screen will be created with navigation support: it will allow adding title and left/right buttons.
|
|
152
108
|
This option is true by default.</li>
|
|
153
109
|
</ul>
|
|
154
110
|
|
|
155
|
-
</div>
|
|
156
|
-
|
|
157
|
-
<div class="content"><div class='highlight'><pre><span class="function"><span class="keyword">def</span> <span class="title">open_foo_screen</span></span>
|
|
158
|
-
foo_screen = <span class="constant">FooScreen</span>.new(<span class="symbol">navigation:</span> <span class="keyword">false</span>)
|
|
159
|
-
<span class="keyword">end</span></pre></div></div>
|
|
160
|
-
|
|
161
|
-
</li>
|
|
162
111
|
|
|
112
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">AppDelegate</span> <span class="inheritance">< <span class="parent">Prime::BaseAppDelegate</span></span></span>
|
|
113
|
+
<span class="function"><span class="keyword">def</span> <span class="title">on_load</span><span class="params">(application, launch_options)</span></span>
|
|
114
|
+
foo_screen = <span class="constant">FooScreen</span>.new(<span class="symbol">navigation:</span> <span class="keyword">false</span>)
|
|
115
|
+
<span class="keyword">end</span>
|
|
116
|
+
<span class="keyword">end</span></pre></div>
|
|
163
117
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<div class="pilwrap ">
|
|
168
|
-
<a class="pilcrow" href="#section-7">¶</a>
|
|
169
|
-
</div>
|
|
170
|
-
<p><strong> Open screen: using app delegate. </strong></p>
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
<p><strong> Open screen: from app delegate. </strong></p>
|
|
171
121
|
<p>Opening screen using app delegate is the most basic way, you would use it at least on app load.</p>
|
|
172
122
|
<p>Available options:</p>
|
|
173
123
|
<ul>
|
|
@@ -176,58 +126,55 @@ You can use root: true when you have already opened screen with sidebar, and you
|
|
|
176
126
|
This option is false by default if you already have root screen and true if not.</p>
|
|
177
127
|
</li>
|
|
178
128
|
<li><p><code>:sidebar</code>. Send <code>Prime::Screen</code> instance to this option if you want to create root screen with sidebar.
|
|
179
|
-
Value of this options will be used as sidebar controller
|
|
129
|
+
Value of this options will be used as sidebar controller.
|
|
130
|
+
NOTE: you should install some gem providing sidebar functionality, e.g. 'prime_reside_menu'</p>
|
|
180
131
|
</li>
|
|
181
132
|
</ul>
|
|
182
133
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<span class="keyword">end</span
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
<
|
|
195
|
-
<div class="annotation">
|
|
196
|
-
|
|
197
|
-
<div class="pilwrap ">
|
|
198
|
-
<a class="pilcrow" href="#section-8">¶</a>
|
|
199
|
-
</div>
|
|
200
|
-
<p><strong> Open screen: using parent screen. </strong></p>
|
|
134
|
+
|
|
135
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">AppDelegate</span> <span class="inheritance">< <span class="parent">Prime::BaseAppDelegate</span></span></span>
|
|
136
|
+
<span class="function"><span class="keyword">def</span> <span class="title">on_load</span><span class="params">(application, launch_options)</span></span>
|
|
137
|
+
foo_screen = <span class="constant">FooScreen</span>.new
|
|
138
|
+
sidebar = <span class="constant">MySidebar</span>.new(<span class="symbol">navigation:</span> <span class="keyword">false</span>)
|
|
139
|
+
app_delegate.open_screen foo_screen, <span class="symbol">sidebar:</span> sidebar
|
|
140
|
+
<span class="keyword">end</span>
|
|
141
|
+
<span class="keyword">end</span></pre></div>
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
<p><strong> Open screen: from parent screen. </strong></p>
|
|
201
146
|
<p>Opening screen using parent screen is usefull if you want to create inherited screen.
|
|
202
147
|
Parent screen should have been initialized with navigation support.</p>
|
|
203
148
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
<span class="keyword">end</span
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
<
|
|
215
|
-
<div class="annotation">
|
|
216
|
-
|
|
217
|
-
<div class="pilwrap ">
|
|
218
|
-
<a class="pilcrow" href="#section-9">¶</a>
|
|
219
|
-
</div>
|
|
220
|
-
<p><strong> Open screen: using short version. </strong></p>
|
|
149
|
+
|
|
150
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">FooScreen</span> <span class="inheritance">< <span class="parent">Prime::Screen</span></span></span>
|
|
151
|
+
<span class="function"><span class="keyword">def</span> <span class="title">render</span></span>
|
|
152
|
+
second_screen = <span class="constant">SecondScreen</span>.new(<span class="symbol">navigation:</span> <span class="keyword">true</span>)
|
|
153
|
+
foo_screen.open_screen second_screen
|
|
154
|
+
<span class="keyword">end</span>
|
|
155
|
+
<span class="keyword">end</span></pre></div>
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
<p><strong> Open screen: using short version. </strong></p>
|
|
221
160
|
<p>Opening screen using short syntax available both for opening via app delegate and via parent screen.</p>
|
|
222
161
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
162
|
+
|
|
163
|
+
<div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">AppDelegate</span> <span class="inheritance">< <span class="parent">Prime::BaseAppDelegate</span></span></span>
|
|
164
|
+
<span class="function"><span class="keyword">def</span> <span class="title">on_load</span><span class="params">(application, launch_options)</span></span>
|
|
165
|
+
open_screen <span class="symbol">:foo_bar</span>, <span class="symbol">sidebar:</span> <span class="keyword">true</span>
|
|
166
|
+
<span class="keyword">end</span>
|
|
167
|
+
<span class="keyword">end</span></pre></div>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
<p><strong> Next </strong></p>
|
|
172
|
+
<p><a href="sections.html">Read more about Sections</a></p>
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
<div class="fleur">h</div>
|
|
177
|
+
</div>
|
|
231
178
|
</div>
|
|
232
179
|
</body>
|
|
233
180
|
</html>
|