[K2 SmartForms] – Custom Control for Beginner

สวัสดีครับ กลับมาคราวนี้เรามาเจอกันกับการเขียน SmartForms Custom Control ที่หลายๆ คนอยากรู้กัน ใน blog แรกของ series SmartForms Custom Control นี้ จะเน้นที่การอธิบายวิธีการเตรียมตัว กับส่วนประกอบของ custom control กันก่อน

ก่อนที่จะเริ่มเขียนกัน ให้ไป download Visual Studio Template จาก http://community.k2.com/t5/K2-blackpearl/Visual-Studio-Project-Templates-for-K2-blackpearl-Extensions/ba-p/1081 ซะก่อน (เลือก template version ตาม Visual Studio ที่เราจะใช้ด้วยนะครับ) การมี template จะช่วยให้เราสร้าง custom control ได้ง่ายขึ้น

หลังจาก download และลงเรียบร้อยแล้ว เราก็มาเริ่มขั้นแรกคือ สร้าง Custom Control Project ขึ้นมา โดยให้เลือกเป็น “Custom SmartForm Control Project”

01

หลังจากสร้างแล้ว เราจะได้ project หน้าตาตามด้านล่าง

ccb01

จะเห็นว่า project template add batch file สำหรับ register control มาให้ด้วย รวมถึง signing key ที่จำเป็นในการสร้าง custom control สิ่งที่เราจะทำถัดไปคือ add new item เข้ามาใหม่ ในส่วนของ SmartForms จะมี 2 แบบคือ Server Control กับ Client Control ในกรณีของเราให้เลือกเป็น Client Control

ccb03

หลังจาก Add Client Control มาแล้ว เราจะได้ folder เพิ่มเข้ามา พร้อมทั้ง file ที่ต้องใช้ในการทำ custom control คือ

  1. File .cs => สำหรับใส่คำสั่งที่เป็น server side
  2. File .xml => สำหรับ register control เข้ากับ K2 โดยจะมีรายละเอียดต่างๆ ของ control
  3. File .js => สำหรับใส่คำสั่งที่เป็น client side (มีได้มากกว่า 1 file)
  4. File .css => สำหรับใส่ stylesheet เฉพาะของ control (มีได้มากกว่า 1 file)

ccb02

โดย file .xml, .js และ .css ต้องเลือก property ของ Build Action ของ file เป็น “Embedded Resource” ด้วย (file ที่ template สร้างให้จะเป็น Embedded Resource) อยู่แล้ว

ccb04

สำหรับ blog แรกเกี่ยวกับ Custom Control ขอจบที่การอธิบายส่วนประกอบเท่านี้ก่อน ส่วนครั้งหน้าเราจะทำเริ่มทำ custom control จริงๆ กันครับ 🙂

 

 

Advertisements

One thought on “[K2 SmartForms] – Custom Control for Beginner

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s