Trang chủ > Lập trình iPhone cơ bản > Lập trình iPhone-liên kết giao diện với code

Lập trình iPhone-liên kết giao diện với code


Đã đến lúc chúng ta viết chút code. Mình sẽ chỉ cho các bạn cách thiết kế giao diện bằng Interface Builder và liên kết các thành phần giao diện với mã nguồn. Chúng ta sẽ tạo một UITextField, một UILabel, và một Button. Các bạn đừng khó chịu vì bài hướng dẫn này có vẻ hơi dài vì mình giải thích từng chi tiết những gì chúng ta sẽ làm. Các bạn có thể lướt qua và nắm lấy những cái cốt lõi. Dưới đây là mô tả về ứng dụng mà chúng ta sẽ viết:
1. Người dùng chạm vào TextField và bàn phím ảo của iPhone hiển thị.
2. Người dùng gõ tên vào TextField sử dụng bàn phím ảo.
3. Người dùng bấm vào Button.
4. Label sẽ được cập nhật lại với lời chào có chứa tên của người dùng(ví dụ: “Hello Tuanka!”)
5. Nếu người dùng nhấn nút mà không gõ tên, Label sẽ hiển thị dòng thông báo như sau: “Plesea enter your name”.

Yêu cầu Trước khi đọc bài hướng dẫn này bạn nên đọc các bài hướng dẫn trước:
Lập trình iPhone-Hello World.
Lập trình iPhone-Làm quen với Interface Builder.
Trong bài này bạn sẽ học cách:
• Tạo một ứng dụng kiểu View-Based.
• Tạo một giao diện đơn giản.
• Viết mã nguồn để liên kết với giao diện.
• Liên kết giao diện với mã nguồn.
• Cập nhật lại giao diện khi người dùng tương tác.

Cũng giống như bài hướng dẫn trước, chúng ta chỉ cần một View duy nhất. Vì vậy chúng ta sẽ sử dụng mẫu View-Based Application của Apple. Bấm vào File->New Project, chọn View-Based và đặt tên cho project(bạn có thể đặt bất cứ tên gì mà bạn muốn).

Giống như bài trước, Apple đã cung cấp sẵn cho chúng ta khá đầy đủ code để chúng ta có thể chạy ngay ứng dụng. Bạn có thể bấm vào Build and Go để khởi động Simulator, tuy nhiên những gì mà bạn thấy lúc này chỉ là một màn hình trống.
Chúng ta bắt đầu bằng việc nháy đúp lên tệp tin ViewBasedCdController.xib. Đây là một tệp tin nib và được mở bằng Interface Builder. Nó chứa các thông tin liên quan đến layout và control giao diện của chúng ta. Sau khi bạn nháy kép, Interface Builder sẽ được mở ra. Màn hình mà chúng ta nhìn thấy bây giờ tương tự như hình dưới:

Một vài chú ý về Interface Builder:
Library – Cửa sổ ngoài cùng bên phải chứa tất cả các thành phần mà bạn có thể sử dụng trong giao diện. Trong bài này, ta sẽ sử dụng một TextField, một Label và một Button.
Cửa sổ kế tiếp phía bên trái chứa các đối tượng mà ta sẽ liên kết giao diện của chúng ta với các đối tượng này. View đại diện cho giao diện của tệp tin nib. File’s Owner là đối tượng liên kết giao diện với mã nguồn của chúng ta.
View – Đây là giao diện trong ứng dụng iPhone của bạn. Cửa sổ này là nơi bạn sẽ thả các thành phần giao diện mà bạn kéo từ cửa sổ ngoài cùng bên phải vào.
Attributes –Đây là nơi ta sẽ đặt các thuộc tính cho việc hiển thị các thành phần giao diện.

Thêm vào giao diện một Text Field

