Bài 5: Vòng đời của ứng dụng Windows phone 8.1 và cách quản lý trạng thái

Trước khi sắn tay áo lập trình thì các bạn cũng cần hiểu được vòng đời của ứng dụng Windows phone và cách quản lý trạng thái của nó như thế nào, vì nêu như không hiểu được vòng đời của ứng dụng thì bạn sẽ gặp khó khăn khi gặp những trường hợp phải lưu cấu hình hệ thống, cũng như không biết vì sao ứng dụng của ta lại tự động mất hay các thông số bị reset….

Khác với Windows Phone 8.0, đối với Windows Phone 8.1 vòng đời của nó được thể hiện như sau (vẽ hình gì cũng được, đại khái là nó như vậy đó). Bạn cũng để ý là Windows Phone 8.0 khi nhấn nút Home rồi bấm nút Back thì nó sẽ không hiển thị lại ứng dụng; Windows Phone 8.1 thì khác nếu 1 ứng dụng đang chạy mà bạn nhấn nút Home sau đó bấm lại nút Back thì ứng dụng đó sẽ được hiển thị trở lại như cũ.

wp5_1– Bạn chú ý rằng với một ứng dụng Windows Phone thì nó có 3 trường hợp chính:

+  Một  là ứng dụng đang chạy (running) –> Người sử dụng quan sát thấy ứng dụng đầy đủ, tương tác được với ứng dụng, và ta cũng có thể gọi nó là Foreground Lifetime

+ Hai là ứng dụng không chạy (terminated)–> Tức là nó không còn sống trên cõi đời của Memory nữa

+ Ba là trạng thái tạm ngưng hoạt động (suspended) –> Ứng dụng vẫn còn sống trên cõi đời của Memory nhưng người sử dụng không tương tác được và nó sẽ bị rơi vào trạng thái Killable (tức là nó có thể bị hệ thống tước đoạt mạng sống bất cứ khi nào–> terminated). Ví dụ như ta đang thao tác với ứng dụng thì tự nhiên có cuộc gọi tới, thì ứng dụng cuộc gọi sẽ đè lên ứng dụng của ta –> ứng dụng của ta chuyển qua suspended.

Bạn cần phải phân biệt rõ trạng thái terminatedsuspended nó khác nhau như thế nào, và phải hiểu được lý do vì sao suspended lại có thể đưa ứng dụng vào trạng thái Killable? nó có một vài lý do chính sau:

1) Hệ thống thiếu RAM và cần thu hồi khi có những yêu cầu khác được ưu tiên hơn

2) Hoặc có thể thiết bị gần hết PIN, hệ thống cần kill ứng dụng để tiết kiệm PIN

3) Hoặc người sử dụng khởi động lại thiết bị.

4) Và những lý do gì đó mà ta không biết…

Khi ứng dụng rơi vào trạng thái Suspended thì nguy cơ nó bị terminated là rất cao, và nếu như không bị terminated thì nó cũng có thể bị reset các biến và đối tượng…

Như vậy một vài câu hỏi đặt ra cho vòng đời là:

1) Ta làm gì khi ứng dụng rơi vào trạng thái Suspended

2) Khi ứng dụng đang thực thi và đang chuyển đổi trạng thái thì các sự kiện gì sảy ra

3) quản lý các trạng thái thay đổi như thế nào.

————————————

Khi viết lệnh quản lý sự thay đổi trạng thái của ứng dụng thì thường ta xử lý ở 2 cấp độ:

– Cấp độ ứng dụng (xử lý trong App.xaml.cs) – có 4 sự kiện chính:

[code language=”CSharp”]

//Sự kiện này sẽ được triệu gọi khi ứng dụng được thực thi và nó sẽ không
//bị gọi lại khi ứng dụng reactived (tức là chỉ chạy 1 lần đầu tiên duy nhất)
private void Application_Launching(object sender, LaunchingEventArgs e)
{
string msg = "Application_Launching";
}

