-
Notifications
You must be signed in to change notification settings - Fork 21
/
212 Storyboards and Controllers on OS X [English].srt
4399 lines (3461 loc) · 83 KB
/
212 Storyboards and Controllers on OS X [English].srt
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
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1
00:00:13,028 --> 00:00:14,113
good afternoon
2
00:00:15,013 --> 00:00:16,046
welcome to story boards and
3
00:00:16,046 --> 00:00:20,935
trollers on a West End my name's Mike
and I work on the Interface Builder team
4
00:00:21,349 --> 00:00:24,570
today I'd like to show you how you can
build your
5
00:00:24,057 --> 00:00:27,256
I was 10 applications faster and easier
using
6
00:00:27,769 --> 00:00:30,807
owning storyboards in Xcode 6 and
Yosemite
7
00:00:31,149 --> 00:00:35,300
I'm also gonna be joined later by my
colleague wrongly from the up kit team
8
00:00:35,003 --> 00:00:38,080
who will come up and take a under the
hood the new controllers API
9
00:00:39,007 --> 00:00:42,996
to make storyboards work so just a quick
show of hands here
10
00:00:43,059 --> 00:00:46,073
who is already building an app today
using
11
00:00:46,199 --> 00:00:49,226
for I West using storyboards I'll
12
00:00:49,469 --> 00:00:54,560
awesome cool so a your public notice a
little bit of one but to show you
13
00:00:55,379 --> 00:00:58,530
is got pretty familiar so what are we
gonna see
14
00:00:58,053 --> 00:01:01,110
first
15
00:01:02,001 --> 00:01:05,044
I'm gonna start by giving you a brief
overview of how storyboards work
16
00:01:05,053 --> 00:01:09,089
then I'm gonna give a demo showing how
you can quickly connect the top level
17
00:01:09,089 --> 00:01:09,171
controllers
18
00:01:10,071 --> 00:01:13,077
interface your up together using Xcode
sex
19
00:01:13,077 --> 00:01:17,083
hopefully you'll see how storyboards can
help you structure your app
20
00:01:17,083 --> 00:01:20,131
and modular in reusable view controllers
then
21
00:01:21,031 --> 00:01:24,068
role is going to come up and show us
that view controller API
22
00:01:24,068 --> 00:01:27,787
we'll see how all the pieces click
together underneath the storyboard
23
00:01:28,399 --> 00:01:28,457
scenes
24
00:01:28,979 --> 00:01:33,057
and he'll show you the best places to
hook into the infrastructure and finally
25
00:01:33,759 --> 00:01:36,830
as a bonus he's gonna show you how to
use the new gesture recognizers
26
00:01:37,469 --> 00:01:40,920
in West End without having to write an
innocent tracking
27
00:01:40,092 --> 00:01:43,134
all you have to do is just drag connect
to your target in action
28
00:01:44,034 --> 00:01:48,883
are so simple its simply amazing so
29
00:01:49,189 --> 00:01:54,224
in Xcode storyboards are great way to
see all you I parts of your application
30
00:01:54,539 --> 00:01:58,990
laid out in a way that understand take
for example an application like pages
31
00:01:58,099 --> 00:02:02,468
we can decompose you to the major pieces
the you why
32
00:02:03,359 --> 00:02:06,453
into each major section functionality
like the window toolbar
33
00:02:07,299 --> 00:02:10,373
the document area and the shape picker
each of these use has a corresponding
34
00:02:11,039 --> 00:02:12,041
controller
35
00:02:12,239 --> 00:02:18,470
and we show that the storyboard as from
each scene
36
00:02:18,047 --> 00:02:22,114
represent view and view controller pair
the lines connecting the scenes
37
00:02:23,014 --> 00:02:26,026
know the segways sure the relationships
between
38
00:02:26,026 --> 00:02:29,112
them some of these relationships
represent a containment
39
00:02:30,012 --> 00:02:34,038
view controllers inside each other other
segue lines represent transitions
40
00:02:34,038 --> 00:02:35,079
between view controllers
41
00:02:35,079 --> 00:02:41,028
but each one represents flow data in
some form within the app
42
00:02:41,739 --> 00:02:45,320
in your code
43
00:02:45,032 --> 00:02:48,451
you controllers are where you the
developer actually get your hands and
44
00:02:48,739 --> 00:02:50,380
controlling both you why
45
00:02:50,038 --> 00:02:53,093
and the underlying data model each
top-level seem
46
00:02:53,093 --> 00:02:56,362
in a storyboard represents one view
controller in your code
47
00:02:57,199 --> 00:03:00,320
each controller is a reusable
48
00:03:00,032 --> 00:03:03,094
self-contained module user interface in
control logic
49
00:03:03,094 --> 00:03:06,100
within that controller seen you can do
everything you would normally do inside
50
00:03:07,054 --> 00:03:07,463
Ibiza
51
00:03:07,949 --> 00:03:11,993
file like place the Y set up auto layout
constraints
52
00:03:12,389 --> 00:03:16,820
connect outlets and actions to their
parents you controllers
53
00:03:16,082 --> 00:03:19,871
and it's represented object so how to be
seen
54
00:03:20,609 --> 00:03:23,628
actually connect with each other well
55
00:03:23,799 --> 00:03:26,880
segways are really in the glue or the
connective tissues
56
00:03:27,609 --> 00:03:31,668
between each the major blocks off your
caps you why you may have noticed
57
00:03:32,199 --> 00:03:35,500
the on I West Singh was usually
represent transition
58
00:03:35,005 --> 00:03:38,994
between whole full-screen views we took
a look at
59
00:03:39,489 --> 00:03:42,870
the relationships between view
controllers and West End though
60
00:03:42,087 --> 00:03:45,916
we noticed somewhat different
relationship containment
61
00:03:46,699 --> 00:03:49,787
on almost ten most applications tend to
group their views together
62
00:03:50,579 --> 00:03:53,650
in the same window there are many
transitions bring
63
00:03:53,065 --> 00:03:57,144
views on and off-screen because you
actually have the screen real estate to
64
00:03:57,729 --> 00:03:58,470
show the mall
65
00:03:58,047 --> 00:04:02,156
inside the same window summer grouped in
splits or sometimes hidden tabs
66
00:04:02,579 --> 00:04:05,592
that's not to say that we don't have
67
00:04:05,709 --> 00:04:09,752
presentation sideways on our 10 as well
we just have fewer of them
68
00:04:10,139 --> 00:04:13,690
at modal dialogs when the model sheets
69
00:04:13,069 --> 00:04:16,084
and popovers like the presentation
segways
70
00:04:16,084 --> 00:04:20,223
on i OS in order to make these work it's
your responsibility to override the
71
00:04:20,979 --> 00:04:22,470
prepare for Segway
72
00:04:22,047 --> 00:04:25,066
method in your parent you controller
73
00:04:25,066 --> 00:04:29,111
from there you can take the past and and
a storyboard segue object
74
00:04:30,011 --> 00:04:34,062
get the destination view controller that
and configure and set the represented
75
00:04:34,062 --> 00:04:36,351
object or do any other initialization
76
00:04:36,909 --> 00:04:40,978
right before it's presented up on screen
77
00:04:41,599 --> 00:04:43,684
so if there's one line of code that is
absolutely necessary and that you need
78
00:04:44,449 --> 00:04:44,545
to remember
79
00:04:45,409 --> 00:04:49,590
its prepare for Segway
80
00:04:49,059 --> 00:04:52,134
so at build time each storyboard scene
is broken down
81
00:04:53,034 --> 00:04:57,613
into each its constituent parts views
are separated from view controllers
82
00:04:57,919 --> 00:05:01,925
windows are separated from winter
controllers and the transition segways
83
00:05:01,979 --> 00:05:05,050
are embedded inside of their parent
controllers
84
00:05:05,689 --> 00:05:08,770
this is done to make the process a
lowering your user interface
85
00:05:08,077 --> 00:05:12,506
as lazy as possible at runtime then as
performance optimization
86
00:05:13,199 --> 00:05:17,202
the container controllers absorb all
other child controllers together in the
87
00:05:17,229 --> 00:05:19,370
same unit
88
00:05:19,037 --> 00:05:22,826
this is because all those controllers
are going to be needed the initial load
89
00:05:23,159 --> 00:05:23,203
time
90
00:05:23,599 --> 00:05:27,605
the top-level container controller and
it's just more efficient
91
00:05:27,659 --> 00:05:31,110
on archive 14 then each unit
92
00:05:31,011 --> 00:05:34,320
is compiled into a net file and then all
the noobs
93
00:05:34,419 --> 00:05:37,494
are bundled together inside about
storyboard see bundle
94
00:05:38,169 --> 00:05:42,190
then that bundles nestled inside of your
applications resources director
95
00:05:42,379 --> 00:05:46,240
and then appear up can go to the store
96
00:05:46,024 --> 00:05:49,090
so we put a lot of our and work into the
storyboard compiler
97
00:05:49,009 --> 00:05:53,058
to make sure you get the most fission
loading at runtime while in use the most
98
00:05:53,949 --> 00:05:54,953
flexible yuan Lai
99
00:05:55,349 --> 00:05:59,770
to be able to connect in rewire the
relationships between your controllers
100
00:05:59,077 --> 00:06:03,056
on campus all with the absolute minimum
glucose
101
00:06:03,749 --> 00:06:07,774
so we'll see how this all works over
here on the demolition
102
00:06:07,999 --> 00:06:11,041
so as a way of testing storyboards
103
00:06:11,419 --> 00:06:14,512
and to make sure that everything that
we're buildings actually working
104
00:06:15,349 --> 00:06:18,610
we started by rewriting an all peace
sample code
105
00:06:18,061 --> 00:06:21,370
that you may be familiar with called
sketch
106
00:06:21,919 --> 00:06:25,947
in our story board based sketch the next
generation
107
00:06:26,199 --> 00:06:29,330
we're taking a class a document based
app and we're
108
00:06:29,033 --> 00:06:32,872
remodeling much in control logic
interview controllers
109
00:06:33,169 --> 00:06:37,224
so as you can see here we have the main
story board over application
110
00:06:37,719 --> 00:06:41,240
it already has a number of scenes that
we've pre-populated ins
111
00:06:41,024 --> 00:06:44,753
with view controllers and
112
00:06:44,969 --> 00:06:48,120
what we want to do is to show you why
that has
113
00:06:48,012 --> 00:06:51,033
are campus where you can drop shapes
114
00:06:51,033 --> 00:06:55,065
and use gestures to manipulate them and
then have a split
115
00:06:55,065 --> 00:06:59,304
and on the other side of that would be
will be the inspector area
116
00:06:59,889 --> 00:07:02,950
where you can see the different
properties the currently selected shape
117
00:07:03,499 --> 00:07:08,590
so to model this I'm going to use a
split view controller
118
00:07:08,059 --> 00:07:11,348
and I'm just gonna drag that out into
the campus here
119
00:07:11,879 --> 00:07:15,330
and it comes with two controllers
already which I don't really mean
120
00:07:15,033 --> 00:07:17,392
because I already have my campus
121
00:07:17,689 --> 00:07:20,695
I can just wire up here
122
00:07:21,289 --> 00:07:24,330
and drag connect and Chris
123
00:07:24,699 --> 00:07:27,736
I'm out that and then we wanna where
124
00:07:28,069 --> 00:07:33,210
inspectors well and you can see here we
have like a little preview
125
00:07:33,021 --> 00:07:36,540
love with the campus in the inspector
look like and it's using
126
00:07:36,729 --> 00:07:41,080
the auto layout constraints that have
already been set in those views
127
00:07:41,008 --> 00:07:44,807
also to get this to show up we wanna
take are window controller
128
00:07:44,879 --> 00:07:47,913
and connect the new split view
controller and say that this is going to
129
00:07:48,219 --> 00:07:49,260
be the windows
130
00:07:49,629 --> 00:07:52,800
content view controller so
131
00:07:52,008 --> 00:07:56,014
a looks like all other boxes have old
lines connected to him let's
132
00:07:56,086 --> 00:07:59,665
run this and shows up
133
00:08:00,439 --> 00:08:04,550
top here is an app our application
134
00:08:04,055 --> 00:08:08,424
and as iris 5 you'll notice that
135
00:08:08,919 --> 00:08:11,990
you know we have a good enforced minimum
size from
136
00:08:11,099 --> 00:08:14,180
our auto layout constraints but the
split is not
137
00:08:15,008 --> 00:08:18,099
sticking kind of to the side where we
would want it as we resize the window
138
00:08:19,071 --> 00:08:20,080
just keeps getting bigger
139
00:08:21,061 --> 00:08:24,062
so I know what I can do to fix this
140
00:08:24,062 --> 00:08:27,121
I just have to go to the split view
controller
141
00:08:28,021 --> 00:08:32,094
and find the split view item corresponds
to that
142
00:08:32,094 --> 00:08:35,140
and I can the holding priority
143
00:08:36,004 --> 00:08:39,009
the split to be just a little bit more
than the default
144
00:08:39,009 --> 00:08:43,012
and what we're here we must market is
saying can collapse because you know
145
00:08:44,002 --> 00:08:47,026
might not want to always see details I
love the
146
00:08:47,044 --> 00:08:50,067
shapes on campus cell let's run
147
00:08:50,067 --> 00:08:53,114
help looks
148
00:08:54,014 --> 00:08:58,050
alright now as a drag this we notice
that the
149
00:08:58,005 --> 00:09:01,012
split view edge is actually hugging the
side window
150
00:09:01,057 --> 00:09:04,124
as we won its so train at shape
151
00:09:05,024 --> 00:09:08,039
0 and it looks like we don't have our
152
00:09:08,039 --> 00:09:11,044
shape Add button hooked up so
153
00:09:11,089 --> 00:09:14,142
I'm going to create a new kind of segue
154
00:09:15,042 --> 00:09:18,125
and I'm going to show the shape picker
controller
155
00:09:19,025 --> 00:09:22,060
as a popover
156
00:09:22,006 --> 00:09:25,008
and in order to make this work though
157
00:09:25,062 --> 00:09:29,136
there is one one piece of code that we
all have to remember
158
00:09:30,036 --> 00:09:33,129
to implement in order for up these two
workers
159
00:09:34,029 --> 00:09:37,034
the prepare for Segway
160
00:09:37,034 --> 00:09:41,071
so I'm actually gonna open up the
assistant editor
161
00:09:41,071 --> 00:09:45,112
and should see
162
00:09:46,012 --> 00:09:50,023
the canvas you control it here we go and
it looks like somebody
163
00:09:50,023 --> 00:09:53,045
has already helpfully written code for
me so I'm just gonna and comment
164
00:09:53,045 --> 00:09:56,094
here and what it does is it takes the
165
00:09:56,094 --> 00:09:59,139
destination view controller I love the
past in
166
00:10:00,039 --> 00:10:03,081
and a storyboard segue and what we're
doing is we're
167
00:10:03,081 --> 00:10:06,163
initializing to and saying that it the
ship container
168
00:10:07,063 --> 00:10:10,109
is going to be the campus which is
ourself in this case
169
00:10:11,009 --> 00:10:15,011
campus initiating the Segway and it's
also going to be the destination where
170
00:10:15,029 --> 00:10:16,045
one add new
171
00:10:16,045 --> 00:10:23,045
checked so let's build and run us
172
00:10:25,037 --> 00:10:28,063
and when we click on great
173
00:10:28,063 --> 00:10:31,144
so now we have a shape a can't
174
00:10:32,044 --> 00:10:35,077
seemed do anything with it can't move it
by
175
00:10:35,077 --> 00:10:38,093
I think I'll leave that for Raleigh
176
00:10:38,093 --> 00:10:41,134
but as one more little bonus before I
leave a
177
00:10:42,034 --> 00:10:45,067
I want to you hookup what is going to be
178
00:10:45,067 --> 00:10:49,142
a Preferences window and I just wanna
show you just how easy this is cuz
179
00:10:50,042 --> 00:10:54,090
this is on my favorite features I just
couldn't wait to show you
180
00:10:54,009 --> 00:10:58,045
I am right here we have tab view
controller
181
00:10:59,026 --> 00:11:03,067
that has both general prepping and some
keyboard shortcuts
182
00:11:03,067 --> 00:11:06,090
and what I can do is I can wire the SUP
183
00:11:06,009 --> 00:11:09,015
to the preference is menu item
184
00:11:09,096 --> 00:11:12,150
and just say for the Sega demo words
gonna show this is a moral
185
00:11:13,005 --> 00:11:16,086
dialogue and fire on this
186
00:11:17,031 --> 00:11:20,082
you notice that we have
187
00:11:20,082 --> 00:11:23,109
a sketch with
188
00:11:24,009 --> 00:11:27,054
fully functional preferences you notice
the nice no new crossfade
189
00:11:27,054 --> 00:11:30,063
between these two views which comes with
the temp controller
190
00:11:31,044 --> 00:11:35,113
but this isn't look exactly like
preferences when to you still
191
00:11:36,013 --> 00:11:39,017
one other really call options that'll
been added
192
00:11:39,017 --> 00:11:43,028
to you have you controller is a new
style
193
00:11:43,028 --> 00:11:46,066
besides just happens on top or tabs on
bottom
194
00:11:46,066 --> 00:11:49,153
we can actually say we won toward bar
style tabs
195
00:11:50,053 --> 00:11:54,055
and we actually specified the class
196
00:11:54,055 --> 00:11:57,112
our view controllers in this case this
is the general
197
00:11:58,012 --> 00:12:01,040
prep Spain you controller and this one
198
00:12:01,004 --> 00:12:04,007
is the he Board Short
199
00:12:04,043 --> 00:12:07,045
you controller I we will find
200
00:12:07,063 --> 00:12:10,070
with in your document the
201
00:12:11,033 --> 00:12:14,048
emit images that are named the same
202
00:12:14,048 --> 00:12:18,048
as the class love the view controller
203
00:12:18,048 --> 00:12:21,074
so when we run s now
204
00:12:21,074 --> 00:12:25,075
you'll see
205
00:12:25,084 --> 00:12:28,160
new Preferences window have the icon
206
00:12:29,006 --> 00:12:33,031
and the titles fewer
207
00:12:33,085 --> 00:12:39,159
the trial began
208
00:12:40,059 --> 00:12:43,073
switch back to fly
209
00:12:43,073 --> 00:12:47,145
so how easy was that just by wearing a
few segways on campus
210
00:12:48,045 --> 00:12:51,121
and overriding prepare for Segway we
were able to plumb together the view
211
00:12:52,021 --> 00:12:52,094
controllers
212
00:12:52,094 --> 00:12:55,142
into a fully functional application
Preferences window
213
00:12:56,042 --> 00:12:59,087
didn't even use a single line of code
cell
214
00:12:59,087 --> 00:13:02,092
now I'd like to ask rally to come up
Angeles house reports
215
00:13:02,092 --> 00:13:09,092
actually works under the hood thank you
Mike
216
00:13:12,037 --> 00:13:15,069
now that you've seen how incredibly easy
it is