Phát triển trên iPhone (4): ứng dụng đầu tiên của chúng tôi (II)

Trong bài đăng trước, chúng tôi đã chỉ ra ứng dụng HelloWorld của chúng tôi sẽ như thế nào và các bước chúng tôi sẽ thực hiện để xây dựng ứng dụng của mình, ngoài việc cung cấp các liên kết đến tài liệu bắt buộc. Trong bài viết này, chúng tôi bắt đầu bằng cách mở XCode và chúng tôi bắt đầu phát triển.

Bước 1. Tạo Dự án.

Vì lý do này, chúng tôi mở XCode và đóng (nếu nó xuất hiện), cửa sổ chào mừng của ứng dụng. Trước khi tạo dự án của chúng tôi, chúng tôi có thể nhập các tùy chọn XCode. Nói chung -> Bố cục chọn 'Tất cả trong một', ít nhất là nếu bạn muốn có thể so sánh những gì bạn thấy trên màn hình của mình với những hình ảnh bạn sẽ thấy.

Tại thời điểm này, chúng tôi tạo dự án: File -> New Project và chúng tôi chọn View-Based:

Như chúng tôi đã chỉ ra trong bài viết trước, đối với một dự án XCode dựa trên khung nhìn, nó tạo ra một khung nhìn được liên kết với một lớp Controller (hãy nhớ rằng chúng ta đã nói về mẫu MVC). Gọi dự án HelloWorld và lưu nó vào thư mục bạn muốn. Bạn sẽ thấy một cái gì đó tương tự như sau:

Chúng tôi thấy rằng chúng tôi có một số tệp:

• HelloWorldViewController.h và HelloWorldViewController.m. Cả hai đều tương ứng với bộ điều khiển của màn hình của chúng tôi. Đây sẽ là logic liên quan đến quan điểm của chúng tôi; Trong trường hợp của chúng tôi, đây phải là mã làm cho giá trị của nhãn thay đổi với những gì được nhập vào hộp văn bản. Chúng tôi thấy rằng có một tệp .h và một tệp .m khác. Đầu tiên là tiêu đề, trong Java nó sẽ là Giao diện. Dưới đây là phần khai báo của các biến, phương thức, v.v. Tệp .m là tệp đã chứa phần triển khai.
• HelloWorldViewController.xib. ib = Trình tạo giao diện. Tệp này là cái nhìn của chúng tôi, màn hình. Nó được gọi bởi MainWindow.xib, mặt tiền chính của các khung nhìn mà chúng ta sẽ không chạm vào.
• HelloWorldAppDelegate (.h và .m). Chúng tôi sẽ không sửa đổi chúng, nó có một con trỏ đến ViewController của chúng tôi.
• Info.plist. Nó là một XML với thông tin về ứng dụng của chúng tôi. Ví dụ ở đây chúng tôi có thể chỉ ra đâu là biểu tượng của ứng dụng của chúng tôi.

Bước 2. Thiết kế giao diện.

Chúng tôi sẽ bắt đầu "vẽ" màn hình ứng dụng của chúng tôi. Để thực hiện việc này, trong XCode, chúng ta nhấp đúp vào HelloWorldViewController.xib và chúng ta sẽ thấy rằng ứng dụng Interface Builder sẽ mở ra. Trước hết, như một lời khuyên thiết thực, tôi khuyên bạn nên luôn kiểm tra xem bạn đã mở bảng Thanh tra và Thư viện chưa. Bạn có thể mở chúng trong menu Công cụ của Trình tạo giao diện. Bảng Thư viện sẽ cho phép bạn thêm các điều khiển khác nhau vào dạng xem của mình và bảng Thanh tra cho phép bạn xem các thuộc tính của từng đối tượng và sửa đổi chúng.

Chúng tôi sẽ không cố gắng tạo ra một ứng dụng đẹp mà là làm cho nó hoạt động. Bắt đầu bằng cách định vị màn hình, có nhãn View. Nếu nó không mở, nó sẽ được mở bằng cách nhấp đúp vào Xem trong màn hình sau:

Trên dạng xem, kéo từ bảng Thư viện một Trường văn bản ở trên, Nhãn ở dưới và cuối cùng là Nút hình chữ nhật tròn. Chúng ta hãy xem, nếu chúng ta đã chọn một điều khiển chẳng hạn như TextField, chúng ta có thể di chuyển kích thước của điều khiển này, định vị lại nó trên màn hình ... và trong bảng Thanh tra, chúng ta có thể có các thuộc tính của nó. Chọn nút chúng ta có thể đặt một Tiêu đề có giá trị «Thay đổi!». Cuối cùng, chúng ta sẽ có một cái gì đó như thế này:

Với điều này, chúng tôi đã xác định giao diện của ứng dụng của chúng tôi. Nó tuân theo những gì chúng tôi đã lên kế hoạch: một hộp văn bản (sau đây gọi là TextField), nơi chúng tôi sẽ nhập thông tin. Một Nhãn (văn bản cố định) và một nút. Khi chúng ta nhấn nút, Nhãn sẽ hiển thị những gì chúng ta đã viết trong TextField. Để làm điều này, chúng tôi sẽ phải tạo các biến tham chiếu đến Nhãn và Trường văn bản trong ViewController của chúng tôi và chúng tôi sẽ phải chỉ ra cho Người tạo giao diện mối quan hệ giữa Nhãn và Trường văn bản với các biến này. Chúng ta cũng sẽ phải tạo một phương thức trong ViewController chịu trách nhiệm cập nhật giá trị Nhãn với những gì chúng ta đã nhập trong TextField và liên kết nút với phương thức đó trong Interface Builder. Tất cả đó sẽ là bước 3, 4 và 5 của tập lệnh ban đầu của chúng tôi và sẽ được giải thích trong bài đăng tiếp theo.

Tất nhiên, trước khi kết thúc, tôi khuyên bạn nên xem những gì xuất hiện trong bảng Thư viện khi bạn đã chọn, ví dụ: Trường văn bản để thêm nó vào dạng xem:

Bạn có thể thấy rằng nó giải thích những gì điều khiển TextField thực hiện, nhưng nó cũng cho biết "UITextField" bên dưới. Điều này rất quan trọng, vì nó cho chúng ta biết lớp nào trong khuôn khổ Cocoa UIKit tương ứng với điều khiển này. Điều này cho chúng ta một gợi ý: để tạo biến xử lý điều khiển này trong ViewController, nó sẽ phải có kiểu UITextField.