//Sự kiện nay được triệu gọi khi ứng dụng được Activated (người sử dụng tương tác được)
// Lầu đầu khi ứng dụng chạy (Application_Launching) nó sẽ không được gọi, các lần sau nó sẽ tiếp tục
//được triệu gọi nếu như nó được activated (chuyển từ Suspended sang Foreground Lifetime)
private void Application_Activated(object sender, ActivatedEventArgs e)
{
string msg = "Application_Activated";
}

//Sự kiện sẽ được triệu gọi khi ứng dụng bị đưa vào trạng thái Suspend
//–> tức là khi nó che khuất ứng dụng, người sử dụng không thể tương tác
//Và nó sẽ không được triệu gọi khi sự kiện Closing sảy ra
private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
string msg = "Application_Deactivated";
}

//Sự kiện được triệu gọi khi ứng dụng chuyển qua trạng thái đóng (terminate)
//và nó sẽ không thực thi khi ứng dụng vào trạng hái Deactivated
private void Application_Closing(object sender, ClosingEventArgs e)
{
string msg = "Application_Closing";
}

[/code]

—>Ta thường lưu thông tin cấp ứng dụng trong sự kiện Application_Deactivated và khởi tạo lại thông tin trong sự kiện Application_Activated.

– Cấp độ trang (xử lý trong mỗi trang .xaml.cs) – có 2 sự kiện chính:

[code language=”csharp”]

//Sự kiện sảy ra khi trang được hiển thị Foreground
//Ta thường khởi tạo lại giá trị được lưu trữ trong hàm này
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);

Windows.Storage.ApplicationDataContainer localsetting =
Windows.Storage.ApplicationData.Current.LocalSettings;
if(localsetting.Values["data"]!=null)
{
txtData.Text = localsetting.Values["data"].ToString();
}
}
//sự kiện sảy ra khi trang bị đóng hoặc bị trang khác đè lên
//Ta thường lưu thông tin cấp độ trang trong hàm nay
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);

Windows.Storage.ApplicationDataContainer localsetting =
Windows.Storage.ApplicationData.Current.LocalSettings;
localsetting.Values["data"] = txtData.Text;
}

[/code]

Bạn cần chú ý thứ tự diễn ra các sự kiện:

– Đầu tiên sự kiện ở cấp độ ứng dụng sẽ sảy ra trước

– Sau đó mới tới sự kiện ở cấp độ trang.

tức là Nếu trong 1 Project bạn vừa xử lý trạng thái ở cấp độ ứng dụng và cấp độ trang, khi  ứng dụng bị suspended thì tuần  tự sảy ra như sau:

hàm Application_Deactivated sảy ra trước sau đó mới tới OnNavigatedFrom.

– Tui có cung cấp lệnh lưu và phục hồi thông tin ở trên, các bạn có thể áp dụng vào ứng dụng của mình.

Để các bạn có thể dễ dàng thực hành bài tập này thì làm theo từng bước như sau:

 Bước 1:

Tạo một Project tên “LearnLifeCycle” như hình chụp dưới đây:

wp5_2Chú ý là chọn “Blank App (Windows Phone Silverlight)”, từ này các ví dụ Tui sẽ sử dụng loại Project này.

 Bước 2:

Tạo thêm 2 trang Page2.xamlPage3.xaml như hình dưới đây:

wp5_3Để tạo mới 1 trang thì bạn chỉ cần bấm chuột phải vào Project chọn/ Add/ New Item:

wp5_4Màn hình Add New Item sẽ hiển thị ra như dưới đây:

wp5_5

Chọn các thông số như hình, rồi bấm nút Add bạn sẽ có kết quả như mong muốn (tạo được 1 trang mới). Tương tự như vậy bạn có thể thêm Page3.xaml vào ứng dụng.

Bước 3:

Tiến hành XAML và coding cho Mainpage.xaml như sau:

wp5_6Xử lý coding cho Mainpage:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using LearnLifeCycle.Resources;

