Hướng dẫn thực hành Lập trình trên thiết bị di động Windows Phone 8 OS
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Khối: Đại Học
Năm 2013
Hướng dẫn:
Bài tập thực hành được chia theo Module
Mỗi Module được thiết kế cho thời lượng là 3
với sự hướng dẫn của giảng viên.
12 tiết thực hành tại lớp
Tùy theo số tiết phân bổ, mỗi tuần học có thể thực hiện nhiều Module.
Sinh viên phải làm tất cả các bài tập trong các Module ở tuần tương ứng.
Những sinh viên chưa hòan tất phần bài tập tại lớp có trách nhiệm tự làm
tiếp tục ở nhà.
Các bài có dấu (*) là các bài tập nâng cao dành cho sinh viên khá giỏi.
Trang 1
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
MỤC LỤC
Module 2: Xaml, Phone Controls And Navigation...................................................... 14
Module 7: Sensors........................................................................................................... 88
Module 8: Assignment.................................................................................................... 89
Trang 2
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Module 1:Introduction Windows Phone Os
Nội dung kiến thức thực hành:
- Làm quen với môi trường phát triển điện thoại di động
- Cách cài đặt Windows Phone 8 SDK
- Sử dụng Visual Studio Express 2012 for Windows Phone
- Cách sử dụng Windows Phone Emulator, Hyper-V Manager
- Cách thức đăng ký Real Phone để lập trình
- Tìm hiểu cấu trúc và các thành phần của Windows Phone Project
- Tìm hiểu vòng đời của ứng dụng Windows Phone
- Tìm hiểu Windows Phone Market
Bài tập 1:
Mục đích:
- Tải và cài đặt được Windows Phone 8 SDK (Software Development Kit).
Yêu cầu:
- Khởi động Visual Studio Express 2012 for Windows Phone để thử tạo một project mẫu.
Hướng dẫn:
- Để cài đặt được Windows Phone 8 SDK thì cần đảm bảo các yêu cầu sau:
o Hệ điều hành 64 bits: Windows 8 Pro hoặc cao hơn
o Phần cứng: Hỗ trợ Hyper V, SLAT, RAM 4GB
- Trong gói Windows phone 8 SDK thì sau khi cài đặt ta sẽ có:
o SDK Windows Phone 8 Assemblies
o Windows Phone 8 Emulator
o Visual Studio Express 2012 for Windows Phone
o Adds project and item templates to Visual Studio 2012
o Development Kit Tools for Windows Store Apps
o MS C++ 2012 Compilers and Core Libraries for WP 8
o Direct X Libraries
o XNA Game Studio 40
o Windows Phone 7.1 Support
o Blend SDK for Windows Phone 8 and 7.1
o Microsoft Advertising SDK
Trang 3
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Bài tập 2:
Mục đích:
- Thao tác với Windows Phone 8 Emulator
Yêu cầu:
- Khởi động Windows Phone 8 Emulator và tiến hành thực hành các thao tác:
o Mở một ứng dụng bất kỳ
o Bấm nút Back
o Bấm nút Start
o Bấm nút Search
o Quay & xoay màn hình Emulator
o Gỡ bỏ một phần mềm khỏi Emulator
o Hiệu chỉnh Sensor, Maps… ở nút Additional Tool
o Mở trình duyệt
o Chia sẻ hình ảnh
o Kiểm tra máy ảnh, quay phim
o Và các tính năng cần thiết khác
Hướng dẫn:
- Chạy Emulator:
- Từ cửa sổ Visual Studio, chọn thiết bị Emulator như hình bên dưới
Trang 4
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Hình ảnh Emulator
Bài tập 3:
Mục đích:
- Thao tác với Hyper V manager
Yêu cầu:
- Khởi động Hyper V Manager
- Tiến hành các thao tác: Connect, Start stop Service, Settings…
Hướng dẫn:
- Hình minh họa:
Trang 5
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Bài tập 4:
Mục đích:
- Tìm hiểu cấu trúc và các thành phần của Windows Phone Project
Yêu cầu:
- Tạo một Project Windows Phone, tiến hành biên dịch, thực thi ứng dụng
- Kiểm tra cấu trúc Project, Folder, Bin , .xap của Project
Hướng dẫn:
- Khởi động Visual Studio Express 2012 for Windows Phone
- Chọn New Project
Trang 6
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
- Chọn Windows Phone App, nhập tên ứng dụng rồi nhấn nút Ok
- Tại màn hình trên chọn Windows Phone OS 8.0 (PC phải hỗ trợ Hyper V và SLAT)
Trang 7
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
- Ta quan sát thấy màn hinh tương tác của Project, nhấn F5 để chạy Emulator
AppManifest.xml: Visual sẽ quản lý tập tin
này, dùng để lưu trữ danh sách tài nguyên khi
triển khai ứng dụng
WMAppManifest.xml: Các mô tả của ứng
dụng, ta vào đây để cấu hình phần mềm. Bấm
chuột phải chọn Properties để cấu hình nâng
cao: Application UI, Capabilities,
Requirements, Packaging
Assets: Chứa Application Icon, Tile Image để
hiển thị trong màn hình Start
Resources: Cho phép cấu hình đa ngôn ngữ và
các tài nguyên khác
App.xaml: class tự động được tạo ra, dùng để
khởi chạy ứng dụng, ta có thể quản lý vòng đời
ứng trong trong này.
LocalizedStrings: Cung cấp tài nguyên ngôn
ngữ để ta có thể truy suất, tham chiếu
MainPage.xaml: Trang chủ mặc định thi tạo
Project, nó sẽ được khởi tạo khi ứng dụng chạy.
- Ta có thể thiết kế: Tại màn hình Designer (trực tiếp trên Phone Emulator), XAML và
Coding runtime.
- Quan sát cấu trúc thư mục của ứng dụng, trong thư mục Bin/debug(release), ta thấy tập
tin .xap đó chính là Đóng Gói của ứng dụng, nó như tập tin ZIP
Trang 8
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
- Mở zip lên ta thấy bên trong .xap có chứa các thành phần cần thiết có thể Triển khải được
ứng dụng trên điện thoại, ta deploy tập tin này vào Emulator hoặc Real Phone .
Bài tập 5:
Mục đích:
- Cách thức đăng ký Real Phone để lập trình
Yêu cầu:
- Hãy đăng ký thiết bị mobile chạy hệ điều hành Windows Phone 8 của bạn với hệ thống
để có thể lập trình được trên thiết bị thật
Hướng dẫn:
- Làm theo các bước sau để có thể đăng ký thiết bị thật để lập trình:
- Bước 1: Mở điện thoại và unlock màn hình
- Bước 2: Kiểm tra ngày tháng trong điện thoại có giống với giờ thực tế hay chưa
- Bước 3: Dùng USB kết nối điện thoại thật với máy tính cần lập trình
- Bước 4: Tìm “Windows Phone Developer Registration” trong App PC của bạn, thường
thì ta chỉ cần gõ “Developer” tự quan sát để chọn đúng ứng dụng:
Trang 9
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
- Bước 5: Màn hình đăng ký sẽ hiển thị lên, nếu như đã đăng ký rồi thì có thông báo đăng
ký rồi, còn không qua bước 6.
- Bước 6: Bấm Register button để đăng ký
- Bước 7: Trong quá trình đăng ký hệ thống sẽ yêu cầu đăng nhập Windows Live ID (nên
bạn phải có nó trước), đối với sinh viên của trường thì sử dụng tài khoản do khoa Công
Nghệ Thông Tin cấp để đăng ký (tài khoản DreamSpark)
- Bước 8: Kết thúc quá trình đăng ký (đăng ký thành công) bạn sẽ thấy thông báo:
Như vậy bạn có thể bắt đầu lập trình trên thiết bị thật của bạn rồi, bạn có thể Debug trên máy
thật, những ứng dụng thực tế bạn phải test trên điện thoại thật để đảm bảo chương trình luôn
luôn chạy đúng.
Bài tập 6:
Mục đích:
- Tìm hiểu vòng đời của ứng dụng Windows Phone 8
Yêu cầu:
- Viết chương trình kiểm tra vòng đời của ứng dụng Windows phone 8
- Yêu cầu lưu trữ lại thông tin trên giao diện khi màn hình bị tre khuất
- Yêu cầu giải thích từng sự kiện bằng tiếng việt
- Ứng dụng gồm có 2 trang như bên:
Trang 10
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
- Bấm nút Back, Start, Search ở góc dưới cùng màn hình Phone để kiểm tra
- Bấm Open Page 2 thì mở trang 2
- ở trang 2 bấm close thì trở về trang chính
Màn hình chính
Hướng dẫn:
- Trong App.xaml.cs, override 4 phương thức như dưới đây:
- (using Microsoft.Phone.Shell)
public class MyObject
{
public DateTime LastTimeUpdate { get; set; }
}
public MyObject myObject { get; set; }
Trang 11
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
ShellToast toast = new ShellToast();
toast.Title = "Application_Launching";
toast.Content = "Application_Launching is call";
toast.Show();
}
// Code to execute when the application is activated (brought to foreground)
// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
ShellToast toast = new ShellToast();
toast.Title = "Application_Activated";
toast.Content = "State=" + (e.IsApplicationInstancePreserved?"Dormant":"TombStoned");
toast.Show();
if (!e.IsApplicationInstancePreserved)
{
this.myObject = PhoneApplicationService.Current.State["xxx"] as MyObject;
toast = new ShellToast();
toast.Title = "Application_Activated";
toast.Content = "Data from TombStoned";
toast.Show();
}
}
// Code to execute when the application is deactivated (sent to background)
// This code will not execute when the application is closing
private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
this.myObject = new MyObject() { LastTimeUpdate=DateTime.Now};
PhoneApplicationService.Current.State["xxx"] = this.myObject;
ShellToast toast = new ShellToast();
toast.Title = "Application_Deactivated";
toast.Content = "Lastupdate=" + this.myObject.LastTimeUpdate.ToLongDateString();
toast.Show();
}
// Code to execute when the application is closing (eg, user hit Back)
// This code will not execute when the application is deactivated
private void Application_Closing(object sender, ClosingEventArgs e)
{
ShellToast toast = new ShellToast();
toast.Title = "Application_Closing";
toast.Content = "Application_Closing is call";
toast.Show();
}
Để mở một trang mới:
App.RootFrame.Navigate(new Uri("/Page2.xaml",UriKind.Relative));
Để đóng trang hiện tại:
NavigationService.GoBack();
Trang 12
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Bài tập 7:
Mục đích:
- Tìm hiểu Windows Phone Market
Yêu cầu:
- Đưa ứng dụng lên Market
Hướng dẫn:
Trang 13
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Module 2:Xaml, Phone Controls And Navigation
Nội dung kiến thức thực hành:
- Cách thức xây dựng giao diện với XAML
- Thao tác với Brush, Resource, Style, Templates..
- Thao tác với các Control trong Phone 8:
- Layout Control : Canvas, Stackpanel, Grid, Border, ScrollViews, Viewbox.
- Button, TextBlock controls
- Input Controls: TextBox, PasswordBox, RichTextBox, AutoCompleteBox, Slider..
- Radio and Checkbox controls
- List Controls: LongListSelector, ListPicker
- Menu controls: ApplicationBar, Context Menus
- Media Controls: Image, MultiScaleImage, MediaElement
- Popups, MessageBox
- Data Binding:
- Binding Basics, code, Collections, Objects, Converters
- MVVM
- Navigation: Pages, external URIs…
Bài tập 1:
Mục đích:
Thao tác được với XAML trong một ứng dụng Windows Phone 8
Yêu cầu:
Tạo một ứng dụng bất kỳ, kiểm tra cấu trúc XAML
Giải thích ý nghĩa của PhoneApplicationPage và các element, attributes trong XAML trên
Hướng dẫn:
Trang 14
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Bài tập 2:
Mục đích:
Hiểu và thao tác được với XAML namespace
Yêu cầu:
Yêu cầu tạo 2 lớp MyButton có cùng tên (mỗi lớp Button khi khởi tạo sẽ có màu khác nhau), kế
thừa từ Button nhưng nằm trong 2 namespace khác nhau, hãy đưa ra công thức sử dụng XAML
namespace này:
Hướng dẫn:
Công thức namespace:
namespace drthanh.com
{
public class MyButton:Button
{
public MyButton()
{
Width = 300;
Height = 100;
SolidColorBrush brush = new SolidColorBrush(Colors.Red);
this.Background = brush;
}
}
}
Trang 15
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Bài tập 3:
Mục đích:
Hiểu và thao tác được với Syntax trong XAML:
- Object element syntax
- Attribute syntax
- Property element syntax
- Attached property syntax
- Markup extension
Yêu cầu:
- Dùng gì syntax loại gì để tô màu nền Button sau:
- Dùng syntax loại gì để tô màu nền Button sau:
- Giải thích khi nào dùng Object Element Syntax, Attribute Syntax, Property element
syntax vaf Attached property syntax.
- Markup extension có đặc điểm gì?
Hướng dẫn:
Trang 16
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Bài tập 4:
Mục đích:
Hiểu và thao tác được với các loại Brush trong Windows Phone
- SolidColorBrush
- LinearGradientBrush
- RadialGradientBrush - GradientOrigin
- ImageBrush – hình ảnh tự chép vào Assets folder
Yêu cầu:
- Dùng XAML và Coding để vẽ màu nền cho các control như dưới đây (dùng Button,
Rectange, Ellipse hoặc bất kỳ control nào khác):
- Chú ý ở trên có 4 loại Brush, mỗi brush có 4 control với các phối màu khác nhau sinh
viên phải thiết kế đáp ứng đủ yêu cầu.
- Phải viết được bằng XAML và coding
Hướng dẫn:
- Tất cả phải using System.Windows.Media
-
Ví dụ 1 trường hợp về LinearGradientBrush:
<Button Content= "drthanh" >
<Button.Background>
Trong XAML:
<LinearGradientBrush>
<GradientStop Color="Red" Offset="0.0"/>
<GradientStop Color="Blue" Offset="0.5"/>
<GradientStop Color="White" Offset="1.0"/>
</LinearGradientBrush>
</Button.Background>
</Button>
Trong Coding:
LinearGradientBrush br = new LinearGradientBrush();
GradientStop gs1 = new GradientStop();
gs1.Color = Colors.Red;
gs1.Offset = 0;
GradientStop gs2 = new GradientStop();
gs2.Color = Colors.White;
gs2.Offset = 1.0;
br.GradientStops.Add(gs1);
br.GradientStops.Add(gs2);
button1.Background = br;
Trang 17
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Bài tập 5:
Mục đích:
Hiểu và thực hành được về Resource
- Tại sao phải sử dụng Resource
- Cách tạo và sử dụng Resource
- Cách sử dụng Merge Dictionary
- Cách sử dụng StaticResource
Yêu cầu:
- Hãy tạo Resource để chia sẻ màu nền dưới đây trong cùng một Page:
- Hãy tạo Resource để chia sẻ màu nền dưới đây trong toàn bộ ứng dụng (dùng Merge
Dictionary):
Hướng dẫn:
- Xem hướng dẫn trong slide 2730 phần “2-XAML, Phone Controls and Navigation”
Bài tập 6:
Mục đích:
Hiểu và thực hành được về Style
- Tại sao phải sử dụng Style
- Cách tạo và sử dụng Style
- Thao tác được với các thuộc tính: Property, Value
- Kế thừa Style
Yêu cầu:
- Hãy xây dựng Style cho Button với các thông số sau: Chiều cao 100, chiều rộng 250,
mặc định chữ in đậm, nền màu đỏ.
- Yêu cầu Stye này phải được chia sẻ được trong toàn bộ ứng dụng
Hướng dẫn:
- Xem hướng dẫn 3133 phần “2-XAML, Phone Controls and Navigation”
Trang 18
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
Bài tập 7:
Mục đích:
- Thực hành về ControlTemplate
Yêu cầu:
- Yêu cầu tạo 2 ControlTemplate như hình dưới đây:
- Yêu cầu chia sẻ được trong toàn bộ ứng dụng
Hướng dẫn:
<Grid.Resources >
<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<Border CornerRadius="10"
BorderThickness="3"
BorderBrush="White"
Margin="5"
Padding="5">
<TextBlock Text="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Grid.Resources>
<Button Template="{StaticResource ResourceKey=ButtonTemplate}" Content="DrThanh" />
Bài tập 8:
Mục đích:
- Thực hành về PhoneControl:
- Các Layout: Canvas, Stack, WrapPanel, Grid
- Button và Textblock, Ellipse
- DispatcherTimer
Yêu cầu:
- Sử dụng các Layout phù hợp để viết game đơn giản sau:
- Mặc định khi Chương trình khởi động, nó có Nút bấm Run và một hình tròn màu vàng,
Khi bấm nút Run thì hình màu vàng sẽ tự động di chuyển ngẫu nhiên trên màn hình. Mỗi
lần chạm vào nút màu vàng thì nó sẽ đổi màu thành xanh (chạm tiếp lần nữa thì nó trở về
Trang 19
Đại Học Công Nghệ Đồng Nai
Khoa Công Nghệ Thông Tin
màu đỏ), đồng thời trên mỗi lần chạm vào hình màu tròn này thì nó tự động xuất hiện ra
các hình tròn có màu ngẫu nhiên khác hình nhỏ (xem hình):
Hướng dẫn:
- Xem slide 39 phần “2-XAML, Phone Controls and Navigation”
- Coding chọn màu ngẫu nhiên:
Random rd = new Random();
byte red =(byte) rd.Next(0, 255);
byte green = (byte)rd.Next(0, 255);
byte blue = (byte)rd.Next(0, 255);
byte a = 255;
Color c = new Color();
c.R = red;
c.G = green;
c.B = blue;
Trang 20
Tải về để xem bản đầy đủ
90 trang
24800
Free
Bạn đang xem 20 trang mẫu của tài liệu "Hướng dẫn thực hành Lập trình trên thiết bị di động Windows Phone 8 OS", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- huong_dan_thuc_hanh_lap_trinh_tren_thiet_bi_di_dong_windows.pdf
