Chương 1. Cơ sở lý luận Chương 2. Thực trạng Chương 3. Đối tượng nghiên cứu Công nghệ Silverlight, xaml Chương trình chơi game caro 6 Công cụ xây dựng phần mềm: Visual Studio 2010, Microsoft Expression Blend.
Giới hạn và phạm vi nghiên cứu Tìm hiểu công nghệ Silverlight và lập trình game caro 4. Mục đích nghiên cứu Xây dựng được tài liệu giúp tìm hiểu về công nghệ Silverlight Xây dựng được chương trình chơi game caro có sử dụng công nghệ Silverlight. Nhiệm vụ nghiên cứu Tìm hiểu công nghệ Silverlight và ngôn ngữ XAML. Tìm hiều các kiến thức của công nghệ Silverlight để áp dụng vào xây dựng chương trình game caro.
Phương pháp nghiên cứu Tìm hiểu hết tổng hợp kiến thức chung của Silverlight, sau đó đi sâu vào những kiến thức cụ thể để xây dựng giao diện ứng dụng cờ caro Nghiên cứu công cụ Microsoft Expression Blend để dựa vào đó thiết kế giao diện cho trang web của ứng dụng. Ý nghĩa lý luận và thực tiễn của đề tài Qua việc tìm hiểu đã giúp em biết thêm kiến thức một công nghệ mới với nhiều tính năng nổi trội so với các công nghệ hiện có của Microsoft. Công nghệ Silverlight cho ta một cái nhìn tổng quan về thiết kế giao diện đẹp và bóng bảy mà không đòi hỏi phải sử dụng quá nhiều công nghệ cùng lúc mới tạo được, chính điều đó tạo nên sức mạnh của Silverlight. Silverlight là gì? a) Lý do ra đời Silverlight Các ứng dụng viết cho web thường gặp vấn đề về khả năng tương thích với trình duyệt và hệ điều hành.
Các công nghệ plug-in trên web trước đây không cho phép truyền tải những dữ liệu hình ảnh chất lượng cao như 720p HDTV. b) Silverlight là gì? Silverlight là một dạng plug-in dựa trên công nghệ của Microsoft .Net Nó độc lập với đa nền tảng và đa trình duyệt Nó cho phép phát triển các ứng dụng đa phương tiện đặc biệt là các ứng dụng trên web. Silverlight cung cấp một mô hình lập trình lập trình mềm dẻo và đồng nhất, nó hỗ trợ Ajax, Python, Ruby và các ngôn ngữ lập trình .Net như Visual basic, C#. Đặc điểm Silverlight kết hợp nhiều công nghệ vào một nền tảng phát triển, nó cho phép bạn được lựa chọn nhiều công cụ và ngôn ngữ lập trình thích hợp để giải quyết bài toán của bạn.
Silverlight cung cấp các tính năng sau: 1. Sự kết hợp của WPF và XAML 2. Mở rộng cho ngôn ngữ kịch bản 3. Sự tích hợp với các ứng dụng đã có 4.
Sử dụng mô hình ngôn ngữ lập trình trên nền tảng .Net Framework và các công cụ để kết hợp. Hỗ trợ mạng 6. Hỗ trợ ngôn ngữ tích hợp truy vấn (LINQ) 8 1. Kiến trúc và các thành phần Về cơ bản Silverlight là một nền tảng thống nhất của nhiều thành phần khác nhau.
Dưới đây là bảng các thành phần chính của silverlight. Thành phần Diển tả Nền tảng trình bày cơ Các thành phần và dịch vụ hướng tới giao diện người dùng sở và tương tác người dùng, bao gồm các control cho dữ liệu cho người dùng nhập, thiết bị đa phương tiện, quản lý phân quyền số, trình bày dữ liệu, đồ họa vector, chữ, hình ảnh động. cũng bao gồm XAML để đặc tả việc bố trí giao diện .Net Framework cho Là một gói nhỏ trong .Net Framework, bao gồm các thành silverlight phần và cá thư viện, kể cả tương việc tương tác dữ liệu, khả năng mở rộng các control, mạng, garbage collection, và CLR Cài đặt và cập nhật Là thành phần để sử lý các tiến trình cài đặt làm sao để đơn giản hóa cho lần cài đặt đầu tiên, tiếp sau đó chỉ cung cấp cơ chế tự động cập nhật và tương tác ở mức thấp. Dưới đây là hình ảnh mô tả những thành phần trong kiến trúc của Silverlight cùng với các thành phần và dịch vụ liên quan khác.
9 Core Presentation Components: (các thành phần chính) Tính năng Mô tả Xử lý dữ liệu đầu vào từ các thiết bị phần cứng như bàn phím, Dữ liệu vào (input) chuột, bảng vẽ hoặc các thiết bị đầu vào khác Trình bày giao diện Trình bày vector và các đồ hoạ ảnh bitmap, ảnh động, và văn người dùng (UI bản Rendering) Thiết bị nghe nhìn Các tính năng phát và quản lý một vài thể loại file âm thanh (Media) và hình ảnh như .MP3 Controls Hỗ trợ mở rộng cho các control để có khả năng tùy chỉnh về 10 kiểu dáng và khuôn mẫu Cho phép khả năng xếp đặt vị trí động các thành phần giao Xếp đặt Layout diện người dùng Trình bày dữ liệu Cho phép việc kết nối dữ liệu của các đối tượng và các thành (Data Binding) phần giao diện người dùng DRM Khả năng Quản lý phân quyền số XAML Cung cấp trình phân tách cho XAML Các lập trình viên có thể tương tác với thành phần nền tảng trình bày cơ sở trên đây bằng cách sử dụng XAML để đặc tả. XAML là một yếu tố quan trọng nhất trong việc tương tác giữa .Net Framwork và các kiểu trình bày Layout, ngoài ra các lập trình viên cũng có thể sử dụng cơ chế quản lý code bên trong để thao tác với lớp trình bày .Net Frame work for Silverlight: Tính năng Mô tả Hỗ trợ ngôn ngữ truy vấn tích hợp (LINQ) và LINQ với đặc tả XML, dễ dang xử lý việc tích hợp và làm việc với dữ liệu Data từ nhiều nguồn khác nhau. Hỗ trợ việc sử dụng XML và các lớp biên đổi hóa (serialization) để xử lý dữ liệu Thuộc thư viện của .Net Framework, nó cung cấp các chức Base class library năng lập trình chủ yếu như việc xử lý chuỗi, biểu thức chính quy, đầu vào và đầu ra, ánh xạ, tập hợp và toàn cục hóa. Window Cung cấp các tính năng để đơn giản hóa việc truy cập dữ liệu Communication từ xa.
Cơ chế này bao gồm một đối tượng trình duyệt, HTTP Foundation request và HTTP Response, RSS, JSON, POX, và các SOAP (WCF) Common language Cung cấp việc quản lý bộ nhớ, dọn dẹp bộ nhớ thừa, xử lý 11 runtime ngoại lệ… (CLR) Windows Cung cấp các control giầu tính năng như Button, Calendar, Presentation CheckBox, DataGrid, DatePicker, HyperlinkButton, Foundation controls ListBox, RadioButton, and ScrollViewer. (WPF) Dynamic language Hỗ trợ việc biên dịch và thi hành với tính năng động của các runtime ngôn ngữ kịch bản như Javascript và IronPython cho các (DLR) chương trình trên nền tảng Silverlight. Mô hình lập trình Javascript API Managed API 1. Công nghệ và công cụ liên quan của Silverlight Microsoft Expression Blend: Sử dụng công cụ này bạn bạn có thể tạo và thay đổi cách xắp xếp trình bày Layer của ứng dụng bằng cách thao tác đến canvas và control trong XAML, làm việc với các chức năng đồ họa, Lập trình với ngôn ngữ Javascript.
Visual Studio 2008: Visual Studio cung cấp các công cụ hiệu quả cho việc phát triển các ứng dụng có hỗ trợ thao tác code bên tron. Tất cả các phiên bản đã có của Visual Studio đều có khả năng hỗ trợ Silverlight,Tuy nhiên ở phiên bản mới này nó còn hỗ trợ các tính năng đặc biệt hơn như bao gồm khả năng IntelliSense, debugging và các template cho việc tạo mới một ứng dụng Silverlight.NET AJAX: Bao gồm tập các Control, Service, và các thư viện cần thiết cho việc tạo và tương tác với nền ứng dụng web 12 Microsoft ASP.5 Extensions Preview: Công nghệ này cung cấp chức năng thêm để việc tăng cường các ứng dụng ASP. Nó bao gồm 2 control sử dụng hữu ích cho việc xây dựng ứng dụng nền tảng silverlight cũng như là một phần của ứng dụng ASP.NET MediaPlayer Server Control - ASP.NET Silverlight Server Control Internet servers: Bao gồm IIS (Microsoft Internet Information Services), và Apache Web server Microsoft Windows Communication Foundation (WCF) services. Layout trong silverlight Khi xây dựng ứng dụng Silverlight, một trong những điều cần quan tâm là việc bố trí giao diện đồ họa như thế nào để một developer có thể tận dụng những sức mạnh về đồ họa của Silverlight, trước hết chúng ta cần phải biết được những đối tượng cơ bản dành cho việc sắp xếp, thiết kế các thành phần UI.
Silverlight cung cấp cho ta 3 kiểu bố trí khác nhau đó là: Canvas, StackPanel và Grid 1.Canvas Định nghĩa một khu vực mà trong đó bạn có thể chỉ ra vị trí của từng đối tượng thành phần bằng cách sử dụng tọa độ tham chiếu. Bạn có thể sử dụng lồng các Canvas với nhau và những thành phần bên trong của Canvas phải là một UIElement. Trong nhiều trường hợp thì Cancas chỉ đóng vài trò như một đối tượng để chứa đựng những đối tượng khác và không có một thuộc tính hiển thị nào. 13 Canvas là đối tượng layout duy nhất cho phép định vị đối tượng dựa vào giá trị tọa độ tuyệt đối, thông qua 2 thuộc tính được sử dụng dưới dạng Attached Property là Canvas.Top và Canvas.Left Trong quá trình gõ đoạn code trên trong Visual Studio để thử nghiệm, khi bạn gõ đến Canvas., công nghệ IntelliSense sẽ hiện ra một menu pop-up cho thấy các thuộc tính dạng AttachedProperty của Canvas.
Khi đó, bạn có thể thấy thuộc tính ZIndex. Tính chất của thuộc tính này là giải quyết vấn đề khi các đối tượng trên Canvas che phủ lên nhau (overlap). Nếu như 2 đối tượng có ZIndex như nhau hoặc cùng không định nghĩa ZIndex thì đối tượng nào được khai báo sau sẽ đè lên trên. Tuy nhiên, nếu 2 đối tượng có giá trị thuộc tính ZIndex khác nhau, thì ZIndex của đối tượng nào lớn hơn sẽ giúp đối tượng được ưu tiên xuất hiện phía trên.
Ví dụ minh họa: chỉ ra hình chữ nhật cách trái 20pixel và cách trên 53pixel <Grid x:Name="LayoutRoot" Background="White"> <Rectangle Width="200" Height="100" Canvas.Top="53" Fill="Violet"> </Rectangle > </Grid> Hình 2.1: sử dụng thẻ canvas 14 1. StackPanel - Sắp xếp những thành phần bên trong nó thành một dòng và có thể hiển thị theo hai kiểu ngang hoặc dọc. - StackPanel hay được dùng khi muốn sắp xếp chỉ trong một phần của toàn bộ trang. - Gía trị mặc định được gán cho thuộc tính Orientation là chiều dọc(Vertical) và giá trị mặc định được xét cho hai thuộc tính HorizontalAlignment và VerticalAlignment là Stretch.
- Ví dụ: StackPanel sắp xếp các nút theo chiều ngang <StackPanel Orientation="Horizontal" Background="Green" Margin="10,10,10,30"> <Button Width="70" Height="30" Margin="30"></Button> <Button Width="70" Height="30" Margin="30"></Button> <Button Width="70" Height="30" Margin="30"></Button> </StackPanel> Hình 2. Grid - Grid là layout panel mềm dẻo nhất, nó cho phép sắp xếp các control theo dạnh bảng bao gồm nhiều dòng và nhiều cột. Về tính năng nó tương tự như thẻ Table trong HTML. 15 - Mặc định Grid chưa một cột và một dòng.
- Để định nghĩa nhiều cột hoặc nhiều dòng ta dùng ColumnDefinitions và RowDefinitions. Mỗi ColumnDefiniton và RowDefinitons trong ColumnDefinitions và RowDefinitions xác định một dòng hoặc cột. - Ví dụ sử dụng Grid <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True" Margin="30,30,10,10"> <Grid.RowDefinitions> <RowDefinition ></RowDefinition> <RowDefinition ></RowDefinition> <RowDefinition ></RowDefinition> <RowDefinition ></RowDefinition> </Grid.