namespace LearnLifeCycle
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();

// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}

private void btnPrevious_Click(object sender, RoutedEventArgs e)
{
//Nếu còn về trước được
if (NavigationService.CanGoBack)
NavigationService.GoBack();//thì về trước
}

private void btnNext_Click(object sender, RoutedEventArgs e)
{
//xử lý chuyển qua trang mới
if(NavigationService.CanGoForward)
{
NavigationService.GoForward();
}
else
{
//tạo uri qua trang mới:
Uri newPage = new Uri("/Page2.xaml", UriKind.Relative);
//gọi lệnh chuyển trang
NavigationService.Navigate(newPage);
}
}
//Sự kiện sảy ra khi trang được hiển thị Foreground
//Ta thường khởi tạo lại giá trị được lưu trữ trong hàm này
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);

Windows.Storage.ApplicationDataContainer localsetting =
Windows.Storage.ApplicationData.Current.LocalSettings;
if(localsetting.Values["data"]!=null)
{
txtData.Text = localsetting.Values["data"].ToString();
}
}
//sự kiện sảy ra khi trang bị đóng hoặc bị trang khác đè lên
//Ta thường lưu thông tin cấp độ trang trong hàm nay
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);

Windows.Storage.ApplicationDataContainer localsetting =
Windows.Storage.ApplicationData.Current.LocalSettings;
localsetting.Values["data"] = txtData.Text;
}
}
}

[/code]

Tiếp tục ta thiết kế XAML cho Page2 và Page3 (2 trang này giống y xì nhau) chủ yếu dùng để test mà thôi:

Vì nó giống nhau nên phần XAML tui chỉ ví dụ 1 Page 2, Page 3 bạn tự copy + paste sang:

[code language=”Csharp”]

<phone:PhoneApplicationPage
x:Class="LearnLifeCycle.Page2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!–LayoutRoot is the root grid where all page content is placed–>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!–TitlePanel contains the name of the application and page title–>
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="page name 2" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!–ContentPanel – place additional content here–>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="14,0,10,0">
<Button x:Name="btnPrevious" Content="Go to Previous Page" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Click="btnPrevious_Click"/>

</Grid>
<Button x:Name="btnNext" Content="Go to Next Page" HorizontalAlignment="Left" Margin="37,106,0,0" VerticalAlignment="Top" Click="btnNext_Click" Grid.Row="1"/>
</Grid>

</phone:PhoneApplicationPage>

[/code]

Phần xử lý coding cho Page2.xaml.cs:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace LearnLifeCycle
{
public partial class Page2 : PhoneApplicationPage
{
public Page2()
{
InitializeComponent();
}

private void btnPrevious_Click(object sender, RoutedEventArgs e)
{
NavigationService.GoBack();
}

private void btnNext_Click(object sender, RoutedEventArgs e)
{
if (NavigationService.CanGoForward)
NavigationService.GoForward();
else
{
Uri newpage = new Uri("/Page3.xaml", UriKind.Relative);
NavigationService.Navigate(newpage);
}
}
}
}

[/code]

Phần xử lý coding cho Page3.xaml.cs (giống page2):

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace LearnLifeCycle
{
public partial class Page3 : PhoneApplicationPage
{
public Page3()
{
InitializeComponent();
}

private void btnPrevious_Click(object sender, RoutedEventArgs e)
{
NavigationService.GoBack();
}

private void btnNext_Click(object sender, RoutedEventArgs e)
{
if (NavigationService.CanGoForward)
NavigationService.GoForward();
else
{
Uri newpage = new Uri("/MainPage.xaml", UriKind.Relative);
NavigationService.Navigate(newpage);
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
}
}
}

[/code]

Bây giờ Tui cần các bạn test các trường hợp sau:

1) Từ trang MainPage, nhập dữ liệu cho TextBox rồi bấm nút HOME

2) Sau đó nhấn nút Back

3) Từ MainPage nhập dữ liệu cho Textbox rồi chuyển qua trang 2

