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

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 1 Nguyễn Anh Việt Lưu Xuân Việt Phần I: TỔNG QUAN VỂ SILVERLIGHT Chương 1: GIỚI THIỆU VỀ SILVERLIGHT I. KHÁI QUÁT SILVERLIGHT Microsoft Silverlight là một công nghệ đa nền, đa trình duyệt dựa trên nền .NET dùng để xây dựng và phát triển một thế hệ ứng dụng Web và thiết bị mới, đầy tính tương tác và hỗ trợ tối đa về media (phương tiện truyền thông). Hiện nay Silverlight đang có hai phiên bản là Silverlight 1.0 dùng phát triển ứng dụng bằng ngôn ngữ Javascript và một phiên bản Silverlight 2.0 bằng các ngôn ngữ .NET framework (khung) như C# hay VB.NET. Bên cạnh đó công nghệ Silverlight còn được hỗ trợ bởi ngôn ngữ đánh dấu XAML (extensible application markup language – Ngôn ngữ đánh dấu mở rộng) đầy sức mạnh trong việc thể hiện giao diện người dùng. Có thể nói công nghệ Silverlight đã thống nhất được tất cả các khả năng của server, Web và ứng dụng desktop, của code .NET, của ngôn ngữ hình thể và ngôn ngữ truyền thống và sức mạnh của Windows Presentation Foundation (WPF). Để cuối cùng tạo ra một ứng dụng mà người dùng phải thấy thích. Một số người cho rằng công nghệ Silverlight của Microsoft sẽ là “sát thủ” của Adobe Flash. Nhưng hiện tại thì chưa thể biết được điều gì, vì cả hai công nghệ này đều được sử dụng bằng plug in của trình duyệt, cả hai đều hỗ trợ đồ họa vector, âm thanh, phim ảnh, animation và ngôn ngữ script. Về mặt căn bản thì công nghệ này có sự khác biệt. Trong khi Flash sử dụng định dạng nhị phân semi-open, thì Silverlight dựa trên nền WPF. Thực tế trước khi công nghệ mới này của Microsoft được đặt tên là Silverlight thì nó đã có tên mã là WPF/e (Windows Presentation Foundation Everywhere). 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 2 Nguyễn Anh Việt Lưu Xuân Việt Điểm quan trọng nhất trong công nghệ Silverlight là hệ thống đồ họa con được hỗ trợ bởi một nhánh trong WPF, bao gồm các đoạn mã thể hiện âm thanh, phim ảnh. Được công bố tại Mix’07 vào tháng 5 năm 2007, SilverLight mang đến cho thế giới một cơn bão với một cái nhìn về Adobe Flash giống như ứng dụng Internet (RIAs) được xây dựng trên một nền cơ bản, mở ra cách tiếp cận với HTML và XAML sử dụng các công cụ như VisualStudio .NET và Microsoft Blend.Ý tưởng cho SilverLight thì không có gì mới, Microsoft đang nói về công nghệ gọi là WPF/e trước đây hơn 1 năm.Quan tâm đầy đủ thì đây là sự lẫn lộn xung quanh WPF/e có nghĩa là gì, tên cần thay đổi với cái gì đó hoàn toàn khác, một tên mà không liên quan tới WPF/e với khách hàng thông minh, thế hệ kế tiếp của nền Giao diện người dùng (UI) Nền tảng biểu diễn Windows( WPF). Ý tưởng của chữ e ở cuối WPF là chuyển WPF đi khắp mọi nơi. Nhưng đây đơn giản không phải là một trường hợp. WPF này là một phần nhân của .NET 3.0 và yêu cầu 30MB khi chạy. WPF/e có 2MB khi download, chạy trong bộ trình duyệt, và chạy trên nhiều nền tảng khác nhau.Và nhiều nền ở đây không có nghĩa là WindowsXP và WindowsVista; Nó có nghĩa là Windows và Apple Macintosh.Nó hoạt động trên bộ trình duyệt web safari trong Apple Macintosh được phục vụ từ một Máy chủ web Apache chạy trên Linux. Tên WPF/e không phải là đại diện đầy đủ cho việc đáng kinh ngạc của công nghệ mới này, vì vậy mà SilverLight đựơc công bố như tên mới tại Mix’07. Kiến trúc của Silverlight cũng khá phức tạp. Hệ thống đồ họa đảm bảo mọi thứ cho giao diện người dùng, như animation, text, âm thanh, hình ảnh. Plug-in được tích hợp vào trình duyệt để thể hiện ứng dụng Silverlight, để giao tiếp bằng JavaScript DOM và ứng dụng Silverlight có thể gọi các hàm trên server như một dạng web service. Dù người phát triển ứng dụng là người phát triển web hay người thiết kế đồ họa thì Silverlight đều tạo điều kiện tốt nhất để người đó có thể phát huy tối đa khả năng của mì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 3 Nguyễn Anh Việt Lưu Xuân Việt 1. Silverlight (Ánh sáng bạc) là gì? SilverLight đơn giản là một nền Web được xây dựng để chạy RIAs. Một phần của nền web đó thực chất là một Plug -in mà chạy bên trong bộ trình duyệt. - Silverlight là một nền chéo, nền trình duyệt chéo của RIAs - Silverlight hỗ trợ phát lại Windows Media và các file âm thanh trên PC và MAC mà không phụ thuộc v ào Windows Media Player - Sử dụng XAML, HTML, và JavaScript, nó hỗ trợ đồ họa, hoạt ảnh, đa phương tiện và mở rộng ra hơn những gì mà AJAX có thể hỗ trợ. - Gói lắp đặt nhỏ hơn 6MB. - XAML được tạo ra cho SilverLight có thể được sử dụng trong những ứng dụng WPF Microsoft Silverlight là một plug-in dựa trên .NET, độc lập với nền tảng và trình duyệt cho phép phát triển các ứng dụng đa phương tiện và nặng về tương tác trên Web. Silverlight cung cấp một mô hì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ữ trên nền .NET như Visual Basic và C#, và có thể tích hợp và o các ứng dụng Web sẵn có. Các khả năng về đa phương tiện của Silverlight bao gồm truyền tải dữ liệu hình ảnh, âm thanh chất lượng cao một cách nhanh chóng và hiệu quả về chi phí trên tất cả các trình duyệt chính như FireFox, Safari, và Internet Explorer chạy trên nền Mac hoặc Windows. Với Expression Studio và Visual Studio, nhà phát triển và nhà thiết kế có thể hợp tác một cách hiệu quả, dùng các kỹ năng hiện có để phát triển các sản phẩm Web tương lai. 2. Silverlight – Ứng dụng cơ bản với sự phong phú trong đồ họa và tương tác với người dùng (User). Người lập trình Web và thiết kế đồ họa có thể tạo ra nhiều ứng dụng Silverlight cơ bản với sự đa dạng trong cách thể hiện. Ta cũng có thể sử dụng Silverlight Markup để tạo ra Media và Graphics và vận dụng chúng với sự đa dạng của ngôn ngữ và quản lý Code. 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 4 Nguyễn Anh Việt Lưu Xuân Việt Silverlight cũng cho phép bạn sử dụng những công cụ chất lượng chuyên nghiệp như Visual Studio cho coding và Microsoft Expression Blend cho thiết kế hình ảnh và giao diện. 3. Nét đặc trưng của Silverlight. Silverlight kết hợp nhiều kỹ thuật trong việc phát triển một nền tảng đơn mà cho phép ta chọn lựa những công cụ và ngôn ngữ lập trình thích hợp mà ta cần tới. Các tính năng của Silverlight: - WPF và XAML: Silverlight gồm có một tập kỹ thuật con WPF (Windows Presentation Foundation) gồm nhiều thành phần mở rộng trong trình duyệt dành cho UI. WPF cho phép ta tạo ra những hình ảnh, hoạt cảnh (amination), media và nhiều nét đặc trưng phong phú trên máy trạm (Client), phần mở rộng của trình duyệt cơ bản UI ngoại trừ những gì chỉ có hiệu lực với HTML. XAML (Extensible Application Markup Language) cung cấp một cú pháp khai báo “Markup” tạo ra các phần tử để xây dựng những ứng dụng Silverlight cơ bản như: text, controls, graphics, và animation. - Mở rộng với JavaScipt. Silverlight không những cung cấp những phần mở rộng của các ngôn ngữ kịch bản trong nhiều trình duyệt phổ biến mà còn cung cấp các “Control” bên trong trình duyệt UI, bao gồm cả khả năng làm việc với các phần tử WPF. - Hỗ trợ những nền tảng (platform), trình duyệt đa nhiệm. Silverlight chạy trên hầu hết các trình duyệt đa nhiệm (Bất kỳ nền tảng nào). Chúng ta có thể thiết kế và trình bày mà không phải lo lắng về vấn đề trình duyệt nào hoặc nền tảng nào (platform) và người sử dụng có hay không. - Tương thích với mọi ứng dụng hiện tại. Silverlight tương thích hoàn toàn với với mã JavaScript, ASP.NET AJAX hiện nay kể cả những hàm mở rộng ta đã khởi tạo. Ta có thể khởi tạo một tài nguyên cơ bàn trên máy chủ (Server) trong ASP.NET và 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 5 Nguyễn Anh Việt Lưu Xuân Việt sử dụng khả năng của AJAX trong ASP.NET để tương tác với tài nguyên đó mà không cần ngắt người dùng. - Truy xuất kiểu lập trình .NET Framework và những công cụ kết hợp. Ta có thể tạo một ứng dụng Silverlight cơ bản sử dụng các ngôn ngữ chức năng như: IronPython, hay ngôn ngữ gần gũi hơn như: C#, Visual Basic. Ta cũng có thể sử dụng những công cụ triển khai như Visual Studio để tạo những ứng dụng Silverlight cơ bản. - Mạng hỗ trợ. Silverlight được hỗ trợ HTTP qua giao thức TCP. Ta có thể kết nối những dịch vụ: WCF, SOAP, hoặc ASP.NET AJAX và thu nhận dữ liệu XML, JSON, hoặc RSS. 4. Chạy Silverlight cơ bản. - Ứng dụng Silverlight cơ bản chạy trên các trình duyệt. Những ứng dụng được tạo ra trong Silverlight chắc chắn sẽ chạy được trên các trình duyệt mà không cần phải thêm một đoạn mã (Code) mới nào. Để chạy được những ứng dụng Silverlight cơ bản này, người dùng (User) cần đến 1 trình nhúng (Plug-in) nhỏ vào trong trình duyệt. Plug-in này hoàn toàn miễn phí. Nếu người dùng chưa cài đặt Plug-in, chúng sẽ tự động nhắc người dùng cài đặt vào. Việc tải về và cài đặt chỉ trong vòng vài giây và phụ thuộc vào việc mong muốn hay loại bỏ việc cài đặt phía người dùng. 5. Tạo một ứng dụng Silverlight cơ bản. Chúng ta có thể tạo một ứng dụng Silverlight cơ bản sử dụng bất kỳ .NET Framework nào với sự hỗ trợ của ngôn ngữ (bao gồm Visual Basic, C#, và JavaScript). Visual Studio 2008 và Expression Blend cung cấp và hỗ trợ cho sự phát triển ứng dụng Silverlight. Chúng ta cũng có thể tạo một trang Web mà sử dụng cả hai phần tử WPF và HTML với Silverlight. Cũng giống như HTML, XAML cũng cho phép ta tạo ra những UI cho những nền ứng dụng Web với những cú pháp đã khai báo. Nhưng có sự khác biệt là XAML cung cấp nhiều phần tử mạnh mẽ 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 6 Nguyễn Anh Việt Lưu Xuân Việt II. BẢN ĐỒ SILVERLIGHT Chủ đề này cung cấp một cái nhìn tổng thể về những nét đặc trưng chính trong việc phát triển ứng dụng cơ bản Silverlight. Nó bao gồm những bước phổ biến để tạo một ứng dụng cơ bản Silverlight với những đoạn code ví dụ giúp bạn trong những bước đầu viết code. Chủ đề này bao gồm những phần sau: • Prerequisites • Integrating Silverlight into Applications • XAML • Layout • Controls • Adding Code Logic • Dynamic Languages • Graphics • Media and Animation • Data • Networking • Related Topics 1. Yêu cầu cơ bản (Prerequisites) Bạn có thể chạy tất cả các ví dụ có trong chủ đề này mà không cần cài đặt thêm bất cứ cái gì ngoại trừ trình thực thi Silverlight 2. Bên cạnh đó, nếu bạn muốn thêm vào hay sửa đổi ví dụ, bạn sẽ cần phải thêm những công cụ Silverlight và làm việc với một đề án (project) Silverlight. Chủ đề này sử dụng ứng dụng API cho Silverlight. Bạn cũng cần phải trình bày ứng dụng nền Silverlight sử dụng JavaScript API cho Silverlight. 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 7 Nguyễn Anh Việt Lưu Xuân Việt 2. Hòa nhập Silverlight bên trong những ứng dụng (Integrating Silverlight into Applications) Một ứng dụng nền Silverlight là nó chứa đựng những gì đã được tải lên bởi trình nhúng Silverlight (Silverlight plug-in) lên trên một trang HTML. Trình nhúng Silverlight có thể lấp đầy trang HTML hoặc chỉ một phần trống nào đó. Mặc định, một đề án Visual Studio cho phép trình nhúng chiếm 100% chiều dài và chiều rộng một trang. Nếu bạn muốn chỉ 1 phần ứng dụng sử dụng Silverlight, bạn có thể gọi chúng trong trang HTML từ đoạn mã Silverlight và ngược lại. 3. XAML XAML là một ngôn ngữ dựa trên XML, ngôn ngữ này cho phép bạn có thể xây dựng giao diện của các ứng dụng rất dễ dàng và nhanh chóng, bạn chỉ cần khai báo các thành phần có trên giao diện của ứng dụng cùng với các thuộc tính của nó, khi chạy chương trình sẽ hiển thị giống như bạn đã khai báo. Điều này cho phép tách bạch được giữa việc thiết kế giao diện và việc hiện thực hóa các tính năng. XAML có trong Silverlight là một tập con của XAML trên .NET 3.0, trong đó đã bị hạn chế một số tính năng như đồ họa 3D nhằm giữ tính tương thích trên nhiều nền tảng và trình duyệt khác nhau. Bạn có thể tạo tất cả các UI của mình trong XAML, hoặc bạn có thể sử dụng Microsoft Expression Blend để xây dựng các UI trong ứng dụng của mình. Expression Blend là một bộ công cụ thiết kế với giao diện thiết kế WYSIWYG để tạo nên những trình ứng dụng nền Silverlight. Expression Blend sinh ra một file XAML mà bạn có thể dùng để soạn thảo trực tiếp. Bạn cũng có thể móc nối những sự kiện và viết code-behind với Expression Blend. 4. Layout Khi tạo một ứng dụng nền Silverlight, điều đầu tiên bạn cần phải làm là xác định việc bố trí giao diện (UI) như thế nào. Silverlight cung cấp 3 loại panel bố trí để bạn 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 8 Nguyễn Anh Việt Lưu Xuân Việt thể sử dụng. Trong 3 loại đó, panel Grid có tính chất mềm dẻo và mạnh mẽ nhất, do đó giá trị mặc định ban đầu là Grid Container Mô tả Canvas Vị trí tuyệt đối của những phần tử con trong không gian x,y. StackPanel Vị trí tương đối của 1 phần tử con với một phần tử khác theo chiều ngang hoặc chiều dọc. Grid Vị trí của những phần tử con trong hàng và cột. Trong ví dụ dưới đây, một phần tử hình chữ nhật là chỗ ô 1,1 của 1 Grid. Grid sử dụng chỉ mục bắt đầu là 0, vì vậy hình chữ nhật xuất hiện ở ô phải-dưới. XAML <Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Rectangle Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/> Báo cáo đồ án tốt nghiệp GVHD: TS. NGUYỄN CHÁNH THÀNH </Grid> Hình 1 5. Control Control trong Silverlight cho phép bạn đưa ra những chỉ mục chính, hoặc những control khác và bạn có thể thiết kế thay đổi trạng thái cách hiển thị đến người dùng. Những loại Control trong hàm xử lý từ những phần tử mà cho phép người dùng tương tác như Button hoặc TextBox tới những phần tử bố trí những thông tin phức tạp hơn như DataGrid. Xuyên suốt Silverlight với những ví dụ mẫu mặc định cho mỗi loại Control và thấy được cách dùng những Control như thế nào. Tuy nhiên, bạn cũng có thể tạo nên những mẫu riêng thay đổi sự xuất hiện và cách cách xử lí nhìn trực quan hơn đối với tất cả các Control. Tiếp theo ví dụ ở trên, Chúng ta thêm một Button vào ô 0,0 của Grid. XAML SVTH: Thân Hoàng Lộc Trang 9 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 <Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Button Height="25" Width="100" Grid.Column="0" Grid.Row="0"/> <Rectangle Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/> </Grid> Hình 2 SVTH: Thân Hoàng Lộc Trang 10 Nguyễn Anh Việt Lưu Xuân Việt