-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
700 lines (544 loc) · 74.9 KB
/
atom.xml
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
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[CoderCorral]]></title>
<link href="http://chrisgonzgonz.github.io/atom.xml" rel="self"/>
<link href="http://chrisgonzgonz.github.io/"/>
<updated>2014-10-15T09:53:16-04:00</updated>
<id>http://chrisgonzgonz.github.io/</id>
<author>
<name><![CDATA[Chris Gonzales]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Xcode's Storyboard Has an XML Skeleton]]></title>
<link href="http://chrisgonzgonz.github.io/blog/2014/10/13/xcodes-storyboard-has-an-xml-skeleton/"/>
<updated>2014-10-13T23:02:00-04:00</updated>
<id>http://chrisgonzgonz.github.io/blog/2014/10/13/xcodes-storyboard-has-an-xml-skeleton</id>
<content type="html"><![CDATA[<h2>Storyboard’s Skeleton: XML</h2>
<p>If you’ve just started dabbling in iOS and have been lucky enough to avoid Storyboard merge conflicts, you might not have run into this yet. The Storyboard file in Interface Builder is a magical place free of HTML and CSS drudgery. It’s a place where you can drag-and-drop objects into scenes as quickly as your imagination can conjure them up. But Storyboard isn’t all magic; it’s magic and XML.</p>
<h3>What is XML?</h3>
<p>XML, or Extensible Markup Language, is a document format that is both human-readable and machine-readable. It is important to note that the fact that XML is human-readable doesn’t mean that it is a pleasure to do so.</p>
<p>XML is a lot more convoluted than another popular data-interchange format, JSON (JavaScript Object Notation). If this is the case, why would the great minds at Apple back Storyboards with XML instead of its cool new cousin? While JSON is beautifully simple, it is limited in the types of data it can store, namely text and numbers. XML can handle these traditional data types and more, including audio, video, images, formatting, documents, etc.</p>
<p>As we’ll see below, Storyboard XML contains <strong>A LOT</strong> of information. It’s primarily strings and numbers, so JSON could have been used. However, the use of nested tags with id’s and attributes to represent individual (and groups of) Storyboard objects paints a pretty clean picture or how things are laid out on a Storyboard. The XML provides a solid skeleton.</p>
<p>To see how Storyboard objects translate into XML, I’ve put together a little Halloween themed jukebox layout:</p>
<p><img src="http://chrisgonzgonz.github.io/images/monster_mash_full.png" alt=""monster_mash_full"" /></p>
<h3>Monster Mash Jukebox</h3>
<p>Let’s talk about the layout first. Our Storyboard’s Initial View Controller is a standard UINavigation Controller. That UINavigation Controller has an FISJukeboxViewController as its Root View Controller.</p>
<p>FISJukeboxViewController has some subviews:</p>
<ul>
<li>A navigation item title</li>
<li>2 UIBarButtonItems (called fastfoward & search respectively)</li>
<li>2 UIButtons</li>
<li>A UITextField</li>
<li>A UITextView</li>
<li>And A UIView “container” with 3 subviews:
<ul>
<li>A UISlider</li>
<li>A UIImageView</li>
<li>A UISwitch</li>
</ul>
</li>
</ul>
<p>The little magnifying glass button also has a segue action connecting it to the Song Detail View (that happens to only be host to a spooky PNG).</p>
<p><img src="http://chrisgonzgonz.github.io/images/monster_mash_annotated.png" alt=""monster_mash_annotated"" /></p>
<h3>UINavigationController</h3>
<p>Awesome! Now that we’ve seen our Storyboard represented both visually and described textually, let’s see how it looks in a little Extensible Markup Language:</p>
<ul>
<li>So our UINavigationController looks like this:</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="c"><!--Navigation Controller--></span>
</span><span class='line'> <span class="nt"><scene</span> <span class="na">sceneID=</span><span class="s">"BAt-Fk-3mT"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><objects></span>
</span><span class='line'> <span class="nt"><navigationController</span> <span class="na">automaticallyAdjustsScrollViewInsets=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"qTf-YL-Hik"</span> <span class="na">sceneMemberID=</span><span class="s">"viewController"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><toolbarItems/></span>
</span><span class='line'> <span class="nt"><navigationBar</span> <span class="na">key=</span><span class="s">"navigationBar"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">id=</span><span class="s">"ngq-Y5-BSZ"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"0.0"</span> <span class="na">y=</span><span class="s">"0.0"</span> <span class="na">width=</span><span class="s">"320"</span> <span class="na">height=</span><span class="s">"44"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><autoresizingMask</span> <span class="na">key=</span><span class="s">"autoresizingMask"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></navigationBar></span>
</span><span class='line'> <span class="nt"><nil</span> <span class="na">name=</span><span class="s">"viewControllers"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><connections></span>
</span><span class='line'> <span class="nt"><segue</span> <span class="na">destination=</span><span class="s">"vXZ-lx-hvc"</span> <span class="na">kind=</span><span class="s">"relationship"</span> <span class="na">relationship=</span><span class="s">"rootViewController"</span> <span class="na">id=</span><span class="s">"mFC-jE-bus"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></connections></span>
</span><span class='line'> <span class="nt"></navigationController></span>
</span><span class='line'> <span class="nt"><placeholder</span> <span class="na">placeholderIdentifier=</span><span class="s">"IBFirstResponder"</span> <span class="na">id=</span><span class="s">"g6X-lG-9hB"</span> <span class="na">userLabel=</span><span class="s">"First Responder"</span> <span class="na">sceneMemberID=</span><span class="s">"firstResponder"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></objects></span>
</span><span class='line'> <span class="nt"><point</span> <span class="na">key=</span><span class="s">"canvasLocation"</span> <span class="na">x=</span><span class="s">"287"</span> <span class="na">y=</span><span class="s">"-370"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></scene></span>
</span></code></pre></td></tr></table></div></figure>
<p>As you can see, it’s a plain vanilla UINavigationController. The great customization of the nav bars in the following scenes will be a function of their UINavigationItems.</p>
<h3>FISJukeBoxViewController</h3>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
<span class='line-number'>51</span>
<span class='line-number'>52</span>
<span class='line-number'>53</span>
<span class='line-number'>54</span>
<span class='line-number'>55</span>
<span class='line-number'>56</span>
<span class='line-number'>57</span>
<span class='line-number'>58</span>
<span class='line-number'>59</span>
<span class='line-number'>60</span>
<span class='line-number'>61</span>
<span class='line-number'>62</span>
<span class='line-number'>63</span>
<span class='line-number'>64</span>
<span class='line-number'>65</span>
<span class='line-number'>66</span>
<span class='line-number'>67</span>
<span class='line-number'>68</span>
<span class='line-number'>69</span>
<span class='line-number'>70</span>
<span class='line-number'>71</span>
<span class='line-number'>72</span>
<span class='line-number'>73</span>
<span class='line-number'>74</span>
<span class='line-number'>75</span>
<span class='line-number'>76</span>
<span class='line-number'>77</span>
<span class='line-number'>78</span>
<span class='line-number'>79</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="c"><!--Monster Mash Jukebox--></span>
</span><span class='line'> <span class="nt"><scene</span> <span class="na">sceneID=</span><span class="s">"ufC-wZ-h7g"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><objects></span>
</span><span class='line'> <span class="nt"><viewController</span> <span class="na">id=</span><span class="s">"vXZ-lx-hvc"</span> <span class="na">customClass=</span><span class="s">"FISJukeboxViewController"</span> <span class="na">sceneMemberID=</span><span class="s">"viewController"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><layoutGuides></span>
</span><span class='line'> <span class="nt"><viewControllerLayoutGuide</span> <span class="na">type=</span><span class="s">"top"</span> <span class="na">id=</span><span class="s">"jyV-Pf-zRb"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><viewControllerLayoutGuide</span> <span class="na">type=</span><span class="s">"bottom"</span> <span class="na">id=</span><span class="s">"2fi-mo-0CV"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></layoutGuides></span>
</span><span class='line'> <span class="nt"><view</span> <span class="na">key=</span><span class="s">"view"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">id=</span><span class="s">"kh9-bI-dsS"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"0.0"</span> <span class="na">y=</span><span class="s">"0.0"</span> <span class="na">width=</span><span class="s">"320"</span> <span class="na">height=</span><span class="s">"568"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><autoresizingMask</span> <span class="na">key=</span><span class="s">"autoresizingMask"</span> <span class="na">flexibleMaxX=</span><span class="s">"YES"</span> <span class="na">flexibleMaxY=</span><span class="s">"YES"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><subviews></span>
</span><span class='line'> <span class="nt"><button</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"center"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">buttonType=</span><span class="s">"roundedRect"</span> <span class="na">lineBreakMode=</span><span class="s">"middleTruncation"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"mf4-v3-4l3"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"20"</span> <span class="na">y=</span><span class="s">"84"</span> <span class="na">width=</span><span class="s">"57"</span> <span class="na">height=</span><span class="s">"30"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><state</span> <span class="na">key=</span><span class="s">"normal"</span> <span class="na">title=</span><span class="s">"Play"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><color</span> <span class="na">key=</span><span class="s">"titleShadowColor"</span> <span class="na">white=</span><span class="s">"0.5"</span> <span class="na">alpha=</span><span class="s">"1"</span> <span class="na">colorSpace=</span><span class="s">"calibratedWhite"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></state></span>
</span><span class='line'> <span class="nt"><connections></span>
</span><span class='line'> <span class="nt"><action</span> <span class="na">selector=</span><span class="s">"playButtonTapped:"</span> <span class="na">destination=</span><span class="s">"vXZ-lx-hvc"</span> <span class="na">eventType=</span><span class="s">"touchUpInside"</span> <span class="na">id=</span><span class="s">"Oj5-ck-UTU"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></connections></span>
</span><span class='line'> <span class="nt"></button></span>
</span><span class='line'> <span class="nt"><button</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"center"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">buttonType=</span><span class="s">"roundedRect"</span> <span class="na">lineBreakMode=</span><span class="s">"middleTruncation"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"4iq-tG-pLm"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"248"</span> <span class="na">y=</span><span class="s">"84"</span> <span class="na">width=</span><span class="s">"52"</span> <span class="na">height=</span><span class="s">"30"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><state</span> <span class="na">key=</span><span class="s">"normal"</span> <span class="na">title=</span><span class="s">"Stop"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><color</span> <span class="na">key=</span><span class="s">"titleShadowColor"</span> <span class="na">white=</span><span class="s">"0.5"</span> <span class="na">alpha=</span><span class="s">"1"</span> <span class="na">colorSpace=</span><span class="s">"calibratedWhite"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></state></span>
</span><span class='line'> <span class="nt"><connections></span>
</span><span class='line'> <span class="nt"><action</span> <span class="na">selector=</span><span class="s">"stopButtonTapped:"</span> <span class="na">destination=</span><span class="s">"vXZ-lx-hvc"</span> <span class="na">eventType=</span><span class="s">"touchUpInside"</span> <span class="na">id=</span><span class="s">"gKe-8S-iZF"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></connections></span>
</span><span class='line'> <span class="nt"></button></span>
</span><span class='line'> <span class="nt"><textField</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">clipsSubviews=</span><span class="s">"YES"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"left"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">borderStyle=</span><span class="s">"roundedRect"</span> <span class="na">placeholder=</span><span class="s">"Song #"</span> <span class="na">minimumFontSize=</span><span class="s">"17"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"5zs-Oa-X6P"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"85"</span> <span class="na">y=</span><span class="s">"84"</span> <span class="na">width=</span><span class="s">"155"</span> <span class="na">height=</span><span class="s">"30"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><fontDescription</span> <span class="na">key=</span><span class="s">"fontDescription"</span> <span class="na">type=</span><span class="s">"system"</span> <span class="na">pointSize=</span><span class="s">"14"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><textInputTraits</span> <span class="na">key=</span><span class="s">"textInputTraits"</span> <span class="na">keyboardType=</span><span class="s">"numberPad"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></textField></span>
</span><span class='line'> <span class="nt"><view</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"88c-gR-8Xt"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"37"</span> <span class="na">y=</span><span class="s">"387"</span> <span class="na">width=</span><span class="s">"251"</span> <span class="na">height=</span><span class="s">"137"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><subviews></span>
</span><span class='line'> <span class="nt"><imageView</span> <span class="na">userInteractionEnabled=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">horizontalHuggingPriority=</span><span class="s">"251"</span> <span class="na">verticalHuggingPriority=</span><span class="s">"251"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">image=</span><span class="s">"halloween236.png"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"Hah-IK-733"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"167"</span> <span class="na">y=</span><span class="s">"53"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></imageView></span>
</span><span class='line'> <span class="nt"><switch</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">horizontalHuggingPriority=</span><span class="s">"750"</span> <span class="na">verticalHuggingPriority=</span><span class="s">"750"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"center"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">on=</span><span class="s">"YES"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"Fxc-hA-oDz"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"20"</span> <span class="na">y=</span><span class="s">"69"</span> <span class="na">width=</span><span class="s">"51"</span> <span class="na">height=</span><span class="s">"31"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></switch></span>
</span><span class='line'> <span class="nt"><slider</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"center"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">value=</span><span class="s">"0.5"</span> <span class="na">minValue=</span><span class="s">"0.0"</span> <span class="na">maxValue=</span><span class="s">"1"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"s6K-YA-5Nw"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"66"</span> <span class="na">y=</span><span class="s">"21"</span> <span class="na">width=</span><span class="s">"118"</span> <span class="na">height=</span><span class="s">"31"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></slider></span>
</span><span class='line'> <span class="nt"></subviews></span>
</span><span class='line'> <span class="nt"><color</span> <span class="na">key=</span><span class="s">"backgroundColor"</span> <span class="na">red=</span><span class="s">"1"</span> <span class="na">green=</span><span class="s">"0.80000001190000003"</span> <span class="na">blue=</span><span class="s">"0.40000000600000002"</span> <span class="na">alpha=</span><span class="s">"1"</span> <span class="na">colorSpace=</span><span class="s">"calibratedRGB"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></view></span>
</span><span class='line'> <span class="nt"><textView</span> <span class="na">clipsSubviews=</span><span class="s">"YES"</span> <span class="na">multipleTouchEnabled=</span><span class="s">"YES"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">editable=</span><span class="s">"NO"</span> <span class="na">selectable=</span><span class="s">"NO"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"XV6-Sv-WQZ"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"20"</span> <span class="na">y=</span><span class="s">"147"</span> <span class="na">width=</span><span class="s">"280"</span> <span class="na">height=</span><span class="s">"211"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><color</span> <span class="na">key=</span><span class="s">"backgroundColor"</span> <span class="na">red=</span><span class="s">"1"</span> <span class="na">green=</span><span class="s">"1"</span> <span class="na">blue=</span><span class="s">"1"</span> <span class="na">alpha=</span><span class="s">"1"</span> <span class="na">colorSpace=</span><span class="s">"calibratedRGB"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><mutableString</span> <span class="na">key=</span><span class="s">"text"</span><span class="nt">></span>Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.<span class="nt"></mutableString></span>
</span><span class='line'> <span class="nt"><fontDescription</span> <span class="na">key=</span><span class="s">"fontDescription"</span> <span class="na">type=</span><span class="s">"system"</span> <span class="na">pointSize=</span><span class="s">"14"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><textInputTraits</span> <span class="na">key=</span><span class="s">"textInputTraits"</span> <span class="na">autocapitalizationType=</span><span class="s">"sentences"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></textView></span>
</span><span class='line'> <span class="nt"></subviews></span>
</span><span class='line'> <span class="nt"><color</span> <span class="na">key=</span><span class="s">"backgroundColor"</span> <span class="na">white=</span><span class="s">"1"</span> <span class="na">alpha=</span><span class="s">"1"</span> <span class="na">colorSpace=</span><span class="s">"custom"</span> <span class="na">customColorSpace=</span><span class="s">"calibratedWhite"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></view></span>
</span><span class='line'> <span class="nt"><toolbarItems/></span>
</span><span class='line'> <span class="nt"><navigationItem</span> <span class="na">key=</span><span class="s">"navigationItem"</span> <span class="na">title=</span><span class="s">"Monster Mash Jukebox"</span> <span class="na">id=</span><span class="s">"oeF-Q3-RQ7"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><barButtonItem</span> <span class="na">key=</span><span class="s">"leftBarButtonItem"</span> <span class="na">systemItem=</span><span class="s">"fastForward"</span> <span class="na">id=</span><span class="s">"mEm-xQ-80B"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><barButtonItem</span> <span class="na">key=</span><span class="s">"rightBarButtonItem"</span> <span class="na">systemItem=</span><span class="s">"search"</span> <span class="na">id=</span><span class="s">"Wnw-xL-1xa"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><connections></span>
</span><span class='line'> <span class="nt"><segue</span> <span class="na">destination=</span><span class="s">"sFH-Ra-eR6"</span> <span class="na">kind=</span><span class="s">"push"</span> <span class="na">id=</span><span class="s">"dPq-Kt-AS5"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></connections></span>
</span><span class='line'> <span class="nt"></barButtonItem></span>
</span><span class='line'> <span class="nt"></navigationItem></span>
</span><span class='line'> <span class="nt"><simulatedToolbarMetrics</span> <span class="na">key=</span><span class="s">"simulatedBottomBarMetrics"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><connections></span>
</span><span class='line'> <span class="nt"><outlet</span> <span class="na">property=</span><span class="s">"playlistView"</span> <span class="na">destination=</span><span class="s">"XV6-Sv-WQZ"</span> <span class="na">id=</span><span class="s">"XGy-na-K6i"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><outlet</span> <span class="na">property=</span><span class="s">"songSelectorField"</span> <span class="na">destination=</span><span class="s">"5zs-Oa-X6P"</span> <span class="na">id=</span><span class="s">"Dgx-lp-xjs"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></connections></span>
</span><span class='line'> <span class="nt"></viewController></span>
</span><span class='line'> <span class="nt"><placeholder</span> <span class="na">placeholderIdentifier=</span><span class="s">"IBFirstResponder"</span> <span class="na">id=</span><span class="s">"x5A-6p-PRh"</span> <span class="na">sceneMemberID=</span><span class="s">"firstResponder"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></objects></span>
</span><span class='line'> <span class="nt"><point</span> <span class="na">key=</span><span class="s">"canvasLocation"</span> <span class="na">x=</span><span class="s">"669"</span> <span class="na">y=</span><span class="s">"-370"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></scene></span>
</span></code></pre></td></tr></table></div></figure>
<p>Ok, so I know this is a lot of XML. But it’s pretty cool, because if you can get past how horrible it is to read, you can see that it’s SUPER DESCRIPTIVE. Like so descriptive that every little checkbox and field and setting and doohickey that appears in Xcode’s Attributes Inspector, Size Inspector, Connections Inspector, and Identity Inspector for every single view and subview is represented.</p>
<h3>Monster Mash Jukebox <em>in</em> XML</h3>
<p>FISJukeboxViewController has some subviews:</p>
<ul>
<li>A navigation item title</li>
<li>2 UIBarButtonItems (called fastfoward & search respectively)</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="nt"><navigationItem</span> <span class="na">key=</span><span class="s">"navigationItem"</span> <span class="na">title=</span><span class="s">"Monster Mash Jukebox"</span> <span class="na">id=</span><span class="s">"oeF-Q3-RQ7"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><barButtonItem</span> <span class="na">key=</span><span class="s">"leftBarButtonItem"</span> <span class="na">systemItem=</span><span class="s">"fastForward"</span> <span class="na">id=</span><span class="s">"mEm-xQ-80B"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><barButtonItem</span> <span class="na">key=</span><span class="s">"rightBarButtonItem"</span> <span class="na">systemItem=</span><span class="s">"search"</span> <span class="na">id=</span><span class="s">"Wnw-xL-1xa"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><connections></span>
</span><span class='line'> <span class="nt"><segue</span> <span class="na">destination=</span><span class="s">"sFH-Ra-eR6"</span> <span class="na">kind=</span><span class="s">"push"</span> <span class="na">id=</span><span class="s">"dPq-Kt-AS5"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></connections></span>
</span><span class='line'> <span class="nt"></barButtonItem></span>
</span><span class='line'><span class="nt"></navigationItem></span>
</span></code></pre></td></tr></table></div></figure>
<ul>
<li>2 UIButtons</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="nt"><button</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"center"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">buttonType=</span><span class="s">"roundedRect"</span> <span class="na">lineBreakMode=</span><span class="s">"middleTruncation"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"mf4-v3-4l3"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"20"</span> <span class="na">y=</span><span class="s">"84"</span> <span class="na">width=</span><span class="s">"57"</span> <span class="na">height=</span><span class="s">"30"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><state</span> <span class="na">key=</span><span class="s">"normal"</span> <span class="na">title=</span><span class="s">"Play"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><color</span> <span class="na">key=</span><span class="s">"titleShadowColor"</span> <span class="na">white=</span><span class="s">"0.5"</span> <span class="na">alpha=</span><span class="s">"1"</span> <span class="na">colorSpace=</span><span class="s">"calibratedWhite"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></state></span>
</span><span class='line'> <span class="nt"><connections></span>
</span><span class='line'> <span class="nt"><action</span> <span class="na">selector=</span><span class="s">"playButtonTapped:"</span> <span class="na">destination=</span><span class="s">"vXZ-lx-hvc"</span> <span class="na">eventType=</span><span class="s">"touchUpInside"</span> <span class="na">id=</span><span class="s">"Oj5-ck-UTU"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></connections></span>
</span><span class='line'><span class="nt"></button></span>
</span><span class='line'><span class="nt"><button</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"center"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">buttonType=</span><span class="s">"roundedRect"</span> <span class="na">lineBreakMode=</span><span class="s">"middleTruncation"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"4iq-tG-pLm"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"248"</span> <span class="na">y=</span><span class="s">"84"</span> <span class="na">width=</span><span class="s">"52"</span> <span class="na">height=</span><span class="s">"30"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><state</span> <span class="na">key=</span><span class="s">"normal"</span> <span class="na">title=</span><span class="s">"Stop"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><color</span> <span class="na">key=</span><span class="s">"titleShadowColor"</span> <span class="na">white=</span><span class="s">"0.5"</span> <span class="na">alpha=</span><span class="s">"1"</span> <span class="na">colorSpace=</span><span class="s">"calibratedWhite"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></state></span>
</span><span class='line'> <span class="nt"><connections></span>
</span><span class='line'> <span class="nt"><action</span> <span class="na">selector=</span><span class="s">"stopButtonTapped:"</span> <span class="na">destination=</span><span class="s">"vXZ-lx-hvc"</span> <span class="na">eventType=</span><span class="s">"touchUpInside"</span> <span class="na">id=</span><span class="s">"gKe-8S-iZF"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"></connections></span>
</span><span class='line'><span class="nt"></button></span>
</span></code></pre></td></tr></table></div></figure>
<ul>
<li>A UITextField</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="nt"><textField</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">clipsSubviews=</span><span class="s">"YES"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"left"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">borderStyle=</span><span class="s">"roundedRect"</span> <span class="na">placeholder=</span><span class="s">"Song #"</span> <span class="na">minimumFontSize=</span><span class="s">"17"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"5zs-Oa-X6P"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"85"</span> <span class="na">y=</span><span class="s">"84"</span> <span class="na">width=</span><span class="s">"155"</span> <span class="na">height=</span><span class="s">"30"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><fontDescription</span> <span class="na">key=</span><span class="s">"fontDescription"</span> <span class="na">type=</span><span class="s">"system"</span> <span class="na">pointSize=</span><span class="s">"14"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><textInputTraits</span> <span class="na">key=</span><span class="s">"textInputTraits"</span> <span class="na">keyboardType=</span><span class="s">"numberPad"</span><span class="nt">/></span>
</span><span class='line'><span class="nt"></textField></span>
</span></code></pre></td></tr></table></div></figure>
<ul>
<li>A UITextView</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="nt"><textView</span> <span class="na">clipsSubviews=</span><span class="s">"YES"</span> <span class="na">multipleTouchEnabled=</span><span class="s">"YES"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">editable=</span><span class="s">"NO"</span> <span class="na">selectable=</span><span class="s">"NO"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"XV6-Sv-WQZ"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"20"</span> <span class="na">y=</span><span class="s">"147"</span> <span class="na">width=</span><span class="s">"280"</span> <span class="na">height=</span><span class="s">"211"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><color</span> <span class="na">key=</span><span class="s">"backgroundColor"</span> <span class="na">red=</span><span class="s">"1"</span> <span class="na">green=</span><span class="s">"1"</span> <span class="na">blue=</span><span class="s">"1"</span> <span class="na">alpha=</span><span class="s">"1"</span> <span class="na">colorSpace=</span><span class="s">"calibratedRGB"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><mutableString</span> <span class="na">key=</span><span class="s">"text"</span><span class="nt">></span>Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.<span class="nt"></mutableString></span>
</span><span class='line'> <span class="nt"><fontDescription</span> <span class="na">key=</span><span class="s">"fontDescription"</span> <span class="na">type=</span><span class="s">"system"</span> <span class="na">pointSize=</span><span class="s">"14"</span><span class="nt">/></span>
</span><span class='line'> <span class="nt"><textInputTraits</span> <span class="na">key=</span><span class="s">"textInputTraits"</span> <span class="na">autocapitalizationType=</span><span class="s">"sentences"</span><span class="nt">/></span>
</span><span class='line'><span class="nt"></textView></span>
</span></code></pre></td></tr></table></div></figure>
<p>And A UIView “container” with 3 subviews:</p>
<ul>
<li>A UISlider</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="nt"><slider</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"center"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">value=</span><span class="s">"0.5"</span> <span class="na">minValue=</span><span class="s">"0.0"</span> <span class="na">maxValue=</span><span class="s">"1"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"s6K-YA-5Nw"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"66"</span> <span class="na">y=</span><span class="s">"21"</span> <span class="na">width=</span><span class="s">"118"</span> <span class="na">height=</span><span class="s">"31"</span><span class="nt">/></span>
</span><span class='line'><span class="nt"></slider></span>
</span></code></pre></td></tr></table></div></figure>
<ul>
<li>A UIImageView</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="nt"><imageView</span> <span class="na">userInteractionEnabled=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">horizontalHuggingPriority=</span><span class="s">"251"</span> <span class="na">verticalHuggingPriority=</span><span class="s">"251"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">image=</span><span class="s">"halloween236.png"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"Hah-IK-733"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"167"</span> <span class="na">y=</span><span class="s">"53"</span> <span class="na">width=</span><span class="s">"64"</span> <span class="na">height=</span><span class="s">"64"</span><span class="nt">/></span>
</span><span class='line'><span class="nt"></imageView></span>
</span></code></pre></td></tr></table></div></figure>
<ul>
<li>A UISwitch</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="nt"><switch</span> <span class="na">opaque=</span><span class="s">"NO"</span> <span class="na">contentMode=</span><span class="s">"scaleToFill"</span> <span class="na">horizontalHuggingPriority=</span><span class="s">"750"</span> <span class="na">verticalHuggingPriority=</span><span class="s">"750"</span> <span class="na">fixedFrame=</span><span class="s">"YES"</span> <span class="na">contentHorizontalAlignment=</span><span class="s">"center"</span> <span class="na">contentVerticalAlignment=</span><span class="s">"center"</span> <span class="na">on=</span><span class="s">"YES"</span> <span class="na">translatesAutoresizingMaskIntoConstraints=</span><span class="s">"NO"</span> <span class="na">id=</span><span class="s">"Fxc-hA-oDz"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><rect</span> <span class="na">key=</span><span class="s">"frame"</span> <span class="na">x=</span><span class="s">"20"</span> <span class="na">y=</span><span class="s">"69"</span> <span class="na">width=</span><span class="s">"51"</span> <span class="na">height=</span><span class="s">"31"</span><span class="nt">/></span>
</span><span class='line'><span class="nt"></switch></span>
</span></code></pre></td></tr></table></div></figure>
<h3>Summary</h3>
<p>Storyboard is backed by some very detailed XML. You’ll notice an “id” attribute on every element; this id is used to reference other elements from within the XML, whether it’s to show that a UIButton’s target for an action is its controller or to demarcate the destination view controller in a segue.</p>
<p><strong>tl;dr</strong>:
It’s Halloween season but there’s no need to be afraid of Storyboard’s XML.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Smart-Kegs Part II]]></title>
<link href="http://chrisgonzgonz.github.io/blog/2013/08/09/smart-kegs-part-ii/"/>
<updated>2013-08-09T07:43:00-04:00</updated>
<id>http://chrisgonzgonz.github.io/blog/2013/08/09/smart-kegs-part-ii</id>
<content type="html"><![CDATA[<h2>It’s Alive!!! (Locally)</h2>
<p>KegKong lives! In <a href="http://chrisgonzgonz.github.io/blog/2013/07/01/smart-kegs-part-i/">Smart-Kegs Part I</a> we left off with our flowmeter and arduino sending incomplete readings to the raspberry pi with no database persistance. I thought we’d take care of this data integrity problem with either a data-logging shield or a wifi shield. Instead, the fix that brought us to a minimum viable product was actually a lot simpler- we took advantage of a delimiter with ruby’s <strong>gets</strong> method, in this case “\r\n” which is the same as <strong>null</strong>.</p>
<p><img class="left" src="http://chrisgonzgonz.github.io/images/delimiter1">
<img class="right" src="http://chrisgonzgonz.github.io/images/kk_folders"></p>
<p>Using this and the arduino’s serial caching abilities, we made sure to only transfer only complete data to the raspberry pi and remove null values.</p>
<p>Great! Next we needed an interface to show off our data. Our weapon of choice here is a light-weight Sinatra application with Activerecord. We built two models, keg and measurements. Keg keeps track of vital keg data like type of beer, maximum volume, and whether or not a refill request has been sent. Measurements allows us to capture the volume of each pull in pulses, the corresponding change in volume in gallons, and the id of the keg that each measurement belongs to. The measurement/keg id relationship is necessary as we will create a new keg in order to “reset” each time the beer runs out.</p>
<p>A keg object can check its own volume by subtracting the sum of its measurements from its max volume, and it can send an email requesting reinforcements using the Gmail Sender gem.</p>
<p><img class="center" src="http://chrisgonzgonz.github.io/images/kegkong2_1"></p>
<p>Here I’ll leave you with KegKong fully functioning locally. In <strong>Smart-Kegs Part III</strong>, I’ll go over all the fun we had with deployment to Heroku, changing our scripted method of persistance and migrating our SQLite database to PostgreSQL.</p>
<p><img class="center" src="http://chrisgonzgonz.github.io/images/kegkong2_2">
<img class="center" src="http://chrisgonzgonz.github.io/images/kegkong2_reset"></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Scraping Wikipedia Using Nokogiri and Google Search]]></title>
<link href="http://chrisgonzgonz.github.io/blog/2013/08/05/scrape-wikipedia-using-nokogiri-and-google-search/"/>
<updated>2013-08-05T19:55:00-04:00</updated>
<id>http://chrisgonzgonz.github.io/blog/2013/08/05/scrape-wikipedia-using-nokogiri-and-google-search</id>
<content type="html"><![CDATA[<h2>The Problem:</h2>
<p>I needed to write a method for an application that would take a famous programmer’s name and scrape the related Wikipedia page for relevant resources, the most important of which would be a picture.</p>
<p>Nokogiri can scrape a page when passed a url, but how could I ensure that the name passed would translate directly into a valid url? Or even that the name would be spelled correctly? As it turns out, Google can do the heavy lifting and point us directly to the desired page for scrapin’.</p>
<h2>The Solution:</h2>
<p>The solution is what I’ll call a ‘double-scrape’. The first thing I did was create my query string by substituting blank spaces in the programmer’s name for ‘+’ and adding ‘+wikipedia’ to the end of the query, all to ensure that the first result would be the wikipedia page related to the programmer’s name.</p>
<p>Next we get the Google search result page for this query string, which Nokogiri scrapes to turn the first result in the list (which should be the Wikipedia article) into the url for the programmer’s wikipedia page. Scrape n’ repeat.</p>
<p><img class="center" src="http://chrisgonzgonz.github.io/images/noko1"></p>
<h2>Postscript</h2>
<p>While I’m still testing this solution out, I have to say it seems pretty robust. The evidence lies in our seed data, where one Programmer of the Day was listed as ‘Cookie Monster.’</p>
<p><img class="center" src="http://chrisgonzgonz.github.io/images/noko2"></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Setting Up a Custom Domain With Octopress / Github Pages]]></title>
<link href="http://chrisgonzgonz.github.io/blog/2013/07/24/how-to-setup-a-custom-domain-with-octopress-slash-github-pages/"/>
<updated>2013-07-24T09:04:00-04:00</updated>
<id>http://chrisgonzgonz.github.io/blog/2013/07/24/how-to-setup-a-custom-domain-with-octopress-slash-github-pages</id>
<content type="html"><![CDATA[<p>I set up a blog with Octopress. It’s great, but I’d always get really skeptical looks when I’d tell friends and family to read my stuff at <a href="http://chrisgonzgonz.github.io">chrisgonzgonz.github.io</a>.</p>
<p>To remedy this, I bought a domain name. I had some issues getting it to play nice with my github pages site, so here’s a quick n’ dirty guide to setting this up:</p>
<p>Please note that this assumes that you’ve <a href="http://octopress.org/docs/setup/">setup an Octopress blog</a></p>
<ol>
<li><p>Buy your domain name. I picked mine up from <a href="https://www.namecheap.com/">Namecheap</a> so I’ll use screenshots of my setup on their site.</p></li>
<li><p>Next, set up an A Record of <code> 204.232.175.78 </code> and CNAME of your github pages address, in this case <code>chrisgonzgonz.github.io</code>. This can be done from “All Host Records” on Namecheap.</p></li>
</ol>
<p><img class="center" src="http://chrisgonzgonz.github.io/images/namecheap1"></p>
<ol>
<li>Finally, create a file called <code>CNAME</code> <em>in your blog’s source folder.</em> This part is important- if you’re not using Octopress you can put this in your blog’s root. Octopress requires that this file be in source so that when you <code>rake generate</code> it can be pushed to master. In your CNAME file, save the name of your new domain:</li>
</ol>
<p><img class="center" src="http://chrisgonzgonz.github.io/images/namecheap2"></p>
<p>That’s it, 3 easy steps. <code>Rake generate</code> and <code>rake deploy</code> as normal and it’ll take about 10 minutes to update. When you type in codercorral.com, you’ll be directed to github at 204.232.175.78, and my blog will be found via the CNAME file.</p>
<p><img class="center" src="http://chrisgonzgonz.github.io/images/namecheap4"></p>
<p>Also, Google has a cool <a href="http://support.google.com/a/bin/answer.py?hl=en&answer=48090#K">guide to DNS basics</a> for those interested in learning more about A Record and CNAME.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Smart-Kegs Part I]]></title>
<link href="http://chrisgonzgonz.github.io/blog/2013/07/01/smart-kegs-part-i/"/>
<updated>2013-07-01T23:07:00-04:00</updated>
<id>http://chrisgonzgonz.github.io/blog/2013/07/01/smart-kegs-part-i</id>
<content type="html"><![CDATA[<h2>Kegs Should Refill Themselves</h2>
<p>We have smart phones and smart cars, why not Smart-Kegs (patent pending)? <a href="http://jgtr.github.io/">Jordán</a>, <a href="http://weatherlightus.tumblr.com/">Joe</a> and I would like to present to you… KegKong! The solution to a tapped keg on a Friday afternoon at The Flatiron School. KegKong will re-order himself before the class gets to the bottom of the barrel, and we’ll be able to track usage statistics along the way.</p>
<p><img class="center" src="http://i411.photobucket.com/albums/pp199/hccllc2008/1105081524.jpg"></p>
<p>You can find our team’s initial plan in Joe’s <a href="http://weatherlightus.tumblr.com/post/53232311824/and-the-beer-must-flow">post</a>. Since then, we’ve amassed the hardware (raspberry pi, arduino, flow meter), we’ve programmed the pi/arduino, and we’ve begun our initial tests.</p>
<h2>Working with hardware is hard…</h2>
<p>The last week has taught me to appreciate the beautiful error messages that Ruby, Sinatra, and almost anything software related have to offer. We’ve been unable to find much documentation on our second-hand flow meter so we’ve been having fun figuring out how to wire everything together.</p>
<p>A Beautiful and Informative Ruby Error Message:
<img class="center" src="http://snag.gy/5EbK3.jpg"></p>
<p>Jordán Tackling a Flow Meter to Arduino Error Message:
<img class="center" src="http://snag.gy/Ie968.jpg"></p>
<h2>Working with hardware is rewarding…</h2>
<p>Our team has spent some evenings working on transmitting an electrical pulse from the flow meter to the arduino to the raspberry pi. We’ve hypothesized as to why a process may or may not be working and we’ve broken problems down into ever-smaller components. I’ll cover the issues we had and our next steps in a second, but let me just say, I have never high-fived so hard over such incremental progress.
<img class="center" src="http://www.corepower.com/blog/wp-content/uploads/Victory-2.jpg"></p>
<h2>Working with hardware is rewarding…</h2>
<p>Issues so far:
<li>there seemed to be a lack of documentation for related flow meter projects in general, and related projects written in Ruby specifically (we aim to fix this)</li>
<li>correctly connecting flow meter -> arduino -> raspberry pi</li>
<li>capturing flow meter readings</li>
<li>shipping flow meter data to raspberry pi for analysis</li></p>
<p>The first 3 items on this list were taken care of by sorting out the wiring via guess and check and isolated pulse readings on the arduino. After that, raspberry pi can consume the arduino’s output via loops on each machine (arduino printing, pi listening). These loops are not synchronized, so although we are able to pass packets of data along this chain, some packets get cut off.</p>
<pre><code> Ruby Loop (Listening):
</code></pre>
<p><img class="center" src="http://snag.gy/wl86E.jpg"></p>
<pre><code> Arduino Loop (Printing):
</code></pre>
<p><img class="center" src="http://snag.gy/mzcBe.jpg"></p>
<h2>2 possible solutions for this data integrity problem:</h2>
<p><li>install a data-logging shield onto the arduino to store data and send in complete packets to be parsed at a later time</li>
<li>install a WiFi shield that connects the arduino wirelessly, and we can send TCP packets to the raspberry pi which we can set up to always be listening via sockets.</li></p>
<p>More to come as the saga continues!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Speaker Deck: RubyConf Brazil 2012]]></title>
<link href="http://chrisgonzgonz.github.io/blog/2013/06/16/speaker-deck-rubyconf-brazil-2012/"/>
<updated>2013-06-16T22:28:00-04:00</updated>
<id>http://chrisgonzgonz.github.io/blog/2013/06/16/speaker-deck-rubyconf-brazil-2012</id>
<content type="html"><![CDATA[<h2>A retrospective of problematic projects (Rubyconf Brazil 2012)</h2>
<p>I am currently a student at The Flatiron School, learning how to develop for the internetz in Ruby on Rails. We were given an assignment to check out a Ruby-related slide deck on Speaker Deck and drop some knowledge via blog. Here’s mine:</p>
<p>My <a href="https://speakerdeck.com/danielvlopes/a-retrospective-of-problematic-projects-rubyconf-brazil-2012">deck of choice</a> was a presentation by Daniel Lopes at RubyConf Brazil 2012. As a university student, I ventured to Brazil for a six-month immersive experience. I thought it would be interesting to test my Portuguese in relation to the Ruby language.</p>
<p>You may ask, what drew me to this presentation? Well, I’ll ask you a couple questions in return… What are problematic projects? What is it like to read a technical presentation in Portuguese? What is RubyConf Brazil? Here’s a brief overview of what I gleaned from this presentation:</p>
<h3>Topics Touched</h3>
<pre><code>+Best Practices
+SCRUM
+Rails Best Practices
+Control Levels:
+Individual
+Team
+Outside of Control
+DRY & Automation
+Creation -> Launch -> Maintenance
+Automated Tests
+What Should I Test?
+Agile: Team & client on the same page, maintaining flexibility
</code></pre>
<p>Daniel’s slides from RubyConf Brazil 2012 focused on common project issues, good workflow and best practices. I definitely had to Google a bunch of the aforementioned buzzwords. But, I think it’s great to start thinking about how other developers work in groups and how product is created seamlessly. Here are a few of my takeaways:</p>
<h3>Takeaways (Slides Only)</h3>
<p>Three control levels exist: we have control over things as individuals, as a team, and sometimes we have no control at all. It is important to be congnizant of these control levels and to behave accordingly. As developers, the most control we wield is in the individual scope.</p>
<p>It is Daniel’s view that there can be too much DRY (Don’t Repeat Yourself) and Automation, when done without vision and specificity. In the future, I’d like to know more about automation in this context.</p>
<p>What Should I Test? This was probably the most helpful section for me. There are some great quotes from Kent Beck in the slides to illustrate this point:</p>
<p>“…my philosophy is to test as little as possible to reach a given level of confidence…”
-and-
“If I don’t typically make a kind of mistake, I don’t test for it…”</p>
<p>Essentially, there can be too much testing. Testing should be focused and principled.</p>
<h3>Summary</h3>
<p>Ruby Conference Brazil is the largest Ruby conference in Latin America, with more than 750 attendees and almost as many online participants. Many influential speakers from the international Ruby community like Chad Fowler and Yehuda Katz have made the journey. It is on my radar to attend this conference in the future.</p>
<p>Ruby is a beautiful and universal language. Reading this presentation with my intermediate Portuguese skillz was a pleasure. Major props to Daniel, for making it interesting and for writing some of the difficult concepts in English.</p>
<p>Helpful diagram from the slides to illustrate the effects of excessive DRY & Automation:
<img class="center" src="http://chrisgonzgonz.github.io/images/grated_slide_for_kids.jpg"></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[#SocialMedia for Developers: A Beginner's Guide]]></title>
<link href="http://chrisgonzgonz.github.io/blog/2013/06/16/social-media-for-developers/"/>
<updated>2013-06-16T20:57:00-04:00</updated>
<id>http://chrisgonzgonz.github.io/blog/2013/06/16/social-media-for-developers</id>
<content type="html"><![CDATA[<h2>I’ve been living under a rock for the last 2 years.</h2>
<p>I’ve just finished a tour of duty with a rigid financial institution that blocked virtually all forms of social media. Actually, they blocked any website I use on a daily basis. The Google suite, Facebook, Twitter… you get the picture.</p>
<p>And so it went… fake Facebook name so “the man” wouldn’t be able to find me. I wasn’t even LinkedIn with my friends and colleagues in our little version of North Korea. That is, until I dropped the mic after my farewell speech.</p>
<h2>New Beginnings</h2>
<p>So I’m learning now.</p>
<p>Better late than never, everyone seems to say.</p>
<p>We’ve had some great speakers in class at The Flatiron School, and I’ve noticed that the developer world communicates via social media. I suspect all of the instructors at The Flatiron School knew each other’s “handles” before meeting in real life. Even I, a social media neanderthal, followed Sandi Metz before I knew how awesome she was.</p>
<p>Indeed, everything seems to revolve around blogs, micro-blogs, and micro-micro blogs (if that exists). It’s daunting; I mean, what’s a caveman to do?</p>
<p>So let’s chop it up for the social media impaired, and see where it takes us.</p>
<h3>What I Use</h3>
<p>My current beginner’s cocktail is LinkedIn and Twitter, and of course, our sweet, sweet Octopress. Although I’m sure I’m using Twitter wrong, TweetDeck is awesome. It’s a command center that shows me how I’ve followed too many people, published almost zero content, and have a paltry amount of followers (on a totally unrelated note). All joking aside, Twitter is a great outlet for my opinions as a green bean developer. It’s a resourceful tool to follow well-known developers and network with those in the Silicon Alley startup scene.</p>
<p>LinkedIn has been also been great as far as job inquiries and introductions are concerned, plus I find it very easy to use.</p>
<p>As far as Octopress is concerned, you’re reading it. More to come as I become a markdown master.</p>
<p>Here are a few tips and screenshots that have helped me employ TweetDeck to effectively manage my web presence:
My column setup is as follows:</p>
<p>Timeline - Activity - Interactions - Tweets - Search: “@FlatironSchool” - Search: “@shtavisays”</p>
<p><img class="center" src="http://snag.gy/V8bbx.jpg"></p>
<p>I like this setup; the content is arranged from left to right, scaling from public to personal interests. I find search columns to be particularly useful as they allow me to receive feeds based on hash tags or mentions. In the screenshot below, I have two search columns set up to find mentions of @FlatironSchool and @shtavisays.</p>
<p><img class="center" src="http://snag.gy/qcVDf.jpg"></p>
<h3>Forget @shtavisays, Look at How Avi Tweets</h3>
<p>For starters, our Flatiron School Dean has employed a succinct bounty of information in his bio without cracking 160 characters. Current pursuits, past endeavors, personal links, you name it. I’ll be updating my current Jay-Z-quote-starter-bio as soon as I’m done with this post (“Drink Cris Out the Bottle, Eat Popeyes for Dinner”).</p>
<p>Now that I’ve pointed out the obvious, here’s the rest. Avi, like Jeff Casimir, Gwen Bell, and Sandi Metz, uses Twitter as an all-purpose outlet. It’s a mix of the personal and professional, a swiss-army knife to get the thought across whatever that may be. I’ve seen Twitter get speakers to come to The Flatiron School and help students interact with big names within the tech community. So help me get started- Who should I follow? What should I look out for?</p>
<p>I’m excited to leave my caveman days behind me.</p>
<p><img class="center" src="http://www.mrgeek.me/wp-content/uploads/2013/04/caveman_computer.jpg"></p>
]]></content>
</entry>
</feed>