4) Từ trang 2 quay lại trang 1

5) Từ trang 2 qua trang 3

6) Từ trang 3 qua trang Mainpage.

Bài hướng dẫn kế tiếp tui sẽ trình bày về XAML và các control cơ bản trong Windows Phone 8.1,  các bạn chú ý theo dõi.

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

Bài 4: Đăng ký lập trình Windows Phone 8.1 trên thiết bị thật

Như ta đã biết Microsoft có hỗ trợ Emulator giúp chúng ta có thể lập trình thay thế thiết bị thật, tuy nhiên trong một số trường hợp thì ta không thể Test chính xác được trên thiết bị Emulator (ví dụ như Camera, Sensor…), vì vậy bài này Tui hướng dẫn các bạn cách đăng ký để có thể deploy phần mềm vào thiết bị thật để test một cách trực quan.

Bước 1:

– Cần chuẩn bị thiết bị thật + Dây cáp + cài đặt Driver hoàn chỉnh, thông thường khi mua điện thoại nhà cung cấp đã tích hợp sẵn do đó bạn chỉ cần cắm vào ngồi đợi 1 xí là máy sẽ cài đặt xong.

– Sau đó cắm thiết bị vào máy tính của bạn:

connect-htc-8x-to-pc

Bước 2:

Vào Start Screen bạn tìm kiếm Windows Phone Developer Registration 8.1 như hình Tui chụp ở dưới đây:

wp4_2

Bước 3:

Kích hoạt phần mềm:

wp4_3Bước 4:
Đăng ký

 

Bạn nhìn vòng tròn tròn đẹp đẹp Tui khoanh ở trên, nếu bạn chưa bao giờ đăng ký thì nó có nút Register và bạn bấm vào nút này để đăng ký, dĩ nhiên bạn cần có tài khoản Developer trước (nếu bạn  chưa biết thì vào link sau : http://clbtinhoc.dntu.edu.vn/index.php/huong-dan-dang-ky-tai-khoan-microsoft-developer-mien-phi-khong-can-visa/).

– Sau khi bấm Register: Bạn cần cung cấp đúng thông tin để đăng nhập

wp4_4Sau khi đăng ký thành công, bạn sẽ có màn hình sau (tới màn hình này là có thể sử dụng được thiết bị thật để lập trình).

wp4_5

Bạn cần chú ý là khi cắm thiết bị thật vào máy tính thì cần mở khóa màn hình, nếu không mở khóa thì bạn có thể gặp lỗi như sau:

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

Bài 3: Cách sử dụng Windows Phone Emulator 8.1

Trong bài này Tui sẽ hướng dẫn các bạn cách chạy Windows Phone Emulator cũng như cách sử dụng các công cụ và tính năng được tích hợp trong Emulator.

Windows Phone Emulator là gì? Bạn hiểu nôm na nó là một công cụ dùng để thay thế cho thiết bị thật để giúp lập trình viên có thể viết các ứng dụng và kiểm thử trên Emulator mà không cần đến thiết bị thật (Tức là nếu như ta không có tiền để mua một chú Dế thì cũng không sao, ta vẫn hoàn toàn lập trình được với Windows Phone). Tuy nhiên không phải tất cả các chức năng trong thiết bị thật đều có thể giả lập được trên Emulator, ví dụ như chức năng Camera (chỉ là các ô vuông chạy demo quanh màn hình).

Bạn có thể khởi động Windows Phone Emulator bằng các cách sau đây:

1) Khởi động từ Visual Studio

Từ Visual Studio ta chọn các Emulator cần chạy (ta có thể cập nhật thêm các Emulator bằng cách tải từ trang Microsoft cung cấp)

wp_3_3

2) Khởi động bằng command line (Không cần Visual Studio)

– Mở cửa sổ run bằng cách gõ tổ hợp phím Windows + R

