1 00:00:00,000 --> 00:00:02,120 [treehouse presents] 2 00:00:02,120 --> 00:00:05,960 [Quick Tips: Creating a Registration Form in iOS with Amit Bijlani] 3 00:00:05,960 --> 00:00:09,110 Hi I'm Amit, and in this Treehouse Quick Tip 4 00:00:09,110 --> 00:00:12,560 we're gonna learn how to create a Form using a Static Table 5 00:00:12,560 --> 00:00:14,900 within a storyboard. 6 00:00:14,900 --> 00:00:20,250 Static Tables are used throughout the settings app on an iPhone or iPad. 7 00:00:20,250 --> 00:00:22,870 Let's learn how to create one. 8 00:00:22,870 --> 00:00:27,600 Let's start with a single view project and make sure that the first View Controller 9 00:00:27,600 --> 00:00:30,600 in the storyboard is a Table View Controller. 10 00:00:30,600 --> 00:00:35,710 As you can see this is a regular View Controller; we will delete this 11 00:00:35,710 --> 00:00:41,090 and add a Table View Controller. 12 00:00:41,090 --> 00:00:46,090 We will also make sure that the ViewController.h inherits from 13 00:00:46,090 --> 00:00:51,250 UiTableViewController. 14 00:00:51,250 --> 00:00:56,890 Now going back to the main storyboard, the first thing we will make sure 15 00:00:56,890 --> 00:01:02,230 is that our Table View Controller connects to our View Controller, 16 00:01:02,230 --> 00:01:05,750 which is this ViewController.h. 17 00:01:05,750 --> 00:01:08,830 So make sure that the Table View Controller is selected 18 00:01:08,830 --> 00:01:12,120 here in the hierarchy viewer 19 00:01:12,120 --> 00:01:15,790 and enter Class View Controller. 20 00:01:15,790 --> 00:01:20,830 Now our Table View Controller is connected to the View Controller. 21 00:01:20,830 --> 00:01:25,660 When you first select the Table View, so opening up our hierarchy view 22 00:01:25,660 --> 00:01:27,760 you can select Table View. 23 00:01:27,760 --> 00:01:33,280 You will notice that it is selected to have Dynamic Prototype as it's Content. 24 00:01:33,280 --> 00:01:39,210 Going over to the attributes inspector and you will notice that the content says 25 00:01:39,210 --> 00:01:40,910 Dynamic Prototypes. 26 00:01:40,910 --> 00:01:45,020 We can change this to Static Cells because Dynamic Prototypes 27 00:01:45,020 --> 00:01:49,250 is when you are providing it with data and dynamically creating rows 28 00:01:49,250 --> 00:01:51,490 within this table to fit that data. 29 00:01:51,490 --> 00:01:54,870 Let's find out how to quickly create a registration form 30 00:01:54,870 --> 00:01:56,970 using the Static Table. 31 00:01:56,970 --> 00:01:59,470 Now a Table is made up of Cells 32 00:01:59,470 --> 00:02:03,060 and the grouping of the Cells is known as a Section. 33 00:02:03,060 --> 00:02:06,130 We can also change the style of the table. 34 00:02:06,130 --> 00:02:09,639 We can go from Plain to Grouped, 35 00:02:09,639 --> 00:02:12,810 so as you can see the style changes over here. 36 00:02:12,810 --> 00:02:16,890 We can also provide our Section with a Section Header. 37 00:02:16,890 --> 00:02:21,040 If you click on Table View Section in the hierarchy view, 38 00:02:21,040 --> 00:02:23,130 you can go ahead and change the Header. 39 00:02:23,130 --> 00:02:28,710 I'll call this Header: Registration. 40 00:02:28,710 --> 00:02:32,480 As you can see we now have a Header. 41 00:02:32,480 --> 00:02:36,310 Each Cell can have several different styles, 42 00:02:36,310 --> 00:02:39,950 as you can select from the style in the Attributes Inspector, 43 00:02:39,950 --> 00:02:42,610 but let's keep it as Custom 44 00:02:42,610 --> 00:02:50,930 and we will add a Label and a Text Field for our registration. 45 00:02:50,930 --> 00:02:54,230 So searching for Label in the box down here, 46 00:02:54,230 --> 00:02:59,890 we will take the Label and drag it to our Cell. 47 00:02:59,890 --> 00:03:04,780 Next I'll search for Text Field and take the Text Field, 48 00:03:04,780 --> 00:03:09,260 and once again drag it to our Custom Cell. 49 00:03:09,260 --> 00:03:14,120 I can call this Label: Name 50 00:03:14,120 --> 00:03:29,120 and similarly I can duplicate this Cell and have another field called Email. 51 00:03:29,120 --> 00:03:34,160 Since these are Text Fields I can customize the Return Key, 52 00:03:34,160 --> 00:03:39,990 which is under Return Key, and instead of Default I can select Next, 53 00:03:39,990 --> 00:03:44,750 and for the Email one I can select Done. 54 00:03:44,750 --> 00:03:46,770 Finally what you wanna do is, 55 00:03:46,770 --> 00:03:52,440 now that you have these Custom Text Fields in your Custom Table View Cell, 56 00:03:52,440 --> 00:03:56,720 you can add IBOutlets to your View Controller. 57 00:03:56,720 --> 00:04:03,490 Basically going over to the assistant editor, let's make some room, 58 00:04:03,490 --> 00:04:10,820 holding down the control key you can drag it to the interface and create IBOutlets. 59 00:04:24,610 --> 00:04:29,170 If you run this application, you will see now you can enter information 60 00:04:29,170 --> 00:04:32,860 and capture it programatically. 61 00:04:32,860 --> 00:04:37,010 Using Static Table to create a Form is just one use case. 62 00:04:37,010 --> 00:04:40,730 You can use it for a whole wide variety of scenarios.