Tạo Snapped, Filled,... với Blank Page trong Windows 8

Đối với việc xây dựng một ứng dụng Window Store App. Xây dựng UI thân thiện đối với người dụng, tận dụng những tính năng của windows 8 là một lợi thế. Trong bài viết sẽ hướng dẫn lập trình viên thiết kế Snapped, Filled và các trạng thái khác đối với một trang Blank. 

Trước tiên chúng ta khởi tạo Blank Project. kết quả như hình bên dưới.

Bản thân windows 8 đã cung cấp sẵn đối với các trang dạng Plit, Grid, Basic, vì thế để được hổ trợ ở loại blank ta thêm vào thư mục Common 2 file LayoutAwardPage.cs và SuspensionManager.cs (có thể tìm thấy trong bất kì project Plit và Grid).

Tiếp theo, ta mở 2 file trên và tùy chỉnh namespace phù hợp với project của bạn, trong ví dụ này project có namespace gốc là App1. Ta thay đổi namespace của 2 file như sau:

namespace App1.Common

Bước tiếp theo. Để kích hoạt các trạng thái cho trang bất kì (trong ví dụ này là mainpage) ta mở Mainpage.cs thay đổi như sau:


public sealed partial class MainPage : LayoutAwarePage

Tiếp tục mở file MainPage.xaml sửa lại như sau:

<common:LayoutAwarePage
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:common="using:App1.Common"
    mc:Ignorable="d">
<!--Thêm namespace common trỏ đến App1.Common page được tạo kế thừa từ App1.Common.LayoutAwarePage-->
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"/>
    <!--Thay đổi kế thúc trang-->
</common:LayoutAwarePage>

Như vậy ta đã cơ bản tạo được một blank page sẵn sàng các trạng thái.
Tiếp theo ta sẽ tạo bộ VisualStateGroup mang tên ApplicationViewStates Trong ví dụ này, các state sẽ được tạo bằng Blend.
Trước tiên, ta mở page cần chỉnh với Blend

Vào State Tab ta khởi tạo một group gồm các state như hình trên.
Để tiến hành thay đổi trạng thái app, ta chọn state và ấn nút record (nút mày đỏ bên màn hình design)
Ngoài ra, Blend còn hỗ trợ hiển thị app theo trạng thái, ta vào tab device để quá trình thiết kế trực quan hơn.

Như vậy chúng ta đã có thể thiết kế Blank page với đầy đủ tình năng Snapped, Filled,....

Chúc mọi người thành công,

HTiT

Xử lí đồng bộ Thread với Async và Await

     WinRT được xây dựng dựa trên sự chú trọng về xử lí asynchoronous (tạm dịch là không đồng bộ)  của các tiến trình, đó là điểm nhấn đáng chú ý của WinRT, bằng việc phân luồng xử lí và sắp xếp các luồng một cách hợp lí nhất, giúp WinRT ngày càng chiếm lấy cảm tình của người dùng, bởi lẽ cách xử lí ít tốn time của CPU, khá mượt mà và dể chịu của nó.
     Trong bài viết sẽ đề cập đến vấn đề sử dụng từ khóa async và await giúp developer có thể tiếp cận và vận dụng tốt nhất tính năng này của WinRT.


     Như đề cập ở tiêu đề, khác Synchoronous (đồng bộ hóa), Asynchoronous cho phép chương trình thực hiện các công việc khác trong khi chờ Task thực hiện.

     Xét ví dụ dưới đây:

 protected void btnSubmit_Click(object sender, RoutedEventArgs e)  
     {  
       int res = 0;  
       var task = ThreadPool.RunAsync(delegate { res = DoSomeThing(); });  
       task.Completed = delegate(IAsyncAction asyncAction, AsyncStatus asyncStatus)  
       {  
         btnSubmit.Content = res.ToString();  //lỗi
       }  
     }  

    Ví dụ trên thực hiện một công việc đơn giản: tạo một Thread nằm trong ThreadPool sau đó thực hiện hàm DoSomeThing() trả giá trị trở về cho res, sau khi công việc hoàn tất, gán giá trị của res  trở về cho btnSubmit.Content (Ví dụ thường thấy trong thao tác Client để chờ trả lời từ Server hoặc Webservices) . Tuy nhiên:
                                     + không phải lúc nào hàm DoSomeThing() cũng có giá trị đúng đắn.
                                     + Trong lúc tạo CallBack cho task ta đã sinh ra một Thread ko thuộc UI, không thể thay đổi giá trị của các UI (button)
                         Khi đó:
                                     + AsyncStatus cung cấp các giá trị cho biết kết quả của quá trình thực hiện.
                                     + Đưa đoạn xử lý vào UI Thread.
Ta có đoạn code dưới đây:

  protected void btnSubmit_Click(object sender, RoutedEventArgs e)  
     {  
       int res = 0;  
       var task = ThreadPool.RunAsync(delegate { res = DoSomeThing(); });  
       task.Completed = delegate(IAsyncAction asyncAction, AsyncStatus asyncStatus)  
       {  
           Dispatcher.RunAsync(CoreDispatcherPriority.Normal, delegate  
           {  
             switch (asyncStatus)  
             {  
               case AsyncStatus.Completed:  
                 btnSubmit.Content = res.ToString();  
                 break;  
               case AsyncStatus.Error:  
                 btnSubmit.Content = asyncAction.ErrorCode.Message;  
                 break;  
               case AsyncStatus.Canceled:  
                 btnSubmit.Content = "A task was stupid";  
                 break;  
             }  
           });  
       }  
     }  

      CoreDispatcher gắn kết thao tác xử lí vào UI, từ đó cho phép thao tác với UI. asyncStatus cho phép ta xác định kết quả thực hiện của thread bao gồm Cancelled, Complete, Error.
      
      Việc thao tác như trên gây nhiều phiền toái và khá "cơ bắp", khiến cho việc xử lí trở nên rườm rà phức tạp. Đối với WinRT ta có thể thao tác đơn giản như sau:

  protected async void btnSubmit_Click(object sender, RoutedEventArgs e)  
     {  

       try 

       {
          int res = 0;  //(1)
          await ThreadPool.RunAsync(delegate { res = DoSomeThing(); });  //(2)
          btnSubmit.Content = res.ToString();     //(3)

       }

        catch {}
     }  

       Trong đoạn code trên, sau khi thực hiện dòng lệnh (1), ThreadPool tạo và thực thi tìm giá trị của res thông qua hàm DoSomeThing(). sau đó đợi đến khi quá trình kết thúc thì gán giá trị cho Content
     
      Mặt khác, nếu muốn trả về giá trị của một Task  được gọi thực thi, WinRT cung cấp bộ chuyển dử liệu với từ khóa Task<TResult>. ta xét ví dụ dưới đây.

  protected async Task<int> DoSomeThing()  
     {  
       int res = await GetInformation("http://localhost/customerID");  
       return res;  
     }  

     Trên đây là những vấn đề cơ bản khi làm việc với async trong WinRT. Chúc mọi người thành công.

HTIT,