– Rồi gõ lệnh sau:  “C:\Program Files (x86)\Microsoft XDE\8.1\XDE.exe” /vhd “C:\Pro
gram Files (x86)\Microsoft SDKs\Windows Phone\v8.1\Emulation\Images\Flash.vhd” /
video “720×1280” /memsize 1024 /language 409 /creatediffdisk “%Temp%\dd.720×1280
.1024.vhd” /fastShutdown

Từ khóa “creatediffdisk” rất quan trọng, nếu ta thiếu nó thì Emulator vẫn chạy nhưng nó sẽ yêu cầu cấp quyền Admin, cái trớ trêu là nếu chạy với quyền Admin thì nó sẽ chỉnh sửa VHD image trong thư mục cài đặt, mà việc chỉnh sửa này rất nguy hiểm nó có thể không cho phép chúng ta khởi động Emulator từ Visual Studio nữa. Để biết thêm chi tiết thì bạn có thể gõ lệnh Run “XDE.exe /?“. Chú ý là nếu như bạn cài đặt với những chọn lựa mặc định của Microsoft thì bạn có thể copy + paste nguyên xi lệnh trên rồi gõ enter là hệ thống tự động kích hoạt Emulator.

wp_3_1Vì sao lại gõ đường dẫn như trên? bởi vì trong quá trình cài đặt hệ thống đã lưu trữ Emulator ở đây (do đó nếu bạn chỉ định đường dẫn khác trong quá trình cài đặt thì phải chọn đúng đường dẫn đó, còn để mặc định thì gõ như trên), ví dụ hình dưới đây là lưu trữ mặc định khi cài đặt:

wp_3_2

 

3) Sử dụng Windows Phone Power tool:

http://wptools.codeplex.com/

Cả 3 cách đều cho ra kết quả như sau:

wp_3_4 Chi tiết từng chức năng:

wp_3_5Windows Phone Emulator 8.1 có một điểm mới rất thú vị là hỗ trợ Chạm Đa Điểm giúp ta có thể lập trình đa điểm tốt  thay thế cho thiết bị thật: Khi bạn bấm vào biểu tượng Ngón Trỏ Tay thì màn hình sẽ xuất hiện 3 hình tròn cho phép chúng ta: Phóng to, thu nhỏ, xoay, quay, di chuyển, bẻ góc….

wp_3_15Windows Phone 8.1 hỗ trợ SD Card, nó được để trong Công Cụ Sử dụng Windows Phone Emulator nâng cao, bây giờ bạn bấm vào nút này để tiếp tục xem các chức năng nâng cao của Emulator (Nút cuối cùng):

wp_3_6Tab Accelerometer: Giả lập cảm biến gia tốc, bạn có thể đổi các hướng X,Y,Z tùy ý để test gia tốc bằng cách di chuyển nút hình tròn màu nghệ:

wp_3_7Hoặc bạn cũng có thể chọn những hướng chuẩn thường sử dụng bằng cách chọn mục Combobox Orientation:

wp_3_8Để chụp hình Emulator mà bạn đang thao tác, bạn vào Tab Screenshot:

wp_3_9Để cấu hình SD Card bạn vào tab SD Card:

wp_3_10Local folder: Chỉ định nơi lưu trữ

Bấm Insert SD Card để tạo SD Card hệ thống sẽ tiến hành đồng bộ, nút Insert SD Card sẽ được đổi thành “Eject SD Card”, đồng thời trong Windows Phone Emulator cũng hiển thị Message Box xác nhận:

wp_3_12Windows Phone Emulator:

wp_3_11Chọn Yes để chấp nhận và di chuyển tới màn hình Storage Sense:

wp_3_13Đồng thời bạn quan sát thư mục SD Card trong PC cũng đổi như sau:

wp_3_14Các tab khác ta sẽ đề cập tới sau khi làm các bài tập có liên quan.

Ngoài các chức năng trên ta cần biết thêm các phím tắt để thao tác vơi Windows Phone Emulator:

– Sử dung Keyboard cho Emulator:

