Friday, March 2, 2012

Lesson 05: More attribute and custom toolPart


Exercise : Cơ bản về custom ToolPart
·        Tiếp tục với WebPartSoln
v    Exercise 01: Chuẩn bị tài nguyên cho webpart
Ø     Thêm mi Class Library Project  tên là CustomToolpartForWebpart
Ø     Click vào References | R-Right | Add Reference
Ø     Chọn Microsoft.Sharepoint.Dll vào  thư mục của  WebPartSoln
Ø     Tiếp tục chọn Tab .NET | System.Web
§        Khai báo Using
·        using System.Web;
·        using System.Web.UI;
·        using Microsoft.SharePoint;
·        using Microsoft.SharePoint.WebPartPages;
·        using System.Web.UI.WebControls;
§        Khai báo kế thừa từ WebPart Class cho Class1
Ø      Chọn Microsoft.Sharepoint.Dll vào  thư mục của  WebPartSoln
Ø     Vào thư mục Properties m file AssemblyInfo.cs
§        Di chuyển xuống phần cuối cùng của File AssemblyInfo.cs, thêm vào : (tùy với vị trí đặt Hkgsolution.snk).
·        [assemblyAssemblyKeyFile("..\\hkgsolution.snk")]
Ø     Build project ở chế độ Release và succsessfull
v    Exercise 02: Cơ bản về Toolpart
Ø     Tiếp tục với CustomToolpartForWebpart project
Ø     Thêm Class mới tên  WebpartWithToolPart.cs
Ø     Khai báo kế thừa từ Class Webpart
Ø     Khai báo attribute cho WebpartWithToolPart (lý do khai báo: webpart và c# truyền dữ liệu thông qua Object nên dữ liệu phải được Serialization)
Ø     Khai báo biến private kiểu string
§        Tên là listName
§        Default là: " My SharePoint List"
Ø     Khai báo properties  get và set là kiểu string
§        Tên là ListName
Ø     Khai báo biến private kiểu string
§        Tên là listId
§        Default là: " 123456"
Ø     Khai báo properties  get và set là kiểu string
§        Tên là ListId
Ø     Khai báo properties cho ListName và ListId
              private string listName = "My SharePoint List";
        [Browsable(false), Category("HKG Properties"),
        DefaultValue("Hello HKG"),
        WebPartStorage(Storage.Personal)]
        public string ListName
        {
            get { return listName; }
            set { listName = value; }
        }
        private string listId = "12345";
        [Browsable(false), Category("HKG Properties"),
        DefaultValue("Hello HKG"),
        WebPartStorage(Storage.Personal)]
        public string ListId
        {
            get { return listId; }
            set { listId = value; }
  }
Ø     Khai báo code trong phương thức CreateChildControls
§        Khởi tạo mới LiteralControl  tên là literalForListName
·        Gán biến  listName cho thuộc tính Text của literalForListName
·        Thêm literalForListName WebPart
protected override void CreateChildControls()
        {
            Literal literalForListName = new Literal();
            literalForListName.Text = listName;
            this.Controls.Add(literalForListName);

            Literal literalForListId = new Literal();
            literalForListId.Text = "<br>"+listId;
            this.Controls.Add(literalForListId);
        }
Ø     Thêm WebpartWithToolPart.dwp
<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" >
      <Title>WebpartWithToolPart</Title>
      <Description>WebpartWithToolPart</Description>
     <Assembly>CustomToolPartForWebpart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=ec47e7d9465cc36e</Assembly>
      <TypeName>CustomToolPartForWebpart.WebpartWithToolPart</TypeName>
      <!-- Specify initial values for any additional base class or custom properties here. -->
</WebPart>
Ø     Build project chế độ Release và Deploy WebPart
§        Copy CustomToolpartForWebpart.dll đến thư mục bin
§        Copy WebpartWithToolPart.dwp đến thư mục wpcatalog
§        Thêm thẻ <SafeControl>
<SafeControl Assembly="CustomToolpartForWebpart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=ec47e7d9465cc36e" Namespace="CustomToolpartForWebpart" TypeName="*" Safe="True" />
Ø     Quay lại sharepoint site
§        Thêm WebPart này đến WebPart page
§        Nhìn thấy " My SharePoint List "  ?
Ø     Nhấp vào dấu tam giác xuống | Modify Shared Webpart
§        Nhìn thấy " My SharePoint List "  xuất hiện trên toolpart ?
v    Exercise 03: Control ASP.NET trong toolpart
Ø     Tiếp tục với CustomToolpartForWebpart project
Ø     Thêm mới 1 class tên  ToolpartForWebpart.cs
§        Khai báo để sử dụng namespace SharePoint
·        using Microsoft.SharePoint;
§        Khai báo kế thừa từ Class ToolPart cho Class CustomToolpartForWebpart
·        public class ToolPartForWebpart:ToolPart
§        Khai báo DropDownList bên ngoài method CreateChildControls với giá trị mặc định là null ;
·        DropDownList dropDownList = null;
Ø     Khai báo code trong CreateChildControls
§        Khởi tạo mới 1 Table control tên là table
·        Gán thuộc tính cho table :Border,GridLine,….
·        Khởi tạo mới 1 TableRow control tên là tableRow
§        Khởi tạo mới 1 TableCell đầu tiên tên là: tableCell
ü     Gán chuỗi “ListName: ” cho thuộc tính Text
ü     Thêm tableCell vào tableRow
§        Tiếp tục khởi tạo TableCell thứ 2 với biến tableCell
ü     Khởi tạo mới 1 DropDownList tên là: dropDownList
ü     Thêm dropDownList control vào tableCell
ü     Khai báo sự kiện load cho dropDownList để load 1 vài ListName và ListId
ü     Thêm tableCell vào tableRow
§        Thêm tableRow vào table
§        Thêm tableRow vào WebPart
protected override void CreateChildControls()
        {
            Table tableLayout = new Table();
            tableLayout.Width = 200;
            TableRow tableRow = new TableRow();
            TableCell tableCell = new TableCell();
            tableCell.Text = "List Name: ";
            tableRow.Controls.Add(tableCell);
            tableCell = new TableCell();
            dropDownList = new DropDownList();
            tableCell.Controls.Add(dropDownList);
            dropDownList.Load += new System.EventHandler(dropDownList_Load);
            tableRow.Controls.Add(tableCell);
   this.Controls.Add(tableLayout);
}

void dropDownList_Load(object sender, System.EventArgs e)
        {
            DropDownList dropDownList1 = (DropDownList)sender;
            dropDownList.Items.Add(new ListItem("Ha Noi""HN"));
            dropDownList.Items.Add(new ListItem("Ho Chi Minh""HCM"));
  }
Ø     Build project chế độ Release và Deploy WebPart(làm tương tụ các bước trên)
Ø     Quay lại sharepoint site
§        Refesh WebPart này trên WebPart page
§        Nhìn thấy " My SharePoint List "  ?
v    Exercise 04: Sự liên hệ giữa webpart và toolpart
Ø     Tiếp tục với ToolpartForWebpart.cs
Ø     Mở Class WebpartWithToolPart và khai báo method GetToolParts
public override ToolPart[] GetToolParts()
        {
            ToolPart[] toolPart = new ToolPart[3];
            WebPartToolPart wptp = new WebPartToolPart();
            CustomPropertyToolPart custom = new CustomPropertyToolPart();
            ToolPartForWebpart toolPartForWebpart = new ToolPartForWebpart();
            toolPart[0] = wptp;
            toolPart[1] = custom;
            toolPart[2] = toolPartForWebpart;
            return toolPart;
 }
Ø     Mở Class ToolpartForWebpart
§        Tiếp tục trong method CreateChildControls
·        Lấy giá trị từ Properties ListName và ListId
·        Gán giá trị của chúng tới DropDownList
·        Chú ý: bạn đã chọn giá trị của DropDownList(XYZ)  trên Toolpart thì lần tiếp giá trị (XYZ)  đó vẫn được lưu lại trên Toolpar
     //continue with CreateChildControls
            WebpartWithToolPart webpart1 = (WebpartWithToolPart)this.ParentToolPane.SelectedWebPart;
            dropDownList.Items.Add(new ListItem(webpart1.ListName, webpart1.ListId));            
            dropDownList.SelectedValue = "HN";
            this.Controls.Add(dropDownList);
§        Khai báo code trong mẹthod ApplyChanges
        public override void ApplyChanges()
        {
            WebpartWithToolPart webpart1 = (WebpartWithToolPart)this.ParentToolPane.SelectedWebPart;
            webpart1.ListId = dropDownList.SelectedValue;
  }
Ø     Build project chế độ Release và Deploy WebPart(làm tương tụ các bước trên)
Ø     Quay lại sharepoint site
§        Refesh WebPart này trên WebPart page
§        Nhìn thấy DropDownList xuất hiện trên toolpart
Ø     Nhấp vào dấu tam giác xuống | Modify Shared Webpart
§        Nhìn thấy DropDownList xuất hiện trên toolpart
§        Chọn listName trên DropDownList
§        Thấy giá trị mới được thay đổi  trên webpart?
v    Exercise 05: webpart với ToolPart nâng cao
Ø     Tiếp tục với CustomToolpartForWebpart project
Ø     Thêm Class mới tên  WebpartForTwoToolPart.cs
§        Khai báo kế thừa từ Class Webpart
§        Khai báo thuộc tính có sẵn Title là “Advanced webpart and toolpart” trong Constructor
Ø     Khai báo attribute cho WebpartForTwoToolPart(lý do khai báo: webpart và c# truyền dữ liệu thông qua Object nên dữ liệu phải được Serialization)
Ø     Khai báo biến private kiểu string
§        Tên là firstBranch
§        Default là: " Developer  Informatics Education Center"
Ø     Khai báo properties  get và set là kiểu string
§        Tên là FirstBranch
Ø     Khai báo biến private kiểu string
§        Tên là secondBranch
§        Default là: " Developer  Software Center "
Ø     Khai báo properties  get và set là kiểu string
§        Tên là SecondBranch
Ø     Khai báo properties cho FirstBranch và SecondBranch
Ø     Khai báo code trong phương thức CreateChildControls
§        Khởi tạo mới Literal  tên là literalForFirstBranch
·        Gán biến  firstBranch cho thuộc tính Text của literalForFirstBranch
·        Thêm literalForFirstBranch vào WebPart
§        Khởi tạo mới Literal  tên là literalForSecondBranch
·        Gán biến  secondBranch cho thuộc tính Text của literalForSecondBranch
·        Thêm literalForSecondBranch vào WebPart
using System;

using System.Text;

using System.Web.UI;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebPartPages;

using System.ComponentModel;

using System.Xml.Serialization;

using System.Web.UI.WebControls;





namespace CustomToolPartForWebpart

{

    [DefaultProperty("Text"),

      ToolboxData("<{0}:WebpartForTwoToolPart runat=server></{0}:WebpartForTwoToolPart>"),

      XmlRoot(Namespace = "CustomToolPartForWebpart")]

    public class WebpartForTwoToolPart:WebPart

    {

        public WebpartForTwoToolPart()

        {

            this.Title = "Advanced Webpart and Toolpart";

        }

        private string firstBranch = "HKG Informatics Education Center";

        [Browsable(false), Category("HKG Properties"),

        DefaultValue("Hello HKG"),

        WebPartStorage(Storage.Personal)]

        public string FirstBranch

        {

            get { return firstBranch; }

            set { firstBranch = value; }

        }

        private string secondBranch = "HKG Software Development Center";

        [Browsable(false), Category("HKG Properties"),

        DefaultValue("Hello HKG"),

        WebPartStorage(Storage.Personal)]

        public string SecondBranch

        {

            get { return secondBranch; }

            set { secondBranch = value; }

        }





        protected override void CreateChildControls()

        {

            Literal literalForFirstBranch = new Literal();

            literalForFirstBranch.Text = firstBranch;

            this.Controls.Add(literalForFirstBranch);





            Literal literalForSecondBranch = new Literal();

            literalForSecondBranch.Text = "<br>"+secondBranch;

            this.Controls.Add(literalForSecondBranch);

        }

        public override ToolPart[] GetToolParts()

        {

            ToolPart[] toolPart = new ToolPart[4];

            WebPartToolPart wptp = new WebPartToolPart();

            CustomPropertyToolPart custom = new CustomPropertyToolPart();

            FirstToolPart firstToolPart = new FirstToolPart();

            TwoToolPart twoToolPart = new TwoToolPart();

            toolPart[0] = wptp;

            toolPart[1] = custom;

            toolPart[2] = firstToolPart;

            toolPart[3] = twoToolPart;

            return toolPart;

        }

    }

}



Ø     Thêm WebpartForTwoToolPart.dwp
<?xml version="1.0" encoding="utf-8"?>

<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" >

      <Title>WebpartForTwoToolPart</Title>

      <Description>WebpartForTwoToolPart</Description>

     <Assembly>CustomToolPartForWebpart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=ec47e7d9465cc36e</Assembly>

      <TypeName>CustomToolPartForWebpart.WebpartForTwoToolPart</TypeName>

      <!-- Specify initial values for any additional base class or custom properties here. -->

</WebPart>
Ø     Build project chế độ Release và Deploy WebPart
Ø     Quay lại sharepoint site
§        Thêm WebPart này đến WebPart page
§        Nhìn thấy " Developer  Informatics Education Center  " .. ?
v    Exercise 05: Kết nối ToolPart nâng cao với webpart
Ø     Tiếp tục với CustomToolpartForWebpart project
Ø     Thêm mới 1 class tên  FirstToolPart.cs
§        Khai báo để sử dụng namespace SharePoint
§        Khai báo kế thừa từ Class ToolPart cho Class FirstToolPart
§        Khai báo thuộc tính có sẵn Title là “The First ToolPart” trong Constructor
Ø     Khai báo code trong CreateChildControls
§        Khai báo và khởi tạo TextBox tên txtFirstBranch
§        Khai báo code để lấy giá trị của FirstBranch đến txtFirstBranch
§        Thêm txtFirstBranch đến webpart
Ø     Khai báo code trong ApplyChanges
§        Gán txtFirstBranch cho properties FirstBranch
using System.Web.UI;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebPartPages;

using System.ComponentModel;

using System.Xml.Serialization;

using System.Web.UI.WebControls;





namespace CustomToolPartForWebpart

{

    public class FirstToolPart:ToolPart

    {

        public FirstToolPart()

        {

            this.Title = "This is First Toolpart";

        }

        TextBox txtFirstBranch = null;

        protected override void CreateChildControls()

        {

            txtFirstBranch = new TextBox();

            this.Controls.Add(txtFirstBranch);

        }

        public override void ApplyChanges()

        {

            WebpartForTwoToolPart webpart = (WebpartForTwoToolPart)this.ParentToolPane.SelectedWebPart;

            webpart.FirstBranch = txtFirstBranch.Text;

        }

    }

}
Ø     Thêm mới 1 class tên  SecondToolPart.cs
§        Khai báo để sử dụng namespace SharePoint
§        Khai báo kế thừa từ Class ToolPart cho Class SecondToolPart
§        Khai báo thuộc tính có sẵn Title là “The Second ToolPart” trong Constructor
Ø     Khai báo code trong CreateChildControls
§        Khai báo và khởi tạo TextBox tên txtSecondToolPart
§        Khai báo code để lấy giá trị của SecondToolPart đến txtSecondToolPart
§        Thêm txtSecondToolPart đến webpart
Ø     Khai báo code trong ApplyChanges
§        Gán txtSecondToolPart cho properties SecondToolPart
using System.Web.UI;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebPartPages;
using System.ComponentModel;
using System.Xml.Serialization;
using System.Web.UI.WebControls;
using System.Reflection;
using System.IO;
using System.Drawing;


namespace CustomToolPartForWebpart
{
    public class TwoToolPart:ToolPart
    {
        public TwoToolPart()
        {
            this.Title = "This is second Toolpart";
        }
        TextBox txtSecondBranch = null;
        protected override void CreateChildControls()
        {
            try
            {
                txtSecondBranch = new TextBox();               
                this.Controls.Add(txtSecondBranch);

            }
            catch (System.Exception)
            {

                throw;
            }
        }
        public override void ApplyChanges()
        {
            WebpartForTwoToolPart webpart = (WebpartForTwoToolPart)this.ParentToolPane.SelectedWebPart;
            webpart.SecondBranch = txtSecondBranch.Text;
        }
    }
}
Ø     Build project chế độ Release và Deploy WebPart(làm tương tụ các bước trên)
Ø     Quay lại sharepoint site
§        Thêm webpart này vào WebPart page
§        Nhấp vào dấu tam giác xuống | Modify Shared Webpart
§        Nhìn thấy hai toolpart xuất hiện ?
Exercise 06: Ứng dụng nhúng hình ảnh vào dll và hiển thị lên ToolPart
Bước 1: tạo 1 folder Image để chứa hình(tên folder tùy ý)

Bước 2: copy 1 tấm hình vào folder Image(tên image tùy ý)

Bước 3: Click phải vào tấm hình chọn Properties | Build Action | Embedded Resource

Bước 4: mở file AssemblyInfo thêm  vào bên dưới

[assemblyWebResource("CustomToolPartForWebpart.Image.laptop.png","image/png")]

CustomToolPartForWebpart: tên namespace

Image : tên folder

laptop.png : tên hình

"image/png" : resource là image có đuôi mở rộng giống như hình trong folder

Bước 5: thêm đoạn code này vào Class

System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image();

                image.ImageUrl = Page.ClientScript.GetWebResourceUrl(

                    typeof(CustomToolPartForWebpart.TwoToolPart), @"CustomToolPartForWebpart.Image.laptop.png");

                this.Controls.Add(image);

CustomToolPartForWebpart : Tên namespace

TwoToolPart : Tên Class

0 comments:

Post a Comment