Viết chương trình với “Hello World" - Xcode - IPhone

Đối với một người khi mới làm quen với một ngôn ngữ lập trình mới thì cách tiếp cận nhanh và cần thiết là tạo ra một project demo hiển thị với câu chào là “Hello World” Chúng ta sẽ bắt đầu bằng những gì được cho là cơ bản ban đầu nhất. Có rất nhiều kiểu để thể hiện một chương trình HelloWorld trên iPhone, sau đây sẽ giới thiệu 2.

1. Tạo “Hello World” với ứng dụng Navigation-Based

Vào Xcode>New Project hộp thoại hiển thị ra bạn chọn ứng dụng cần tạo.

Hình 1‑1 Hộp thoại chọn tạo ứng dụng Navigation-Based

Ø Bạn cần chọn Application cho iPhone OS và chọn Navigation-Based Application. Bấm Choose… và bạn sẽ được yêu cầu đặt tên cho project. Gõ vào “HelloWorld” và ta bắt đầu hoàn thành project.

Tìm hiểu về những files mặc định

Khi tạo project thì có nhiều file được tự động thêm vào project của bạn. sau đây ta sẽ tìm hiểu sơ qua về các file đó có chức năng là gì.

Ø CoreGraphics.framework, Foundation.framework, UIKit.framework - Đây là một tập hợp các library functions cung cấp sẵn bởi Apple mà chúng ta sẽ sử dụng trong các ứng dụng của mình. Chúng ta sử dụng chúng giống như việc include thư viện trong các ngôn ngữ lập trình khác.

Ø HelloWorld.app - Đây chính là ứng dụng của bạn được cài đặt vào iPhone. File này sẽ dùng khi đưa ứng dụng của ta lên App Store.

Ø Hello_World_Prefix.pch - Đây là một file được include khác, biên dịch từ nhiều file riêng biệt giúp bạn không cần phải include từng file một vào trong project. File này chứa một số đoạn mã để include dữ liệu bên trong frameworks.

Ø Hello_WorldAppDelegate.h - Đây là file header chứa tất cả các định nghĩa về biến mà ta sẽ sử dụng. Tương tự như một file header trong C hay C++.

Ø Hello_WorldAppDelegate.m – Đây là phần cốt lõi của ứng dụng nằm ở đây. File chính là điểm bắt đầu của ứng dụng. File main.m gọi object này.

Ø Info.plist - File này chứa nhiều thông tin(meta information) khác nhau trong chương trình của bạn. Chúng ta sẽ không cần phải ca đến file này cho đến khi chúng ta sẵn sàng cho việc test thử chương trình trên iPhone.

Ø main.m - Giống như hầu hết các ngôn ngữ lập trình khác, file này chứa hàm main. Đây là khởi điểm của chương trình. Hàm main về cơ bản khởi tạo object và khởi động chương trình. Chúng ta không cần chỉnh sửa file này

Ø MainWindow.xib - Chứa các thông tin trực quan về cửa sổ màn hình chính(main window). Nếu bạn nháy đúp lên nó, một chương trình có tên gọi “Interface Builder” sẽ được được mở ra.Chúng ta sẽ nói đến “Interface Builder” sau. Bạn cần nhớ một điều, file này không chứa bất kỳ một dòng mã nào cả.

Ø RootViewController.h, RootViewController.m - Những file này dùng cho một view controller đã được thêm sẵn vào cửa sổ màn hình chính(main window). Về cơ bản, Apple đã tạo sẵn một giao diện đơn giản ngay khi bạn bấm vào Navigation-Based Application. Vì hầu hết các ứng dụng kiểu navigation-based đều sử dụng một TableView, Apple cung cấp sẵn cho chúng ta.

Ø RootViewController.xib - Đây là một view mà Apple cung cấp sẵn dưới dạng table. Nó có các dòng và cột. Chúng ta sẽ hiển thị lời chào “HelloWorld” trên một trong số các dòng của table này.

