Ø Người dùng chạm vào TextField và bàn phím ảo của iPhone hiển thị.
Ø Người dùng gõ tên vào TextField sử dụng bàn phím ảo.
Ø Người dùng bấm vào Button.
Ø 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 Quan!”)
Ø 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”.
Trong bài này 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-BasedApplication của Xcode. Trong Xcode bấm vào File->New Project, chọn View-Based và đặt tên cho project (một tên bất kỳ).
Giống như đã giới thiệu ở trên, Xcode đã 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 thiết kế giao diện với tệp tin coreDataController.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. Màn hình mà chúng ta nhìn thấy bây giờ tương tự như hình dưới:
Hình 1 Giao diện thiết kế View coreDataController.xib
Một vài chú ý về Interface Builder:
Ø Object Library – Phần phía dưới bên phải của khung làm việc chứa các UI component. Trong bài này, ta sẽ sử dụng một UITextField, một UILabel và một UIButton.
Ø Placeholders và Objects 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 – Phần ở giữa khung làm việc. Đâ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 UI từ Object Library vào.
Ø Attributes – Phần trên bên phải của khung làm việc. Đâ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 View một Text Field
Ø Ta kéo thả TextField từ Object Library vào cửa sổ view. Ta 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 đã 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 Attributes Inspector trên Attributes đã giới thiệu ở trên.
§ Trong ô Placeholder bạn gõ Name. Đây là dòng chữ mặc định 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.
Hình 2 Attributes của Text Field
Thêm một Label
Ø Kéo một Label từ Object 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).
Hình 3 Attributes của Lable
Thêm một Button
Ø Kéo một Button từ Object Library vào cửa sổ view. Mở Attributes Inspector và gõ vào trong ôTitle, gõ “Display”.
Hình 4 Attributes của Button
Chúng ta đã hoàn thành phần giao diện, Giao diện của ta sẽ như hình sau:
Hình 5 Hoàn thành thiết kế các thành phần của giao diện
Chúng ta sẽ trở lại với mã nguồn. Tập tin mà chúng ta sẽ liên kết giao diện với code là tập tinViewController. Chúng ta cùng mở tập tin coreDataViewController.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 coreDataViewController.h.
@interface GiaodienViewController : UIViewController {
IBOutlet UITextField *txtName;
IBOutlet UILabel *lblHello;
}
@property(nonatomic,retain) IBOutlet UITextField *txtName;
@property(nonatomic,retain) IBOutlet UILabel *lblHello;
-(IBAction) updateText:(id) sender;
Ø Interface Builder sử dụng IBOutlet và IBAction để 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 thiết lập các thuộc tính liên quan đến các biến. Giữ lại 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.
§ - (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.
Bây giờ ta cần liên kết giao diện tới code. Ta bấm chuột vào làm việc với filecoreDataController.xib
1. Liên kết View
Bấm chuột lên bất kỳ chỗ nào trong view(không bấm lên TextField, Label, hoặc Button). BấmConnections Inspector tương tự như Attributes. 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:
Hình 6 Liên kết View
2. Liên kết Text Field
Bấm chuột lên TextField trên cứa sổ giao diện để chọn. Bấm Connections Inspector tương tự như Attributes. 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:
Hình 7 Liên kết Text Field
3. Liên kết Label
Bấm chuột lên Label trên cứa sổ giao diện để chọn. Bấm 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:
Hình 8 Liên kết Lable
4. Liên kết Button
Bấm chuột lên Button trên cứa sổ giao diện để chọn. Bấm 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:
Hình 9 Liên kết Button
Tiếp theo là ta mở file coreDataViewController.m . Đây là file mà chúng ta sẽ implement hàmupdateText. Thêm vào đoạn code như sau:
#import "GiaodienViewController.h"
@implementation GiaodienViewController
@synthesize txtName,lblHello;
-(IBAction) updateText:(id) sender{
NSString *text;
if ([txtName.text length]==0) {
text=@"Xin hay nhap ten ban";
}
else {
text=[[NSString alloc] initWithFormat:@"Hello %@!",txtName. .text];
}
lblHello.text=text;
[text release];
}
Bây giờ ta chạy ứng dụng bằng cách bấm Build and Go. Ứng dụng của chúng ta sẽ chạy trêniPhone 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”, thì tên bạn sẽ hiển thị lên ở Lable.
0 comments:
Post a Comment