Kết nối giao diện với mã nguồn

Trong nội dung bài trước mình đã hướng dẫn bạn cách thiết kế giao diện. Nhưng giao diện bạn thiết kế chưa thể hoạt động được do nó chưa được lập trình bất kỳ chức năng nào cả. Vì thế nếu bạn chạy lên thì cũng chỉ để ngắm mà thôi. Và hôm nay mình sẽ hướng dẫn bạn làm nốt công việc còn lại, đó là lập trình chức năng (xử lý sự kiện) để giao diện có thể hoạt động được. Hay nói cách khác, chúng ta sẽ tiến hành kết nối giao diện với code. Nội dung bài hôm nay hơi dài, bạn hãy chú ý nhé.

Kết nối giao diện với source code

Trước khi viết code, bạn hãy nắm một vài ý như sau đã nhé:

Một màn hình thông thường sẽ bao gồm một giao diện hiển thị nội dung và một view controller.
- View controller sẽ làm nhiêm vụ thực hiện các hành vi của giao diện. Hiểu theo cách khác là bạn sẽ lập trình tại đây để xây dựng các chức năng cho giao diện mà view controller quản lý.
- Một view controller quản lý một single content view cùng với các subviews của nó.
- Tất cả các view controller objects trong iOS đều là kiểu UIViewController hoặc là lớp con kế thừa của nó.
- … về view controller thì có giành hết cả bài nãy cũng không nói hết. Vì thế ở khía cạnh cơ bản, bạn hãy nắm những ý mình trình bày ở trên là đủ.

Để kết nối một giao diện với source code, bạn cần kết nối giao diện với một class view controller.
- Chúng ta sẽ xây dựng các hành vi cho giao diện bên trong class hoặc subclass view controller đó.
- Trong bài trước, xcode đã tạo sẵn cho bạn một class view controller trong tập tin ViewController.swift. Bạn có thể xem giao diện đang được view controller nào quản lý bằng cách chọn cửa sổ Indentity inspector.

Cửa sổ Identity inspector cho phép bạn chỉ định class viewcontroller nào sẽ được kết nối với giao diện. Vì vậy khi thêm một màn hình thì bạn cần tạo một kết nối tới view controller trong Identity inspector.

OK, bây giờ việc của bạn là bổ sung thêm các kết nối giữa view trên giao diện và viewcontrollersource code. Hay còn gọi là thiết lập các Outlet thể hiện cho các control mà bạn đã thiết kế trong bài trước.

Thiết lập Outlet

Outlet thực chất là một đối tượng đại diện cho một thành phần giao diện nào đó (ví dụ như control). Outlet mô tả sự kết nối giữa một thành phần giao diện nào đó tới source code. Do đó để tương tác với control trong code thì bạn sẽ thao tác thông qua đối tượng outlet.

Trong XCode, để tạo một outlet cho một UI element, bạn giữ phím Control đồng thời nắm kéo thành phần giao diện tới nơi chứa source thích hợp (thường là view controller).

09 bước khởi tạo Outlet

➤ Ví dụ: kết nối text field đến ViewController.swift code để tạo outlet đại diện cho text field, các bước:

Mở storyboard (Main.storyboard)
Mở assistant editor. Nếu bạn muốn có nhiều không gian làm việc thì thu gọn project navigator và utility area.
Bạn mở giao diện source code bằng cách thay đổi assistant editor từ Preview thành Automatic -> ViewController.swift.
Trong ViewController.swift, bạn hãy tìm dòng sau:
Sau đó bạn hãy thêm đoạn chú thích sau ngay bên dưới.
➤ Lưu ý: comment chúng ta vừa thêm vào cho biết đây là khu vực dùng để liệt kê các thuộc tính (properties).
Trong storyboard, chọn text field.
Giữ phím Control + chọn text field và kéo sang phải phần editor và thả ngay dưới đoạn comment chúng ta vừa thêm ở trên. (hoặc kéo thả bằng “chuột” phải).
Sau khi thả kết nối ở tập tin source code, một cửa sổ popover sẽ hiển thị cho phép cấu hình cách thức kết nối. Bạn hãy đặt tên cho outlet là ”nameTextField” tại ô Name, các phần còn lại như mặc định.
Click Connect button. Kết quả nhận được:

