ทำความรู้จักกับ WebJars

(หมายเหตุ: WebJars ใช้ได้เฉพาะ Server ที่รองรับ Servlet 3.0 ขึ้นไปเท่านั้น) เมื่อครั้งที่ผมจะลอง Twitter Bootstrap ที่เป็น front-end Framework ที่ได้รับความนิยมมากตัวหนึ่ง ให้ทำงานร่วมกับ Play Framework หรือตอนที่พยายามใช้ร่วมกับ Maven + Spring MVC จะพบปัญหาเกี่ยวกับการ Setup ตัว Bootstrap มาก ทั้งเรื่องการจัดวางโฟลเดอร์ที่ไม่เหมือนกัน ทั้งตัว Bootstrap เองก็มีการ hardcode ตำแหน่งเก็บรูปภาพที่ใช้เป็น icon เอาไว้ พอค้นวิธี setup จากหลายๆ เว็บก็เจอใน stackoverflow ว่ามีคนหนึ่งแนะนำให้ใช้ WebJars ซึ่งตอนแรกผมก็คิดว่าทำไมต้องทำลง jar ด้วยหว่า จนได้มาลองเองก็เลยรู้ว่ามันก็สบายดีนะ

Hello world with Maven and Bootstrap WebJars

WebJars รองรับ build tool หลายตัว ผมเลือก maven เพราะกำลังเล่นอยู่😀

  1. New maven webapp project มาหนึ่งตัว
  2. ไปหน้าเว็บ http://www.webjars.org/ แล้วเลือก build tool เป็น maven จากนั้นเลื่อนลงมาซักหน่อยก็จะพบ Bootstrap ก็ก็อปมาวางใน pom.xml ได้เลย หน้าตาประมาณนี้
    <dependency>
       <groupId>org.webjars</groupId>
       <artifactId>bootstrap</artifactId>
      <version>3.0.0</version>
    </dependency>
    
  3. อย่าลืมเพิ่ม tomcat plugin ด้วยนะครับ
  4. แก้ไขไฟล์ index.jsp โดยเพิ่ม stylesheet ของ bootstrap ประมาณนี้
    <link rel="stylesheet" href="webjars/bootstrap/3.0.0/css/bootstrap.min.css" media="screen"> 
    
  5. จากนั้นก็ยำใหญ่ให้เรียกใช้ bootstrap ประมาณนี้
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<title>WebJars Example</title>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<link rel="stylesheet" href="webjars/bootstrap/3.0.0/css/bootstrap.min.css" media="screen">
    </head>
    <body>
    	<div class="container">
    		<form role="form">
    			<fieldset>
    				<legend>Sign In</legend>
    				<div class="form-group">
    					<label for="exampleInputEmail1">Email address</label>
    					<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    				</div>
    				<div class="form-group">
    					<label for="exampleInputPassword1">Password</label>
    					<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Password">
    				</div>
    				<button type="submit" class="btn btn-primary">Submit</button>
    			</fieldset>
    		</form>
    
    	</div>
    
    </body>
    </html>
    
  6. จากนั้นทำการ Start tomcat แล้วเข้า url ของโปรเจคก็จะพบหน้าตาสวยงามดังนี้
    WebJars Bootstrap Example

หลักการทำงานของ WebJars

มันใช้หลักการนี้ครับ
Jar ทุกตัวที่อยู่ใน WEB-INF/lib
ถ้าข้างใน Jar นั้นมี META-INF/resources
มันจะถูก expose ให้เข้าถึงได้แบบ static resource ครับ
คืออ้างตรงเหมือนอยู่ใน webapp เลยครับ
ถ้าเข้าไปดูใน jar ที่โหลดมา หน้าตามันจะเป็นแบบนี้ครับ

jar bootstrap-3.0.0

โดยปกติเวลา server ทำงานมันจะแตก jar ที่ต้องใช้อยู่แล้ว ทำให้ jar ตัวนี้ถูกแตก jar ด้วยเลยทำให้อ้างถึงได้

ส่งท้าย

หน้าตา pom.xml ฉบับสมบูรณ์ครับ

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.magicalcyber.webjars.example</groupId>
  <artifactId>webjars-example</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>webjars-example Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>3.0.0</version>
    </dependency>
  </dependencies>
  <build>
    <finalName>webjars-example</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.0</version>
      </plugin>
    </plugins>
  </build>
</project>

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