-
Notifications
You must be signed in to change notification settings - Fork 148
/
Copy path13. Persistence and Documents.srt
7227 lines (5772 loc) · 149 KB
/
13. Persistence and Documents.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:00,401 --> 00:00:04,636
[MUSIC]
2
00:00:04,705 --> 00:00:09,174
>> Stanford University.
>> All right, welcome to
3
00:00:09,242 --> 00:00:13,245
lecture number 13 Stanford
CS193P fall of 2017 and
4
00:00:13,314 --> 00:00:16,014
18. So we have a very which
demo today, I've actually kind
5
00:00:16,082 --> 00:00:18,316
of compressed it ciz I really
need to get to the slides,
6
00:00:18,385 --> 00:00:21,753
very important topic which
is persistance. And so
7
00:00:21,822 --> 00:00:23,155
let me just dive
right into that demo,
8
00:00:23,224 --> 00:00:25,257
and then we'll get to
persistence right after that.
9
00:00:25,326 --> 00:00:28,460
So the demo here is I'm
gonna take our emoji art and
10
00:00:28,528 --> 00:00:31,597
add a little way to make
a text field appear
11
00:00:31,665 --> 00:00:36,201
up in our little collection
view that slides around, so
12
00:00:36,270 --> 00:00:40,672
we can add more emoji to that
little sliding thing. So
13
00:00:40,741 --> 00:00:44,209
how are we going to do that?
Well to make this go quicker,
14
00:00:44,278 --> 00:00:47,145
here's our emoji as we
left it off last time. But
15
00:00:47,213 --> 00:00:50,115
I've made a couple of little
changes here. I've added two
16
00:00:50,184 --> 00:00:51,683
collection view cells.
You see them right here,
17
00:00:51,751 --> 00:00:53,919
this one with the plus button.
This is just a UI button,
18
00:00:53,988 --> 00:00:56,755
right here and then this one
has got a UI text field.
19
00:00:56,824 --> 00:00:57,756
That's what this little,
20
00:00:57,824 --> 00:00:59,757
I don't know if you can see
the light gray in there, but
21
00:00:59,826 --> 00:01:00,993
this is a text
field inside here.
22
00:01:01,061 --> 00:01:04,029
That's the only thing that's
in these new cells, and each
23
00:01:04,097 --> 00:01:06,264
of these cells, of course,
I gave it an identifier.
24
00:01:06,333 --> 00:01:08,567
This one's called
an AddEmojiButtonCell,
25
00:01:08,636 --> 00:01:13,471
and this one's called
a EmojiInputCell.
26
00:01:13,540 --> 00:01:16,574
This cell is just a standard
UI collection view cell.
27
00:01:16,643 --> 00:01:20,078
So if I look at it right here,
you can see that its class is
28
00:01:20,146 --> 00:01:23,415
just UI collection view cell.
But this one is a special
29
00:01:23,483 --> 00:01:26,985
text field collection view
cell. A subclass of collection
30
00:01:27,054 --> 00:01:29,721
view cell that handles this
text field a little bit.
31
00:01:29,790 --> 00:01:31,656
And so we're gonna go take a
look at the code from that and
32
00:01:31,725 --> 00:01:34,726
actually add a little bit of
extra code to that, cuz I want
33
00:01:34,795 --> 00:01:38,230
to show you just a kind of
a trickier way to do things.
34
00:01:38,298 --> 00:01:40,765
That's not tricky, but it's
a really valuable way that,
35
00:01:40,834 --> 00:01:42,234
that's a little bit advanced,
so
36
00:01:42,303 --> 00:01:45,537
I wanted to make sure you
learn that. All right, so
37
00:01:45,606 --> 00:01:48,740
I have these two new cells.
Let's take a look at this code
38
00:01:48,809 --> 00:01:52,844
for the text field, collection
view cell, that is right here,
39
00:01:52,913 --> 00:01:55,580
it's a very very simple cell,
it just has an outlet
40
00:01:55,649 --> 00:01:57,649
to that text field
you saw right there.
41
00:01:57,717 --> 00:01:59,184
Now notice when
my outlet is set,
42
00:01:59,252 --> 00:02:02,153
I immediately set that
outlet's delegate to my, me,
43
00:02:02,222 --> 00:02:04,723
myself. And
I'm a UITextFieldDelegate.
44
00:02:04,791 --> 00:02:07,192
Okay remember the slides
from last time. And
45
00:02:07,260 --> 00:02:09,694
so I only implemented one
delegate method here which is
46
00:02:09,763 --> 00:02:12,397
textfieldShouldReturn and
what it does, when you press
47
00:02:12,466 --> 00:02:15,367
the return key on
the keyboard, it resigns first
48
00:02:15,435 --> 00:02:17,368
responder, which means it
stops using the keyboard. And
49
00:02:17,437 --> 00:02:20,138
the keyboard disappears. So if
you don't do this little thing
50
00:02:20,206 --> 00:02:21,873
right here, then when you
press Return on the keyboard,
51
00:02:21,942 --> 00:02:24,242
the keyboard stays up. Okay
and the cursor keeps blinking.
52
00:02:24,311 --> 00:02:26,478
Here it caused it to go away.
53
00:02:26,547 --> 00:02:27,846
And we're gonna add another
54
00:02:27,915 --> 00:02:32,283
delicate method here
in a second. So now,
55
00:02:32,352 --> 00:02:34,318
remember that I have these
two cells right here, right?
56
00:02:34,387 --> 00:02:38,290
The emoji button one and then
the input cell right there. So
57
00:02:38,358 --> 00:02:40,892
now, let's go back to our
emoji art controller code and
58
00:02:40,961 --> 00:02:44,563
look how I dealt with this,
how I put this in the UI.
59
00:02:44,631 --> 00:02:47,532
Well, first of all that
little plus button,
60
00:02:47,601 --> 00:02:50,702
it uses target action to send
this message to my controller.
61
00:02:50,771 --> 00:02:52,671
Now notice it's sending it
directly to the controller.
62
00:02:52,740 --> 00:02:54,472
If I had multiple of
those plus buttons,
63
00:02:54,541 --> 00:02:56,241
they'd all be sending
this message.
64
00:02:56,309 --> 00:02:59,911
But luckily I only have one
so, this is perfectly fine.
65
00:02:59,980 --> 00:03:02,647
Remember that a lot of times
if we have something in
66
00:03:02,716 --> 00:03:03,982
a collection in
bureau table view and
67
00:03:04,051 --> 00:03:04,849
it's sending target action,
68
00:03:04,918 --> 00:03:07,719
we have it send it to a custom
cell, right? Because we want
69
00:03:07,788 --> 00:03:10,755
each one to receive a special
thing, but, here we can have
70
00:03:10,824 --> 00:03:13,758
things send it through the
controller. Now all of this
71
00:03:13,827 --> 00:03:17,829
that plus button does is that
it turns this adding emoji on.
72
00:03:17,898 --> 00:03:20,865
Because we're in the process
of addingEmoji after you press
73
00:03:20,934 --> 00:03:24,002
that button. And
then it reloads section zero.
74
00:03:24,071 --> 00:03:27,105
Now I have decided that I'm
gonna put that plus button and
75
00:03:27,173 --> 00:03:29,841
the text field name in
a different section from all
76
00:03:29,910 --> 00:03:32,144
the rest. Remember Collection
Views, like Table Views,
77
00:03:32,212 --> 00:03:33,244
they have sections, so
78
00:03:33,313 --> 00:03:35,413
I'm gonna have section zero is
gonna be the plus button or
79
00:03:35,482 --> 00:03:38,049
the text field, depending on
whether I'm addingEmoji at
80
00:03:38,118 --> 00:03:40,885
the time and then section
one is gonna be all mine.
81
00:03:40,954 --> 00:03:43,855
Emoji as I'm used to it today.
So how do we implement that?
82
00:03:43,924 --> 00:03:46,357
Well, we have to say we
have two sections now,
83
00:03:46,426 --> 00:03:49,327
instead of just one section.
And when we get the number
84
00:03:49,396 --> 00:03:50,729
of items in a section here,
85
00:03:50,797 --> 00:03:53,665
we have to look at the section
and see if it's section 0,
86
00:03:53,733 --> 00:03:56,634
then we have 1, either the
plus button or the text field,
87
00:03:56,703 --> 00:03:59,070
or we have the number of
emojis if it's our old,
88
00:03:59,139 --> 00:04:01,940
the old thing we used to have
where it's all those emojis
89
00:04:02,009 --> 00:04:05,143
going across. Then we have to
change our cell for item at.
90
00:04:05,212 --> 00:04:07,645
This is the thing that gets
a cell for a given thing.
91
00:04:07,714 --> 00:04:09,213
So look at this
section as well. So
92
00:04:09,282 --> 00:04:12,650
this is what this code used to
look like and I just put it in
93
00:04:12,719 --> 00:04:16,221
an if the section is one then
do what we were doing before.
94
00:04:16,290 --> 00:04:19,291
Otherwise if the section
is zero, then if I'm adding
95
00:04:19,359 --> 00:04:22,393
emoji, I'm gonna put that
text field in there. And
96
00:04:22,462 --> 00:04:26,064
if i'm not adding emoji, I'm
gonna put the button in there.
97
00:04:26,132 --> 00:04:27,515
the text field are going to
be exchanging places right?
98
00:04:27,516 --> 00:04:28,899
So the button and
99
00:04:28,969 --> 00:04:31,002
You press the button,
it's going to change and
100
00:04:31,070 --> 00:04:33,304
switch to the text field
because I'm gonna set this
101
00:04:33,373 --> 00:04:36,407
adding emoji to true and then
I'm gonna reload my section.
102
00:04:36,476 --> 00:04:39,110
And that's gonna cause all of
this to get called again and
103
00:04:39,179 --> 00:04:41,879
it's gonna switch back and
forth. So I'm gonna have to
104
00:04:41,948 --> 00:04:46,184
put some code in here, when
I switch to the text field
105
00:04:46,252 --> 00:04:48,553
to get the text out, and we're
gonna talk about that. But
106
00:04:48,621 --> 00:04:50,855
before that, let me show you
a couple other things I did.
107
00:04:50,924 --> 00:04:53,758
One is I want the text field,
when it's there, to be very
108
00:04:53,827 --> 00:04:57,662
wide. I don't want it to be
tiny like all the other cells.
109
00:04:57,731 --> 00:04:59,063
I want it to be a wide cell,
so
110
00:04:59,132 --> 00:05:02,066
I overrode this method here. A
collection view layout method
111
00:05:02,135 --> 00:05:05,369
called size for
item at index path.
112
00:05:05,438 --> 00:05:08,673
And you return a size for
an item at that path. Well,
113
00:05:08,742 --> 00:05:12,043
if I'm adding emoji and we're
talking about section zero,
114
00:05:12,112 --> 00:05:14,413
then I'm going for
wide buttons, otherwise,
115
00:05:14,481 --> 00:05:17,181
I'm doing the standard size
I had before, and yes,
116
00:05:17,250 --> 00:05:19,850
these are blue numbers, they
shouldn't be here. I should be
117
00:05:19,919 --> 00:05:23,321
calculating this based on the
size of the font that the user
118
00:05:23,390 --> 00:05:26,024
chose and the accessibility
slider, all that, but we don't
119
00:05:26,093 --> 00:05:29,227
have time for all that so I'm
using blue numbers here. And
120
00:05:29,296 --> 00:05:32,730
then another one I overrode
here is will display cell.
121
00:05:32,799 --> 00:05:34,398
That's another cool
little delegate method
122
00:05:34,467 --> 00:05:35,500
in collection view.
123
00:05:35,569 --> 00:05:37,602
This is called right
before it displays a cell.
124
00:05:37,671 --> 00:05:40,771
And here what I do is if I'm
displaying the input cell,
125
00:05:40,840 --> 00:05:43,307
that little text field one,
I make it become the first
126
00:05:43,376 --> 00:05:46,244
responder. That way when
the text field comes up,
127
00:05:46,313 --> 00:05:50,481
the keyboard comes up.
See why I'm doing that? So
128
00:05:50,550 --> 00:05:53,652
will display cell. Another
fun collection do you think?
129
00:05:53,720 --> 00:05:55,620
I only had to do another
couple other small things.
130
00:05:55,689 --> 00:05:59,624
I disabled dragging here
if we're editing the emoji.
131
00:05:59,693 --> 00:06:02,827
If we're typing a new emoji, I
don't let the dragging happen
132
00:06:02,896 --> 00:06:05,096
because it just
messes things up
133
00:06:05,165 --> 00:06:07,465
to try to be swapping things
around at the same time.
134
00:06:07,534 --> 00:06:10,034
That we're adding stuff, so
I took that out of there.
135
00:06:10,103 --> 00:06:16,374
I also don't allow dropping,
where's my drop code here?
136
00:06:16,443 --> 00:06:20,211
DropProposal, where is that?
I can't find any in here,
137
00:06:20,280 --> 00:06:24,715
here it is. So I don't allow
when you're, repositioning
138
00:06:24,784 --> 00:06:27,619
the collection items,
right, the little emojis.
139
00:06:27,688 --> 00:06:31,022
I don't allow putting it
into section 0. That's where
140
00:06:31,091 --> 00:06:33,825
the plus button is. I don't
wanna drop smiley face for
141
00:06:33,893 --> 00:06:37,395
the bike into where the plus
button is, that section. So
142
00:06:37,464 --> 00:06:39,964
I just say here that
if the index path
143
00:06:40,033 --> 00:06:43,534
is section one, then I'll do
this thing where I'll copy or
144
00:06:43,603 --> 00:06:46,671
move the emoji. Otherwise, I'm
gonna say the drop proposal is
145
00:06:46,739 --> 00:06:49,541
cancelled, which means I
can't drop there. Everyone
146
00:06:49,609 --> 00:06:52,410
cool with that? So that's all
the code that I did. Now,
147
00:06:52,479 --> 00:06:55,347
the last thing, let's run and
see what this looks like here.
148
00:06:57,250 --> 00:07:01,753
Here's our UI. So, here's our
thing that we have so I can
149
00:07:01,821 --> 00:07:04,523
move things around. There's
the plus button on the left.
150
00:07:05,792 --> 00:07:08,793
Oops. If I press that plus
button, you see it gets
151
00:07:08,862 --> 00:07:13,097
replaced with the text field.
And I can bring up my
152
00:07:13,166 --> 00:07:16,968
keyboard here and start typing
in, some, I don't know,
153
00:07:17,036 --> 00:07:19,904
what do we got here some
shoes and hats and stuff.
154
00:07:19,973 --> 00:07:23,240
And typing these things in.
Now if I press the return key,
155
00:07:23,309 --> 00:07:25,944
my keyboard is gonna go away
cuz I implemented that one
156
00:07:26,013 --> 00:07:28,879
text delegate method.
see how it went away? But it's
157
00:07:28,948 --> 00:07:31,382
not adding the emoji, because
I have not put any code
158
00:07:31,451 --> 00:07:34,219
in here that actually takes
what I typed in there. And
159
00:07:34,287 --> 00:07:39,657
adds it to my scrolling list.
So how am I gonna do that?
160
00:07:39,726 --> 00:07:42,393
Well that is the trick.
Let's go take a look.
161
00:07:42,462 --> 00:07:46,297
And we want to essentially,
in our text field right here,
162
00:07:46,366 --> 00:07:50,435
when the text field resigns
being first responder, right,
163
00:07:50,503 --> 00:07:53,071
when it stops showing
the text field. Then we want
164
00:07:53,139 --> 00:07:55,106
to put that in. So of course,
we're gonna use this
165
00:07:56,843 --> 00:08:02,080
delegate method I talked about
called TextFieldDidEndEditing.
166
00:08:02,149 --> 00:08:07,318
Editing, editing. There it is.
And when this happens,
167
00:08:07,387 --> 00:08:10,154
I wanna talk back to my
collection view basically and
168
00:08:10,223 --> 00:08:13,691
say add the emoji that
was in my text field. But
169
00:08:13,760 --> 00:08:16,995
how do I talk back to my
collection view here?
170
00:08:17,063 --> 00:08:19,497
The collection view cells
don't really have a pointer to
171
00:08:19,565 --> 00:08:21,199
their collection view.
172
00:08:21,268 --> 00:08:23,668
So, it's an interesting
problem to solve, and
173
00:08:23,737 --> 00:08:25,537
I'm actually gonna solve it.
A lot of people would solve it
174
00:08:25,605 --> 00:08:27,772
by trying to go find
the collection here and
175
00:08:27,841 --> 00:08:29,574
talk to it or
something like that. But
176
00:08:29,643 --> 00:08:33,277
an actually a much easier way
to do this with closures. So
177
00:08:33,346 --> 00:08:38,049
I'm create a var, public var
in the cell called resignation
178
00:08:38,117 --> 00:08:42,120
handler. And it's just going
to be a closure, a function
179
00:08:42,188 --> 00:08:44,455
that takes no arguments and
returns no arguments.
180
00:08:44,524 --> 00:08:48,460
In fact I'm even going to make
this an optional function so
181
00:08:48,528 --> 00:08:51,296
that it can be nill,
doesn't have to be set.
182
00:08:51,364 --> 00:08:53,831
And when text field editing
happens I'm just gonna
183
00:08:53,900 --> 00:08:57,601
call this thing, resignation
handler. Might be nil so
184
00:08:57,670 --> 00:09:00,605
I'll optional chain it and
call it. So I'm just calling
185
00:09:00,674 --> 00:09:04,709
that function. Now, anyone who
is interested, when my text
186
00:09:04,778 --> 00:09:08,280
fields resigns can just set
this closure to something. And
187
00:09:08,348 --> 00:09:10,849
that's exactly what
we're gonna do back here
188
00:09:10,917 --> 00:09:14,886
in our controller.
Where we load up our cell,
189
00:09:14,955 --> 00:09:17,888
which is right here. If we're
doing the emoji input cell,
190
00:09:17,957 --> 00:09:19,490
which is the thing
with the text fill.
191
00:09:19,559 --> 00:09:23,962
I'm just gonna say if I can
let input cell equal this cell
192
00:09:24,030 --> 00:09:28,632
as a text field collection
cell, which is collection view
193
00:09:28,701 --> 00:09:33,171
cell which is that cell that
has that text field in it.
194
00:09:33,239 --> 00:09:37,642
Then I'm gonna set the input
cells, resignation handler,
195
00:09:37,710 --> 00:09:41,112
resignation handler.
Now, I'm just going to set it
196
00:09:41,181 --> 00:09:44,082
to be some closure that does
what I want when that text
197
00:09:44,151 --> 00:09:46,818
field resigns to the first
responder. Well, what do I
198
00:09:46,886 --> 00:09:49,487
want to do? I want to take
the emoji out of it and
199
00:09:49,556 --> 00:09:52,089
put into my list, of course.
So, let's just do that.
200
00:09:52,158 --> 00:09:55,293
I'm gonna set my, well, first,
I'm going to say, if I can let
201
00:09:55,362 --> 00:10:00,698
text equal the input cells
text fields text, so
202
00:10:00,767 --> 00:10:02,867
if you can get some
text out of there.