Ø Tất cả các file trên tập hợp lại để tạo nên một chương trình cơ bản.

Bây giờ ta chạy thử chương trình bằng cách bấm vào nút Build and Go ở phía trên của Xcode. Chú ý nếu ta không gắn thiết bị iPhone thì cần đặt Simulator|Debug, có nghĩa là thong báo cho Xcode biết ta test trên thiết bị giả lập iPhone(iPhone Simulator).

Hình 1‑2 Chọn giải lập iPhone

Bạn sẽ thấy iPhone Simulator khởi động và chương trình của bạn bắt đầu chạy. Hiện tại vẫn chưa có gì trên màn hình hiển thị. Tất cả những gì bạn thấy chỉ là một TableView mà Apple đã thêm sẵn cho chúng ta. Việc ta cần làm là thêm một dòng(row) vào TableView này.

Hình 1‑3 Giao diện ban đầu chỉ là TableView

Cập nhật UITableView Cells để hiển thị lời chào “HelloWorld”. Ta bắt đầu bằng việc mở file RootViewController.m. Đây là view controller mà Apple đã thêm sẵn vào cửa sổ chính của chương trình. Tất cả các hàm mà bạn thấy đã được tạo sẵn ở đây được ghi đè từ lớp cha TableView. Vì chúng ta đang chỉnh sửa table nên các hàm này liên quan đến thao tác chỉnh sửa table. Tìm đến hàm numberOfRowsInSection.

-(NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection

 :(NSInteger)section{

return 0;

}

Ø Hàm này cho ứng dụng biết table sẽ chứa bao nhiêu dòng. Hiện tại nó trả về 0. Chúng ta sẽ sửa lại thành return 1. Ta muốn ứng dụng sẽ hiển thị 1 dòng trên table. Bây giờ, kéo xuống hàm cellForRowAtIndexPath. Hàm này được gọi một lần đối với mỗi dòng. Đây là nơi ta sẽ định nghĩa những gì sẽ được hiển thị tại từng dòng. Trong trường hợp này ta muốn hiển thị lời chào “Hello World”.

- (UITableViewCell *)tableView:(UITableView *)tableView

 cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *MyIdentifier = @”MyIdentifier”;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier

:MyIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero

 reuseIdentifier:MyIdentifier] autorelease];

}

[cell setText:@"Hello World"];

return cell;

}

Ø Ta gọi phương thức setText của đối tượng cell và truyền vào chuỗi “Hello World”. Trong Objective-C, chuỗi bắt đầu với ký tự “@”. Bây giờ ta chạy lại ứng dụng, bấm nút Build and Go để khởi động iPhone Simulator. Bạn sẽ thấy một màn hình như dưới đây:

Hình 1‑4 Màn hình hiển thị đã có câu chào “Hello World”

2. Tạo “Hello World” với ứng dụng View Based

Project “Hello World” ở trên hiển thị câu chào “Hello World” trên TableView. Sau đây là cách hiển thị câu chào này bằng cách sử dụng Interface Builder.

Sau đây là cách sử dụng Interface Builder, ta chỉ sử dụng các chức năng thiết kế để tạo ra ứng dụng. Không cần viết một câu lệnh nào cả.

Vào Xcode>New Project hộp thoại hiển thị ra bạn chọn ứng dụng cần tạo. Đảm bảo rằng Application được hiển thị bên dưới iPhone OS và chọn View-Based Application. Đặt tên cho ứng dụng là HelloWorldViews.

Hình 2‑1 Hộp thoại chọn tạo ứng dụng View-Based