Việc đầu tiên mà ta làm làm lúc này là kéo một TextField từ Library vào cửa sổ view. Bạn sẽ thấy một số đường kẻ màu xanh giúp bạn căn chỉnh vị trí thành phần giao diện.
Sau khi bạn đã thêm TextField vào View, bạn hãy di chuyển nó đến vị trí nào đó mà bạn cảm thấy phù hợp nhất. Tiếp theo, kéo giãn các cạnh của TextField để nó chiếm gần như hết chiều rộng của màn hình(các đường kẻ màu xanh sẽ giúp bạn biết nên kéo đến đâu).
Bây giờ chúng ta sẽ đặt các thuộc tính cho TextField. Nếu Attributes Inspector chưa hiện ra thì bạn bấm chuột lên TextField rồi bấm vào Tools->Attributes Inspector.
• Trong ô Placeholder bạn gõ Name. Đây là dòng chữ mặc đinh cho TextField trước khi người dùng của chúng ta gõ vào bất cứ cái gì.
• Đối với ô Capitalize chọn Words – Điều này nói cho XCode biết chúng ta muốn hiển thị chữ hoa cho chữ cái đầu tiên của mỗi từ.
• Ô Return Key – chọn Done. Chúng ta muốn bàn phím Done mà không phải là return.
• Chú ý đánh dấu Clear When Edit Begins.

Thêm một Label
Kéo một Label từ Library vào cửa sổ view. Giống như với TextField, bạn kéo giãn chiều rộng của Label và đặt nó vào vị trí mà bạn thấy phù hợp. Chúng ta thay đổi dòng chữ mặc định của Label. Mở Attributes Inspector và gõ vào trong ô Text dòng chữ “Enter your name above”(hoặc “Enter our name below” tùy thuộc vào vị trí mà bạn đặt TextField và Label).

Thêm một Button
Bây giờ kéo một Button từ Library vào cửa sổ. Bấm chuột lên Button đó và chọn Tool->Attributes Inspector. Trong ô Title, gõ “Display”.

Chúng ta đã hoàn thành phần giao diện, Giao diện của ta sẽ như hình sau:

Chúng ta sẽ trở lại với mã nguồn….. Đóng Interface Builder và quay trở lại với Xcode.
Tập tin mà chúng ta sẽ liên kết giao diện với code là tập tin ViewController. Chúng ta cùng mở tập tin ViewBasedViewController.h. Đây là tập tin mà chúng ta khai báo toàn bộ các biến giao diện. Bạn thêm đoạn code sau vào file ViewBasedViewController.h.

Interface Builder sử dụng IBOutletIBAction để liên kết tới code. Dưới đây là giải thích ngắn gọn về từng dòng code.
IBOutlet UITextField *textName – tạo ra một outlet để liên kết tới TextField mà chúng ta tạo ở InterfaceBuilder. Chúng ta sử dụng biến này để lấy thông tin từ TextField.
IBOutlet UILabel *lblHello – outlet này liên kết Label ở giao diện tới code. Biến này được sử dụng để truyền giá trị cho Label.
Sau khi khai báo các biến, chúng cần phải làm cho các biến này thành các properties. Các properties cho phép ta set các thuộc tính liên quan đến các biến. Retain cho trình biên dịch biết ta sẽ tự quản lý bộ nhớ cho đối tượng này(đừng quên release chúng khi chúng ta không cần tới các đối tượng nay nữa) nếu không chúng sẽ được “cleaned” sau khi được thực thể hóa.
Vẫn còn một dòng lệnh đáng chú ý ở đây.
(IBAction) updateText:(id) sender;
Đây là hàm sẽ được gọi khi người dùng bấm lên Button trong giao diện của ta. Chúng ta khai báo hàm này ở trong file header này một cách đơn giản. Lát nữa ta sẽ thực thi(implement) hàm này trong file ViewBasedViewController.m. Bây giờ ta cần liên kết giao diện tới code. Nháy đúp lên ViewBasedViewController.xib để mở Interface Builder.
1. Liên kết View
1. Bấm chuột lên bất kỳ chỗ nào trong cửa sổ view của bạn(không bấm lên TextField, Label, hoặc Button). Vào Tools->Connections Inspector. Bên cạnh chữ New Referencing Outlet bạn sẽ thấy một vòng tròn. Bấm vào vòng tròn đó và kéo đường kẻ màu xanh tới File’s Owner và thả ra. Chữ view sẽ tự động hiện ra. Bấm chuột lên nó. Vậy là bạn đã liên kết cửa sổ view tới đối tượng proxy của bạn. Bây giờ bạn sẽ thấy hình sau:

2. Liên kết Text Field
1. Bấm chuột lên TextField trên cứa sổ giao diện để chọn. Vào Tools->Connections Inspector. Bạn sẽ thấy một vòng tròn bên cạnh New Referencing Outlet. Bấm chuột lên vòng tròn và kéo thả nó lên đối tượng File’s Owner. Một message sẽ xuất hiện với txtname. Bấm chuột lên txtName và liên kết đã được tạo. Bạn sẽ thấy hình sau:

