เขียน HTML5 App ด้วย jQuery Mobile (JQM)

ก่อนจะเริ่มเขียนแอพแรกกัน เรามาปูพื้นฐานของ jQuery และ jQuery Mobile ที่เป็น Java Script Framework ยอดนิยมในการเขียน Mobile Web Application เนื้อหาจะเริ่มเข้มข้นขึ้นเรื่อยๆ ดังนั้นใครที่ไม่ค่อยคุ้นเคยกับสไตล์ผม ก็ปรับตัวกันหน่อยนะครับ ตอนหลังๆ ผมจะไม่พูดเยอะเน้นๆไปที่ตัวงานเลย ถ้าคิดว่าพื้นฐานยังไม่แน่นก็ตามไปเก็บของตอนก่อนๆ กันก่อนนะครับ ^_^

ความเดิมตอนที่แล้ว: เขียน HTML5 ด้วย Netbean IDE [Link] [VDO on YouTube ]

รู้จักกับ jQuery และ jQueryMobile

jQuery เป็น Java Script Framework ที่ใช้ในการพัฒนาเว็บแอพพลิเคชัน เพื่อลดภาระในการเขียน Java Script เช่นจากที่ต้องเขียน 20 บรรทัด อาจลดลงเหลือแค่ 5 บรรทัด งานที่เคยเขียนยากๆ ด้วย Java Script พอมาเขียนด้วย jQuery สามารถเขียนได้โดยง่าย ซึ่งในตอนนี้ทีม jQuery ได้แบ่งชุด API ออกเป็น 3 รูปแบบคือ

  • jQuery              – ใช้กับการเขียนเว็บทั่วไป เน้นการเข้าถึง element ต่างๆของ HTML และเขียนโปรแกรมติดต่อ Server ด้วย AJAX ที่คนนิยมกันเพราะไฟล์เล็กมาก
  • jQueryUI          –  มีฐานเดิมมาจาก jQuery และเพิ่มเติมส่วนของ Widget (พวกคอมโพเน้นสำเร็จรูปเช่น เมนู ไดอะลอกบ๊อกซ์ ปฏิทิน เป็นต้น) สำหรับงานออกแบบเว็บ
  • jQueryMobile  –  ใช้ฐานจาก jQuery  โดยมักถูกเรียกย่อๆว่า JQM โดยเน้นที่การแสดงผลบนหน้าจอมือถือ หลักการเขียนจะมองเป็น page (คือ 1 หน้าจอของมือถือ) โดยในไฟล์ html 1 ไฟล์ อาจมีหลาย page ก็ได้ ทำให้การเขียน UI (User Interface) เพื่อรองรับมือถือหรือแทบเล็ตกลายเป็นเรื่องง่าย

นอกจากนั้นยังมีคนเขียน Plug-in แบบ Opensource มาให้ใช้อีกเป็นจำนวนมาก และด้วยที่มันเป็น Java Script จึงสามารถใช้ร่วมกับภาษาโปรแกรมยอดนิยมอย่าง PHP, JSP, JSF และ ASP.NET รวมถึง HTML5 ได้โดยไม่มีปัญหา ลองดูตัวอย่างโค้ดเทียบกับของตอนที่แล้ว

//โค้ดเดิมของ app.js ของตอนที่แล้ว
function changeContent() {
 var txt = this.innerHTML;
 var ct = document.getElementById("content");
 ct.innerHTML = "<h1>" + txt + "</h1>";
}

function init() {
 document.getElementById("bt1").onclick = changeContent;
 document.getElementById("bt2").onclick = changeContent;
 document.getElementById("bt3").onclick = changeContent;
}

window.onload = init;

 

//โค้ด jQuery ซึ่งทำงานได้เหมือน Java Script แต่สั้นกว่าเดิมเยอะ
function changeContent(){
 //เลือก <div id="content"> แล้วเซ็ตข้อมูลของ <button> ลงไป
 $("#content").html("<h1>" + $(this).html() + "</h1>"); 
}
function init(){
 //เลือก <button> bt1,bt2,bt3 แล้วกำหนด function changeContenet สำหรับ onclick
 $("#bt1,#bt2,#bt3").click(changeContent);
}