Xcode đã cung cấp sẵn một số file mặc định để chúng ta làm việc. Xcode đã thêm vào một cửa sổ chính(main window) cho chúng ta chỉnh sửa và mã lệnh để chúng ta hiển thị cửa sổ này. Thuật ngữ iPhone gọi mỗi cửa sổ là một View. Vì ta chỉ có thể nhìn thấy một view tại một thời điểm, nên ta cần phải tạo ra view mới cho mỗi màn hình trong ứng dụng của chúng ta. Trong bài này, chúng ta sẽ chỉ chú ý tới việc chỉnh sửa view mà Apple đã cung cấp sẵn. Bây giờ chúng ta chạy ứng dụng bấm Build and Go.(Nhớ chọn thiết bị Simulator)

Sau khi bấm Build and Go thì chương trình sẽ được biên dịch và thiết bị giả lập iPhone sẽ được gọi ra. Màn hình của bạn sẽ như hình sau

Hình 2‑2 Giao diện chương trình View-Based ban đầu

Màn hình hiển thị trắng chưa có gì cả. Bây giờ chúng ta sẽ thêm một số UI component vào view để cho nó trở nên hấp dẫn hơn. Để làm điều này, ta sẽ chỉnh sửa file HelloWorldViewController.xib. File có đuôi .xib được gọi là nib file. Những file này được tạo với Interface Builder và là những file mà bạn định nghĩa phần hiển thị cho ứng dụng của bạn. Xcode cũng tỏ ra khá thuận tiện khi đã cung cấp sẵn một file như thế.

Hình 2‑3 File định nghĩa hiển thị HelloWorldViewsViewController.xib

Thêm UIElements vào màn hình chính

Ø Sau khi Interface Builder hiển thị ra ở phần làm việc, ta sẽ thấy một giao diện thiết kế kích thước bằng với iPhone. Chúng ta sẽ thiết kế giao diện hiển thị ở đây.

Ø Nhìn sang bên phải, ta thấy Object Library chứa rất nhiều UI component (nếu không thấy thì bạn vào View > Utilities > Object Library để mở nó). Hầu hết đều khá quen thuộc nếu bạn đã từng sử dụng ứng dụng iPhone. Chúng ta sẽ chèn một số component này vào view của ta. Chỉ việc bấm vào component mà bạn muốn chèn vào view của bạn. Bạn phải đảm bảo là bạn có sử dụng ít nhất một Label. Trong bài này, sẽ sử dụng một Label, một Search Bar. Bạn nhận thấy rằng khi bạn kéo thả search bar vào trong view, kích thước của chúng sẽ tự động được chọn cho phù hợp với màn hình. Còn nữa, khi bạn di chuyển chúng, bạn sẽ thấy một đường kẻ màu xanh giúp bạn bố trí và sắp đặt vị trí thích hợp cho các component.

Hình 2‑4 Hộp thoại Object Library

Ø Sau khi bạn chèn vào một Label, bấm lên nó. Bây giờ ta mở Attributes Inspector để thay đổi text cho label. Bấm vào Attributes Inspector, ta sẽ thấy một hộp có tiêu đề Text. Nếu không thấy, bấm vào Label để chọn lại. Gõ vào bât kỳ cái gì mà bạn muốn label của bạn hiển thị. Ở đây, gõ câu chào “Hello World”. Bạn có thể cập nhật lại các thuộc tính khác của label như là font và color trong Attributes Inspector. Có thể bạn cần điều chỉnh lại kích thước của label để dòng text bạn gõ hiển thị được đầy đủ. Bấm lên label vào chỉ việc kéo thả để chỉnh kích thước của nó.

Hình 2‑5 Attributes Inspector của Lable

Ø Sau khi bạn thiết kế xong, màn hình của bạn trông như sau:

Hình 2‑6 Hình ảnh View khi thiết kế xong

Bây giờ ta chạy ứng dụng. Bấm Build and Go để chạy ứng dụng trên thiết bị giả lập iPhone. Ứng dụng của chúng ta như hình sau:

Hình 2‑7 Chương trình chạy sau khi thiết kế xong

Nếu bạn bấm vào search box, iPhone sẽ tự động hiển thị bàn phím.