TagLib กับการลด Scriptlet สำหรับหน้า Web Application

ย้อนกลับไป blog เก่าๆ html + javascript + css ก็พอจะทำให้รู้จัก html, javascript, css คร่าวๆ แล้ว ประกอบกับ Client กับ Server ใน web app. คืออะไร ที่ทำให้เข้าใจว่าภาษาเหล่านั้น มันเป็น output สุดท้ายของ web application ก่อนที่ web browser จะสร้างเป็นรูปเป็นร่างให้เราเห็นสวยๆงามๆ ครับ

Scriptlet เป็นชื่อที่ใช้เรียกแทน การเอาภาษาโปรแกรมมาเขียนในลักษณะของ script โดยใช้ tag พิเศษในหน้า html เช่น JSP(Java Server Pages) ถ้าเราใช้ scriptlet ก็คือเราต้องเขียนโปรแกรมภาษา Java ไว้ภายในนั่นเอง

ยกตัวอย่างกันหน่อย
  
<html>
<body>
     <%
          System.out.println("Playing on server");
     %>
</body>
</html>

ดูๆ แล้วก็ปกติดีใช่ไหมครับ โหลดหน้าเว็บนี้ขึ้นมา server ก็จะ print ค่าให้เราเห็นใน console แปลว่าโค้ด scriptlet ส่วนนี้ก็ไม่ได้ทำอะไรเลยกับหน้าจอ สุดท้าย html ก็จะเป็นว่างๆไป

ทีนี้มาลองดูตัวอย่างนี้กันครับ
<html>
<body>
     <%
          String textbox= request.getParameter("textbox");
          if("text".equals(textbox)){
     %>
               <input type="text"/>
     <%
          } else if("textarea".equals(textbox)) {
     %>
               <textarea></textarea>
     <%
          }
     %>
</body>
</html>

คราวนี้ผมว่าจะเริ่มงงกันแล้วครับ เพราะเป็นการเปิดปิดปีกกาข้าม html กันเลยทีเดียว แถมมี if-else ด้วย ต้องแยกกันดีๆนะครับว่า ตรงไหน java ตรงไหน html ซึ่งสุดท้าย html ชุดนี้จะแสดง textbox หรือ textarea อย่างใดอย่างหนึ่ง หรือจะไม่แสดงอะไรเลยก็ได้ครับ ขึ้นอยู่กับ parameter ที่ส่งมาครับ

ยกตัวอย่างพอให้เห็นภาพของความยุ่งของ scriptlet ครับ ลองคิดว่าถ้าผมไม่ได้ highlight ให้ดูครับ ผมว่าแค่โค้ดสั้นๆแค่นี้ก็งงได้นะครับ ^_^ เพราะฉะนั้นจึงมีสิ่งต่อไปนี้เป็นตัวเลือกที่ดีขึ้นครับ


TagLib คือ html tag ที่จะทำงานฝั่ง Server เช่นเดียวกับ scriptlet เพียงแต่จะเป็นลักษณะของ tag ที่เป็นรูปแบบเฉพาะตัวที่เรียกว่า 'custom tag' เช่น tag สำหรับแสดงผล, tag สำหรับเป็นตัวเลือกเงื่อนไข แทนที่จะเป็นการแทรกสลับไปมาระหว่าง java กับ html ก็จะอยู่ในรูป tag ทั้งหมด เพียงแต่เราต้องศึกษาวิธีการใช้งานเพิ่มขึ้นอีกซักหน่อย

taglib ที่จะเป็นตัวอย่างต่อไปนี้คือ JSTL นะครับ ก่อนอื่นต้องประกาศให้ JSP รู้จักซะก่อน
  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

จากนั้นผมจะเปลี่ยน ตัวอย่าง if-else ด้านบนให้อยู่ในรูปของ taglib นะครับ

<html>
<body>
     <c:choose>
          <c:when test="${param.textbox == 'text'}">
               <input type="text"/>
          </c:when>
          <c:when test="${param.textbox == 'textarea'}">
               <textarea></textarea>
          </c:when>
     </c:choose>
</body>
</html>

ดูอ่านง่ายขึ้นไหมครับ แน่นอนว่าบางคนอาจจะไม่เข้าใจว่า tag ที่ผมเอามาใช้นั้นคืออะไร แนะนำให้อ่าน link ประกอบเพิ่มเติมนะครับ

อีกอย่าง.. ผมมีของแอบแถมนิดนึงนะครับ นั่นก็คือ EL หรือ Expression Language ในตัวอย่างเป็นการดึงค่าจาก parameter มาเชคเงื่อนไข ส่วนรายละเอียดนั้น ติดตาม blog หน้านะครับ ^_^


http://www.tutorialspoint.com/jsp/jsp_standard_tag_library.htm
http://blog.jumdee.com/่java-jsp-taglib-jstl-standard-core-คำสั่งง่าย

Facebook Comment

Popular post of 7 days

[Java] ความแตกต่างระหว่าง Overloading กับ Overriding

ลืมรหัสปลดล็อค Android เข้าเครื่องไม่ได้ มีทางออกครับ

[Android] เปิดเครื่องไม่ได้ โลโก้ค้าง (Boot Loop)