// กำหนดให้ init() ทำงานเมื่อโหลดเอกสารเสร็จ
$(document).ready(init);

 

หลักสูตรเร่งรัด jQuery

การเขียน jQuery ถ้าคนที่คุ้นเคยกับ CSS และ Java Script จะกลายเป็นเรื่องง่าย แต่ถ้าไม่คุ้นอาจต้องใช้เวลากับลงแรงหน่อย ลองเข้าไปฝึกฝนในนี้ http://api.jquery.com/ แล้วดูวิธีใช้แต่ละหัวข้อ ส่วนของผมจะเลือกดึงเฉพาะที่จำเป็นในการใช้งาน แล้วจะค่อยๆทะยอยปล่อยของตามเนื้อหาไปเรื่อยๆ แต่มีสิ่งที่ต้องรู้อยู่นิดหน่อยเพื่อให้ง่ายในการเข้าใจหัวข้ออื่นๆ

  • โค้ดของ jQuery  ทำงานผ่านสัญลักษ์  $  ใช้ร่วมกับการเลือก (selector) ซึ่งจะใกล้เคียงกับ selector ของ CSS
    • $(“selector”)  คือการเลือก element ใดๆ เช่น $(“h1”)  , $(“p”), $(“a”), $(“input”)
    • $(“.selector”) คือการเลือก class เหมือนกับเรื่องของ CSS เช่น $(“.myClass”) คือการเลือก <div class=”myClass”> นั่นเอง
    • $(“#selector”) คือการเลือก id เหมือนกับของ CSS เช่นกัน เช่น $(“#myID”) คือการเลือก <div id=”myID”>
    • สามารถเลือกแบบผสมได้ เช่น $(“div.myClass”) หรือ $(“div.myID”)
    • สามารถเลือกแบบรวมกลุ่มหลายๆตัวพร้อมกันได้ เช่น $(“#myID , #myClass, h1, a”)
  • เมื่อเลือกได้แล้วจะนำมาทำอะไรต่อก็แล้วแต่เรา เช่น $(“#myID”).html(“Hello”) ใส่ค่า “Hello” ไปใน myID เป็นต้น

 

นอกจาก jQuery Mobile มีตัวอื่นให้ใช้อีกรึเปล่า?

มีครับ มีเยอะด้วย ลองค้นดูใน Google ได้ซึ่งก็แล้วแต่คนชอบ มีทั้งแบบฟรี และแบบเสียเงินโดยแต่ละตัวก็จะมีข้อดีข้อด้อยกันคนละแบบ ขอยกตัวอย่างมาเปรียบเที่ยบให้ดูนะครับ

  • Sencha  Touch   – เป็นเวอร์ชัน Mobile ของ ExtJS คู่แข่งของ jQuery รูปแบบการเขียนจะเน้นหนักไปที่โค้ดของ Java Script และการกำหนดค่าต่างๆด้วย JSON ทำให้เวลาเขียนต้องมีความคุ้นเคยกับ Java Script และรูปแบบการเขียนของ ExtJS อยู่พอสมควร …ณ ตอนที่เขียนอยู่นี้ตัว API ยังคงใช้ Theme แบบโบราณอยู่ (ประมาณหน้าจอของ iOS6 ซึ่งตอนนี้ไม่มีใครใช้แล้ว)
  • ionic                    – น้องใหม่มาแรง ที่มาพร้อมกับตัว Cordova เพื่อทำ Hybrid Mobile App (ที่เขียนด้วย HTML5 แล้วแปลงไปเป็น iOS, Android) โดยเฉพาะ รูปแบบการเขียนเป็นแบบ MVC (Model-View-Controller) และใช้ AngularJS เป็นโค้ดหลัก ทำให้คนที่เพิ่งเริ่มขียนอาจจะเจอสตั้นได้เหมือนกัน จุดเด่นของตัวนี้อยู่ที่ UI ครับทำออกมา เรียบสวย น่าใช้ และที่สำคัญมันปรับให้ตาม Platform ปลายทางเลย เช่น UI ของ iOS จะไม่เหมือนของ Android ถ้าใครจะทำ Hybrid App ให้ดูโปร แนะนำตัวนี้เลยครับ (ตัวนี้ผมจะเขียนลง เป็นตอนๆ หลังจากจบเรื่องเอาแอพขึ้น PlayStore ครับ)
  • ตัวอื่นๆเช่น  Onsen UI, Kendo UI, Framework 7 เป็นต้นซึ่งมีจุดดีจุดด้อยไม่เหมือนกัน ว่างๆก็ลองเข้าไปดูนะครับ ถ้าเชี่ยวแล้วชอบใจตัวไหนก็ใช้ตัวนั้น

ส่วน Responsive Framework ยอดนิยมอย่าง Bootstrap และ Web App Framework อย่าง AngularJS ก็ยังมีคนใช้อยู่เป็นจำนวนมาก แต่ส่วนใหญ่จะเน้นในการเขียนเว็บ และมีหลาย Framework (เช่น ionic) นำไปใช้เป็นส่วนประกอบ ถ้ามีเวลายังไม่เหนื่อยก็ศึกษาเลือกดูครับ (แต่ความเห็นส่วนตัวคือ พยายามพึ่งพา Framework ให้น้อยที่สุด แล้วใช้ความรู้เรื่อง CSS และ JavaScript ปรับแต่งเอาครับถ้าต้องการเน้นที่ประสิทธิภาพ Pure Java Script แน่นอนที่สุด ฟันธง)

 

การติดตั้งและการใช้งาน

ผมขอรวบรัดเน้นที่ JQM เลยนะครับเพราะก็อิงอยู่บนโค้ดของ jQuery และมีบางส่วนที่เพิ่มขึ้นมา วิธีติดตั้งคือเข้าไปที่ http://jquerymobile.com  แล้วดาวน์โหลด jQueryMobile ตัวล่าสุด (Lastest stable) ณ. ตอนที่เขียนนี่คือเวอร์ชัน 1.4.5

jqm001

 

เมื่อได้ไฟล์ zip มาแล้วให้ใช้โปรแกรมแตกไฟล์ แล้วหาโฟลเดอร์ demo  ในนั้นมีไฟล์ตัวอย่างอยู่เพียบ คุณสามารถดูโปรแกรมตัวอย่างโดยเปิดไฟล์ index.html ได้ … หลังจากนั้นให้มองหาโฟล์เดอร์ js และ css ซึ่งเราจะนำไปใช้ใน NetBean IDE สามารถใช้วิธี copy ไปวางใน Site Root หรือจะใช้วิธีลากจาก Windows Explorer มาไว้ที่ Site Root ก็ได้

jqm002

 

หลังจากนั้นลากไฟล์ jquerymobile.css, jquery.js และ jquerymobile.js มาไว้ก่อนแท็ก </head> หลังจากนั้นก็สร้างโฟล์เดอร์ app และสร้างไฟล์ app.css และ app.js เหมือนบทความที่แล้ว เสร็จแล้วลาก app.css วางไว้ใต้ jquerymobile.css และ app.js วางไว้ใต้ jquerymobile.js ดูตามรูปครับ

jqm003

 

เริ่มโปรแกรมแรกกัน

ขอเริ่มด้วยโปรแกรมเบาๆ ก่อนละกันนะครับ โจทย์คือให้เขียนโปรแกรมแสดงรายชื่อเพื่อนเรา 10 คน ในลักษณะของ List Menu โดยเมื่อคลิกที่รายการโปรแกรมจะพาไปอีกหน้าหนึ่งซึ่งแสดงรายละเอียดของเพื่อนเรา(เป็นพื้นฐานของโปรแกรม สมุดโทรศัพท์นั่นเอง)

 

เขียนหน้า main ใต้ <body> ในไฟล์ index.html ดังนี้

<html>
 <head>
   <title>TODO supply a title</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="css/themes/default/jquery.mobile-1.4.5.min.css" 
         rel="stylesheet" type="text/css"/>
   <link href="app/app.css" rel="stylesheet" type="text/css"/>

   <script src="js/jquery.js" type="text/javascript"></script>
   <script src="js/jquery.mobile-1.4.5.js" type="text/javascript"></script>
   <script src="app/app.js" type="text/javascript"></script>
 </head>
 <body>
   <div id="main" data-role="page">
     <div data-role="header">
       <h1>My JQM App</h1>
     </div>
     <div data-role="content">
       <ul data-role="listview" data-filter="true">
          <li><a href="#p1">Person 1</a></li>
          <li><a href="#p2">Person 2</a></li>
          <li><a href="#p3">Person 3</a></li>
          <li><a href="#p4">Person 4</a></li>
          <li><a href="#p5">Person 5</a></li>
          <li><a href="#p6">Person 6</a></li>
          <li><a href="#p7">Person 7</a></li>
          <li><a href="#p8">Person 8</a></li>
          <li><a href="#p9">Person 9</a></li>
          <li><a href="#p10">Person 10</a></li>
       </ul>
     </div>
    <div data-role="footer" data-position="fixed">
      <h1>My Footer</h1>
    </div>
  </div>
  <!-- End Main Page -->
  </body> 
</html>

 

ทดสอบการทำงานโดยการ Run เมื่อเบราเซอร์เปิดขึ้นให้กด F12 เพื่อเข้า Developer Mode แล้วคลิกที่รูป “มือถือ” เพื่อจำลองการแสดงผล … ในช่อ Device คุณสามารถเลือกรุ่นของมือถือที่ต้องการทดสอบได้  หรือเลือกการแสดงผล แนวตั้ง (Portrait) หรือแนวนอน (Landscape)

jqm004

 

เพิ่มหน้าแสดงรายละเอียดให้ครบจำนวนคน (ของตอนนี้เราจะทำแบบถึก ก่อนเดี๋ยวตอนหน้าค่อยให้ดึงข้อมูลจาก JSON นะ)

 <!-- End Main Page -->
 
 <div id="p1" data-role="page">
   <div data-role="header">
     <h1>Person 1</h1>
   </div>
     <div data-role="content">
       <h1>Person 1</h1>
       <h3>Phone: 11111111</h3>
       <h3>Email: p1@abc.com</h3>
       <a href="#main" data-role="button">Back</a>
     </div>
   <div data-role="footer" data-position="fixed">
     <h1>My Footer</h1>
   </div>
 </div>
 <!-- End Page 1 -->
<div id="p2" data-role="page">
   <div data-role="header">
     <h1>Person 2</h1>
   </div>
     <div data-role="content">
       <h1>Person 2</h1>
       <h3>Phone: 22222222</h3>
       <h3>Email: p2@abc.com</h3>
       <a href="#main" data-role="button">Back</a>
     </div>
   <div data-role="footer" data-position="fixed">
     <h1>My Footer</h1>
   </div>
 </div>
 <!-- End Page 2 -->
 <!-- ...ทำให้ครบ p1-p10 ใช้วิธี copy วางแล้วเปลี่ยนค่าได้ -->

 

ทดสอบการเปลี่ยนหน้า: ตอนนี้เราสามารถกดที่ list menu เพื่อไปยังหน้าต่างๆ ที่ต้องการได้และกดปุ่ม [Back] เพื่อย้อนกลับไปยังหน้าแรก

 

jqm005-1

การเปลี่ยนหน้าด้วย โค้ด Java Script

นอกจากการเปลี่ยนหน้าโดยใช้ <a href=”#pageid”> แล้วเรายังสามารถใช้โค้ด Java Script ในการเปลี่ยนหน้า ด้วยเหตุผลหลายๆอย่างเช่น ต้องมีการเตรียมข้อมูลก่อนเปลี่ยนหน้า หรือต้องการควบคุมการทำงานผ่านโค้ดแทนการกำหนดฝังไว้ใน HTML เพื่อความสะดวกในการจัดการ

 

// app.js
function gotoDetailPage(){
   $.mobile.changePage("#p1",{"transition":"slide"});
   var pdata = $(this).text();
   // กำหนด Person # ใหักับ title และชื่อ
   $("#ptitle, #pname").html(pdata);
   //แยก "Person 1" ให้เป็น ["Person","1"] เก็บใน ar[]
   var ar = pdata.split(" ");
   //สร้าเบอร์โทรโดยการแทนที่ ตัวเลข person ลงใน 11111111
   var phone = "11111111".replace(/\d/g,ar[1]);
   //กำหนดรายละเอียดของ person ทั้ง phone และ email
   $("#pphone").html(phone);
   $("#pemail").html("p" + ar[1] + "@abc.com");
}

function init(){
   //เลือก <a> ทุกตัวที่อยู่ใต้ <ul id="#mylist">
   $("#mylist a").click(gotoDetailPage);
   // กำหนดการทำงานของปุ่ม backBt โดยใช้ฟังชันไม่มีชื่อ function(){...}
   $("#backBt").click(function(){
     //ใช้การเปลี่ยนหน้าแบบ slide โดยทำ animation แบบย้อนกลับ
     $.mobile.changePage("#main",{"transition":"slide", "reverse":"true"});
   });
}

//เขียนลดรูป เหมือนกับ $(document).redy(init);
$(init);

 

เปลี่ยนโค้ดส่วนของ index.html ให้สอดคล้องกับ jQuery ของเรา

 <body>
   <div id="main" data-role="page">
     <div data-role="header">
       <h1>My JQM App</h1>
     </div>
     <div data-role="content">
       <ul id="mylist" data-role="listview" data-filter="true">
         <li><a href="#">Person 1</a></li>
         <li><a href="#">Person 2</a></li>
         <li><a href="#">Person 3</a></li>
         <li><a href="#">Person 4</a></li>
         <li><a href="#">Person 5</a></li>
         <li><a href="#">Person 6</a></li>
         <li><a href="#">Person 7</a></li>
         <li><a href="#">Person 8</a></li>
         <li><a href="#">Person 9</a></li>
         <li><a href="#">Person 10</a></li>
       </ul>
     </div>
     <div data-role="footer" data-position="fixed">
       <h1>My Footer</h1>
     </div>
   </div>
   <!-- End Main Page -->
 
   <div id="p1" data-role="page">
     <div data-role="header">
       <h1 id="mytitle">Person 1</h1>
     </div>
     <div data-role="content">
       <h1 id="pname">Person 1</h1>
       <h3>Phone: <span id="pphone">11111111</span></h3>
       <h3>Email: <span id="pemail">p1@abc.com</span></h3>
       <a id="backBt" href="#" data-role="button">Back</a>
     </div>
     <div data-role="footer" data-position="fixed">
       <h1>My Footer</h1>
     </div>
   </div>
   <!-- End Page 1 --> 
 </body>

ดูวิดีโอประกอบผ่าน YouTube : HTML5 App with jQuery Mobile

 

ในตอนหน้าเราจะลองเก็บข้อมูลด้วย JSON แล้วนำไปแสดงผลกัน ทั้งนี้เพื่อลดการทำซ้ำ แทนที่จะต้องทำหน้ารายละเอียดทั้ง 10 หน้า เราสามารถทำแค่หน้าเดียว แล้วส่งค่าผ่านโปรแกรมแทน ทำให้ทั้งประหยัดเวลาและปรับเปลี่ยนหรือแก้ไขในภายหลังได้ง่าย โปรดติดตามตอนต่อไปครับ

 

ไฟล์ Project ของตอนนี้ครับ:  MyJQMApp.zip

AjBee.Me : ในระหว่างนี้ก็ให้เริ่มหาเนื้อหาที่จะนำมาทำแอพของตัวเองเตรียมไว้นะครับ หรือใครต้องการเขียนแอพแนวไหนก็ขอมาได้ ผมจะได้เขียนบอกวิธีให้ ^_^

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage