o Sử dụng HTML: Tất cả những phần tử đối tượng chúng ta cho phép nhúng và định hình rõ trình nhúng SilverLight ( SilverLight plug-in) trong trang HTML, vạch ra hướng mà có sự tương thích với tất cả sự hỗ trợ của người dùng. Chủ đề này mô tả làm thế nào chúng ta hoàn tất, phổ biến những yêu cầu tiếp theo sử dụng những phần tử đối tượng:
Nhúng một SilverLight và chỉ định rõ ứng dụng trên trang chủ.
Định rõ việc luân phiên việc trình bày bằng HTML khi SilverLight
không cài đặt được.
Trong trang HTML các thao tác này hoàn toàn khác, cái khác biệt rõ ràng nhất là cách cấu hình tham số truyền của các phần tử đối tượng. Theo những procedure
mô tả trong một trình độc lập nhưng chỉ xây dựng hoàn tất một trình duyệt đa nhiệm HTML ví dụ ở cuối chương này.
Chúng ta nên sử dụng kết quả của những ví dụ này như là một mẫu (Template) cho project thay vì sử dụng những phần con trong mỗi procedure. Kết
SVTH: Thân Hoàng Lộc Trang 74 Nguyễn Anh Việt
Lưu Xuân Việt
quả của những ví dụ này cũng đảm bảo sự tương thích giữa các trình duyệt với nhau và cũng là cơ sở trong các mẫu (Template) mà Visual Studio và Expression Blend sử dụng để kiểm tra những trang đã sinh ra.
2. Đối tượng tham chiếu trong trình nhúng (plug-in) Silverlight.
Trình nhúng Silverlight là một đối tượng mà có thể sử dụng những kiểu lập trình và truy xuất dữ liệu khác nhau. Những thành phần của lớp Plug-in có thể được truy xuất thông qua phương thức HTML DOM và thông qua những phần tử đối tượng đã được định nghĩa trên nền Silverlight plug-in trong một trang HTML. Tương tự những hàm cũng được truy xuất thông qua APIs mà đưa ra trang HTML dạng xuất ra như đối tượng những thẻ. Cũng giống như trong ASP.NET, Silverlight và những trình nhúng Silverlight được điều khiển trên trang Web máy chủ và những hàm trong thư viện Silverlight.js. Một vài hàm trong trình nhúng Silverlight có thể được truy xuất trong quá trình chạy (Run-time) bởi chúng được sử dụng trong những mô hình lập trình Silverlight (the JavaScript API or managed code).
- Sử dụng JavaScrip: Cách khác, chúng ta cũng có thể khai báo những đối tượng sử dụng thông qua những hàm mà JavaScrip cung cấp trong file Silverlight.js. Những hàm này tạo ra đối tượng cơ bản và cung cấp như là những tiện nghi trong sự trình bày của JavaScrip.
o Silverlight.js là một file hướng dẫn được cung cấp trong Silverlight SDK. Ta có thể gọi các hàm createObject và createObjectEx khai báo file này khi nhúng
Silverlight Plug-in vào trang web. Gọi chung những hàm này là hàm nhúng. o Những hàm nhúng này cho phép cấu hình chi tiết những tham số vào và sinh ra
những đối tượng HTML. Kỹ thuật nhúng này tương thích với tất cả sự hỗ trợ các trình duyệt.
SVTH: Thân Hoàng Lộc Trang 75 Nguyễn Anh Việt
Lưu Xuân Việt
- Các hàm nhúng này cung cấp thêm các lợi ích sử dụng các đối tượng ngay khi:
o Chúng cho phép ta cấu hình một trương trình Silverlight plug-in khi ta nhúng vào, hoặc trừu tượng hóa chi tiết một cấu hình độc lập, một hàm dùng chung.
o Chúng vẫn tương thích ngược lại với các hàm createObject và
createObjectEx trong Silverlight 1.0.
o Mỗi Plug-in nhúng vào có một nét riêng cho phép ta nhận dạng chúng. Điều này rất hữu ích khi nhúng nhiều Plug-in vào một trang web đơn.
3. The Layout Containers
Một cửa sổ Silverlight chỉ có thể chứa duy nhất một phần tử đơn lẻ. Để chứa nhiều hơn một phần tử và tạo ra nhiều giao diện người dùng thực tế. Bạn cần phải có một chỗ chứa trên một trang và sau đó thêm những phần tử ấy vào chỗ chứa này. Giao diện này đã được định rõ bởi khuôn chứa bạn đã sử dụng.
Tất cả những Layout Container là những bảng có nguồn gốc từ lớp trừu tượng
Hình 1: Bảng phân cấp lớp Panel
Lớp Panel thêm vào 2 thuộc tính chung là: Background và Children. Background là bộ bút vẽ sử dụng để sơn màu nền của Panel. Children là tập hợp những mục mà lưu trữ trên Panel. Đây là mức thứ nhất của các phần tử - Trong một phát biểu khác, bản thân những phần tử này cũng có thể chứa đựng nhiều phần tử khác.
Nói riêng, lớp Panel không chỉ là một lớp cơ bản mà còn là một điểm bắt đầu cho nhiều lớp chuyên dụng khác. Để thuận tiện trong việc sắp đặt layout, Silverlight cung cấp 3 loại Panel như hinh 2. Cũng giống như hầu hết các trình điều khiển trong Silverlight và nhất là những phần tử trực quan. Những lớp này cũng được xây dựng trên
System.Windows.Controls namespace.
Tên Mô tả
StackPanel Nơi những phần tử được xếp thành
hàng ngang hay hàng dọc. Bao chứa
SVTH: Thân Hoàng Lộc Trang 76
Nguyễn Anh Việt Lưu Xuân Việt
SVTH: Thân Hoàng Lộc Trang 77 Nguyễn Anh Việt
Lưu Xuân Việt
Layout này chia những thành phần lớn, những trang phức tạp thành những phần nhỏ tiêu biểu thưởng sử dụng.
Grid Sắp xếp các phần tử trong hàng và cột tùy theo sự ẩn hiện của bảng. Đây là một tính mềm dẻo nhất và thường sử dụng với những bao chứa Layout.
Canvas Cho phép những phần tử có một vị trí
tuyệt đối sử dụng hệ tọa độ cố định. Bao chứa Layout này là một bao chứa đơn nhưng nó có tính mềm dẻo.
Những bao chứa Layout có thể xếp chồng nhau. Một giao diện người dùng điển hình bắt đầu với Grid, Silverlight hoàn toàn có khả năng sinh ra bao chứa, và chứa đựng những bao chứa Layout khác mà đã nhóm nhỏ và sắp xếp những phần tử lại. Chẳng hạn như: một TextBoxes tiêu đề, những Item trong List, những Icon trên ToolBar và v…v…
a. StackPanel:
Sắp xếp các phần tử con theo một đường thẳng đơn theo hướng ngang hoặc dọc. Mặc định của giá trị HorizontalAlignment và VerticalAlignment là trạng thái Stretch.
Giá trị mặc định của thuộc tính Orientation là dọc (Vertical).
Các sự kiện của StackPanel: Ngoài các sự kiện giống như Grid, Canvas, Boder
(BindingValidationError, GotFocus, KeyDown, KeyUp, LayoutUpdated, Loaded, LostFocus, LostMouseCapture, MouseEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp, MouseMove) thì StackPanel còn có thêm sự kiện SizeChanged: xuất
SVTH: Thân Hoàng Lộc Trang 78 Nguyễn Anh Việt
Lưu Xuân Việt
hiện khi thay đổi giá trị một trong hai thuộc tính: ActualHeight hoặc ActualWidth (Thừa kế từ FrameworkElement.)
b. Grid
Định nghĩa một Grid là khu vực gồm có nhiều hàng và nhiều cột. Sau đó đặt các điều khiển vào bên trong vị trí của các dòng/cột chỉ định bằng cách sử dụng Extended Properties.
Giá trị mặc định của 1 Grid là một hàng và một cột, để khai báo nhiều hàng và nhiều cột, sử dụng tập hợp ColumnDefinitions và RowDefinitions. Mỗi đối tượng
ColumnDefinitions và RowDefinitions trong tập ColumnDefinitions và RowDefinitions
khai báo một hàng hay một cột đơn lẻ. Hai tập hợp này cũng sử dụng đối tượng
GridLength để định rõ kích thước của mỗi hàng và cột. GridUnitType sẽ giúp định nghĩa kiểu cho các hàng và cột đó.
Để xem nhiều hàng và nhiều cột, chúng ta xét các thuộc tính RowSpan và
ColumnSpan
- Thuộc tính HorizontalAlignment: Sắp xếp các thuộc tính của FrameworkElement
thẳng hàng và xếp theo hàng ngang, khi đó bên trong nó chứa đựng các bảng hoặc các biểu tượng điều khiển như là một Layout cha.
- Thuộc tính VerticalAlignment: Sắp xếp các thuộc tính của FrameworkElement
thẳng hàng và xếp theo hàng dọc khi đó bên trong nó chứa đựng các bảng hoặc các biểu tượng điều khiển như là một đối tượng cha.
- Thuộc tính Margin: xác định các giá trị canh lề của một FrameworkElement. + Khai báo đối tượng Margin:
SVTH: Thân Hoàng Lộc Trang 79 Nguyễn Anh Việt
Lưu Xuân Việt
c. Canvas
Một Canvas là một đối tượng được tạo ra để chứa các đối tượng điều khiển (Control) và các đối tượng hình vẽ (Shape). Khai báo một phạm vi có thể xác định rõ vị trí của phần tử nằm trong bằng hệ thống tọa độ trong khu vực đó.
Trong JavaScript API cho Silverlight, một đối tượng Canvas không những là một phần tử rễ điển hình mà còn là nền tảng của trình nhúng (Plug-in) Silverlight.
Một Canvas có thể chứa đựng 1 phần tử con mà nó được diễn tả trong phạm vi của
Canvas. Mỗi phần tử con chỉ có thể là UIElement. Tất cả các file XAML phải chứa ít nhất một Canvas và nó sẽ được coi là đối tượng gốc. Một Canvas có thể chứa một số bất kỳ các đối tượng khác, thậm chí cả các Canvas khác.