Netbeans 7.4 + Cordova และทำกราฟด้วย jqPlot

  มีเวลาเขียนบนความแค่เดือนละครั้ง วันนี้ก็เลยจะมาแนะนำ Cordova ซึ่งเป็นแฟลตฟอร์มที่ใช้สร้างแอปพลิเคชั่นแบบ Native บนอุปกรณ์พกพา โดยใช้ภาษา HTML, CSS, Javascript สนับสนุนการทำงานบน iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, และ Symbian การติดตั้งและใช้งาน ดูได้จากลิงค์นี้ ข่าวดีตอนนี้มันกำลังรวมกับเครื่องมือพัฒนาที่ดีอีกอย่างก็คือ Netbean 7.4 ( ตอนนี้ยังเป็น NetBeans IDE 7.4 RC1 ) ลองดาวน์โหลด  และดูวิธีติดตั้งเพื่อใช้งาน Cordova ได้ที่นี่

 อันสุดท้ายที่จะมาแนะนำในวันนี้ก็คือ jqPlot เป็นปลั๊กอินของ jQuery ที่ช่วยในการสร้างกราฟรูปแบบต่าง ใช้งานง่าย และที่สำคัญ ซึ่งผมชอบมาก็คือสามารถบันทึกออกมาเป็นไฟล์รูปไว้ใช้ในงานในเอกสารได้ด้วย ตัวอย่างการใช้งานดูได้จากไฟล์ที่ดาวน์โหลดไปครับ

ทดสอบเล็กๆ กับ Backbone.js

   บทความนี้ มีต้นแบบมาจากวีดีสอนการใช้งาน Backbone ของ PeepCode โดยนำมาปรับแต่งให้เข้าใจง่ายที่สุด ตามความเข้าใจของผู้เขียนบทความเอง

ถ้าพูดถึงความแตกต่างระหว่าง Pure JQuery Apps กับ Backbone Apps

JQuery

ส่วนของข้อมูล และส่วนแสดงผลอยู่ปะปนกัน

งานหลายอย่างที่ต้องทำเกี่ยวข้องกับการจัดการกับ DOM

Backbone

ผู้ใช้เป็นผู้ปรับปรุงข้อมูล (Data) เช่น เพิ่ม ลบ แก้ไข

ส่วนแสดงผล (Views) ปรับปรุงการแสดงผลเอง ตามข้อมูล (Data-Driven)

การเรียกใช้ Backbone

เตรียมพร้อมเรียกใช้ JavaScript ไลบรารี underscore, jquery , backbone

<script src=" jquery-1.5.1.min.js"></script>
<script src=" underscore.js"></script>
<script src=" backbone.js"></script>

พื้นฐานการใช้งาน jQuery ตอนที่ 5 AJAX

ใช้งาน AJAX
การตั้งค่าใช้งานทั่วไปที่มักใช้บ่อยสำหรับการใช้งาน $.ajax()
    data บอกว่าข้อมูลที่ส่งเป็นแบบไหนเช่น query string (key1=val1&key2=val2) หรือ JSON ({"key1":"val1","key2":"val2"})
    dataFilter(data,type) กรองข้อมูลที่ได้รับ
    dataType บอกชนิดข้อมูลที่ต้องการจากการร้องขอเช่น xml html script json jsonp text
    error(XMLHttpRequest, textStatus, errorThrow) เรียกเมื่อเกิดข้อผิพลาด
    success(data, textStatus, XMLHttpRequest) เรียกเมื่อทำสำเร็จ
    type ชนิดการร้องขอ ปกติคือ GET
    url ตำแหน่งที่ต้องการส่ง

ใช้งานพื้นฐาน
$.ajax({
    "type":"POST",
    "url":"jq.php",
    "data":"var1=var1&var2=var2",
    "success":function(data){
        $("#p1")
        .css("background","gold")
        .html(data);
    }   
});

พื้นฐานการใช้งาน jQuery ตอนที่ 4 effect,event,methode

ทำให้เคลื่อนไหว และใส่เอฟเฟค
แสดงและซ่อน ส่วนที่เลือก
$("p").show();
$("p").hide();

หน่วงเวลา และ callback
$("p").hide(2000,function(){
$(this).show(2000)
})

ทำการเลือนภาพ
$("p").fadeOut(2000,function(){
    console.log("Fade Out")
}).fadeIn(2000,function(){
    console.log("Fade In")
});

$("p").fadeTo(2000,0.5,function(){
    console.log("Fade To 50% ")
});

พื้นฐานการใช้งาน jQuery ตอนที่ 3 สร้าง DOM

สร้างส่วนของ DOM ขึ้นมาใหม่
แบบที่ 1 สร้างง่ายๆโดยสร้าง tag ส่วนที่ต้องการ
    $("<p>");
    $('<p class="blue">New Paragraph</p>')
แบบที่ 2 สร้างโดยผ่านตัวแปร JSON
    $("<p>",{
        "class":"blue",
        "text":"New Paragraph"
});

ใส่ส่วนที่สร้างขึ้นลงใน DOM ส่วนที่เลือก
ใส่ตรง ๆ ให้ส่วนที่เลือก
$('#p4').append('New text');   
$('#p4').prepend('<span class="blue">New span</span>');
$('<span class="blue">New span</span>').prependTo("#p1");
$('<span class="blue">New span</span>').appendTo("#p1");

นำส่วนที่สร้างไว้แล้วมาใส่ให้ส่วนที่เลือก
var el1 = $('<p class="blue">New Paragraph</p>');
var el2 = $("<p>",{"class":"blue","text":"New Paragraph"});

$("#next").append(el1);
$("#next").append(el2);

el1.prependTo("#child");
el2.appendTo("#child");

พื้นฐานการใช้งาน jQuery ตอนที่ 2 คำสั่งพื้นฐาน

การใช้งานพื้นฐานคำสั่ง
เมื่อเลือกส่วนที่ต้องการแล้ว การทำงานจะทำตามคำสั่งจะเป็นลูกโซ่ ถัดต่อไปเรื่อยๆ เช่น
$("p").addClass("box").text("Hello World").appendTo("body");
การใช้งาน jQuery นั้นสามารถทำได้คือ
•    เลือกส่วนต่างๆ (DOM) ในหน้า HTML
•    ท่องเข้าไปใน DOM และแก้ไข
•    จัดการ event เช่น click , mouse-over
•    เข้าถึงคุณสมบัติ(attribute,css styling) ในส่วนต่างๆ และแก้ไขเปลี่ยนแปลง
•    เพิ่มความหน้าสนใจ การเคลื่อนไหวและเอฟเฟค
•    ควบคุม AJAX เบื้องต้น

ท่องไปใน DOM ผ่านคำสั่ง
เลือกตามลำดับ
$("p").eq(1);

พื้นฐานการใช้งาน jQuery ตอนที่ 1 การเลือก Selector

  การเรียกใช้ jquery เริ่มจากเรียกผ่านการใช้เครื่องหมาย $ เพื่อเลือก ส่วนต่างๆบนหน้าเอกสาร HTML หรือคุณสมบัติต่างๆ แล้วจัดการผ่านทางแมธอดที่มีมาให้ใช้ สำหรับการวิธีการศึกษาเบื้องต้น สามารถทำได้โดยเขียนไฟล์ HTML ที่เรียกใช้งานไลบรารี jQuery และพิมพ์คำสั่งทดสอบผ่านทาง console ของเบราเซอร์ ถ้า Firefox ใช้ firebug หรือ Opera ผ่าน develop tool ที่เรียกว่า Opera Dragonfly
  ในบทความนี้ผมใช้คำว่า “ส่วนที่เลือก” ซึ่งมาจากคำว่า Selector แทนที่จะให้คำว่าเลือกแท็ก(tag) เนื่องจากการให้ jQuery นั้นสามารถเลือกส่วนที่ต้องการทำงานด้วย ได้หลายแบบทั้ง HTML tag, css, properties และอื่นๆอีก
การเรียกใช้ jquery
วีธีที่ 1 เรียกใช้งาน jquery ในบรรทัดของโค้ด (inline code)
<!doctype html>
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>     
    <script src="jquery-1.5.1.min.js"></script>   
  </head>
  <body>
        <p onclick="$(this).hide();">Hello</p>     
  </body>
</html>

วีธีที่ 2 เรียกใช้งาน jquery จากไฟล์ภายนอก
<!doctype html>
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>     
   
  </head>
  <body>
        <p>Hello World</p>
  </body>
<script src="jquery-1.5.1.min.js"></script>    
<script src="myCodeHere.js"></script>    
</html>

การเลือกส่วนต่างๆ (DOM) บนหน้าเอกสาร HTML