2010年4月30日 星期五

Design Pattern 設計模式 Decorator 裝飾者模式

Today, we use "Decorator"
今天來玩玩Decorator

javascript:
cd=console.debug;
function Component(base)
{
 this.base=null;
 try{
  this.base=base;
 }catch(e){}
 
 this.name="";
 this.value=0;
 
 this.getDes=function(){
  var s='';
  try{
   s+=this.base.getDes();
  }catch(e){}
  s+=this.name+','
  return s;
 }
 
 this.cost=function(){
  var v=0;
  try{
   v+=this.base.cost();
  }catch(e){}
  v+=this.value;
  return v;
 } 
}

/*inherit*/
function Espresso(base)
{
 var d=new Component(base);
 d.name="Espresso";
 d.value=100;
 return d;
};

function Mocha(base)
{
 var d=new Component(base);
 d.name="Mocha";
 d.value=10;
 return d;
};

function Soy(base)
{
 var d=new Component(base);
 d.name="Soy";
 d.value=50;
 return d;
};

(function(){
 var e= new Espresso(),
 m= new Mocha(e),
 a= new Mocha(m),
 s= new Soy(a);
 
 cd(s.cost());
 cd(s.getDes());
})();

python:
class Component():
    base=None
    name=''
    value=0
    
    def __init__(self,base=None):
        try:
            self.base=base
        except:
            pass

    def getDes(self):
        s=''
        try:
            s+=self.base.getDes()+','
        except:
            pass
        s+=self.name
        return s
    def cost(self):
        v=0;
        try:
            v+=self.base.value
        except:
            pass
        return v+self.value

class Espresso(Component):
    name='Espresso'
    value=2000
    pass
class Soy(Component):
    name='Soy'
    value=20
    pass

class Mocha(Component):
    name='Mocha'
    value=200
    pass

def main():
    s=Espresso()
    
    s=Mocha(s)
    s=Mocha(s)
    s=Soy(s)
    
    st=s.getDes()
    v=s.cost()
    print st
    print v

    
if __name__!='__main__':
    main()

2010年4月29日 星期四

Design Pattern 設計模式 Observer 觀察者模式

I am wrintng webpage app recently,so I used the GAE standard for 'Google App Engine' to be the Server client,So I use the Python and Javascript often,of course JQuery else,


最近在開發 webpage app,使用GAE做為Server端,所以得使用到Python和Javascript,當然還有JQuery。

and because I am a person who like to use 'Design Pattern' in my code.
so I start to share how to use 'Design Pattern' in the code today, and hope this series can help someone who is writing webpage app ,too and help me to remenber this.
If you have any problem,it's welcome to comment,thx~

也因為我是個"設計模式"的愛好者,所以開始分享一些我觀察到的一些在javascript和python上可以運用的"設計模式"方法,希望可以提醒我自已記得如何使用,及幫助到需要的人。
若是有任何指教,歡迎留言,謝謝。
the first design pattern , I want to share its 'Observer' pattern:

觀察者模式:

Python:

import sys
import os
################### BASIC CLASS begin ##############
class Subject():
name='Subject'
def __init__(self,name):
self.name=name
#
parms={}
def setTemp(self,parms):
self.parms=parms
self.notify()

#for observer
objs=[]
def register(self,obj):
self.objs.append(obj)

def remove(self,obj):
self.objs.remove(obj)

def notify(self):
for i in self.objs:
print i
i.update(self,self.parms)

class Observer():
name='Observer'
def __init__(self,name):
self.name=name

def update(subject,self,parms):
print 'Subject Name: %s,Observer Name : %s ,Value: %i'%(subject.name,self.name, parms['value'])

pass

def display(self):
pass
################### BASIC CLASS end ##############

class Weather(Subject):
pass

class Board(Observer):
value=0

def update(self,parms):
self.value=parms['value']
self.display()
def display(self):
print self.value


class Combine(Subject,Observer):
pass


def main():
s=Weather('Weather')
b=Combine('Board')

s.register(b)
s.setTemp({'value':99})




if __name__!='__main__':
main()




javascript:


cd=console.debug