+ Nhấn Phím Page Up/Down để cho phép tắt mở chức năng nhập thông tin từ bàn phím cho Emulator –> Tăng tốc độ.

Dưới đây là bảng chi tiết mà Microsoft cung cấp:

Computer hardware key hardware button Notes
F1 BACK Long presses work as expected.
F2 START Long presses work as expected.
F3 SEARCH
F4 Not applicable.
F5 Not applicable.
F6 CAMERA HALF A dedicated camera button that is pressed halfway.
F7 CAMERA FULL A dedicated camera button.
F8 Not applicable.
F9 VOLUME UP
F10 VOLUME DOWN
F11 Not applicable.
F12 POWER Press the F12 key twice to enable the lock screen.Long presses work as expected.
ESC BACK Long presses work as expected.
PAUSE/BREAK Toggle Keyboard Toggles the hardware keyboard.
PAGE UP Keyboard Up Enables the hardware keyboard.
PAGE DOWN Keyboard Down Disables the hardware keyboard.

Link : http://msdn.microsoft.com/en-us/library/windowsphone/develop/dn632391.aspx

Như vậy Tui đã giới thiệu sơ lược một số chức năng trong Windows Phone Emulator, hi vọng nó sẽ giúp ích được cho bạn trong quá trình lập trình. Khi gặp các bài tập có liên quan Tui sẽ bổ sung tiếp để các bạn dễ nắm bắt.

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

 

 

 

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:

wp_bai2_1Bước 2:

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

wp_2_1– 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:

wp_2_2Hệ 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:

wp_2_3Ở 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:

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

wp_2_4Bạ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:

wp_2_6Để 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:

wp_2_7Khác so với Windows Phone 8.0 (.xap), Windows Phone 8.1 biên dịch ra tập tin .exe wp_2_8Cá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):

wp_2_9Tab 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.

Bài 1: Các bước chuẩn bị lập trình với Windows Phone 8.1

Xin chào các bạn Sinh viên đang tham gia học lập trình Windows Phone!

Để giúp các bạn có thể tự học ở nhà khi không tham dự được lớp học cũng như bổ sung thêm một số kỹ năng lập trình nâng cao liên quan tới Windows Phone. Vì vậy Tui sẽ tiến hành biên soạn Step by Step từ dễ đến khó và đính kèm source code mẫu để các bạn có thể dễ dàng học tập, hàng tuần Tui sẽ cố gắng publish một vài bài theo thứ tự.

Ở bài tập đầu tiên này Tui sẽ trình bày sơ lược cách thức chuẩn bị lập trình với Windows Phone 8.1, cụ thể:

– Yêu cầu tối thiểu cấu hình máy

– Kiểm tra Tính năng Ảo Hóa

– Kiểm tra tính năng SLAT

– Kích hoạt Hyper-V

– Cách cài đặt Visual Studio Ultimate 2013

– Cách cài đặt Visual Studio Ultimate 2013 Update 2

Sau đây là nội dung chi tiết cho các phần trên:

 1) Yêu cầu tối thiểu cấu hình máy:

Kiểm tra Bios có các đặc tính dưới đây được hỗ trợ hay không:

  • Hardware-assisted virtualization.
  • Second Level Address Translation (SLAT).
  • Hardware-based Data Execution Prevention (DEP).

RAM:

Tối thiểu 4GB

OS:

Windows 8.1 Pro 64 bit trở lên

Tui chụp hình cấu hình hệ thống máy Tui đang sử dụng dưới đây:

wp_systeminfor_12) Kiểm tra Ảo hóa, SLAT, DEP:

Microsoft hỗ trợ Tool để kiểm tra 3 đặc tính bắt buộc để lập trình với Windows Phone 8/8.1 : http://technet.microsoft.com/en-us/sysinternals/cc835722

Ta tải file nén Coreinfo.zip ở link trên về rồi tiến hành chạy cmd với Administrator để kiểm tra như sau:

