2009/Sep/02

     



      มาต่อกันเลยนะครับจาก สนุกกับ "Ubiquity" Firefox Add on จากโลกอนาคต จาก entry ที่แล้ววันนี้เราลองมาสร้าง  Ubiquity Command เล่นกัน command ที่ใช้เขียนมาจาก javascript  ดังนั้นคนที่เขียน javascript อยู่แล้วก็สบายหน่อย  เราอาจจะเขียน command ที่เราใช้งานบ่อยๆขึ้นมาเองโดยใช้เวลาไม่นาน และ coding เองก็มีไม่กี่บรรทัด ยิ่งถ้าเราเขียน JQuery  ได้แล้วล่ะก็ยิ่งทำให้การเขียนของเราสั้นและก็ยืดหยุ่นมากขึ้น เพราะ  Ubiquity สนับสนุน Jquery เป็นทุนเดิมอยู่แล้ว  

 

    Ubiquity มี APIs หลักๆ หรือ  Utility Class ให้เราสามารถเรียกใช้งานอยู่เยอะพอสมควร เช่น

    * Utils
    * CmdUtils
    * NounUtils
    * EventHub
    * WebJsModule
    * FeedManager
    * AnnotationService
    * Message Services
    * Locked-Down Feed Plugin
    * Parser 2
    * Built-in Noun Types 


     การใช้งานและวิธีการพัฒนาสามารถดูได้จากที่นี้ https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.5_Author_Tutorial (สำหรับ version 0.5 )  เราสามารถเขียน คำสั่งโดยใช้  command Template  โดยการพิมพ์  about:ubiquity ที่ช่อง address แล้ว click ตรงเมนู  hack ubiquity ก็จะมี  editor และ command template  ให้เราได้ใช้ หรือจะใช้ code editor อย่างเช่น editplus ในเครื่องเราก็สามารถเลือกใช้ได้  




ดูตัวอย่างการเขียน command   "say hello"

CmdUtils.CreateCommand({
names: ["say hello"],
execute: function hello_execute() {
displayMessage("Hello, World!");
}
});

 

CmdUtils.CreateCommand เป็น  Utility Class ที่ใช้ในการสร้าง Command ในที่นี้จะสร้างคำสั่งที่ีมีชื่อว่า "say hello" ถ้ามีการเรียกใช้งานคำสั่งนี้ จะแสดงข้อความแสดงคำว่า "Hello, World!" ขึ้นมา

 

 ผลลัพธ์

 
การติดตั้ง Commands

    ทำได้โดย สร้างและบันทึก  code เป็น sayhello.js  และสร้างหน้า page  html  ขึ้นมาแ้ล้วทำการ reference code  javascript ตามตัวอย่างด้านล่าง

<html>
<head>
<title>Say Hello</title>
<link rel="commands" href="sayhello.js"/>
</head>
<body>
</body>
</html>

เมื่อเรา run  html page หน้านี้ขึ้นมาจะมี tab ตามรูปด้านล่าง




ให้กด Subscribe จะขึ้นหน้าต่างตามรูปด้านล่าง




ให้กด "I  Know what I'm doin. Subscribe to it!" ก็เป็นอันเรียบร้อย นอกจากนั้นเราสามารถเข้าไป unsubscribe ที่ about:ubiquity > your commands

*Tips
     เราสามารถแก้ไข code จาก souce code ได้เลยหลังจาก subscribe  ไปแล้ว  เพราะ   Ubiquity จะอับเดต code ให้เราเองโดยอัตโนมัติ

 
ทีนี้เรามาลองเขียน command ที่ชื่อว่า  "exteen recent blog

เป้าหมาย
command นี้จะดึงเอา  Recenly Updated หรือ  blog ล่าสุดที่มีคนเขียนขึ้นมาแบบ Realtime และเมื่อเราำื enter command จะทำการ redirect ไปหน้า http://www.exteen.com/recent เพื่อทำการดูข้อมูลทั้งหมด

 

หลักการและวิธีการ
  เป็นการดึงโดยใช้ Http Request หรือ Ajax โดยใช้ Method GET และใช้  Utility  ของ  Ubiquity APIs ในการดึงและใช้ jQuery Parse Html ผลที่ได้พร้อมกับ filtter เฉพาะค่าที่เราต้องการโดยใช้ JQuery Selectors แล้วทำการจัดรูปแบบการแสดงใหม่


ส่วนของ Command Code

CmdUtils.CreateCommand({
name:["exteen recent blog"],
icon:"http://g.exteen.com/i/g/logo.gif",
_baseUrl:"http://www.exteen.com/recent",
preview:function(pBlock){
CmdUtils.previewGet(pBlock,this._baseUrl, function(recent) {
var msg="<b>Exteen Command RecentUpdate</b> 
By CodeSnippet.exteen.com <br/><br/> ";
jQuery(recent).find("#recent > ul > li").each(function(e){
msg+= _ ('<img src="${blogavatar}">&nbsp;${blogname} 
<b>Wrote: ${entryname}</b><br/>',
{blogname:$(this).find(".blogname").text()
,entryname:$(this).find(".entryname").html()
,blogavatar:$(this).find("img").attr("src")});
});
pBlock.innerHTML=  msg;     
});
},
execute:function(){
Utils.openUrlInBrowser(this._baseUrl);
}    
});

การติดตั้ง
     
     เหมือนกับการติดตั้งที่ได้อธิบายด้านบน หรือ สามารถ ติดตั้งได้จากที่นี้   Subscribe "exteen recent blog"


การใช้งาน

     ก่อนอื่นต้องติดตั้ง  Ubiquity Add on  ใน  firefox โดยไปที่ https://addons.mozilla.org/en-US/firefox/addon/9527  หลังจากนั้น กด Clrt+Space พิมพ์คำสั่ง  exteen recent blog ก็จะแสดง  entry ที่เพิ่ง post ล่าสุดของ exteen 
    

 ขอให้สนุกนะครับ :P

Comment

Comment:

Tweet


snippet.googalz.com
View full profile