[Basic for Absolute Beginner] – [Part 3] – App’s Structure and how customized it

Chào các bạn,

Sau đợt nghỉ lễ dài, hôm nay mình giới thiệu phần 3 của loạt bài viết [Basic for Absolute Beginner]

Phần 1 nói về các control cơ bản là Grid và StackPanel: [Windows Phone–Silverlight] Layout with XAML–Basic for Absolute Beginner – Part 1

Phần 2 nói về thiết kế giao diện với XAML: [Windows Phone – Silverlight] Layout with XAML – Basic for Absolute Beginner – Part 2

Tại sao tôi lại nói 2 phần này trước cả App’s Structure. Các control là điều cơ bản nhất, cho dù sau này Structure một project có thể sẽ thay đổi, nhưng bạn sẽ tìm ra cách hiểu chúng nhanh thôi. Khi mới tạo một project Windows Phone, Visual Studio đã mở sẵn cho bạn file Mainpage.xaml để bạn chỉnh sửa.

Bây giờ, làm một cú lội ngược dòng, bạn sẽ học về cấu trúc một ứng dụng trong Windows Phone nhé

Cách thức ứng dụng hoạt động trên thiết bị

Khi cài ứng dụng lên thiết bị, bạn sẽ có một mô hình như sau:

Áp dụng cho Windows Phone 7 và Windows Phone 8. Hứa hẹn sẽ có thay đổi lớn trong Windows Phone 8.1

Các mũi tên màu vàng biểu thị cho khả năng truy xuất

Nhìn hình trên, bạn sẽ thấy Ứng dụng của bạn chỉ được phép truy cập vào Isolated Storage của chính nó mà thôi (Cái tên Isolated tức là “Cô lập”)

Ngoài ra, nếu muốn truy cập vào thẻ nhớ, ứng dụng của bạn bắt buộc phải thông qua API của hệ điều hành. Hiện tại thì Windows Phone chỉ mới cho phép đọc ghi các file media (nhạc, hình, video) lên thẻ nhớ mà thôi.

Cấu trúc của ứng dụng

Mở Visual Studio 2013 lên, bạn sẽ thấy giao diện như sau:

Bấm chọn New Project, chọn Windows Phone > Windows Phone App

Một số loại Project khác bạn sẽ có cơ hội thực tập với nó sau

Ở bên dưới, có 2 tùy chọn khá vui

  • Create directory for Solution: Solution của bạn sẽ được đặt trong một folder “mẹ”, và Project sẽ được đặt trong folder “con”

Nói thêm một chút về các thể loại Project của Visual Studio: Khi tạo mới, bạn sẽ tạo một Solution (đuôi file .sln). Và toàn bộ Project của bạn sẽ nằm trong Solution đó. Một Solution có thể chứa nhiều Project.

Vậy tại sao bạn lại cần nhiều Project trong 1 Solution? Vì mỗi Project sẽ tạo ra một module khác nhau của hệ thống. Có thể Project chính của bạn là một ứng dụng nghe nhạc, và Project phụ sẽ là một module cho phép cập nhật ngầm, tự động thông tin bài nhạc, hình album vân vân

  • Add to source control: Source Control là một thuật ngữ cho một loại công cụ giúp bạn quản lý code của mình được hiệu quả. Microsoft có một công cụ Source Control là Team Foundation Server. Các bài viết sau sẽ nói về nó nhé

Nhấn Ok để tạo Project

Trên đây là giao diện sau khi tạo (của bạn có thể không giống lắm)

Các thành phần

Giao diện chính

Đây là designer, hiển thị trực quan những gì bạn code trong file XAML

XAML, code định nghĩa giao diện của bạn. Cột bên phải là thanh cuộn cải tiến có từ Visual 2012

3 nút này có chức năng thay đổi cách bố cục. Nhấn thử và bạn sẽ biết

Còn đây là Solution Explorer, chứa cấu trúc tập tin trong Project của bạn

Properties

Mở Properties ra, bạn sẽ thấy có 3 file

Đối với người mới bắt đầu, bạn chỉ cần quan tâm tới “WMAppManifest.xml” là được. Double click vào nó để mở ra

Mục Application UI định nghĩa cho tên gọi, các Icon của ứng dụng

Mục Capabilities định nghĩa những tài nguyên mà ứng dụng sử dụng như Camera, thư viện nhạc, hình, video, các loại cảm biến, mạng Internet, etc.

Ứng dụng của bạn cần sử dụng cái gì thì tick chọn cái đó. Đừng tick dư

Requirement là những tài nguyên mà ứng dụng bạn “đòi” để có thể chạy được, ví dụ như NFC, Gyroscope

Tại sao vậy? Vì không hẳn tất cả các máy Windows Phone đều như nhau. Có máy có camera trước, có máy không có, blah blah blah. Nếu ứng dụng của bạn nhất thiết phải đòi có những tài nguyên đó, bạn hãy tick vào các ô này. Trên Windows Phone Store, tất cả các máy có cấu hình không đáp ứng được đòi hỏi của bạn sẽ không thể tải được.

Và cái cuối cùng dành cho việc đóng gói và hỗ trợ đa ngôn ngữ. Hiện thời bạn chưa cần quan tâm tới nó

References

References là thư mục chứa các thư viện mà ứng dụng của bạn sẽ sử dụng

Đa phần các thư viện này có thể cài đặt bằng NuGet

Tham khảo bài viết sau: [Visual Studio] NUGET the Magician

Double click vào một thư viện sẽ cho bạn xem toàn bộ các class và method có trong thư viện đó (máy bạn nào yếu không nên bấm vào, treo máy đấy)

Tính năng này được gọi là Object Explorer, đã có từ lâu rồi

Assets

Thư mục Assets chứa các tập tin hình ảnh, icon, âm thanh, video mà ứng dụng bạn sẽ sử dụng. Thực ra bạn không bị bắt buộc phải để cá tập tin đó vào thư mục này, nhưng cứ làm vậy cho nó có hệ thống

Nhấn chuột phải vào một tập tin nào đó và nhấn Property, bạn sẽ thấy thuộc tính của tập tin này. Thuộc tính quan trọng nhất là Build Action và Copy to output folder

Tham khảo bài viết sau để hiểu rõ về chúng: [Windows Phone – Silverlight] – Khác nhau giữa “resource” và “content”

Để thêm một tập tin nào đó vào thư mục này, chỉ đơn giản là nhấn phải > Add > Existing Item…

Resource

Thư mục Resource chứa file Resource của ứng dụng.

File Resource thường được dùng để lưu các thông số, thuộc tính vân vân của ứng dụng. Tuy nhiên công dụng lớn nhất của nó là dùng để chuyển đổi ứng dụng của bạn thành ứng dụng đa ngôn ngữ. Ta sẽ nói về nó sau

App.xaml và App.xaml.cs

Đối với mỗi một file XAML sẽ có một file XAML.CS đi kèm.

File XAML định nghĩa giao diện, còn CS sẽ định nghĩa cách thức hoạt động

File App.xaml và App.xaml.cs sẽ định nghĩa việc khởi tạo ứng dụng của bạn, khi mở lên như thế nào, đóng ứng dụng thì như thế nào, vân vân.

Bạn sẽ cần tới nó trong một số trường hợp sau này. Bạn có thể mở nó lên để xem thử

LocalizedString.cs

File này cho phép ứng dụng hỗ trợ đa ngôn ngữ. Code trong file này do Visual Studio tự sinh ra, bạn không cần phải chỉnh sửa nó

MainPage.xaml và MainPage.xaml.cs

Cuối cùng, đây là trang giao diện đầu tiên của ứng dụng. File MainPage.xaml sẽ được mở sẵn sau khi tạo mới ứng dụng

Như vậy, bạn đã hiểu rõ các thành phần cấu tạo nên một ứng dụng Windows Phone, áp dụng bài viết số 1 và số 2, hãy bắt tay vào thiết kế ngay cho bạn một ứng dụng Windows Phone hữu ích nào đó nhé

Advertisements

5 thoughts on “[Basic for Absolute Beginner] – [Part 3] – App’s Structure and how customized it

    • Chỉ copy được một số định dạng file nhất định thôi nha bạn, và chỉ khi người dùng chọn “Lưu media lên thẻ nhớ” thì mới được

  1. Pingback: [Basic for Absolute Beginner] – [Part 4] – Basic Steps for a new app | C++/C#

  2. Pingback: [Basic for Absolute Beginner] – [Part 6] – Source Control | C++/C#

  3. Pingback: [Not so Basic] – Solve your problems | Tuan Tran's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s