wp_coreinfor_1Ở hình trên bạn chỉ cần gõ lệnh: Coreinfo.exe -v thì hệ thống sẽ hiển thị các thông tin như bên dưới, ở trên Tui có gạch màu vàng 3 chỗ, nếu bạn cũng có các thông tin đó thì coi như là Máy Tính của bạn có thể lập trình được với Windows Phone 8/8.1

Thông thường khi bạn cài đặt máy thì chức năng ảo hóa chưa được kích hoạt, bạn cần vào Bios để kích hoạt nó lên (enable), Tùy vào hãng sản xuất khác nhau mà có cách kích hoạt khác nhau (bạn cố gắng Mò trong Bios của bạn).

3) Kích hoạt Hyper-V

Ta cần kích hoạt Hyper – V để tiến hành lập trình với Emulator, nếu máy tính của bạn chưa được kích hoạt thì khi chạy bạn sẽ nhận được lỗi tương tự như sau:

wp_hyperv1_1Hay nếu như đã kích hoạt nhưng không chạy trong chế độ Hyper-V Administrators group thì ta cũng nhận được lỗi:

wp_hyperv2_1Vậy làm sao để kích hoạt Hyper-V?

Bước 1:

Chọn Programs and Features trong Control Panel như hình dưới đây:

wp_controlpanel_1_1Bước 2:

Chọn Turn Windows Features On or Off

wp_controlpanel_2_1Màn hình Windows Features sẽ hiển thị ra như dưới đây:

Bước 3:

– Tick chọn Hyper-V trong màn hình Windows Features:

wp_controlpanel_3_1Sau khi chọn các Tick giống như hình trên, ta bấm OK và chờ cho hệ thống thiết lập xong.

 Bước 4:

Kiểm tra Hyper-V Manager

Sau khi hoàn thành bước 3, hệ thống sẽ tạo Hyper-V để kiểm tra ta tìm từ khóa Hyper-V Manager như hình dưới đây:

wp_hyperv3_1Bấm chọn Hyper-V Manager để hiển thị chương trình quản lý Hyper – V như dưới đây:

wp_hyperv4_1ở màn hình trên Ta có thể cấu hình nhiều thông số khác nhau, có thể Start, Stop dịch vụ… Như vậy khi nào chạy Emulator mà báo lỗi gì đó liên quan tới Hyper-V thì bạn có thể vào đây để cấu hình lại.

 4) Cài đặt Visual Studio Ultimate 2013Visual Studio Ultimate 2013 Update 2

Vì Windows Phone 8.1 SDK nằm trong Visual Studio Ultimate 2013 Update 2 nên sau khi cài đặt Visual Studio Ultimate 2013 thì bắt buộc ta phải cài đặt bản Update 2.

Nếu ngay từ đầu bạn cài đặt bản Visual Studio Ultimate 2013 Update 2 thì hệ thống có thể không cho phép và ngay từ đầu sẽ báo lỗi như hình dưới đây:

wp_visualupdate2_1Có nhiều cách giải quyết vấn đề trên, ở đây Tui đưa ra một cách như sau:

Bước 1: Vẫn phải cài bản Visual Studio Ultimate 2013 trước (chú ý là không phải Update 1 cũng không phải Update 2)

Ở bản này đã đính kèm sẵn Windows Phone 8.0 SDK bạn cũng tiến hành checked nó để cài luôn

Bước 2: Sau khi cài đặt thành công Visual Studio Ultimate 2013, thì bạn tiến hành cài đặt bản Visual Studio Ultimate 2013 Update 2 như vậy là sẽ thành công. Và bạn sẽ có bản Windows Phone 8.1 SDK.

Như vậy tới đây là bạn có thể tiến hành lập trình Windows Phone 8.1 .

Bài kế tiếp Tui sẽ hướng dẫn các bạn cách tạo 1 Project Windows Phone 8.1 như thế nào, kiến trúc, thành phần cũng như cách chạy trên Emulator và thiết bị thật như thế nào, các bạn chú ý theo dõi.

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