Đồ án Nghiên cứu Silversight và xây dựng ứng dụng web hỗ trợ phát triển bài giảng dạng Multimedia

Hoàng Lộc Trang 83 Nguyễn Anh Việt Lưu Xuân Việt Để gọi lại hành động khi thuộc tính đã thay đổi. Ví dụ, vẽ lại TextBox khi thuộc tính Text thay đổi và thông báo TextChanged event tới ứng dụng. Nếu bạn không sử dụng chức năng gọi lại sự thay đổi thì sự thay đổi sẽ không xảy ra. Bạn có thể thêm chi tiết vào chỗ trống trong ví dụ và đăng ký một thuộc tính phụ thuộc mới để sẵn dùng khi bạn cần sử dụng. Chú ý: Trong Silverlight có 3 sự đơn giản hóa hơn so với sự phong phú của WPF: - Không sử dụng đối tượng Metadata để đòi hỏi thông tin thêm vào. - Không hỗ trợ việc phân biệt có hiệu lực hay không (Không tự động loại bỏ những giá trị sai). - Không hỗ trợ việc ép kiểu (Tự động thừa nhận và thay đổi giá trị sai vào). b. Trình bao bọc những thuộc tính Bước cuối cùng là gói những thuộc tính Silverlight của bạn vảo trong những thuộc tính truyền thống của .NET. Ngoài ra, xem xét những thủ tục truy xuất những đặc trưng của thuộc tính hoặc set giá trị riêng cho những field, thuộc tính thủ tục cho thuộc tính Silverlight sử dụng là phương thức GetValue() và SetValue() được định nghĩa trong lớp cơ bản DependencyObject. Ví dụ: public Thickness Margin { get { return (Thickness)GetValue(MarginProperty); } set { SetValue(MarginProperty, value); } } Khi bạn tạo một gói bao những thuộc tính, bạn nên tính đến những cái không thể hơn là gọi SetValue() và gọi GetValue() như trong ví dụ trên. Bạn không nên thêm bất kỳ đoạn code nào để xác nhận giá trị, xây dựng event…v..v…Bởi vì đây là nét đặc trưng Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 84 Nguyễn Anh Việt Lưu Xuân Việt trên Silverlight để có thể bỏ qua việc gói thuộc tính lại và gọi trực tiếp SetValue() và GetValue() Cú pháp tổng quát: myElement.Margin = new Thickness(5); c. Mức độ giá trị chức năng (Dynamic Value Resolution ) Chúng ta đã biết, thuộc tính phụ thuộc phụ thuộc vào nhiều dịch vụ khác nhau, để xác định rõ giá trị của thuộc tính hiện hành, Silverlight quyết định đưa ra quyền ưu tiên. Xử lý này được gọi là mức độ giá trị chức năng (Dynamic Value Resolution ) Khi đánh giá một thuộc tính, Silverlight đánh giá theo những cấp bậc ưu tiên sau: 1. Amination: Nếu một amination hiện hành đang chạy, và amination đó thay đổi giá trị thuộc tính, Silverlight sẽ sử dụng amination đó. 2. Giá trị cục bộ (Local value): Nếu bạn set một giá trị rõ ràng trong XAML hoặc trong code, Silverlight sẽ sử dụng giá trị cục bộ đó. Nên nhớ, bạn có thể dùng phương thức Setvalue() để set lại giá trị hoặc gói những thuộc tính đó lại. Nếu bạn set một thuộc tính sử dụng liên kết dữ liệu hoặc tài nguyên, nó có thể sẽ làm thay đổi những giá trị cục bộ và bạn cần phải set lại. 3. Gốc những thành phần mẫu (the template parent): nếu một phần tử là mọt phần của data template hoặc một control template. Nó d9uo75ng5 nhiên được thừa hưởng chi tiết từ những phần tử cha. Nếu thục sự như vậy, chúng sẽ có hiệu lực ngay tức thì. 4. Kiểu (Styles): Những kiểu (Styles) của Silverlight cho phép bạn cấu hình nhiều control trong một quy tắc nhất định. Nếu bạn set một kiểu áp dụng cho những control này. Nó sẽ được vận hành ngay. d. Thuộc tính kèm theo (Attached Properties) Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 85 Nguyễn Anh Việt Lưu Xuân Việt Một thuộc tính kèm theo là thuộc tính phụ thuộc đầy đủ trọn vẹn và cũng như tất cả các thuộc tính phụ thuộc khác nó chịu sự quản lý của hệ thống thuộc tính Silverlight. Sự khác biệt là nó kèm theo sự thay thuộc tính tới một lớp khác mà nó định nghĩa ở trong. Những ví dụ phổ biến của thuộc tính kèm theo tìm thấy ở những bao chứa thể hiện (layout container). Ví dụ lớp Grid khai báo một thuộc tính kèm theo: Row và Column, nơi mà bạn có thể set vị trí của phần tử đã chứa bên trong. Tương tự, Canvas khai báo một thuộc tính phụ thuộc Left và Top để bạn xác định vị trí cần đặt sử dụng hệ trục tọa độ. Khi tạo một thuộc tính phụ thuộc kèm theo, bạn không nên khai báo bao chứa thuộc tính .NET. Bởi vì thuộc tính phụ thuộc kèm theo có thể set trên bất kỳ đối tượng độc lập nào. Ví dụ thuộc tính phụ thuộc Grid.Row có thể set trên một đối tượng Grid (Nếu bạn có một Grid lồng bên trong một Grid khác) hoặc trên một vài phần tử khác. Thực ra, thuộc tính Grid.Row có thể set trên những thuộc tính ngang hàng nếu thuộc tính đó không nằm trong cùng 1 Grid và không phải là một đối tượng Grid đơn trong cây phần tử. Để thay thế một bao chứa thuộc tính .NET, thuộc tính kèm theo yêu cầu môt cặp phương thức tĩnh mà có thể được gọi là: set và get giá trị thuộc tính. Những phương thức này sử dụng giống như phương thức SetValue() và GetValue() (Thừa kế từ lớp DependencyObject). Nên đặt tên cho phương thức tĩnh này là SetPropertyName() và GetPropertyName(). Đây là phương thức tĩnh mà thực thi thuộc tính kèm theo Grid.Row: public static int GetRow(UIElement element) { return (int)element.GetValue(Grid.RowProperty); } public static void SetRow(UIElement element, int value) { element.SetValue(Grid.RowProperty, value); } Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 86 Nguyễn Anh Việt Lưu Xuân Việt Và thêm một ví dụ đặt vị trí của một phần từ vào hàng đầu tiên của Grid sử dụng code: Grid.SetRow(txtElement, 0); Đặt thuộc tính Grid.Row này có giá trị là 0 trên đối tượng txtElement cho mỗi một TextBox. Bởi vì Grid.Row này một thuộc tính phụ thuộc, Silverlight cho phép bạn áp dụng chúng cho bất kỳ phần tử nào. 2. Luồng sự kiện (Routed Events) Tất cả những người phát triển .NET hiểu rõ ý nghĩa của event (Sự kiện) – Thông điệp mà được gởi bởi một đối tượng (Như là một phần tử Silverlight) tới code (đoạn mã) của bạn khi mà xuất hiện một điều gì đó quan trọng. WPF đề cao kiểu event .NET với môt khái niệm mới là luồng sự kiện (Events Routed), cái mà cho phép một event khởi tạo trên một đối tượng nhưng được dựng ở một nơi khác. Ví dụ như luồng sự kiện cho phép một click bắt đầu trên một Button và Button nổi lên trên bao chứa nó và lúc đó là trang chứa nó trước khi xảy ra những xử lý trong code. Silverlight mượn một vài kiểu luồng sự kiện của WPF nhưng chỉ trong những kịch bản đơn giản. Trong khi WPF hỗ trợ vài kiểu luồng sự kiện thì Silverlight chỉ hỗ trợ có một luồng sự kiện: bubbled events mà sự chứa đựng được bắt nguồn từ sự thừa kế từ những phần tử trong lớp sâu của bao chứa này. Hơn nữa, bubbled events của Silverlight là sự liên kết của một vài sự kiện nhập vào của bàn phím (Keyboard) và chuột (mouse) (như MouseMove và KeyDown). Cũng như bạn thấy, Silverlight không sử dụng luồng sự kiện cho những sự kiện điều khiển (events control) cấp cao (như click) và bạn không thể sử dụng luồng sự kiện trong những event control được tùy biến riêng. a. Bên trong những phần tử sự kiện (The Core Element Events) Những phần tử này thừa hưởng những cái cơ bản của sự kiện bên trong 2 lớp UIElement và FrameworkElement. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 87 Nguyễn Anh Việt Lưu Xuân Việt Lớp UIElement khai báo một sự kiện quan trọng cho xử lý nhập vào của user và chỉ event này có luồng sự kiện. Danh sách event của UIElement bao gồm: Tên sự kiện Mô tả GotFocus Xảy ra khi UIElement nhận một điểm KeyDown Xảy ra khi một phím trên bàn phím nhấn xuống trong khi UIElement đã chọn một điểm KeyUp Xảy ra khi một phím trên bàn phím được nhả ra trong khiUIElement đã chọn một điểm MouseLeave Xảy ra khi chuột ( bút vẽ) rời khỏi viền một UIElement MouseLeftButtonDown Xảy ra khi nhấn trái chuột (Hoặc khi đầu một bút vẽ tác động vào thẻ PC) trong khi con trỏ chuột nằm trên một UIElement. MouseLeftButtonUp Xảy ra khi nhấn trái chuột (Hoặc khi đầu một bút vẽ tác động vào thẻ PC) trong khi con trỏ chuột nằm trên một UIElement. MouseEnter Xảy ra khi chuột ( bút vẽ) nhấp vào viền một UIElement MouseLeave Xảy ra khi chuột ( bút vẽ) rời khỏi viền một UIElement Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 88 Nguyễn Anh Việt Lưu Xuân Việt MouseMove Xảy ra khi di chuyển chuột ngang qua phần tử Trong một vài trường hợp, những event cao cấp hơn có hiệu lực thay thế một vài event UIElement. Ví dụ như, lớp Button cung cấp một sự kiện click mà bắt đầu một hành động khi user nhấn và thả button chuột. Bạn nên luôn có đáp ứng tới event click chứ không hẳn là MouseLeftButtonDown hay MouseLeftButtonUp. Tương tự, TextBox cung cấp một event TextChanged xảy ra khi có sự thay đổi text bởi bất kỳ cơ cấu thêm vào cơ bản event KeyDown và KeyUp. Lớp FrameworkElement chỉ thêm vào một vài kiểu event. Những event này không sử dụng sự kiện nổi bọt (event bubbling). Chi tiết mô tả trong bảng sau: Tên sự kiện Mô tả Loaded Xảy ra khi một FrameworkElement hoàn tất việc thể hiện trên giao diện, đã biên dịch và sẵn sàng tương tác SizeChanged Xảy ra khi một trong hai thuộc tính ActualHeight hoặc ActualWidth thay đổi giá trị FrameworkElement LayoutUpdated Xảy ra khi sự kết hợp những đối tượng con trong trường hợp đồng thời gắn kết Silverlight vào làm thay đổi giao diện thể hiện Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 89 Nguyễn Anh Việt Lưu Xuân Việt III. CÁC PHẦN TỬ (Elements) Một số phần tử cơ bản trong Silverlight được mô tả trong bảng sau: Lớp Mô tả Border Một đường viền hoặc một hình chữ nhật mà bạn vẽ thêm xung quanh một phần tử. Button Là một nút bấm với màu nền tối, nơi mà người dùng có thể nhấp vào với một yêu cầu. Lịch (Calendar) Lịch nhìn một tháng hay một thời điểm mà người dùng có thể chọn một ngày. Canvas Một bao chứa thể hiện (layout container) cho phép bạn bố trí những phần tử nằm trong nó theo một vị trí trong hệ tọa độ CheckBox Một hộp thoại với tùy chọn có thể kiểm tra hoặc không kiểm tra nội dung trong lần mở tiếp theo. ContentControl Nội dung cơ bản của tất cả các điều khiển-control (Control mà có thể chứa Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 90 Nguyễn Anh Việt Lưu Xuân Việt những phần tử khác làm nội dung) DataGrid Một danh sách gồm nhiều hàng và nhiều cột với một tập hợp của các đối tượng dữ liệu. DatePicker Một hộp thoại văn bản cho mục (index) ngày tháng với một tờ lịch kéo-thả để dễ dàng chọn lựa. Ellipse Một hình dạng được vẽ miêu tả như một hình Elip. Grid Một bao chứa thể hiện chứa các phần từ con bên trong mà không thấy được lưới của từng ô. GridSplitter Trả lại kích thước ban đầu của thanh (bar) cho phép User thay đổi chiều cao, thuộc tính cột, độ rộng, thuộc tính hàng trong một Grid HyperlinkButton Một đường dẫn trực tiếp để người dùng có thể liên kết với một trang web khác. Image Một phần tử trình bày hỗ trợ file ảnh. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 91 Nguyễn Anh Việt Lưu Xuân Việt Line Một phần tử hình vẽ được miêu tả như một đường thẳng. ListBox Một danh sách những biểu tượng (item) bên ngoài là một trình đơn có thể lựa chọn MediaElement Một tập tin (file) truyền thông ví dụ như là một cửa sổ video. MultiScaleImage Một hình ảnh mà Silverlight hỗ trợ xem theo chiều sâu và cho phép user thu nhỏ lại. RadioButton Một đường tròn nhỏ mà miêu tả một sự chọn lựa bên ngoài của một nhóm những tùy chọn, với sự tùy chọn sẽ trình ra ở những lần tiếp theo Rectangle Một phần tử vẽ được miêu tả như là một hình chữ nhật. RepeatButton Một Button mà liên tục xảy ra sự kiện click khi nhấp vào.(Như là Button trên một thanh cuộn) ScrollBar Một cái rãnh với một Button mũi tên trên cạnh của nó cho phép user di Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 92 Nguyễn Anh Việt Lưu Xuân Việt chuyển trong suốt chiều rộng của phần nội dung mà có thể đưa ra một lần duy nhất. Sử dụng trong ScrollViewer ScrollViewer Một bao chứa mà giữ bề rộng của một nội dung bất kỳ và tạo chúng thành một sự cuộn tròn. Slider Một điều khiển nhập vào mà cho phép user đặt nhiều giá trị bởi vận dụng kéo dọc theo cái rãnh. StackPanel Một bao chứa thể hiện mà sắp xếp các biểu tượng từ trên xuống dưới hoặc từ trái qua phải. TextBlock Control hiển thị văn bản chứa đựng một hoặc tất cả các mục đích có khả năng sinh ra những định dạng khác nhau tới nhiều phần của dòng văn bản. TextBox Hiển thị nội dung văn bản. ToggleButton Một Button mà có hai trạng thái, mở hoặc tắt và có thể có khóa chuyển đổi từ một click khác (Như checkbox) ToolTip Một đóng mở hộp thoại như là việc Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 93 Nguyễn Anh Việt Lưu Xuân Việt trình diễn nội dung khi user di chuyển chuột qua một phần tử. WatermarkedTextBox Một hộp thoại văn bản mà thêm một khả năng hiện ra từ một lời nhắc khi có một khoảng trống hoặc không có điểm. IV. ANIMATION (hoạt ảnh) Animation cho phép bạn tạo một chức năng thật của giao diện người dùng. Nó thường sử dụng sự thay đổi những hiệu ứng. Ví dụ như một biểu tượng tự động tăng kích thước lên khi bạn di chuyển ngang qua nó, xoay tròn những logo, nhìn đoạn văn bản cuộn lại và…Thỉnh thoảng, những hiệu ứng này xem như là một sự dư thừa. Nhưng sử dung đúng cách, animation có thể là một điểm mạnh để nổi bật một ứng dụng. Chúng có thể tạo một ứng dụng có vẻ như nhiều đáp ứng, tự nhiên, và mang tính trực giác.(Ví dụ Khi bạn click một button nó chuyển động như là thực, rất tự nhiên-Không chỉ là một hình chữ nhật màu xám xịt nữa). Animation cung có thể vẽ nghiêm túc những phần tử quan trọng và hướng dẫn người dùng trong suốt quá trình chuyển trạng thái qua nội dung mới (Ví dụ, một ứng dụng có thể thông báo một nội dung mới với sự lấp lánh, nhấp nháy hoặc rung động những icon-biểu tượng). Animation là một tập nội dung của kiểu Silverlight. Nghĩa là bạn không cần phải sử dụng ngay bây giờ hoặc đặt những hành động của chúng vào trong code event handing. Thay vào đó, bạn tạo chúng như là một sự khai báo. Định cấu hình cho chúng sử dụng một hoặc một nhóm lớp và đặt chúng vào bên trong những hành động mà không thể viết chỉ bằng một dòng code C#. Một animation cũng có thể hòa vào một animation thành một khối trong một trang Silverlight thông thường. Ví dụ bạn muốn một Button trở nên sinh Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 94 Nguyễn Anh Việt Lưu Xuân Việt động hơn và trôi xung quanh trang mà Button đó vẫn được xem như là một Button. Nó có thể có một kiểu dáng, một điểm trọng tâm và nó có thể click vào và thi hành một sự kiện nào đó. Đây là những gì mà file media truyền thống chia lại cho animation. Như video, khi bạn đặt một trang video vào trong một ứng dụng, nó hoàn toàn chia ra những vùng khác nhau của ứng dụng. Nó cũng có thể chơi nội dung một đoạn video, nhưng không cho người dùng tương tác. Chú ý: Silverlight animation là một phiên bản thu nhỏ của hệ thống WPF animation. Nó giữ sự tương tự những gì dựa trên Framework, những kiểu tương tự cho những khai báo animation với lớp animation và tương tự như hệ thống storyboard (bảng lưu trữ). Bên cạnh đó, việc phát triển WPF sẽ tìm thấy một vài khóa khác nhau, một cách đặc biệt bên trong những cách mà animation tạo ra và bắt đầu bên trong code.(Ví dụ phần tử Silverlight không dựng phương thức BeginAnimation() nhưng trong WPF thì lại có.) 1. Quan niệm Silverlight animation (hoạt ảnh). Thông thường, một animation thường nghĩ là một chuỗi trạng thái. Để thi hành animation, những trạng thái này diễn ra tiếp theo những trạng thái kia, như là một sự dừng lại của video. - Silverlight animation sử dụng một kiểu đột ngột khác nhau. Về cơ bản, một Silverlight animation chỉ là một phương pháp thay đổi một giá trị thuộc tính phụ thuộc trên một khoản thời gian rỗi (thời gian trễ của 2 tiến trình giao nhau) cho phép. Ví dụ như tạo một Button từ từ lớn ra và co lại. Bạn có thể thay đổi thuộc tính bề rộng trong một animation. Để tạo nên ánh sáng mờ, bạn có thể thay đổi thuộc tính LinearGradientBrush mà nó sử dụng bên trong Background (nền). Bí quyết để tạo nên một animation tốt là phải xác định rõ những thuộc tính gì mà bạn cần chỉnh đổi. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 95 Nguyễn Anh Việt Lưu Xuân Việt Nếu bạn muốn tạo một sự thay đổi khác mà không cần phải thay đổi thuộc tính…Ví dụ, bạn không cần phải thêm hay gỡ bỏ (remove) những phần tử như là một phần của animation. Tương tự, bạn không thể yêu cầu Silverlight thi hành một sự chuyển trạng thái giữa trang thái bắt đầu và trạng thái kết thúc ( mặc dù một vài mánh khóe xung quanh việc này có hiệu lực có thể giở ra). Và cuối cùng, bạn chỉ có thể sử dụng animation với những thuộc tính phụ thuộc, bởi vì chỉ những thuộc tính phụ thuộc mới sử dụng hệ thống giải quyết những thuộc tính chứa năng mà đưa những animation vào bên trong bản miêu tả. Trong lần nhìn thoáng qua đầu tiên, thuộc tính hội tụ tự nhiên của những animation Silverlight dường như là những giới hạn rất tệ. Mặc dù khi bạn làm việt với Silverlight, bạn sẽ phát hiện ra rằng nó có những khả năng thật sửng sốt. Trong thực tế, bạn có thể tạo những biên độ của hiệu ứng animation sử dụng những thuộc tính phổ biến mà mọi phàn tử hỗ trợ. Phạm vi bên ngoài Silverlight animation Có một vài trường hợp hệ thống thuộc tính animation nền không thể làm. Như là một chuẩn trong sự vận dụng, thuộc tính animation nền là một phương pháp lớn để thêm vào những hiệu ứng cho những ứng dung thông thường trong những lĩnh vực khác (Như button sáng lên, hình ảnh phóng to lên khi bạn di chuyển ngang qua…). Tuy nhiên, nếu bạn cần sử dụng animation như là một mục đích chính trong nội dung ứng dụng của bạn, bạn có thể cần một điều gì đó như là nhiều giá trị mạnh mẽ và nhiều sự uyển chuyển. Ví dụ như, nếu bạn tạo ra một trò chơi hình cuộn phức tạp hoặc sử dụng những tính toán vật lý tới nhiều kiểu xung đột bạn sẽ cần những control lớn bên ngoài animation. Điều đáng tiếc là Silverlight không có tùy chọn cho những cấu trúc animation cơ bản. vì vậy, bạn sẽ cần phải tạo từng phân đoạn của ứng dụng theo từng kiểu lặp lại không Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 96 Nguyễn Anh Việt Lưu Xuân Việt ngừng.Cẩn thận trong sự thay đổi những góc nhìn và kiểm tra phía người dùng sau mỗi lần nhập liệu. Ví dụ tham khảo kỹ thuật giả lập sự va chạm của trái banh tại: 2. Những quy tắc của animation Những quy tắc của animation bao gồm: - Silverlight animations là thời gian căn bản (Silverlight animations are time-based): do đó, bạn cần phải set trạng thái ban đầu và trạng thái kết thúc và trong suốt animation của bạn. Silverlight sẽ tính toán tốc độ của những trạng thái đó. - Hành vi của những animation trên thuộc tính (Animations act on properties): Nghĩa là một Silverlight animation chỉ thực hiện một thứ: Chỉnh sửa giá trị của thuộc tính trong khoảng thời gian rỗi (thời gian trễ của 2 tiến trình giao nhau). Điều này như là một giới hạn quan trọng (và có nhiều con đường dẫn tới) nhưng đây là một sự ngạc nhiên lớn của những hiệu ứng mà bạn có thể tạo bởi sự dễ dàng chỉnh sửa những thuộc tính. - Những kiểu dữ liệu phụ thuộc vào những lớp animation khác nhau (Every data type requires a different animation class): ví dụ như: thuộc tính Button.Width sử dụng kiểu dữ liệu double. Hoạt ảnh chúng bạn sử dung lớp DoubleAnimation. Nếu muốn chỉnh sửa màu sắc mà sử dụng màu nền của Canvas bạn cần phải sử dụng lớp ColorAnimation. Silverlight có tương đối một vài lớp animation. Vì vậy bạn bị hạn chế trong kiểu dữ liệu có thể sử dụng. Tại thời điểm hiện tại, bạn có thể sử dụng animation để chỉnh sửa thuộc tính với những kiều dữ liệu như: double, object, Color, và Point. Bên cạnh đó, bạn cũng có những mánh khóe riêng cho từng lớp animation để làm việc với những kiểu dữ liệu khác nhau. Tất cả bạn cần làm được nhận từ System.Windows.Media.Animation và cho biết những giá trị thay đổi như thế nào theo thời gian. Nhiều kiểu dữ liệu không tương ứng với lớp animation bởi vì nó không thực tế. Một ví dụ hoàn hảo là bảng liệt kê. Cho ví dụ, bạn có thể điều khiển như thế nào một phần tử là Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 97 Nguyễn Anh Việt Lưu Xuân Việt vị trí trên bao chứa thể hiện (layout container) sử dụng thuộc tính HorizontalAlignment để giữ một giá trị từ bảng liệt kê HorizontalAlignment. Bên cạnh đó, bảng liệt kê HorizontalAlignment cũng cho phép bạn chỉ chọn được giữa bốn giá trị (Left, Right, Center, và Stretch) đây là cái thể hiện rõ nhất giới hạn sử dụng animation. Mặc dù bạn có thể trao đổi giữa một định hướng này và định hướng khác, bạn không thể chuyển đổi trôi chảy một phần tử từ chuẩn này sang chuẩn khác. Đó là lý do không có lớp animation cho kiểu dữ liệu HorizontalAlignment. Bạn có thể xây dựng chính nó, nhưng vẫn là sự miễn cưỡng bởi bốn giá trị của bảng liệt kê. Kiểu tham chiếu không thường sử dụng trong hoạt ảnh. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 98 Nguyễn Anh Việt Lưu Xuân Việt TÓM LƯỢC Tóm lại, tất cả những phần trình bày trên chỉ là mức khái quát sơ lược về Microsoft Silverlight. Do trình độ của chúng em còn hạn chế, cũng như thời gian nghiên cứu ngắn nên chúng em vẫn chưa nghiên cứu sâu những ứng dụng hữu ích của Microsoft Silverlight. Tuy nhiên, trong bước đầu làm quen với công nghệ mới này và thêm phần hỗ trợ của ngôn ngữ đánh dấu mở rộng (XAML) chúng em cũng mạnh dạn trình bày những gì mình hiểu và nắm bắt được khi bắt tay vào nghiên cứu và viết ứng dụng bằng công nghệ mới này. Điểm mạnh của Microsoft Silverlight trong ứng dụng của chúng em là ở phần giao diện (UI) Sự thể hiện giao diện trong Silverlight được hỗ trợ bằng công cụ thiết kế rất trực quan (Microsoft Blend) cho phép chúng em tùy biến những thành phần giao diện theo ý tưởng và sự thể hiện mình mong muốn một cách dễ dàng, nhanh chóng hoàn toàn bằng ngôn ngữ tạo dựng UI không cần qua xử lý (Compile). Sau đây là phần xây dựng ứng dụng web sử dụng công nghệ Microsoft Silverlight của chúng em. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 99 Nguyễn Anh Việt Lưu Xuân Việt Phần 2: XÂY DỰNG ỨNG DỤNG WEB HỖ TRỢ BÀI GIẢN ĐIỆN TỬ DẠNG MULTIMEDIA Chương 1: MÔ TẢ ỨNG DỤNG I. ĐẶT VẤN ĐỀ Mô tả Mô hình: Đề tài yêu cầu xây dựng một website bài giảng điện tử online hổ trợ dạng multimedia nên đây là một website bài giảng điện tử cung cấp nội dung bài giảng trước tiên dự kiến giới hạn nội dung ở cấp Phổ Thông Trung Học Cơ Sở. Do đó, phần danh mục sẽ gồm: lớp 10, lớp 11, lớp 12, Luyện thi Đại Học. Cấu trúc một website điện tử bao gồm một nội dung trình bày là tổ hợp của hình ảnh video và phần văn bản nội bài giảng giúp người tiếp thu dễ dàng theo dõi nội dung đầy đủ và hấp dẫn hơn. Nói cách khác, bài giảng điện tử giống như một ebook online có khả năng truyền tải thông tin đa dạng hơn vì có sự hổ trợ thêm của phương tiện truyền thông (multimedia). Website phục vu 2 đối tượng chính nhìn chung có thể gọi là học viên và giảng viên. Với, học viên là học sinh hay các đối tượng tham khảo, có thể phản hồi ý kiến cá nhân về bài giảng đang xem. Giảng viên là người cung cấp bài giảng cho phép upload các bài giảng, xử lý được vấn đề mong muốn bài giảng nào được xem, cập nhật các bài giảng đã sửa chữa, hủy bài giảng cũ. Giảng viên theo dõi được thông tin phản hồi của học viên theo từng bài giảng. Các đối tượng tương tác với website cần có tài khoản đăng ký trước và có các thông tin cá nhân cơ bản để thuận tiện cho việc theo dõi và liên lạc. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 100 Nguyễn Anh Việt Lưu Xuân Việt Một bài giảng được soạn thảo sẵn bằng công cụ riêng winform application trên nền silverlight. Nội dung bài giảng là một tổ họp cây dữ liệu mô tả bằng một file xml.Công cụ cho phép thêm video, văn bản (cần bàn thêm), xử lý cử động, định thời điểm xuất hiện của văn bản. II. DANH MỤC CHỨC NĂNG 1. Danh mục các chức năng: a. Website: ¾ Đăng ký, đăng nhập để tham gia theo dõi bài giảng điện tử. ¾ Xem một bài giảng ¾ Ghi nhận phản hồi thông tin trong một bài giảng. ¾ Xử lý thêm bài giảng mới. ¾ Cập nhật bài giảng. ¾ Hủy các bài giảng cũ. b. Công cụ soạn thảo một bài giảng: ¾ Tạo mới, mở lại, lưu trữ một bài giảng. ¾ Soạn thảo văn bản, thêm media, script cử động. ¾ Công cụ xử lý xem trình bày trước, hổ trợ máy printer. 2. Phát họa website và công cụ soạn thảo: ¾ Đối tượng tương tác: - Học viên: đăng ký tài khoản, đăng nhập, chọn bài giảng, xem theo trình bày, phản hồi ý kiến. - Giảng viên: + Giống học viên, thêm bài giảng mới, cập nhật, hủy bài giảng. + Soạn thảo bài giảng: thêm, sửa, lưu, xem, soạn dữ liệu… Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH Chương 2: MÔ HÌNH PHÂN TÍCH CHỨC NĂNG VÀ CÁC ĐẶC TẢ USERCASE I. ĐẶC TẢ USERCARE 1. Mô hình Usercase cho website SVTH: Thân Hoàng Lộc Trang 101 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 102 Nguyễn Anh Việt Lưu Xuân Việt USERCASE ĐĂNG KÝ TÀI KHOẢN A. Đặc tả 1. Tóm tắt Usercase này mô tả cách thức học viên và giảng viên yêu cầu hệ thống thực hiện tạo mới một tài khoản. 2. Dòng sự kiện a. Dòng sự kiện chính - Hệ thống yêu cầu học viên hoặc giảng viên nhập các thông tin cần thiết cho việc đăng ký như Tên tài khoản, mật khẩu, tên, Email, country… - Hệ thống yêu cầu nhấn Submit để đang ký. b. Dòng sự kiện khác Nếu các thông tin cần thiết không hợp lệ hoặc trùng tên hệ thống yêu cầu nhập lại. c. Yêu cầu đặc biệt. Không có. d. Điều kiện tiên quyết. Không có. e. Post – Conditions. Nếu Usercase thực hiện thành công, hệ thống cập nhật vào cơ sở dữ liệu thông tin về tài khoản mới. f. Điểm mở rộng. Không có. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH B. Sequence Diagram SVTH: Thân Hoàng Lộc Trang 103 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 104 Nguyễn Anh Việt Lưu Xuân Việt USERCASE TRÌNH CHIẾU MỘT BÀI GIẢNG A. Đặc tả. 1. Tóm tắt Usercase này mô tả cách thức học viên và giảng viên yêu cầu hệ thống thực hiện việc trình chiếu nội dung một bài giảng (một Thumbnail). 2. Dòng sự kiện a. Dòng sự kiện chính - Hệ thống yêu cầu học viên hoặc giảng viên (đã đăng nhập). - Hệ thống yêu cầu nhấn chọn thumbnail vào viewplayer. - Học viên hoặc giảng viên scroll theo tex hoặc viết comment. b. Dòng sự kiện khác Nếu bài giảng không có Video, màn hình sẽ chỉ hiển thị text và comment. c. Yêu cầu đặc biệt. Không có. d. Điều kiện tiên quyết. Không có. e. Post – Conditions. Nếu Usercase thực hiện thành công, hệ thống truy xuất vào cơ sở dữ liệu và tải thông tin của thumbnail lên. f. Điểm mở rộng. Không có. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH B. Sequence Diagram SVTH: Thân Hoàng Lộc Trang 105 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH 2. Mô hình Usecase cho công cụ soạn thảo bài giảng SVTH: Thân Hoàng Lộc Trang 106 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH 3. Mô hình COM (Component) SVTH: Thân Hoàng Lộc Trang 107 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 108 4. Sơ đồ lớp tổng quát (Class Diagram) gồm 2 phần lớn a. Giao diện GIAODIEN_HOCVIEN: Tổng hợp Giao Diện của HOCVIEN gồm: - Panel LOGIN_USERS: dùng cho cả Học viên và Giảng viên - - - Panel BANNER: xử lý banner top va bottom Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 109 Nguyễn Anh Việt Lưu Xuân Việt - Panel TREE_DANHMUC: danh mục các môn lựa chọn xem - Panel MAIN_HOCVIEN gồm: + Tiltle, + ShowMedia + Detail + Comment b. Giao diện GIAODIEN_GIANGVIEN: gồm các panel: - Panel LOGIN_USERS: dùng chung cho cả Học viên và Giảng viên - Panel BANER: xử lý banner top va bottom - Panel LISTCOMMENT: chọn 1 phản hồi trong list rồi hiện form giống bên hocvien - Panel MAIN_GIANGVIEN gồm: + Menu web + ShowMedia + ListTopic - Panel Upload File. - Giao diện TREE_DANHMUC: - CÂY Danh mục 2 cấp: Ví dụ: Lớp 10: Môn Anh văn Môn Toán Môn Hóa Môn Lịch Sử .... Lớp 11: … Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 110 Nguyễn Anh Việt Lưu Xuân Việt o Lớp 12: … o Luyện thi đại học: … - Giao diện MAIN_HOCVIEN gồm: + Tiltle : ... + ShowMedia: ... + Detail: ... + Comment : ... - Giao diện BANNER: dùng chung cho cả HOCVIEN và GIANGVIEN gồm 2 hàm: + ShowTop() : muốn hiện Banner Top. + ShowBottom(): muốn hiện BannerBottom. - Giao diện LISTCOMMENT: Danh sách các comment có phản hồi. - Giao diện MAIN_GIANGVIEN: gồm + Menu web + ShowMedia + ListTopic Giao diện Học Viên và Giao diện Giảng Viên có các phần nhỏ dùng chung cả 2 đối tượng như: - Banner - LoginUsers Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH II. MÔ TẢ CƠ SỞ DỮ LIỆU 1. Mô hình ClassDataBase: Sơ đồ kết hợp giữa các bảng dữ liệu: SVTH: Thân Hoàng Lộc Trang 111 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH 2. Phân tích các bảng dữ liệu a. Bảng 1: USERS Bảng này lưu trữ các thông tin người dùng với những giá trị thuộc tính sau: Trong đó, giá trị IdUsers là một thuộc tính trừu tượng và là khóa chính trong bảng dữ liệu này. Trường pass chứa đựng giá trị password do người dùng khởi tạo và trường này không được để trống ( not Null). Các trường Name, Mail và Country lưu trữ các giá trị tên, địa chỉ mail và quốc gia có thể có hoặc có thể không. Tất cả có kiểu dữ liệu nvarchar, độ rộng của các chuỗi là 50. Giá trị IdUsersType cũng là một thuộc tính trừu tượng, kiểu dữ liệu: nchar, độ rộng của chuỗi là 10 và là khóa ngoại được tham chiếu trong bảng này. SVTH: Thân Hoàng Lộc Trang 112 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH b. Bảng 2: USERSTYPE Lưu giữ thông tin người dùng và phân loại người dùng mục đích để phân quyền tương tác trong hệ thống. Giá trị RoleType có thể có hoặc có thể không. Nếu là giá trị Null thì mặc định hệ thống chỉ cấp quyền tối thiểu khi tương tác trong hệ thống. Giá trị IdUsersType là một thuộc tính trừu tượng và là khóa chính trong bảng dữ liệu này. Các thuộc tính của bảng: IdUserType: Kiểu dữ liệu: nchar, độ rộng 10. RoleType: Kiểu dữ liệu: nvarchar, độ rộng 50. SVTH: Thân Hoàng Lộc Trang 113 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH c. Bảng 3: SUBJECT (Môn học) Lưu trữ thông tin môn học với các trường: IdSubject (Mã môn học): Kiểu dữ liệu: nvarchar, độ rộng 50. Name (Tên môn học): Kiểu dữ liệu: nvarchar, độ rộng 50. Có thể có hoặc không. IdClass ( Mã lớp): Kiểu dữ liệu: nvarchar, độ rộng 50. SVTH: Thân Hoàng Lộc Trang 114 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH Bảng thuộc tính: d. Bảng 4: ARTICLE (Bài giảng) Lưu trữ các thông tin của bài giảng gồm có: IdArticle (Mã bài giảng), PathToFile (Đường dẫn file), DateUp (Ngày đưa lên), IdSubject (Mã môn học). IdUsers (mã người upload bài giảng). Trong đó, IdArticle là khóa chính và IdSubject là khóa ngoại. Giá trị của trường DateUp có thể có hoặc có thể không. Bảng mô tả thuộc tính: e. Bảng 5: COMMENT (Bình luận) SVTH: Thân Hoàng Lộc Trang 115 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH Lưu trữ thông tin của các bài bình luận với các giá trị thuộc tính: Trong đó, trường Date và TextComment có thể có hoặc không. IdComment xác định mã của bài bình và là khóa chính. IdArticle là khóa ngoại tham chiếu đến để ghi nhận lời bình đối với bài giảng nào. Tất cả có kiểu dữ liệu nvarchar và độ rộng 50. f. Bảng 6: CLASS Bảng này xác định những học viên đang học bài học này thuộc lớp nào. SVTH: Thân Hoàng Lộc Trang 116 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH IdClass: mã lớp. Kiểu nchar, độ rộng 10. ClassName: Tên lớp. Kiểu nvarchar, độ rộng 50. g. Bảng 7: SEARCHTAG Tìm kiếm theo chức năng. Cung cấp thêm tính năng tìm kiếm một bài giảng đã có trong Website. Bàng một từ mô tả bài giảng do người dùng nhập vào. IdTag: Mã search, Kiểu nchar, độ rộng 10 Keyword: Từ mô tả nhập vào, Kiểu nvarchar, độ rộng 50. WeightKey: Trọng lượng đối số, kiểu int, 2 byte. IdArticle: Kiểu nvarchar, độ rộng 50. SVTH: Thân Hoàng Lộc Trang 117 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH III. CÔNG CỤ THIẾT KẾ BÀI GIẢNG 1. Mô hình Usercase cho công cụ soạn thảo bài giảng SVTH: Thân Hoàng Lộc Trang 118 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 119 Nguyễn Anh Việt Lưu Xuân Việt 2. Giới thiệu chung WPFSOANBAIGIANG là một công cụ soạn thảo bài giảng điện tử hỗ trợ cho web BAIGIANGDIENTUONLINE. Với những tương tác trực quan cũng như cách diễn giải dễ hiểu sẽ giúp bạn thao tác tốt hơn. WPFSOANBAIGIANG gồm có 3 chức năng chính : - Tạo một bài giảng mới. - Đọc một bài giảng. - Chỉnh sửa các mục, phần trong bài giảng. Bạn có thể xem, chỉnh sửa nội dụng của bài giảng và lưu những thay đổi. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH IV. MỘT SỐ MÀN HÌNH CHÍNH 1. Các màn hình chính của Website a. Màn hình chính của Website: Khi mở Website, màn hình này sẽ hiển thị và trên màn hình sẽ bao gồm những bài giảng mới nhất (Những bài giảng up lên Website gần nhất). Các tab trên trang chủ này gồm: - Home: Quay trở lại trang chính của website. SVTH: Thân Hoàng Lộc Trang 120 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH - Thư viện: Đưa tới trang chứa nội dung các bài giảng có trên site. - Xem: Mở ra một màn hình Viewplayer. Màn hình này trình bày nội dung một bài giảng, có thể là text, text + Video…và một comment dành riêng cho bài giảng này. - Thành viên: Mở đến trang chứa các control chỉ dành riêng cho thành viên (upload, modify…) - Đăng ký: Mở form đăng ký thành viên. - Đăng nhập: Mở form đăng nhập. b. Màn hình thư viện (Màn hình chính sau khi đăng nhập): SVTH: Thân Hoàng Lộc Trang 121 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH Ở màn hình này hiển thị thêm một Panelleft chứa đựng một Treeview các lớp và các môn học. Khi click vào từng môn học, chúng sẽ trình bài các bài giảng liên quan tới môn học đó bên các Thumbnail bên phải. Quan hệ giữa Treeview bên trái và Thumbnail bên phải là quan hệ Master - Detail c. Màn hình đăng ký SVTH: Thân Hoàng Lộc Trang 122 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH Hiển thị Form đăng ký các thông tin cần thiết để trở thành thành viên của website. Các thông tin được đánh dấu là thông tin bắt buộc user phải nhập vào và có sự kiềm tra đối với thông tin tài khoản. d. Màn hình đăng nhập SVTH: Thân Hoàng Lộc Trang 123 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH Hiển thị Form đăng nhập cho user. Chỉ những user đã đăng ký thì mới có thể đăng nhập được. Thông tin cần để đăng nhập là thông tin mà user đã đăng ký và được lưu giữ trong cơ sở dữ liệu. Ngoài ra, những user chưa đăng ký có thể nhấp vào nút “tham gia” để đang ký thông tin. Khi nhấp vào nút “tham gia” sẽ đưa user quay trở lại Form đăng ký. e. Màn hình Upload SVTH: Thân Hoàng Lộc Trang 124 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 125 Nguyễn Anh Việt Lưu Xuân Việt Thành viên – Giảng viên có thể đưa (Upload) bài giảng lên Website sau khi đã dùng phần công cụ soạn thảo soạn trước các bài giảng (Xem phần soạn thảo bài giảng). Khi đưa một bài giảng lên web, Giảng viên cần chọn Lớp, môn học (Chọn đường dẫn) chứa bài giảng và cuối cùng là chọn gói bài giảng đang chuẩn bị tải lên. Quy trình tải một bài giảng lên trang web gồm: - Sau khi giảng viên chọn file (bài giảng đã đóng gói file .zip). Click vào button “Tải lên” thì quá trình Upload file bắt đầu thông qua các hàm sau: private void ButtonSubmitLoad_Click(object sender, RoutedEventArgs e) { try { if (uploadfile == null || hasfile == false) { Log(msg2); return; } // lay' selectionboxitem cbLop cbMon string idclass = cbLop.SelectionBoxItem as string; string idsubj = cbMon.SelectionBoxItem as string; if (idclass == null) { cbLop.Focus(); return; } if (idsubj == null) { cbMon.Focus(); return; } string iduser = ((PageMain)App.Current.RootVisual).Cookie.Getkey("CurUserid"); Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 126 Nguyễn Anh Việt Lưu Xuân Việt // up filename,class,mon UploadFile(File1.Text, uploadfile, hashID(idclass), hashID(idsubj), iduser); File1.Text = msg1; Log(msg3); hasfile = false; } catch { } } private void UploadFile(string fileName, Stream data, int valclass, int valsubject, string users) { UriBuilder ub = new UriBuilder(linksite); ub.Query = string.Format("filename={0}&class={1}&subject={2}&user={3}", fileName, valclass, valsubject, users); WebClient c = new WebClient(); c.OpenWriteCompleted += (sender, e) => { PushData(data, e.Result); e.Result.Close(); data.Close(); }; c.OpenWriteAsync(ub.Uri); } private void PushData(Stream input, Stream output) { byte[] buffer = new byte[4096]; int bytesRead; Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 127 Nguyễn Anh Việt Lưu Xuân Việt while ((bytesRead = input.Read(buffer, 0, buffer.Length)) != 0) { output.Write(buffer, 0, bytesRead); } } Dữ liệu được đẩy lên Website thông qua HTTP OutputStream và Query của HTTP Request. Phía máy chủ (Server) xử lý nhận dữ liêu thông qua UploadHandler.ash: public class uploadhandler : IHttpHandler { static int nfileloaded = 2; //bien quanly tong so file da up //for debug string msgdebug; public void ProcessRequest (HttpContext context) { byte[] buffer = new byte[4096]; int bytesRead; string filename = context.Request.QueryString["filename"].ToString(); string idclass = context.Request.QueryString["class"].ToString(); string idsubj = context.Request.QueryString["subject"].ToString(); string iduser = context.Request.QueryString["user"].ToString(); string realclasspath = hashID(int.Parse(idclass)); string realsubjectpath = hashID(int.Parse(idsubj)); string webpath = context.Server.MapPath("~/ClientBin/Data") + "/" + realclasspath +"/"+ realsubjectpath; //gia su da co cay cau truc luu tru string filepath = webpath + "/" + filename.Remove(filename.LastIndexOf(".")); Stream inputStream = context.Request.InputStream; Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 128 Nguyễn Anh Việt Lưu Xuân Việt if (filename.Length == 0 || inputStream == null || idclass == null || idsubj == null || iduser == null) return; // bug kho' luong` // luu package trong thu muc mang ten "package" try { // luu file vau up de danh cho download neu can string fullpath = filepath + "/" + filename; if (!Directory.Exists(filepath)) Directory.CreateDirectory(filepath); if (!File.Exists(fullpath)) { FileStream fzs = File.Create(fullpath); while ((bytesRead = inputStream.Read(buffer, 0, buffer.Length)) != 0) { fzs.Write(buffer, 0, bytesRead); } fzs.Close(); } // luu cau truc file trong package inputStream.Position = 0; ZipInputStream zipStream = new ZipInputStream(inputStream); ZipEntry zippedFile = zipStream.GetNextEntry(); MemoryStream outputStream; while (zippedFile != null) { byte[] zbuffer = new byte[4094]; int zbytesRead; if (zippedFile.IsDirectory) // neu entry la directory { string subdir = filepath + "/" + zippedFile.Name; Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 129 Nguyễn Anh Việt Lưu Xuân Việt if (!Directory.Exists(subdir)) Directory.CreateDirectory(subdir); } if (zippedFile.IsFile) // la file { using (outputStream = new MemoryStream()) { // doc zipstream ra memory while ((zbytesRead = zipStream.Read(zbuffer, 0, zbuffer.Length)) != 0) { outputStream.Write(zbuffer, 0, zbytesRead); } outputStream.Position = 0; string fullfilepath = filepath + "/" + zippedFile.Name; if (!File.Exists(fullfilepath)) { // tao file tren web tu zipFile Entry FileStream fs = File.Create(fullfilepath); // ghi tu memmory ra file tren web while ((bytesRead = outputStream.Read(buffer, 0, buffer.Length)) != 0) { fs.Write(buffer, 0, bytesRead); } fs.Close(); } } } // next entry zippedFile = zipStream.GetNextEntry(); } }catch(Exception e){ msgdebug = e.ToString(); Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH } nfileloaded++; } 2. Các màn hình chính của công cụ soạn thảo a. Màn hình chính của công cụ soạn thảo SVTH: Thân Hoàng Lộc Trang 130 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH b. Màn hình tạo mới một bài giảng SVTH: Thân Hoàng Lộc Trang 131 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH c. Màn hình mở một bài giảng đã có để xem lại, chỉnh sửa… SVTH: Thân Hoàng Lộc Trang 132 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH d. Màn hình xem lại một bài giảng SVTH: Thân Hoàng Lộc Trang 133 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH e. Màn hình xem cấu trúc kịch bản của một bài giảng SVTH: Thân Hoàng Lộc Trang 134 Nguyễn Anh Việt Lưu Xuân Việt Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 135 Nguyễn Anh Việt Lưu Xuân Việt f. Quy trình lưu dữ liệu, đóng gói dữ liệu. Sau đây là phần trình bày quy trình đóng gói các dữ liệu để hổ trợ upload bài học lên website. Đoạn code sau mô tả việc sử dụng thư viện SharpZipLib để nén các file media và file cấu trúc thành một gói dữ liệu thuận tiện cho việc upload. private void BtnSave_Click(object sender, RoutedEventArgs e) { if (!HadOpen) return; if (CreatingLession) return; try { Stream mstr; string filename = ""; SaveFileDialog dlg = new SaveFileDialog(); dlg.Filter = "Xml File (*.xml)|*.xml|Package File (*.zip)|*.zip|All Files (*.*)|*.*"; dlg.FilterIndex = 1; dlg.Title = "Save EMedia Files"; dlg.InitialDirectory = wizard.getApplicationDirectory() + "Data"; //luu scriptlist if (dlg.ShowDialog() == true) { if ((mstr = dlg.OpenFile()) != null) { filename = dlg.SafeFileName; filename = filename.Remove(filename.IndexOf(".")) + ".xml"; StatusText1.Text = filename; using (StreamWriter wr = new StreamWriter(mstr)) { wr.Write(this._curless); } mstr.Close(); } } // yields, ngung` 1 lat SetTabPage(0); PropertiesText1.Text = thongbao3; for (int id = 0; id < 10; id++) Thread.Sleep(10); //luu package //get list if (filename.Length > 0) { Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 136 Nguyễn Anh Việt Lưu Xuân Việt List tmp = new List(); tmp.Add(filename); foreach (Section item in _newLession.secArray) { if (item.MediaType.Equals("video")) for (int id = 0; id < item.NumMedia; id++) tmp.Add(item.VideoSection[id]); else for (int id = 0; id < item.NumMedia; id++) tmp.Add(item.ImageSection[id]); } //zip , muc do: default string packagefilename = filename.Remove(filename.IndexOf(".")) + ".zip"; using (ZipOutputStream s = new ZipOutputStream(File.Create(packagefilename))) { byte[] buffer = new byte[4096]; foreach (string file in tmp) { ZipEntry entry = new ZipEntry(System.IO.Path.GetFileName(file)); entry.DateTime = DateTime.Now; s.PutNextEntry(entry); using (FileStream fs = File.OpenRead(file)) { int sourceBytes; do { sourceBytes = fs.Read(buffer, 0, buffer.Length); s.Write(buffer, 0, sourceBytes); } while (sourceBytes > 0); } } s.Finish(); s.Close(); } RunShell("Data"); } } catch { } } Sau khi thực hiện, chúng ta sẽ thu được kết quả là hai tập tin (file). Một file .zip để sử dụng upload nội dung đã soạn thảo (Nội dung bài giảng) lên website. File .xml là một file lưu lại cấu trúc soạn thảo mục đích cho giảng viên xem lại (Preview) nội dung bằng công cụ soạn thảo. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 137 Nguyễn Anh Việt Lưu Xuân Việt 3. Vấn đề hạn chế và định hướng phát triển mở rông. a. Vấn đề còn hạn chế. Nhìn qua toàn bộ website chủ yếu tập trung phần thiết kế giao diện trên môi trường ngôn ngữ silverlight nên một số chức năng nâng cao cho ứng dụng của đề tài còn thiếu như: tìm kiếm dữ liệu theo khóa định sẵn (search tag), forum hổ trợ trao đổi thông tin giữa các đối tượng, một panel portal mở rộng… Về công cụ hổ trợ soạn thảo: chưa hoàn thiện các chức năng xem và trình bày, chức năng đọc gói dữ liệu, hỗ trợ thanh công cụ thay đổi nội dung. b. Hướng phát triển cho Ứng dụng. Định hướng cho phần mềm - Xây dựng và hoàn thiện thêm môt số chứa năng: Search, quản lý thông tin bài giảng, … - Mở rộng chức năng của Website, thêm diễn đàn trao đổi (Forum)…để cho Website đa dạng và phong phú hơn. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 138 Nguyễn Anh Việt Lưu Xuân Việt Phụ lục A Các công cụ hỗ trợ Silverlight (Silverlight Tool) Nếu bạn chỉ muốn dùng Silverlight để xem những ứng dụng do người khác làm bạn có thể tải các phiên bản plug-in tại: Trong đó có phiên bản 1.0 và 2.0. Ngoài ra, nếu muốn tạo ra các ứng dụng Silverlight, bạn cần có thêm: Để cài đặt bộ công cụ chúng ta cần tiến hành các bước sau: Bước 1: Cài đặt Visual Studio 2008, sau đó update lên Microsoft Visual Studio 2008 Service Pack 1 (Installer) Bước 2: Cài đặt Microsoft Expression Blend, sau đó update lên Microsoft Expression Blend™ 2 Service Pack 1 Bước 3: Cài đặt Silverlight Tools for Visual Studio 2008 SP1 Tài liệu tham khảo - Ebook Apress.Silverlight Visual Essentials cuon 2.0 - Ebook OReilly.Essential.Silverlight.Sep.2007.pdf cuon 1.0 - MSDN Một số link URL: Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 139 Nguyễn Anh Việt Lưu Xuân Việt Phụ lục B Hướng dẫn sử dụng Công cụ soạn thảo bài giảng. • Công cụ soạn thảo bài giảng là một công cụ soạn thảo bài giảng điện tử hỗ trợ cho web BAIGIANGDIENTUONLINE. Với những tương tác trực quan cũng như cách diễn giải dễ hiểu sẽ giúp bạn thao tác tốt hơn. Công cụ soạn thảo bài giảng gồm có 3 chức năng chính : - Tạo một bài giảng mới. - Đọc một bài giảng và chỉnh sửa các mục, phần trong bài giảng. - Lưu và đóng gói bài giảng. • Hướng dẫn chi tiết sử dụng các chức năng : 1. Tạo một bài giảng mới : - Chọn mục “Tạo mới” trong menu “Chương trình” hoặc icon “Tạo mới” trên toolbar để tạo một bài giảng mới. - Chương trình hỗ trợ các bước soạn thảo bài giảng theo dạng wizard rất tiện để bạn thao tác. Wizard bao gồm 3 bước chính : Bước 1: Nhập tựa đề của bài giảng, mô tả bài giảng (sơ lược), số phần (section) trong bài giảng. Bước 2: Nhập chi tiết các phần trong bài giảng bao gồm : tựa đề, mô tả chi tiết, video hoặc hình ảnh đi kèm (nếu có). Bước 3: Hiện kết quả cây bài giảng, nếu bạn thấy chưa đúng có thể nhấn “Lùi” để quay trở về các bước trước để chỉnh sửa lại. Nhấn “Xong” để hoàn tất việc tạo bài giảng mới. - Lưu ý : Ở mỗi bước bạn nhấn “Hủy” để dừng việc soạn thảo lại. Khi soạn thảo xong một bài giảng mới phải lưu lại (chọn menu “Chương trình” → “Lưu” hoặc chọn icon “Lưu”). 2. Đọc một bài giảng và chỉnh sửa các mục, phần trong bài giảng. Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH SVTH: Thân Hoàng Lộc Trang 140 Nguyễn Anh Việt Lưu Xuân Việt Chọn mục “Mở” trong menu “Chương trình” hoặc icon “Mở” trên toolbar để mở một bài giảng của bạn. Đuôi file là .xml Bạn có thể xem, chỉnh sửa nội dụng của bài giảng và lưu những thay đổi. 3. Sau khi hoàn tất việc soạn bài giảng, chương trình sẽ hiển thị kết quả cây bài giảng ở bên phần trái của chương trình. Khi lưu chương trình sẽ tạo 2 file .xml và .zip. Khi upload lên website, ta sử dụng file đóng gói .zip để tải lên. Website sẽ tự bung nén và lấy nội dung bên trong thể hiện lên website. Chương trình còn một vài chức năng khác đang hoàn thiện như chức năng soạn text, chức năng, các phím tắt trên Menu... Để xem phần hướng dẫn này trên công cụ soạn thảo. Bạn chọn Menu “hướng dẫn” trên thanh Menu.