สร้าง "Exteen recent blog" command ใน Ubiquity

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