-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
663 lines (591 loc) · 38.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>PrimeGap | Web, Smart and Mobile Development</title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<!--[if lt IE 9]>
<script src="/wp-content/themes/twentythirteen/js/html5.js"></script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="PrimeGap » Feed" href="/feed/" />
<link rel='stylesheet' id='twentythirteen-fonts-css' href='//fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700%2C300italic%2C400italic%2C700italic%7CBitter%3A400%2C700&subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='genericons-css' href='/wp-content/themes/twentythirteen/fonts/genericons.css?ver=2.09' type='text/css' media='all' />
<link rel='stylesheet' id='twentythirteen-style-css' href='/wp-content/themes/twentythirteen/style.css?ver=2013-07-18' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentythirteen-ie-css' href='/wp-content/themes/twentythirteen/css/ie.css?ver=2013-07-18' type='text/css' media='all' />
<![endif]-->
<script type='text/javascript' src='http://primegap.net/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://primegap.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<meta name="generator" content="WordPress 3.6.1 - really-static 0.5" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18862123-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style type="text/css" id="twentythirteen-header-css">
.site-header {
background: url(http://146.185.141.217/wp-content/uploads/2011/02/cropped-bokeh-fullscreen1.jpg) no-repeat scroll top;
background-size: 1600px auto;
}
.site-title,
.site-description {
color: #ffffff;
}
</style>
<style type="text/css" id="syntaxhighlighteranchor"></style>
</head>
<body class="home blog">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="/" title="PrimeGap" rel="home">
<h1 class="site-title">PrimeGap</h1>
<h2 class="site-description">Web, Smart and Mobile Development</h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
<div class="menu-home-menu-container"><ul id="menu-home-menu" class="nav-menu"><li id="menu-item-330" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-330"><a href="http://primegap.net/">Home</a></li>
<li id="menu-item-329" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-329"><a href="/projects/">Projects</a></li>
<li id="menu-item-331" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-331"><a href="/category/tutorial/">Tutorials</a></li>
<li id="menu-item-328" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-328"><a href="/about/">About</a></li>
</ul></div> <form role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form> </nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->
<div id="main" class="site-main">
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<article id="post-231" class="post-231 post type-post status-publish format-standard hentry category-tutorial">
<header class="entry-header">
<h1 class="entry-title">
<a href="/2011/10/20/noisegen-generate-background-noise-with-jquer/" rel="bookmark">NoiseGen, generate background noise with jQuery</a>
</h1>
<div class="entry-meta">
<span class="date"><a href="/2011/10/20/noisegen-generate-background-noise-with-jquer/" title="Permalink to NoiseGen, generate background noise with jQuery" rel="bookmark"><time class="entry-date" datetime="2011-10-20T23:24:07+00:00">October 20, 2011</time></a></span><span class="categories-links"><a href="/category/tutorial/" title="View all posts in Tutorial" rel="category tag">Tutorial</a></span><span class="author vcard"><a class="url fn n" href="/author/lucaongaro/" title="View all posts by Luca Ongaro" rel="author">Luca Ongaro</a></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Adding a subtle background noise to Web pages is becoming a design trend: it produces a nice old-skool “analog” look that feels more like the “real world”. Neat examples are <a href="http://forrst.com/">Forrst.com</a> or <a href="http://stripe.com/">Stripe.com</a>, as well as many UI elements in iOS5.</p>
<div id="attachment_234" class="wp-caption aligncenter" style="width: 326px"><a href="http://www.lucaongaro.eu/demos/noisegen/" target="_blank"><img src="/wp-content/uploads/2013/10/Screen-Shot-2011-10-21-at-12.09.28-AM-300x78.png" alt="Screen-Shot-2011-10-21-at-12.09.28-AM" width="300" height="78" class="alignnone size-medium wp-image-335" /></a><p class="wp-caption-text">Click the image to see a demo of NoiseGen, the jQuery plugin discussed later in this article</p></div>
<p>The usual way to achieve the effect is to use an image editing software to produce a PNG image and then set it as the background-image through CSS. Still, this approach has some drawbacks. First of all, the image has its bandwidth footprint. Moreover, fine-tuning background noise during development can be very time consuming, having to come back to the image editing software to save a new image each time you want to adjust the effect. Luckily, there’s a solution: using JavaScript and the HTML5 canvas element to dynamically produce a background image.</p>
<p>The idea is simple: create a canvas element, paint it with noise, and then set it as the background-image through CSS.</p>
<pre class="brush: jscript; title: ; notranslate" title="">
// Create the canvas
var canvas = document.createElement("canvas");
canvas.width = 80;
canvas.height = 80;
var context = canvas.getContext("2d"), x, y, opacity = 0.2;
// Paint it with random noise
for (x=0; x < canvas.width; x++) {
for (y=0; y < canvas.height; y++) {
var rand = Math.floor(Math.random() * 60);
context.fillStyle = "rgba("+rand+","+rand+","+rand+","+opacity+")";
context.fillRect(x, y, 1, 1);
}
}
// Use it as the CSS background-image (here we are assuming jQuery is imported)
$("body").css("background-image", "url(" + canvas.toDataURL("image/png") + ")");
</pre>
<p>Unfortunately, some browsers do not support the canvas element yet (guess who?), so we need to provide for a graceful fallback. Also, it would be cool to have the possibility to finely tweak parameters like opacity, dimension of the image, size of the noise grains, statistical distribution of noise, colors, etc…</p>
<p>Luckily, we’ve got you covered! <a title="NoiseGen" href="https://github.com/lucaong/noiseGen" target="_blank">NoiseGen</a> is an open-source jQuery plugin that does exactly that, offering support for a fallback image for <del>crappy</del> old browsers and many useful configuration options. Using it is straightforward:</p>
<pre class="brush: jscript; title: ; notranslate" title="">
$(document).ready({
$("body").noiseGen({ fallbackImage: "bkgnd.png" });
});
</pre>
<p>Here we’re adding background noise to the body element. Cool browsers will do that dynamically on the client side, while old browsers can rely on the bandwidth hungry image. Moreover, we can finely tweak the look of our background:</p>
<pre class="brush: jscript; title: ; notranslate" title="">
$("body").noiseGen({
fallbackImage: "bkgnd.png",
opacity: 0.7,
width: 64,
height: 64,
grainDimension: {
width: 5,
height: 1
},
fromColor: "0099CC",
toColor: "10AADD",
independentChannels: true,
distribution: "uniform",
bias: 5
});
</pre>
<p>Do you want to give noiseGen a try? There’s a <a title="NoiseGen demo" href="http://www.lucaongaro.eu/demos/noisegen/">demo here</a>, and you can read more documentation on the <a title="GitHub noiseGen" href="https://github.com/lucaong/noiseGen">GitHub project page</a>, where you can also fork the code and contribute if you want.</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<div class="comments-link">
<a href="/2011/10/20/noisegen-generate-background-noise-with-jquer/#comments" title="Comment on NoiseGen, generate background noise with jQuery"><span class="dsq-postid" data-dsqidentifier="231 http://primegap.net/?p=231">View all 2 comments</span></a> </div><!-- .comments-link -->
</footer><!-- .entry-meta -->
</article><!-- #post -->
<article id="post-160" class="post-160 post type-post status-publish format-standard hentry category-tutorial tag-objectspace tag-rails tag-ruby tag-savon tag-soap">
<header class="entry-header">
<h1 class="entry-title">
<a href="/2011/08/12/birth-and-death-of-an-object-in-ruby/" rel="bookmark">Birth and death of an object in Ruby</a>
</h1>
<div class="entry-meta">
<span class="date"><a href="/2011/08/12/birth-and-death-of-an-object-in-ruby/" title="Permalink to Birth and death of an object in Ruby" rel="bookmark"><time class="entry-date" datetime="2011-08-12T09:00:33+00:00">August 12, 2011</time></a></span><span class="categories-links"><a href="/category/tutorial/" title="View all posts in Tutorial" rel="category tag">Tutorial</a></span><span class="tags-links"><a href="/tag/objectspace/" rel="tag">ObjectSpace</a>, <a href="/tag/rails/" rel="tag">Rails</a>, <a href="/tag/ruby/" rel="tag">Ruby</a>, <a href="/tag/savon/" rel="tag">Savon</a>, <a href="/tag/soap/" rel="tag">SOAP</a></span><span class="author vcard"><a class="url fn n" href="/author/andreamostosi/" title="View all posts by Andrea Mostosi" rel="author">Andrea Mostosi</a></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Last week I played with a SOAP API with <a href="http://savonrb.com"><code>savon.rb</code></a> to develop a newsletter system. </p>
<p>This API require authentication with a two-way handshake. At first you send a login, a password and a key and it gave you back a token. When you ended operation you should send a “close connection” command.</p>
<p>This is a popular way but when you use it in a model seems a bit tricky so I decided to hide this method inside a custom class.</p>
<p>First I create <code>ApiWrapper</code> class that wrap SOAP operation:</p>
<pre class="brush: ruby; title: ; notranslate" title="">
class ApiWrapper
def initialize
@client = Savon::Client.new APP_CONFIG[:wsdl]
end
def open_connection
response = do_soap_request("openApiConnection", {
:login => APP_CONFIG[:login],
:pwd => APP_CONFIG[:pwd],
:key => APP_CONFIG[:key]
})
@token = response[:token]
end
def close_connection
response = do_soap_request("closeApiConnection", {
:token => @token
})
end
def do_soap_request(method, arguments)
response = @client.request(:api, method) do
soap.body = arguments
end
response.to_hash
end
end
</pre>
<p>Then use the <code>ApiWrapper</code> object inside the model:</p>
<pre class="brush: ruby; title: ; notranslate" title="">
class Newsletter
def initialize
@api = ApiWrapper.new
end
def send
# do something
end
end
</pre>
<p>Now we can use the <code>@api</code> object for communicate with the API. I want to hide the authentication process, <strong>first attempt can be to incapsulate operation inside each method</strong>:</p>
<pre class="brush: ruby; title: ; notranslate" title="">
def send
@api.open_connection
@api.do_soap_request("send", arguments)
@api.close_connection
end
</pre>
<p>It works but the webservice il very slow, opening and closing connection require about 20 seconds and for hundred operation is too much time.</p>
<p><strong>Another way is to encapsulate authentication process inside object initialization and finalization</strong>. For this we need something similar to a C++ constructor and destructor method. Ruby has got the <code>initialize</code> method similar to constructor but it does not have a standard destructor. Luckily we can emulate it.</p>
<p>The <a href="http://ruby-doc.org/core/classes/ObjectSpace.html"><code>ObjectSpace</code></a> module enable you to <strong>define block that is executed when the object is destroyed</strong> using the <code>define_finalizer</code> method.</p>
<pre class="brush: ruby; title: ; notranslate" title="">
ObjectSpace.define_finalizer(self, Proc.new{@api.close_connection})
</pre>
<p>In the <code>initialize</code> method we can open the connection and define this finalizer. We can rewite the method as follow:</p>
<pre class="brush: ruby; title: ; notranslate" title="">
def initialize
@api = ApiWrapper.new
@api.open_connection
ObjectSpace.define_finalizer(self, Proc.new{@api.close_connection})
end
</pre>
<p>Now we can use the object with easier and more efficient connection management.</p>
<pre class="brush: ruby; title: ; notranslate" title="">
> n = Newsletter.new # implicit connection open
> n.send # connection is still open
> n.send # connection is still open
> n.send # connection is still open
> quit # implicit connection close
</pre>
<p>These methods are very useful (also) to mask unnecessary complexity and make the data access more readable.</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<div class="comments-link">
<a href="/2011/08/12/birth-and-death-of-an-object-in-ruby/#comments" title="Comment on Birth and death of an object in Ruby"><span class="dsq-postid" data-dsqidentifier="160 http://primegap.net/?p=160">View all 2 comments</span></a> </div><!-- .comments-link -->
</footer><!-- .entry-meta -->
</article><!-- #post -->
<article id="post-86" class="post-86 post type-post status-publish format-standard hentry category-tutorial tag-android tag-appcelerator tag-iphone tag-mvc">
<header class="entry-header">
<h1 class="entry-title">
<a href="/2011/08/05/mvc-implementation-for-appcelerator-part-4-model-and-db/" rel="bookmark">An MVC implementation for Appcelerator – Part 4: Model and DB</a>
</h1>
<div class="entry-meta">
<span class="date"><a href="/2011/08/05/mvc-implementation-for-appcelerator-part-4-model-and-db/" title="Permalink to An MVC implementation for Appcelerator – Part 4: Model and DB" rel="bookmark"><time class="entry-date" datetime="2011-08-05T09:55:37+00:00">August 5, 2011</time></a></span><span class="categories-links"><a href="/category/tutorial/" title="View all posts in Tutorial" rel="category tag">Tutorial</a></span><span class="tags-links"><a href="/tag/android/" rel="tag">Android</a>, <a href="/tag/appcelerator/" rel="tag">Appcelerator</a>, <a href="/tag/iphone/" rel="tag">iPhone</a>, <a href="/tag/mvc/" rel="tag">MVC</a></span><span class="author vcard"><a class="url fn n" href="/author/andreamostosi/" title="View all posts by Andrea Mostosi" rel="author">Andrea Mostosi</a></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>In <a href="http://primegap.net/2011/07/28/mvc-implementation-appcelerator-part-3-simple-demo/">part 3</a> we setup a simple app based on <a href="http://www.fabiobarbieri.it">Fabio Barbieri</a>‘s evolution of <strong><a href="https://github.com/bswatson/Appcelerator-on-Rails" title="Appcelerator on Rails on GitHub">Appcelerator on Rails</a></strong>. Now is time to start playing with some models and data.</p>
<p>The application had two controllers: Products and Clients. We added to the Products controller a function that shows a static message when we click on the button. Now we want to fetch the data to display from the database.</p>
<p>First create the “Client” model:</p>
<pre class="brush: bash; title: ; notranslate" title="">
ruby scripts/generate.rb model Client name:string
Resources/models/client.js
Resources/db/migrations/20110721190738.js
</pre>
<p><code>Resources/models/client.js</code></p>
<pre class="brush: jscript; title: ; notranslate" title="">
var Client = Model.extend({
table_name: "clients",
_fields: {id: Number, name : String},
find: function(id) {
var model = new Client(this.db, this._find(id));
return model;
},
item_from: function(row) {
var model = new Client(this.db, this._item_from(row));
return model;
}
});
</pre>
<p><code>Resources/db/migrations/20110721190738.js</code></p>
<pre class="brush: jscript; title: ; notranslate" title="">
migrate("20110721190738", "CREATE TABLE IF NOT EXISTS clients (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name STRING)");
</pre>
<p>Each time we start the application, the closure in <code>db.js</code> run the migrations not already executed. We can run the app to create the table then add some fake data with a SQLite manager. Alternatively we can create another migration to add sample data, it’s up to you.</p>
<p>Create <code>Resources/db/migrations/20110721190739.js</code> (one unit after previous migration) and write:</p>
<pre class="brush: jscript; title: ; notranslate" title="">
migrate("20110721190739", "INSERT INTO clients (name) VALUES ('John Doe')");
migrate("20110721190740", "INSERT INTO clients (name) VALUES ('Jane Doe')");
</pre>
<p>When you start the app this migration will insert into “clients” table two items.</p>
<p>Finally add a function to the Clients controller to load the data and display them on an alert box:</p>
<pre class="brush: jscript; title: ; notranslate" title="">
loadClients: function() {
var c = new Client(db);
var recs = c.find_all();
var results = "Clients:n";
if(recs.length &gt; 0)
{
for(var i = 0; i &lt; recs.length; i++)
{
results += recs[i].name + 'n';
}
}
else
{
results += "none";
}
alert(results);
}
</pre>
<p>And the corresponding button into the Clients view:</p>
<pre class="brush: jscript; title: ; notranslate" title="">
var button = Titanium.UI.createButton({
title:'Click me',
font:{fontSize:12,fontWeight:'bold'},
width:65,
height:30,
top:300
});
button.addEventListener('click', this.controller.loadClients);
this.win.add(button);
</pre>
<p>Launch the simulator and switch to the “Client” tab. When you click on the button the client list will be showed.</p>
<p><a href="http://primegap.s3.amazonaws.com/wp-content/uploads/2011/07/mvcsample2.jpg"><img src="http://primegap.s3.amazonaws.com/wp-content/uploads/2011/07/mvcsample2.jpg" alt="" width="399" height="375" class="alignnone size-full wp-image-137" /></a></p>
<p>You can download the <a href="https://s3.amazonaws.com/primegap-misc/mvcsample2.zip">sample code</a> and look use it for your projects.</p>
<p>With this fourth part we conclude this series of tutorials. It’s not too much, just a start but we are planning to create a new series of tutorials in september that will cover the coding of a complete application with Appcelerator on Rails.</p>
<p>Enjoy and have a good summer vacation!</p>
<p>Links:<br />
Part 1: <a href="http://primegap.net/2011/05/31/an-mvc-implementation-for-appcelerator-part-1/" title="Part 1">Introduction</a><br />
Part 2: <a href="http://primegap.net/2011/07/20/mvc-implementation-appcelerator-part-2-improvements/" title="Part 2">Improvements</a><br />
Part 3: <a href="http://primegap.net/2011/07/28/mvc-implementation-appcelerator-part-3-simple-demo/" title="Part 3">A simple demo</a></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<div class="comments-link">
<a href="/2011/08/05/mvc-implementation-for-appcelerator-part-4-model-and-db/#comments" title="Comment on An MVC implementation for Appcelerator – Part 4: Model and DB"><span class="dsq-postid" data-dsqidentifier="86 http://primegap.net/?p=86">View all 5 comments</span></a> </div><!-- .comments-link -->
</footer><!-- .entry-meta -->
</article><!-- #post -->
<article id="post-82" class="post-82 post type-post status-publish format-standard hentry category-tutorial tag-android tag-appcelerator tag-iphone tag-mvc">
<header class="entry-header">
<h1 class="entry-title">
<a href="/2011/07/28/mvc-implementation-appcelerator-part-3-simple-demo/" rel="bookmark">An MVC implementation for Appcelerator – Part 3: A simple demo</a>
</h1>
<div class="entry-meta">
<span class="date"><a href="/2011/07/28/mvc-implementation-appcelerator-part-3-simple-demo/" title="Permalink to An MVC implementation for Appcelerator – Part 3: A simple demo" rel="bookmark"><time class="entry-date" datetime="2011-07-28T14:52:20+00:00">July 28, 2011</time></a></span><span class="categories-links"><a href="/category/tutorial/" title="View all posts in Tutorial" rel="category tag">Tutorial</a></span><span class="tags-links"><a href="/tag/android/" rel="tag">Android</a>, <a href="/tag/appcelerator/" rel="tag">Appcelerator</a>, <a href="/tag/iphone/" rel="tag">iPhone</a>, <a href="/tag/mvc/" rel="tag">MVC</a></span><span class="author vcard"><a class="url fn n" href="/author/andreamostosi/" title="View all posts by Andrea Mostosi" rel="author">Andrea Mostosi</a></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>In <a href="http://primegap.net/2011/07/20/mvc-implementation-appcelerator-part-2-improvements/">part 2</a> we learned how to improve a standard distribution of <strong><a href="https://github.com/bswatson/Appcelerator-on-Rails" title="Appcelerator on Rails on GitHub">Appcelerator on Rails</a></strong>. Now we will see it in action.</p>
<p>We are going to create a small application with 2 empty tab, with a very simple logic, that at the end will look like this.</p>
<p><a href="http://primegap.s3.amazonaws.com/wp-content/uploads/2011/07/mvcsample1.jpg"><img src="http://primegap.s3.amazonaws.com/wp-content/uploads/2011/07/mvcsample1.jpg" alt="" width="600" height="375" class="alignnone size-full wp-image-107" /></a></p>
<p>First create the controllers and the views. We need the <code>ruby</code> interpreter (version 1.8.7) in ordert to run the generators. If you have no Ruby interpreter installed on your system, you can find one <a href="http://www.ruby-lang.org/en/">here</a>.</p>
<p>First controller:</p>
<pre class="brush: bash; title: ; notranslate" title="">
ruby scripts/generate.rb controller Products
Resources/controllers/products.js
Resources/views/products.js
</pre>
<p>Generated code:<br />
<code>Resources/controllers/products.js</code></p>
<pre class="brush: jscript; title: ; notranslate" title="">
Ti.include("/views/products.js");
var ProductController = Controller.extend({
init: function(win) {
this._super(win);
this.view = new ProductView(win, this);
}
});
</pre>
<p><code>Resources/views/products.js</code></p>
<pre class="brush: jscript; title: ; notranslate" title="">
var ProductView = View.extend({
init: function(win, controller) {
this._super(win, controller);
this.layout();
},
layout: function() {
}
});
</pre>
<p>Second controller:</p>
<pre class="brush: bash; title: ; notranslate" title="">
ruby scripts/generate.rb controller Clients
Resources/controllers/clients.js
Resources/views/clients.js
</pre>
<p>Now add some (simple) logic to the first controller:</p>
<pre class="brush: jscript; title: ; notranslate" title="">
btnClicked: function(event) {
alert("click");
}
</pre>
<p>and write code that builds the interface using th controller logic:</p>
<pre class="brush: jscript; title: ; notranslate" title="">
layout: function() {
this.win.title = 'Products';
this.win.backgroundColor = '#fff';
var label = Titanium.UI.createLabel({
color:'#999',
text:'I am Products Window',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto',
});
this.win.add(label);
var button = Titanium.UI.createButton({
title:'Click me',
font:{fontSize:12,fontWeight:'bold'},
width:65,
height:30,
top:300
});
button.addEventListener('click', this.controller.btnClicked);
this.win.add(button);
}
</pre>
<p>You can made the same operation on the other controller and view.</p>
<p>In the <code>app.js</code> file we only setup properties, create tabs and instantiate controllers. Nothing more.</p>
<pre class="brush: jscript; title: ; notranslate" title="">
Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();
// Product tab (root tab)
var productWin = Ti.UI.createWindow({exitOnClose:true});
Ti.include("/controllers/products.js");
var productController = new ProductController(productWin);
var productTab = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Products',
window:productWin
});
// Client tab
var clientWin = Ti.UI.createWindow({exitOnClose:true});
Ti.include("/controllers/clients.js");
var clientController = new ClientController(clientWin);
var clientTab = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Clients',
window:clientWin
});
tabGroup.addTab(productTab);
tabGroup.addTab(clientTab);
tabGroup.open();
</pre>
<p>Now we can launch the emulator and enjoy our new MVC-based project.</p>
<p>You can download the <a href="https://s3.amazonaws.com/primegap-misc/mvcsample1.zip">sample code</a> wrote and packed by <a href="http://www.fabiobarbieri.it">Fabio Barbieri</a>.</p>
<p>Links:<br />
Part 1: <a href="http://primegap.net/2011/05/31/an-mvc-implementation-for-appcelerator-part-1/" title="Part 1">Introduction</a><br />
Part 2: <a href="http://primegap.net/2011/07/20/mvc-implementation-appcelerator-part-2-improvements/" title="Part 2">Improvements</a><br />
Part 4: <a href="http://primegap.net/2011/08/05/mvc-implementation-for-appcelerator-part-4-model-and-db/" title="Part 4">Model and DB</a></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<div class="comments-link">
<a href="/2011/07/28/mvc-implementation-appcelerator-part-3-simple-demo/#comments" title="Comment on An MVC implementation for Appcelerator – Part 3: A simple demo"><span class="dsq-postid" data-dsqidentifier="82 http://primegap.net/?p=82">View all 4 comments</span></a> </div><!-- .comments-link -->
</footer><!-- .entry-meta -->
</article><!-- #post -->
<article id="post-44" class="post-44 post type-post status-publish format-standard hentry category-tutorial tag-android tag-appcelerator tag-iphone tag-mvc">
<header class="entry-header">
<h1 class="entry-title">
<a href="/2011/07/20/mvc-implementation-appcelerator-part-2-improvements/" rel="bookmark">An MVC implementation for Appcelerator – Part 2: Improvements</a>
</h1>
<div class="entry-meta">
<span class="date"><a href="/2011/07/20/mvc-implementation-appcelerator-part-2-improvements/" title="Permalink to An MVC implementation for Appcelerator – Part 2: Improvements" rel="bookmark"><time class="entry-date" datetime="2011-07-20T10:48:32+00:00">July 20, 2011</time></a></span><span class="categories-links"><a href="/category/tutorial/" title="View all posts in Tutorial" rel="category tag">Tutorial</a></span><span class="tags-links"><a href="/tag/android/" rel="tag">Android</a>, <a href="/tag/appcelerator/" rel="tag">Appcelerator</a>, <a href="/tag/iphone/" rel="tag">iPhone</a>, <a href="/tag/mvc/" rel="tag">MVC</a></span><span class="author vcard"><a class="url fn n" href="/author/andreamostosi/" title="View all posts by Andrea Mostosi" rel="author">Andrea Mostosi</a></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Hi again, in this four parts tutorial I will present some ideas and projects to implement a MVC framework for Appcelerator Titanium, a multiplatform (iOS and Android) Javascript framework to build native mobile apps.</p>
<p>In <a href="http://primegap.net/2011/05/31/an-mvc-implementation-for-appcelerator-part-1/" title="Part 1">part 1</a> we discovered the structure of <strong><a href="https://github.com/bswatson/Appcelerator-on-Rails" title="Appcelerator on Rails on GitHub">Appcelerator on Rails</a></strong>. It’s a quite well designed framework, the basic ideas are good but there are several limitations. The first problem comes from the implementation of the controller.</p>
<pre class="brush: jscript; title: ; notranslate" title="">
var MainController = Controller.extend({
init: function(win) {
this._super(win);
this.view = new MainView(win, this);
}
});
(function() {
var win = Titanium.UI.currentWindow;
new MainController(win);
})();
</pre>
<p>The closure at the end of this class instantiates the controller only when you include the file. <strong>If you want to instantiate one more, you must include the class file again and this isn’t good from a coding perspective.</strong> A better implementation would split definition and instantiation.</p>
<p>Controller file can be more compact:</p>
<pre class="brush: jscript; title: ; notranslate" title="">
var MainController = Controller.extend({
init: function(win) {
this._super(win);
this.view = new MainView(win, this);
}
});
</pre>
<p>In this way, when you use the class include file once and it will instantiate the controller every time you need it.</p>
<pre class="brush: jscript; title: ; notranslate" title="">
Ti.include("/controllers/main.js");
var mainController = new MainController(mainWin);
</pre>
<p>This, as well as having potential advantages in terms of memory usage, it’s more rational too.</p>
<p>Another advantage is the ability to <strong>access global variables inside the controllers and views</strong> without weird tricks, something not previously allowed.</p>
<p>These were functional improvements: <strong>another improvement is to clean the included code</strong>. The Appcelerator on Rails’ library files are full of code that is no longer used. As well as increasing the size and memory usage it also generates a long series of warnings that complicates debugging. Cleaning and tidying these files is a necessary work.</p>
<p><a href="http://www.fabiobarbieri.it" title="Fabio Barbieri">Fabio Barbieri</a>, the developer behind these improvements, has made a preliminary sample of the code, cleaned and fixed, that can be downloaded <a href="https://s3.amazonaws.com/primegap-misc/mvcsample.zip">here</a>.</p>
<p>That’s all for part 2. In the next part I will present how to build a simple app starting from these considerations.</p>
<p>Links:<br />
Part 1: <a href="http://primegap.net/2011/05/31/an-mvc-implementation-for-appcelerator-part-1/" title="Part 1">Introduction</a><br />
Part 3: <a href="http://primegap.net/2011/07/28/mvc-implementation-appcelerator-part-3-simple-demo/" title="Part 3">A simple demo</a><br />
Part 4: <a href="http://primegap.net/2011/08/05/mvc-implementation-for-appcelerator-part-4-model-and-db/" title="Part 4">Model and DB</a></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<div class="comments-link">
<a href="/2011/07/20/mvc-implementation-appcelerator-part-2-improvements/#comments" title="Comment on An MVC implementation for Appcelerator – Part 2: Improvements"><span class="dsq-postid" data-dsqidentifier="44 http://primegap.net/?p=44">One comment so far</span></a> </div><!-- .comments-link -->
</footer><!-- .entry-meta -->
</article><!-- #post -->
<nav class="navigation paging-navigation" role="navigation">
<h1 class="screen-reader-text">Posts navigation</h1>
<div class="nav-links">
<div class="nav-previous"><a href="/page/2/index.html" ><span class="meta-nav">←</span> Older posts</a></div>
</div><!-- .nav-links -->
</nav><!-- .navigation -->
</div><!-- #content -->
</div><!-- #primary -->
</div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div id="secondary" class="sidebar-container" role="complementary">
<div class="widget-area">
<aside id="text-2" class="widget widget_text"><h3 class="widget-title">About</h3> <div class="textwidget"><p><a href="http://andreamostosi.name">Andrea Mostosi</a> lives in Bergamo and works in Milano, Italy<br />
<a href="http://lucaongaro.eu">Luca Ongaro</a> and <a href="http://lucatironi.net">Luca Tironi</a> live and work in Berlin, Germany.</p>
<p>They are geeks and proud nerds. They believe in the power of knowledge and the Force.</p>
</div>
</aside><aside id="text-3" class="widget widget_text"><h3 class="widget-title">Twitter</h3> <div class="textwidget"><p>You should follow us on <a href="http://twitter.com/primegap">Twitter</a></p>
<p><a href="http://twitter.com/lucaongaro">@lucaongaro</a><br />
<a href="http://twitter.com/lucatironi">@lucatironi</a><br />
<a href="http://twitter.com/zenkay">@zenkay</a></p>
</div>
</aside><aside id="nav_menu-2" class="widget widget_nav_menu"><h3 class="widget-title">Menu</h3><div class="menu-home-menu-container"><ul id="menu-home-menu-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-330"><a href="http://primegap.net/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-329"><a href="/projects/">Projects</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-331"><a href="/category/tutorial/">Tutorials</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-328"><a href="/about/">About</a></li>
</ul></div></aside><aside id="meta-3" class="widget widget_meta"><h3 class="widget-title">Meta</h3> <ul>
<li><a href="http://primegap.net/wp-login.php">Log in</a></li>
<li><a href="/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="https://primegap.disqus.com/latest.rss" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li> </ul>
</aside> </div><!-- .widget-area -->
</div><!-- #secondary -->
<div class="site-info">
<a href="http://wordpress.org/" title="Semantic Personal Publishing Platform">Proudly powered by WordPress</a>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<script type="text/javascript">
// <![CDATA[
var disqus_shortname = 'primegap';
(function () {
var nodes = document.getElementsByTagName('span');
for (var i = 0, url; i < nodes.length; i++) {
if (nodes[i].className.indexOf('dsq-postid') != -1) {
nodes[i].parentNode.setAttribute('data-disqus-identifier', nodes[i].getAttribute('data-dsqidentifier'));
url = nodes[i].parentNode.href.split('#', 1);
if (url.length == 1) { url = url[0]; }
else { url = url[1]; }
nodes[i].parentNode.href = url + '#disqus_thread';
}
}
var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
// ]]>
</script>
<script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js?ver=3.0.9b'></script>
<script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJScript.js?ver=3.0.9b'></script>
<script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushRuby.js?ver=3.0.9b'></script>
<script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushBash.js?ver=3.0.9b'></script>
<script type='text/javascript'>
(function(){
var corecss = document.createElement('link');
var themecss = document.createElement('link');
var corecssurl = "/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.9b";
if ( corecss.setAttribute ) {
corecss.setAttribute( "rel", "stylesheet" );
corecss.setAttribute( "type", "text/css" );
corecss.setAttribute( "href", corecssurl );
} else {
corecss.rel = "stylesheet";
corecss.href = corecssurl;
}
document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
var themecssurl = "/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeRDark.css?ver=3.0.9b";
if ( themecss.setAttribute ) {
themecss.setAttribute( "rel", "stylesheet" );
themecss.setAttribute( "type", "text/css" );
themecss.setAttribute( "href", themecssurl );
} else {
themecss.rel = "stylesheet";
themecss.href = themecssurl;
}
//document.getElementById("syntaxhighlighteranchor").appendChild(themecss);
document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
})();
SyntaxHighlighter.config.strings.expandSource = '+ expand source';
SyntaxHighlighter.config.strings.help = '?';
SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n';
SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: ';
SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: ';
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['pad-line-numbers'] = false;
SyntaxHighlighter.defaults['tab-size'] = 2;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['wrap-lines'] = false;
SyntaxHighlighter.all();
</script>
<script type='text/javascript' src='http://primegap.net/wp-includes/js/jquery/jquery.masonry.min.js?ver=2.1.05'></script>
<script type='text/javascript' src='/wp-content/themes/twentythirteen/js/functions.js?ver=2013-07-18'></script>
</body>
</html>