function Subject()
{
this.name='Subject';
this.parms={};
this.setTemp=function(parms){
this.parms=parms;
this.notify()
}
//
this.objs=new Array();
this.register=function(obj){
this.objs.push(obj);
}
this.remove=function(obj){

}
this.notify=function(){
for (i in this.objs){
this.objs[i].update(this.parms)
}
}
}
function Observer()
{
this.name='Observer';
this.update=function(parms){
this.display(parms);
}

this.display=function(parms){
cd(parms);
}
}

//set different class over there
function Weather()
{
var father=new Subject();
father.name='Weather';
return father;
}

function Board(){
var father=new Observer();
father.name='Board';
father.display=function(parms){
cd('Value:'+parms['value'])
}
return father;
}

function main()
{
var s=new Weather();
var o=new Board();
s.register(o);
s.setTemp({'value':99})
cd(o);
}

in the javascript, if you want to combine the Subject and Observer class, it also have a way to do it,like:

function Observer()
{
.....
this.dir={name:this.name,display:this.display}//you have to add all class's parms and fucntions pointer in the 'dir' arraylist,also do it in Subject class
}
//after this ,than you can add this class
function Combine()
{
var f1=new Subject();
var f2=new Observer();
var me={};
for (i in f1.dir)
{
me[i]=f1.dir[i];
}
for (i in f2.dir)
{
me[i]=f2.dir[i];
}

return me;
}
function Station()
{
var father =new Combine();

return father;
}
//then finally you get combine class

after create combine class in the javascript, the codes is not easy to read amymore,but for the class seldom have to be Subject and Observer.
so just for requirement.
不過為了實現'結合',程式碼好像不前麼好讀了,通常也很少是觀察者也是主題的,看需求囉。

2010年4月26日 星期一

程式設計者的無知而驕傲「四」之前的程式修改,如果我有時間的話先生

如果我有時間的話先生,是我最近觀察到自已本人在下我,

常常拿來跟測試工程師講的話,

測試工程師用力的幫我找了之前程式的一些問題或建議,

可是我卻只能殘忍的說:「如果我有時間的話」

是的,我真是個壞人,雖然我自認到目前為止的每個程式(期初的不算(汗))都不難改,因為,我可是堅守著對修改關閉,對擴充開放的底限,照理來說不 難改,但我還真沒時間改,因為老大的眼光又轉向了,這就好像船在大海上航行,船長對自已的方向沒把握一樣,船員也只好跟著,左邊轉一下,右邊轉一下

所以,不好意思啊,阿測,我還真的沒時間改,必竟那不是個小bug啊~~新功能要找時間研究一下,才能加上去的啊(心中的吶喊)!!

老大要我寫別的東西,我就只好轉向看別的東西,不是我不想做啊~~

這是籍口(阿測心中的os)。

如果我有時間的話,還真是個不錯的籍口

程式設計者的無知而驕慠「三」先有再說先生 程式改不動先生

這聽起來像是對立的兩個人,卻總是在Case期初和期末交換角色,

先有再說先生,總是先急著弄出個成品,不考慮之後程式修正的問題



就gadget(google桌面,網頁程式)說好了;

為了要考慮之後的擴充性,

或不得不為的修改,通常會盡量的切割之各個系統。

使其獨立,

MVC 構架是最常用的。

網頁application結構其實分割還滿容易的,

Server端(Model), Client端(View),

Control部份,個人是覺得盡量寫在Client(拖別人系統,決對比拖自已系統好,科科)

但先有再說先生,可以很棒的將其混在一起。

反正他只想先丟出去再說。



所以一個gadget(google桌面),

他用了<iframe> 將整個原在Server端的查詢網頁,

是的,也不是<iframe>不能用,

不過 gadget就已經是設計來成為你的網路桌面上的小程式的這件事情,

好像完全不管他,我完全看不到他的MVC架構在那裡?

這樣子的東西,也不可能在google桌面上縮放啊?

看了整個禮拜不知道在看啥?

(如果我也可以只整個禮拜只搞這個就好了,雜事有夠多的。)

反正先出去再說,

那今天老闆想要gadget上縮放呢?

這也不算強人所難,因為這本來就是google桌面設計的目的,

那你不就立刻倒了。

喔! 不會的! 因為 程式改不動先生(注意:康攢有夠才開的出這一隻)跳出來救你了。



老闆想要修改程式了,

「但這個程式改不動」程式改不動先生說話了。

(當然要說這句話前請先墊墊自已的份量),

其實程式改不動,也是因為你在Case期初時,

完全沒有考慮程式的擴充和修改性這件事。

就這醬出去了,真是營養雞排。

「反正我改不動,不然你找別人好了」程式改不動先生又說話了

(更高段的話,說這句話之前,請先考慮公司有多少專案在你手上,讓老闆投鼠忌器)

通常到這裡,

第一,找替死鬼收尾。

第二,算了。



是。算了機會還滿大的,通常 先有再說 先生 的程式,別人還真的改不動,

因為全都搞在一起了。重新幫他寫一個可能會比較快一點。





這個系列,不小心也寫到了第三篇,才發現,原來我是愛靠B的人(汗),

這些只是我在工作觀察到的,不見得對或錯,

可能在某些壓力下,你也不得不成為某一種先生。

不過請僅守「對修改關閉,對擴充開放的底限」吧

不然很難成為一個被尊敬的程式設計師。

這可能太難了,

那至少不要成為一位被唾棄的程式工人。

程式設計者的無知而驕傲「二」寫程式的態度?哇!台灣水泥工!

寫程式在不懂不了解的人眼中,

其實還滿礙眼的,

在公司其他人眼中(包括老闆)可能也是「米蟲」的角色,

(我朋友Y君說,有次公司的資料庫掛了,總公司派了個工程師來,

他們只覺得他在東摸摸西摸摸而已,不知道他到底在幹嘛)



這就是一個問題,

其實程式寫的好不好,

只有內行的人了解,

(不是加工業等粗工,以量計算,

不像美感雖然每個人都有見解,但至少看出你有沒有用心畫),

所以一個code寫的很爛的人,

1.可以因為加班加的久(加班先生),

2.或是他已經是個老資格先生(寫了八年連物件導向都不了解,還亂解釋,

大言不殘的說這個程式,是物件導向寫的喔(除了你寫的以外,其他都是吧!)

聽到都不敢偷笑,還敢說ajax的東西,還真大有人在),
所以被公司的其他人(包括管理階層)認為他很厲害之類的,



結果一個追求coding的精準及效率,

視多寫一行如罪惡的人,

因為準時下班,

反而被認為不積極,



後來我想了一想,

必竟大部份的老闆眼中,

覺得你留的愈晚,他就愈賺嘛(程式工程師,大部份為責任制,沒有加班費)~

所以也不會管你在幹嘛(他都走了,當然不知道你在幹嘛,只覺的又賺到了)!

(其實在這樣的工作環境中,偷公司的時間就對了, 唉呀~我說的不是A君喔!)



你就一直摸,摸,摸,最好是直接睡公司,明天也不可能遲到喔!

唉~就是因為這樣子,才會造就寫了八年,連物件導向都不懂~

for迴圈也用不好的人~

一段這樣可以解決掉的code


程式磚頭水泥工人,反正都是在混時間而已,這不過就是個工作,

只要電腦前,不斷的打code,讓老闆覺得很忙就行了,

但,就算是磚頭水泥工人,用心做的人,也是不斷的想增進自已的效率啊~



我想,可能是這樣的工作環境,才會養出這樣不重效率的程式工程師,

必竟,有無增進其coding能力,也不會多拿一分錢!



所以才會一直混時間而已~
反過來就要問問自已,為什麼要寫程式,



不就是不想做重複性的工作嗎?

結果反而把這麼有挑戰性的工作(不管你完成與否,一定有更好的解決方法的工作),

搞的和搬水泥一樣,以量計價,不是很可悲嗎?

程式設計者的無知而驕傲「一」別當個程式真理先生

這是個嚴肅而卻又另人深刻的話題,說實在才疏學淺的我,沒什麼資格來談論這個話題,
不過就是對一些,這兩年看到的一些現象,疏發的一些想法與感覺;以及告誡自已千萬不要有以下這些行為。
「一」.程式設計,本來就是拿來被人推翻用的,你寫不出來不代表別人寫不出來;就算我寫出來了,那也不代表這個程式,會是完美的,一定有其他更總明的人有著更好的寫法 。
但是沉迷於以解決一時的問題,而寫出來的code,決對、肯定、保證,日後會成為你維護上的最大問題。
這個時候檢視 設計模式
尋找適合的 Deign Pattern 以利日後的維護是重要的。
雖然不想在這裡批評什麼,不過,程式真理先生,在說下肯定語句時,切記,你寫不出來不代表別人寫不出來,程式真理先生今天為搞定一時的問題,而hardcode寫出來的東西,以後一定會成為程式真理先生的扮腳石的。
如果程式真理先生連 Design Pattern,物件導向,都還不清楚是什麼東西,甚至Function都還不太會用的程式真理先生就會落得以打壓別的程式工人,以求在程式界生存的可悲境界。
程式目前講的都是Open Source,如果連 別人的分享 都不懂的讀懂他,而只是不斷的以抄襲來解決一時的問題,真的也不知該怎麼建議程式真理先生了。
所以,千萬別成為一個程式真理先生。
隨時要精進自已的程式功力方為上策。

程式設計師的求生術1.老闆才能放的大絕:「我不管,你給我做出來就對了」

是的,出錢的是老大是千古不變的真理。

簡單分析一下,這種情況,肯定有大哥(出錢的老大)和小弟(在香港古惑仔電影裡一出場就被秒殺的賤骨頭),

大哥:「我不管,你給我用好就對了」

通常大哥放大絕時,

兩種情況,

一、大哥沒有其他資源提供給小弟測試或支援小弟,所以直接放大絕看能不能逼出什麼,通常只是希望小弟去找出其他資源搞定這一切,當然大哥不可能支援你什麼。

二、小弟的能力有問題(不過大哥通常早就知道,只是可能考慮小弟忠的比他養的小白還乖,免強用之),大哥一時受不了,所以放了大絕,不過大哥通常只是情敘的發洩,沒其他的考量,過了就算了。



是的,這跟程式撰寫有什麼關係,

麻煩,請將老大換成老闆,小弟換成你,是不是一樣啊?

哈~



在這種情況之下,賤骨頭為了保住飯碗的第一步,

google一下嗎?

不,不,不,本篇不討論技術面的,

我想討論一下,都市叢林裡的生存面。

正所謂「忍一時,風平浪靜;退一步,海闊天空。」

當你被罵時,如果只想著「別人家都有請顧問,我們家什麼都沒有」的這種心態,肯定也只會讓心情更幹,是的,

那要怎麼辦呢?

其實也是看你怎麼看待這一份「程式設計」工作,如果對你來說這只是一份工作,下了班之後的你,肯定是不會在去鑽摩程式的東西,問一問離開了工作崗位的你在做什麼吧?

如果沒有在看程式的東西,那不建議你在看下去了。

人生短短數十寒暑,越是不懂利用自已的時間,越是被別人掌控你的時間,因為你真的不知道什麼時候該做什麼,所以需要個值星班長,整頓一下你。

這樣子下去的亟至,就是上班時,一直不斷的看著手中的手錶,因為你的心跟本就不在這邊,對你來說,這只是一份可以領到錢的工作;

但,這對我來說,不是一份工作,這是我的戰場,我人生的睹注,我不可能幫人家打工一輩子,我只是暫時性的需要一份工份一份薪水來支援我的生活,持續我的研究工作,等到機會來了,我會豪不猶豫的

一定要有這樣的認之啊~ 朋友~

不然,活著很短暫,只是為了混時間,豈不可惜?



遇到被老大放大絕的機會,不是也是讓程式更精進的機會。



再言,如果寫程式對你來說很痛苦,要不要找點其他的事做?

轉行什麼時候都不遲吧!

你佔著毛坑那麼久,拉不出一坨好'屎',

不是只有你煩,大家都痛苦啊~ 唉~施主~及早回頭啊~

數字增加器;number increase embed (JQuery Plugin)


今日流量:100
2009自HIGH機本著不另BLOGGER們著眼於流量所製作之:
現更名為「數字增加器」
貼上下列的code於您的blog中

I design this blog embed for bloggers who do focus on the visited counter ,they can use this to add their visited counter bar
just paste on your blog.

<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script>google.load("jquery", "1");function OnLoad(){ $.getScript('http://wolkejqueryplugin.appspot.com/jqWL/WL_CountBar.js',function() {$("#blog_hit_daily").WL_CountBar();//#blog_hit_daily =ID名稱請自行依需求更換,this name by your need  })}    google.setOnLoadCallback(OnLoad);</script>




2009年的最後一天之年末自high機

輸入文字強迫替換器;input words changer(JQuery Plugin)



老女上司產生器是我去年再看羞昂的書「宅女日記」時,一時有感而發的點子,經過一些修改,再重新推出,且正名為「輸入文字強迫替換器」
以較為符合其功能為名。
This embed is designed for someone who want to change the comment's words,for example you can type '123' in below textbox,itwould be the '456' and put 'abc' would be 'dabce'.


輸入123會換成456,輸入abc會變成fabce,將下面code碼貼入Blog內
<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script>google.load("jquery", "1");var repJson=[{'ori':'123','rep':'456','prefixes':'','suffixes':''},{'ori':'abc','rep':'abc','prefixes':'d','suffixes':'e'}];//依照規則可以新增新的替換文字 follow the rule ,you can add new words
function OnLoad(){$.getScript('http://wolkejqueryplugin.appspot.com/jqWL/WL_autoUpdateWord.js',function(){
$('#content').WL_autoUpdateWords(repJson);//#content請依照自已的id囉! #content by your needed
})}
google.setOnLoadCallback(OnLoad);</script>

Blogspot的留言模式用的是iframe所以我沒法將功能用於此blogspot的昌言板,但其他的blog平台,應該是沒啥問題。
Blogspot use 'iframe' to be the comment,so can't change the value,but in the other blog service should be OK.

如何將程式碼正確貼於Blog;How to put the codes directly on Blog

網路上有blog embed的工具
syntaxhighlighter
基本上幾乎支援了全部的code,詳細列表參考上面連結


1.原本的作法是要大家download後再將js碼放置自已的host端,
不過看到後面有神人找出更好方法,
就是直接用google code的mirror網址就可以了,
所以,煩將下列網址貼於你的blog HTML中
我的blogspot要貼到最後面,
<link href='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/shCore.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/shBrushCpp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/shBrushCSharp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/shBrushCss.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/shBrushJava.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/shBrushJScript.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/shBrushSql.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/shBrushXml.js' type='text/javascript'/>
<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
var elements = document.getElementsByTagName(Tag);
for (var i = 0; i < elements.length; i++)
{
if (elements[i].getAttribute("name") == name)
{
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");
for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
var childNode = elements[i].childNodes[0];
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
elements[i].replaceChild(newNode, childNode);
}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
brs = elements[i].getElementsByTagName("br");
for(var j = 0, brLength = brs.length; j < brLength; j++) {
var newNode = document.createTextNode("\n");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf =
//"http://[YOUR HOST]/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]> </script>






第一個CSS網址,不知為何Blogspot吃不了,所以就直接將CSS碼貼在style裡,就可以吃了。
.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }


參考網址:
http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html
http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html

2010年4月23日 星期五

標籤淘氣啪啪走器;tags move naughty embed(JQuery Plugin)


淘氣的送出紐是我去年(2009)於前blog上發佈,
近日有時間,稍微做了一點更正,
因為不只可以用於button標籤上,
也可以用於其他標籤,
所以更正名稱為「標籤淘氣啪啪走」。
主要還是用JQuery所撰寫,
有興趣的朋友可放在自已的Blog上,
讓某個Tag一直跑還滿有趣的。

tags move naughty embed designed for elements on the blog , you let it move naughty, I think it`s interesting.

直接將下列code碼,置入您的Blog中就可以了
just put the code into your blog
<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
<script>google.load("jquery", "1");function OnLoad(){

var strList={'felling':['ha','hi','h~','gi','gg','bb'],'word':['wait','give me a second']};//參數strList的felling和word的值可以做更換;you can change the parameter 'strList' for example:  ,例如:strList={'felling':['嗨','yes','h~','gi','gg','bb'],'word':['等一下','give me a second']};


$.getScript('http://wolkejqueryplugin.appspot.com/jqWL/WL_DoNaughty.js',function(){
$('#comments').WL_DoNaughty(strList);//#comments為id名稱,請自行更換您所指定的物件;#comments is the object's name by your needed

})};google.setOnLoadCallback(OnLoad);
</script>

2010年4月8日 星期四

實作教學Facebook Application+JQuery + Google App Engine 初章.1

想要研究一下這一塊,發現中文網頁,竟然沒什麼相關資料,

可能因為是阿共仔屏蔽了Facebook吧!!

那好,我就把我目前就研究到此的作法和心得寫一寫,

以免後進走太多冤妄路,

想要撰寫我標題所說的Facebook +JQuery+ GAE

你必需具備:

  1. HTML基礎
  2. Python基礎
  3. Google帳號和已認證的可用的GAE帳號
  4. GAE的架構
  5. Facebook的架構
  6. FBML,FBJS的撰寫


上述可參考上官林傑的 Google應用服務引擎開發實戰及這邊可參考 賽大的 Facebook與funP應用程式設計

Google應用服務引擎開發實戰

http://www.books.com.tw/exep/prod/booksfile.php?item=0010443092

Facebook與funP應用程式設計

http://www.books.com.tw/exep/prod/booksfile.php?item=0010445951

PS:這本用的是Facebook自行開發的PHP API,和我們要用的pyfacebook不同,

不過除了部份API不支援,其實大部份都是相通的,盡請安心服用。


Javascript基礎(初章暫不需)

Javascript書很多,本人推薦 JavaScript私房書 JavaScript私房書 <光碟1片 >

http://www.books.com.tw/exep/prod/booksfile.php?item=0010294368


JQuery基礎(初章暫不需)

我找不到覺得優的書,所以我都只直看網站的turtuial,不過歡迎大家推薦一下

IP分享器映射http port至你的電腦

各家分享器做法不同,請參考你的說明書


ok 重點來了..

本初章先將焦點放在如何在GAE上運行pyfacebook進而開發facebook的application

Pyfacebook基礎,網路神人團所撰寫的pyfacebook 用python撰寫的可以和facebook 溝通的Server端API可供GAE使用開發

pyfacebook:

http://github.com/sciyoshi/pyfacebook/

1.首先將 pyfacebook下載解壓後,存至gae目錄下

2.在pyfacebook目錄裡建置app.yaml

內容如下:

application: whatever

version: 1

runtime: python

api_version: 1

handlers:

- url: .*

script:main.py


主檔main.py

內容如下



# -*- coding: utf-8 -*-

import cgi
import sys, os
import wsgiref.handlers

from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
import facebook
from facebook import FacebookError

FACEBOOK_API_KEY = '你的key' #如何申請請自行參閱,不詳述囉
FACEBOOK_SECRET_KEY = '你的key'
_DEBUG = True


class MainPage(webapp.RequestHandler):
def get(self):
#def post(self):
fb = facebook.Facebook(FACEBOOK_API_KEY, FACEBOOK_SECRET_KEY)
if fb.check_session(self.request) and fb.added:
pass
else:
url = fb.get_add_url()
self.response.out.write('<script language="javascript">top.location.href="' + url + '"</script>')
return


#get friend list begin
friend_ids = fb.friends.get()
friend_ids.append(fb.uid)

info = fb.users.getInfo(friend_ids, ['name', 'pic_square', 'uid'])
template_values={}
template_values={'info': info}
#get friend list end

for i in info:

self.response.out.write('<img src='+i['pic_square']+' />'+i['name']+'<br />')

def main():
application = webapp.WSGIApplication([('/',Mainpage)],debug=_DEBUG)
wsgiref.handlers.CGIHandler().run(application)

if __name__ == "__main__":
main()


執行一下你的dev_appserver.py --address=映射好的內納IP --port=80 demos/pyfacebook

(其實你也可以直接下appcfg.py上傳你的程式至GAE上,不過這樣初期開發會增加很時間成本)

設定你的facebook developer 你的應用程式

將Canvas URL:設定為你的外網IP(或是GAE的應用程式網址)

運行一下:

http://apps.facebook.com/你的facebook網址/
(請輸入你的facebook app 網址)

將 將!!!

你就會看到你的朋友列表了

預告:目前是使用iframe的方式,

第二節來說一下FBML好了