3. Liên kết Label
1. Bấm chuột lên Label trên cứa sổ giao diện để chọn. Vào Tools->Connections Inspector. Bạn sẽ thấy một vòng tròn bên cạnh New Referencing Outlet. Bấm chuột lên vòng tròn và kéo thả nó lên đối tượng File’s Owner. Một message sẽ xuất hiện với lblHello. Bấm chuột lên lblHello và liên kết đã được tạo. Bạn sẽ thấy hình sau:

3. Liên kết Button
1. Bấm chuột lên Button trên cứa sổ giao diện để chọn. Vào Tools->Connections Inspector. Bạn sẽ thấy một vòng tròn bên cạnh Touch Up Inside. Đây chính là sự kiện được phát sinh khi người dùng bấm lên button. Bấm chuột lên vòng tròn và kéo thả nó lên đối tượng File’s Owner. Một message sẽ xuất hiện với updateText và liên kết đã được tạo. Bạn sẽ thấy hình sau:

Mọi liên kết đã được thiết lập, chúng ta đóng Interface Builder lại,

Mở file ViewBasedViewController.m . Đây là file mà chúng ta sẽ implement hàm updateText. Thêm vào đoạn code dưới đây…

Đoạn code khá rõ ràng và dễ hiểu, Mình sẽ giải thích từng dòng code:
@synthesize txtName,lblHello;
Hầu như bất cứ khi nào bạn khai báo biến(nhất là biến private), bạn cần thiết lập các phương thức “getter” và “setter”. Các phương thức này get và set giá trị của một biến. Những gì mà synthesize làm là tạo ra các phương thức này cho bạn một cách tự động, bạn không cần phải viết lại “getter” và “setter” cho các biến mà bạn synthesize. Quá tiện dụng…
Kế tiếp là chúng ta implement hàm updateText. Ta đã bắt đầu bằng việc khai báo một biến tạm thời kiểu chuỗi. Giá trị của chuỗi này chúng ta sẽ được truyền vào thuộc tính text cho Label của chúng ta.
Dòng tiếp theo kiểm tra xem người dùng đã gõ vào TextField ký tự nào chưa. txtName.text trả về một đối tượng kiểu NSString. Chúng ta chỉ đơn giản gọi độ dài trên đối tượng NSString. Nếu độ dài bằng 0, hiển nhiên là người dùng chưa gõ vào ký tự nào. Trong trường hợp này, chúng ta gán chuỗi “Please enter your name” cho biến text để chỉ dẫn người dùng nhập tên vào TextField.
Nếu người dùng đã gõ tên vào TextField, một chuỗi mới sẽ được cấp phát(allocate). Phương thức initWithFormat tương tự như printf trong C. Vì thế ta sử dụng chuỗi @”Hello %@!”. Ký hiệu “%@” có nghĩa là ta sẽ thay thế ký hiệu này bằng một chuỗi. Để lấy giá trị của TextField, một lần nữa ta lại sử dụng txtName.text.
Cuối cùng chúng ta gán giá trị của Label bằng cách gọi lblHello.text. Câu lệnh này gọi thuộc tính text của Label và gán giá trị của thuộc tính text bằng giá trị của biến text tạm thời mà ta đã khai báo và truyền giá trị từ trước đó.
Dòng cuối giải phóng biến tạm thời text khỏi bộ nhớ. Điều này là cần thiết để viết một ứng dụng iPhone hiệu quả. Nếu bạn muốn biết tại sao rất nhiều ứng dụng iPhone bị crash, thì đó là bởi vì các developer bỏ qua bước này🙂.
Tất cả chỉ có thế, bấm chuột vào Build and Go. Ứng dụng của chúng ta sẽ chạy trên iPhone Simulator. Khi bạn bấm vào trong TexField, bàn phím ảo iPhone sẽ hiện ra(bạn cũng có thể nhập từ bàn phím máy tính). Gõ tên bạn vào và bấm lên nút “Display”. Dưới đây là một số hình ảnh khi ứng dụng của bạn hoạt động:

Người dùng bấm Display khi không gõ tên vào TextField

Người dùng gõ tên và bấm Display

Hy vọng bài hướng dẫn này sẽ giúp các bạn được điều gì đó về làm quen với lập trình iPhone. Nếu các bạn có thắc mắc gì hãy viết trong phần comment. Chúc các bạn lập trình vui vẻ!

  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: