เริ่มต้นใช้งาน Extjs ใน Grails Part 1 :: การติดตั้ง

ในช่วงนี้กำลังจะมี project ใหม่ ซึ่งผมวางแผนไว้ว่าอาจจะใช้ Extjs มาทำงานร่วมกับ Grails ดังนั้นผมจึงเริ่มทำ POC เกี่ยวกับการใช้งาน Extjs ใน Grails ก่อน โดยจะแบ่งออกเป็น 2 ส่วนคือ

Part 1 => การติดตั้ง
Part 2 => การใช้งานทั่วไป

มาเริ่มต้นที่การติดตั้ง Extjs กัน
1. ผมทำการไปดู plugin Extjs ใน Grails พบว่าไม่มีการพัฒนาต่อไปอีกแล้ว เนื่องจากปัญหาสิขสิทธิ์ของ Extjs ดังนั้นทางออกที่ดีที่สุดคือ ติดตั้งเอง

2. ดังนั้นจึงทำการติดตั้งเองแบบง่ายๆ คือ Download Extjs 3.0.3

3. สร้าง grails application ขึ้นมาด้วยคำสั่ง
>grails create-app demo_extjs

4. ทำการ extract file ที่ download จากข้อ 2 ไปไว้ที่ folder /demo_extjs/web-app/js/ จากตัวอย่างผมนำไปวางไว้ที่ /demo_extjs/web-app/js/ext/

5. ทำการทดสอบการทำงานของ Extjs ใน Grails application ด้วยการ copy file ตัวอย่างใน folder examples ของ Extjs โดย copy file array-grid.js และ array-grid.html จาก folder /extjs/examples/grid/ ไปไว้ที่ folder /demo_extjs/web-app/ และแก้ไข path ต่างๆ จาก ../../ ด้วย js/ext/

6. ทำการ run application ด้วยคำสั่ง
>grails run-app

ทดสอบผ่าน url = http://localhost:8080/demo_extjs/array-grid.html จะแสดงผลดังรูป

สังเกตได้ว่าการ copy Extjs มาไว้ใน project ของเรายังเป็นแบบ manual ซึ่งหลายๆ คนบอกว่ามันยังไม่ DRY เท่าไร
ผมเลยไปค้นหาแล้วก็เจอวิธีการทำให้ DRY ขึ้นมาเล็กน้อย โดยใช้งานผ่าน GANT ดังนี้

1. หลังจากที่ download Extjs มาแล้วจะได้ file ext-3.0.0.zip และสร้าง grails application ชื่อว่า demo_extjs มาแล้ว ให้ทำการ copy ext-3.0.0.zip ไปไว้ที่ folder /demo_extjs/plugins/

2. ทำการสร้าง Script ชื่อว่า InstallExtjs ใน grails application ด้วยคำสั่ง
>grails create-script install-extjs

จะทำการสร้าง file /demo_extjs/scripts/InstallExtjs.groovy ขึ้นมา และแก้ไข file ดังนี้

import org.codehaus.groovy.grails.commons.GrailsClassUtils as GCU

grailsHome = Ant.project.properties."environment.GRAILS_HOME"
basedir = System.getProperty("base.dir")
extjsFile = "${basedir}/plugins/ext-3.0.0.zip"
jsDir = "${basedir}/web-app/js"
extDir = "${jsDir}/ext"
props = null

includeTargets << new File ( "${grailsHome}/scripts/Init.groovy" )

target('default': "The description of the script goes here!") {
    depends(setup)
    clean()
    install()
}

target(setup: "Sets up access to the Grails Config properites script") {
    Ant.property(file: "${basedir}/grails-app/conf/Config.groovy")
    props = Ant.antProject.properties
}

target(clean: "Removes any previous versions") {
    Ant.delete(dir: "${extDir}")
}

target(install: "Installs the latest version of extjs into the scripts folder") {
    Ant.unzip(src: "${extjsFile}", dest: "$jsDir")
    Ant.move(file: "${jsDir}/ext-3.0.0", tofile: "${extDir}")
    Ant.delete(dir: "${extDir}/docs")
    Ant.delete(dir: "${extDir}/examples")
    Ant.delete(dir: "${extDir}/source")
}

3. ทำการ run script นี้ด้วยคำสั่ง
>grails install-extjs

ผลที่ได้จะเหมือนกับตัวอย่างแรกที่ทำแบบ manual ครับ ลองทดสอบกันดูว่าชอบแบบไหน

การติดตั้งแบบนี้จะทำให้ความสามารถทางด้าน taglib ที่มีใน Extjs plugin หายไป [ ถ้าต้องการจะใช้ก็สามารถพัฒนาขึ้นมาเองได้ ]

ในส่วนต่อไป ผมจะยกตัวอย่างการพัฒนา Grails กับ Extjs เพื่อให้เข้าใจต่อไปครับ …

Website Reference
- Extjs Official
- Getting started with Grails and Extjs

Tags: extjs