Sunday, February 26, 2012

Hello SilverLight In Sharepoint


Mở Visual Studio 2010 tạo mới 1 solution
1.       Thêm mới 1 Project vào Solution chọn template cho project là Silverlight Application với tên HelloSilverlight
2.       Sau khi ok Dialog box hiện ra bạn chọn ASP.NET Web Application Project
3.       Sau khi Project được tạo xong bạn thay cấu trúc thư mục như sau: 1 project Silverlight và 1 project web để test.
               a.       project Silverlight:
                      ü  App.xaml (dùng để cấu hình giống như file global.asax ở asp net)
                     ü  MainPage.xaml: là file thiết kế Silverlight gồm file design và file viết code
               b.      project web:
                     ü  Thư mục ClientBin: Chứa file .xap để hiển thị lên browser
                     ü  HelloSilverlightTestPage: dùng để test silverlight application
                     ü  Silverlight.js:  Chứa những javascript dùng cho ứng dụng Silverlight
                   

4.       Bây giờ bạn có thể thiết kế silverlight application, bạn click phải vào  MainPage.xaml chọn View Designer

5.       Giao diện như sau:
6.  Trong thẻ Grid bạn có thể kéo các control vào, bạn kéo 1 TextBlock control vào đặt Name="HelloSilverlight" Text="Hello Silverlight"
    
  7.       Sau khi viết code xong bạn Build project (Shift + F6)
8.       Sau khi build bạn thấy trong thư mục ClientBin của Project xuất hiện file .xap (HelloSilverlight.xap)
        

9.       Bạn nhấn F5 để test Silverlight đã được tạo thành công !!!
         

10.   Bạn có thể thay đổi Project  được chạy khi nhấn F5 tại trong App.xaml.cs :

Sau khi đã hoàn tất việc tạo Silverlight Application, chúng ta bắt đầu nhúng Silverlight vào trong Sharepoint.
11.   Thêm 1 project Sharepoint  vào solution (Chọn Node Sharepoint Expand node và chọn 2010 và chọn template Empty SharePoint Project và đặt tên là DeployHelloSilverlight)

12.       Nếu xuất hiện lỗi thế này nghĩa là Visual phải được mở với Administrator bạn save và tắt Visual
13.       Bạn mở Visual với Administrator, bạn click phải vào Visual và chọn Run as administrator
           

14.       Sau khi mở bạn thêm lại Project Sharepoint 
a.       Chọn web application của bạn để triển khai (http://url_site)
b.      Deploy với Sandboxed/farm Solution
c.       Sau khi tao xong project, bạn Add new Item đến Project  DeploySilverlight (Chọn template là Module và đặt tên là HelloSilverlightModule)
15.   Sau khi tạo xong bạn thấy giao diện như sau và bạn xoá file text Sample.txt:
      

16.   Sau đó bạn click phai vào Module HelloSilverlightModule chọn properties

17.    cửa sổ properties hiện ra bạn chọn Project Output References và chọn … như hình
         

18.   Dialog Box hiện ra và bạn nhấn button Add

  • Tại thuộc tính Deployment Type bạn chọn Element File
  • ProjectName chọn project Silverlight HelloSilverlight
       
  • Sau khi cấu hình xong bạn se thấy path và Url như sau
  • Chú ý copy Url để bước sau cấu hình cho sharepoint nhận được Project Silverlight nào
        
19.   Bạn build Project Sharepoint và Deploy nó

      20. Sau khi Deploy thành công bạn mở Sharepoint Web của bạn lên và Add webpart vào 1 page tuỳ ý:
            a.  Bạn chon Site Action | Edit Page
             
        
b.      Add Webpart trong WebpartZone
c.       Trong ngăn Categories chọn Media and Content | Silverlight Web Part và nhấn nút  Add

 d.  Sau khi Add xuất hiện Dialog Box yêu cầu nhập vào đường dẫn đến file .xap (bạn copy Url ở trong file Element.xml) là /HelloSilverlightModule/HelloSilverlight.xap
e.      Bạn chọn Ok và hiển thị được Silvelight như sau là thành công !!!!!!!!!!!
            

0 comments:

Post a Comment