Bài 2: Cách tạo một Project Windows Phone 8.1

Ở bài 1 các bạn đã chuẩn bị đầy đủ vũ khí đạn dược cho việc chiến đấu với Windows Phone 8.1, trong bài này Tui sẽ hướng dẫn các bạn cách tạo một Project Windows Phone 8.1 như thế nào, đặc biệt phải hiểu được cấu trúc, thành phần, cách đóng gói và triển khai ứng dụng lên Emulator cũng như thiết bị thật như thế nào.

Bước 1:

– Khởi động Visual Studio Ultimate 2013, vào menu File/ chọn New/ Project (hoặc nhấn tổ hợp phím Ctrl + Shift+N) như hình dưới đây:

Bước 2:

Ở màn hình New Project ta chọn các thông số như hình dưới đây:

– Phần Template bên tay trái ta chọn Windows Phone Apps

– Phần danh sách loại Project ở giữa màn hình ta chọn Blank App (Windows Phone)

– Mục Name: Đặt tên cho Project, ở đây ta đặt FirstAppSample

–> Sau đó bấm nút OK để tạo một Windows Phone Project

Sau đây là cấu trúc của một Project Windows Phone:

Hệ thống sẽ tự động tạo ra các tập tin: App.xaml, MainPage.xaml, Package.appxmanifest…

– Toàn bộ cấu hình của ứng dụng đều nằm trong Package.appxmanifest.

– MainPage.xaml sẽ được tải đầu tiên khi ứng dụng được chạy (mặc lấy làm màn hình chính), ta cũng có thể thay thể bởi các màn hình khác.

– Assets: Chứa tập hợp các tập tin logo, icon… ta có thể kéo thả các tập tin vào đây: Hình ảnh, âm thanh…

Bây giờ ta thử kéo thả 1 Button vào MainPage :

–> Double click vào MainPage.xaml để hiển thị chi tiết các vùng trong môi trường làm việc Visual Studio:

Ở trên Tui đánh dấu từ 1–>5:

 Vùng số 1: Hiển thị các control để kéo thả vào vùng số 2, nếu như Vùng số 1 không xuất hiện thì bạn vào Menu View/ Toolbox (hoặc nhấn tổ hợp phím Ctrl +Alt+ X)

Vùng số 2: Nơi hiển thị Giao diện Điện Thoại cho phép ta thiết kế ứng dụng

Vùng số 3: Nơi cho phép ta dùng XAML code để thiết kế giao diện, chú ý rằng ở Vùng số 1 mỗi lần ta kéo thả control vào vùng số 2 thì vùng số 3 tự động cập nhật các XAML code (tự phát sinh). Có nghĩa là ta có thể thiết kế giao diện cho vùng Số 2 bằng cách kéo thả ở vùng số 1 vào hoặc gõ bằng XAML code trong vùng số 3.

Vùng số 4: Cấu trúc thư mục của ứng dụng

Vùng số 5: Cấu hình Properties, Event… cho các đối tượng trong ứng dụng. Ví dụ khi kéo Button ra tui đặt tên cho Button này là btnClickMe, thì trong mục Properties có ô Name ta gõ vào btnClickMe. Nội dung hiển thị cho Button này là “Click Me!” thì ta gõ vào ô Content.

Để gán sự kiện cho Button ta Double click vào Button đó thì nó tự động phát sinh sự kiện hoặc ta vào tab Event để thiết lập sự kiện cho control:

Ta xem sự kiện phát sinh, ở đây khi chạm vào Button ta sẽ đổi thành màu Vàng:

Bạn quan sát là đối với một màn hình thì hệ thống sẽ có tập tin: .xaml và .xaml.cs . Ví dụ MainPage.xaml là tập tin để thiết kế giao diện, MainPage.xaml.cs là nơi để coding chúng được tách biệt ra làm 2 tập tin độc lập nhưng cùng làm việc cho lớp MainPage.

Bây giờ ta có thể nhấn phím F5 để chạy ứng dụng, chú ý rằng mặc định sẽ chạy trên Emulator, ta có thể lựa chọn chạy trên thiết bị thật cũng như chọn các loại Emulator khác nhau bằng cách chọn theo mục như hình dưới đây:

Để chạy trên máy thật ta chọn Device

Để chạy máy ảo Emulator thì tùy ta chọn mục Emulator, ứng với mỗi loại khác nhau thì Emulator hiển thị khác nhau.

Kết quả sau khi ta thực hiện chương trình trên:

Khác so với Windows Phone 8.0 (.xap), Windows Phone 8.1 biên dịch ra tập tin .exe Cách sử dụng Package.appxmanifest trong Project:

Tập tin này cho phép ta cấu hình các đặc tính của ứng dụng: Camera, Sensor, Contact, Music Library…

Ta double click vào tập tin này nó sẽ hiển thị ra với nhiều Tab: Capabilities, Application, Declarations, Content URIs, Visual Assets, Packaging, Requirements. Mỗi tab có những chức năng cấu hình khác nhau (ta cần hiểu rõ để cấu hình ứng dụng cho tốt):

Tab Application: Dùng để thiết lập các thuộc tính và mô tả cho ứng dụng

Tab Visual Assets: Dùng để cấu hình hỗ trợ các độ phân giải khác nhau, cùng các thiết lập Logo, Splash Screen….

Tab Requirements:  Tab này cho phép ta yêu cầu cấu hình phần cứng của thiết bị khi cài đặt ứng dụng, ví dụ như yêu cầu phần cứng phải có Sensor, NFC, Camera… nếu không có thì không cho phép cài ứng dụng.

Tab Capabilities: Thiết lập các đặc tính cho phép ứng dụng có thể sử dụng các tính năng trong thiết bị, ví dụ như: Cho phép sử dụng Contacts, Microphone, SD Card, Webcam….

Tab Packaging: Thiết lập thông số cấu hình phiên bản, package name và display name…

Tab Declarations: Để thiết lập các khai báo cũng như thuộc tính cho chúng

Tab Content URIs: Dùng để khai báo các HTTPS URI để sử dụng window.external.notify để gửi sự kiện ScriptNotify tới ứng dụng.

Chú ý:  Để thiết lập trang mặc định khi ứng dụng được khởi động thì ta sửa hàm sau trong lớp App.xaml.cs:

[code language=”csharp”]

protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
          …
                if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))
                {
                    throw new Exception("Failed to create initial page");
                }
         …
        }

[/code]

Thành:

[code language=”csharp”]

protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
          …
                if (!rootFrame.Navigate(typeof(SecondPage), e.Arguments))
                {
                    throw new Exception("Failed to create initial page");
                }
         …
        }
[/code]

Muốn chạy trang nào mặc định thì ta sửa như trên, ở bên trên Tui ghi là Secondpage, bạn có thể chỉ định bất kỳ trang nào vào đây.

Bài kế tiếp Tui sẽ hướng dẫn các bạn cách sử dụng Windows Phone 8.1 Emulator, việc sử dụng Emulator thành thạo là rất quan trọng nó giúp lập trình viên tăng tốc độ xử lý coding đặc biệt nó dường như có thể thay thế cho thiết bị thật.

Chúc các bạn thành công.