Trên đây là 9 bước để bạn tạo một Outlet. Đọc thì dài nhưng thao tác thì nhanh lắm, đừng vì vậy mà cảm thấy ngại bạn nhé. Sau đó bạn hãy làm tương tự để tạo Outlet cho Label còn lại trên giao diện.

Demo

Sau đây là demo của toàn bộ quá trình trên. Bạn lưu ý là demo ở định dạng gif nên sẽ tự chạy và buộc phải xem toàn bộ demo.
Outlet iOS

Xử lý sự kiện (Action)

Khi người dùng tương tác với một UI element, thì element này sẽ gửi một action message tới một đối tượng có chứa phương thức xử lý thích hợp nào đó.

➤ Ví dụ: khi nhấn vào Button “Set Default Label Text”, nó sẽ gửi một thông điệp tới view controller. Lúc này view controller sẽ đảm nhiệm việc thay đổi nội dung của Label.

Trong XCode, để thêm một hành động (action) cho một UI element và thiết lập phương thức xử lý tương ứng. Bạn hãy thực hiện tương tự như tạo Outlet, bằng cách giữ phím Control đồng thời nắm kéo element trên giao diện tới nơi chứa source thích hợp (thường là view controller).

04 bước khởi tạo Action

➤ Ví dụ: tạo một action để xử lý sự kiện cho Button “Set Default Label Text” mỗi khi nào người dùng nhấn vào.

Trong ViewController.swift, thêm dòng chú thích sau ở cuối class ViewController:
Comment này có nghĩa đây là khu vực dành cho các action mà chúng ta thêm vào.
Trở lại giao diện, bạn hãy chọn Button ”Set Default Label Text”. Sau đó nhấn và giữ phím Control + kéo sang phía bộ soạn thảo bên phải và thả ngay dưới đoạn comment vừa thêm vào.
Sau khi thả kết nối ở tập tin source code, một cửa sổ popover sẽ hiển thị cho phép cấu hình cách thức kết nối.

Cấu hình connection trong cửa sổ popover như sau:
- Connection: loại kết nối, ở đây bạn hãy chọn Action.
- Name: tên phương thức, ví dụ setDefaultLabelText.
- Type: nhập UIButton, có nghĩa là chỉ những đối tượng Button mới có thể kết nối với action này.
- Event: chọn sự kiện muốn phát sinh, do người dùng sẽ nhấn vào Button, nên chúng ta chọn “Touch Up Inside”.
- Arguments: tên tham số đầu vào cho phương thức, thường là Sender đại diện cho chính Button phát sinh action.
Click Connect button. Kết quả nhận được:

Lập trình xử lý sự kiện cho Button

Trước khi lập trình, bạn có thể kiểm tra lại các kết nối đã tạo. Để xem lại (kiểm tra) các kết nối đã tạo (outlet hoặc action), bạn hãy mở cửa sổ Connection Inspector. Cửa sổ này sẽ cho bạn thấy tất cả các kết nối giữa các control và view controller. Ví dụ: chọn TextField trên storyboard, bạn sẽ thấy TextField đã được tạo outlet tới View Controller.
Sau khi thiết lập được action cho Button, để thực hiện thiết lập giá trị cho label bạn hãy viết code để xử lý sự kiện khi người dùng touch vào Button như sau:

Đến đây là hoàn thành việc khởi tạo action và lập trình xử lý sự kiện cho Button rồi bạn nhé. Cũng không khó khăn gì phải không nào? Chỉ đơn giản như vậy thôi, nào giờ thì bạn hãy chạy thử chương trình và tận hưởng thành quả đi nhé.

Demo

Sau đây là demo của toàn bộ quá trình trên. Bạn lưu ý là demo ở định dạng gif nên sẽ tự chạy và buộc phải xem toàn bộ demo.
Action iOS

Tổng kết

Toàn bộ hành động mà bạn thực hiện trong bài học hôm nay là một ví dụ minh hoạ cho Target – Action pattern (xử lý sự kiện). Đây là một design pattern thể hiện việc một object gửi một thông điệp tới một object khác khi một sự kiện xác định xảy ra.
Action iOS

Qua bài học này, mình đã trình bày tới bạn phương pháp để xây dựng một ứng dụng iOS. Và đây là một trong những bài học quan trọng để giúp bạn định hình cách tạo một ứng dụng iOS sau này. Vì vậy nếu bạn là người mới thì hãy cố gắng học thật kỹ, nếu có chỗ nào không hiểu thì cứ comment bên dưới nhé.