網(wǎng)店的Logo。那大腿不是別人的,正是韓國歌星寶兒……
她跟我說上面這張圖最大的問題就在于太有夜店風(fēng)格,與她的店不符。不過用著用著,她自己倒也喜歡上了。
這個是剛出爐的5月新款的預(yù)告,照片里的人可全是她……
Jasper's Java Jacal
嘉士伯的Java小屋
|
|
BlogJava |
首頁 |
發(fā)新隨筆 |
發(fā)新文章 |
聯(lián)系 |
聚合![]() |
隨筆:51 文章:2 評論:717 引用:0 |
前文說道開發(fā)一個Gadget可以分為兩個步驟:先寫界面的XML文件,再寫邏輯部分的JavaScript。我們就遵循這個步驟來寫一個再簡單也不過的Gadget。 用到的工具有兩個,一個是隨Google Desktop SDK附帶的Gadget Designer,用來編寫并有限的預(yù)覽界面,還可以調(diào)試JavaScript(這個就更有限了);一個是Google Desktop,用來測試寫好的Gadget。下面要寫的例子是我在為某研究院某個項(xiàng)目策劃階段作POC時所寫的一個小例子,可以顯示一個Google用戶的Picasa相冊中的Album名稱和縮略圖。雖然很小,但包含了Google賬戶的自動登錄,顯示網(wǎng)絡(luò)圖片,XmlHttpRequest的使用等很多實(shí)用技巧。整個完成之后是這個樣子: 請跟我一起來。現(xiàn)在打開Gadget Designer,選擇File->New Gadget,輸入了名稱“Picasa”之后,就可以看到一個完整Gadget的雛形了。你可以找到這個項(xiàng)目所在的文件夾,雙擊其中的gadget.gmanifest,此時如果你已經(jīng)安裝了Google Desktop,就可以看到Desktop自動啟動,并把這個很“白”的Gadget(別笑,除了一張白色背景圖片以外,確實(shí)什么也沒有)顯示在Sidebar中。如圖: 到項(xiàng)目文件夾里可以看到一個main.xml文件和一個main.js文件。我們的界面就是在main.xml文件里指定的,打開它,可以看見它指定了一張GadgetDesigner幫我們生成的白色png圖片作背景,還指定了我們要導(dǎo)入哪些個.js文件。我們來小改兩個地方: <view height="150" width="250" onopen="view_onOpen()">
<img src="stock_images\background.png" /> <script src="main.js" /> </view> 一是把view的height改成250,二是給img元素添加一個屬性name并給一個值,就像這樣: <img name=”bgImage” src="stock_images\background.png" />
然后雙擊gadget.gmanifest,看看更改效果: 乍一看貌似沒什么改變,但是注意看我用黑色線圈出來的那一條橫杠,那是我們的Gadget的下邊沿,說明它的高度還是變化了,但是白色的背景沒有變,因?yàn)槲覀儧]有改變背景圖片的大小。現(xiàn)在通過.js文件中代碼的方式來改變背景圖片的高度,可以看出些有意思的東西。 打開main.js文件,你應(yīng)該會看到一個view_onOpen()函數(shù),這就是Gadget啟動時會自動調(diào)用的第一個函數(shù)(好吧,并不嚴(yán)格,但是在調(diào)用的順序上,它的確是相當(dāng)靠前的),我們就在這個函數(shù)內(nèi)部添加下面這一句: bgImage.height=250;
再雙擊gadget.gmanifest運(yùn)行看看,白色背景也變高了吧。 我知道你一定會問,代碼里的bgImage是什么東西?怎么沒見在任何地方聲明這個變量,也沒見任何地方作初始化呢?回想我們剛才在main.xml文件里做了什么?我們給背景圖片取了一個名字,叫bgImage,而且別懷疑,你在代碼里訪問的這個bgImage,正是那張圖片!背后的工作就是Gadget Host通過JavaScript引擎為我們做的,凡是在.xml文件里放置的東西(無論什么,圖片也好,按鈕也好,一個抽象的div也好),只要你給了一個name屬性,在JavaScript代碼中就可以直接使用這個名字來訪問該對象(前提是你給的名字得是獨(dú)一無二的),這與瀏覽器中隨時可以訪問document對象而不用做任何聲明一樣,那是瀏覽器這個運(yùn)行環(huán)境提供的對象,隨時可用。 另一個值得注意的地方是在.xml文件里,屬性的值都必須加上引號,像height=”250”(因?yàn)槟抢锸褂玫氖菢?biāo)準(zhǔn)的xml語法),而在JavaScript代碼中,就要根據(jù)屬性具體的類型來決定,像高度這種整數(shù)型的值,就不用加。 你可能還會問,那么bgImage這個對象,是什么類型的,它有些什么屬性和方法可供我使用呢?它是一個img類型的對象,參考http://code.google.com/intl/zh-CN/apis/desktop/docs/gadget_apiref.html這個鏈接,這也是Google Desktop Gadget的API參考頁面,列出了Gadget Host提供的各種對象屬性和方法的說明(雖然事實(shí)驗(yàn)證,Google自己列的這些都不全面,后話)。 最后叮囑一句:盡管main.xml文件里的東西(什么img啊,以后還會加進(jìn)div啊,checkbox之類的東西)看起來多么的像HTML,Gadget都和Web沒有天然的聯(lián)系。Google自己發(fā)布了一些Gadget,例如Gmail和Google Docs,外觀與這兩個服務(wù)的網(wǎng)頁非常像,再加上Gadget也主要使用JavaScript開發(fā)(也少不了Universal Gadget跟著摻合),間接導(dǎo)致了總有人把Gadget顯示的地方考慮成一個小的瀏覽器窗口,而想把Web的一些東西簡單的放在這里,到底行不行呢?李寧說:一切皆有可能。阿迪說:沒有不可能。匹克說:我能,無限可能。我要說:可能,但很難(笑)。 所以在編寫Gadget的時候,最好的方法是把它當(dāng)成純粹的桌面程序,忘掉Web的那一套。 這一節(jié)給大家入個門,下一節(jié)開始說說在Gadget中怎么做Google帳戶的登錄,還會很羅嗦的,請見諒(笑)。
在Gadget開發(fā)人員看來——我當(dāng)然是指你我這樣的IT民工,來開發(fā)一個Gadget的人,而不是Google大樓里成天琢磨怎么和微軟對著干的那幫子人——一個Gadget由三大部分組成:描述UI的一系列.xml文件;存放程序邏輯的.js文件以及資源。 下面是一個Gadget項(xiàng)目在Google Desktop Disigner里面的結(jié)構(gòu)截圖。
資源這東西好理解,無非是程序要用到的各種圖片啦,字符串啦等等。讀者:字符串?什么意思?答:把程序會用到的一系列字符串統(tǒng)一存放,想引用的時候使用一個常量名字就可以,而不必在需要這些字符串的地方每次都重寫一遍,和Java中的property文件作用類似。 其余的兩部分會分節(jié)來詳細(xì)講解。 當(dāng)然說只有三部分,是指我們大多只關(guān)心這么多,實(shí)際上還有第四部分,一個Gadget Settings文件,其中大多是關(guān)于這個Gadget的元信息,什么作者啊,創(chuàng)建日期啊,uuid啊,戶口所在地啊,最高學(xué)歷啊,婚姻狀況啊,哦,我給說成簡歷了(笑)。 前面也說到過,一個Gadget其實(shí)就是一個桌面應(yīng)用程序(再一次的,不管寫起來某些語法多么得像HTML,Gadget與Web都沒有天然的聯(lián)系),只不過這個程序在Gadget Host的管理之下,行話叫“托管”。Windows下沒有單獨(dú)的Gadget Host,它被合并在Google Desktop里面(算是另一種捆綁吧)。而Linux下的確有干干凈凈的Gadget Host,且有源碼下載,我們所有對Gadget的理解也都源于這個版本和相關(guān)的文檔。 那么在Gadget Host看來,一個Gadget是什么東西呢? 以我寫的一個小Picasa Gadget為例,在Picasa Gadget初次加載之前,它是一個.gg的壓縮包(其實(shí)就是一個標(biāo)準(zhǔn)的zip包,被改了后綴名而已),Gadget Host會從中讀取需要的文件,然后做相應(yīng)的解釋。 Gadget Host可以看成只有兩部分組成:一個UI的渲染器和一個JavaScript引擎。 說UI渲染器之前就不得不回頭重提剛才說到的一個Gadget包括了一系列.xml文件這件事。實(shí)際上這些.xml文件就是用來指定你想寫的Gadget的界面的,就是說,你的Gadget跑起來以后長成什么樣子,是由這些個.xml文件來決定的(當(dāng)然,嚴(yán)格說來可以使用JavaScript在運(yùn)行時改變一些內(nèi)容,但請不要抬杠,笑)。 這些.xml文件中最主要的是main.xml這個文件,你的Gadget窗口有多大,在什么位置有幾個按鈕,列表有沒有滾動條,背景是什么顏色等等,都在這里指定。還包括這些東西上的事件監(jiān)聽函數(shù)也一并在這里聲明(不知為何,讓我莫名的想起微軟的MFC,當(dāng)然,嚴(yán)格說來可以使用JavaScript在運(yùn)行時動態(tài)改變這些內(nèi)容,但請不要再次抬杠,笑)。 UI渲染器干什么呢?就是來把這個.xml所要求的界面轉(zhuǎn)換成具體的系統(tǒng)調(diào)用,讓操作系統(tǒng)來完成繪圖(好吧好吧,你喜歡嚴(yán)格,那我告訴你,Linux版本下首先被轉(zhuǎn)換為Qt的C++類,由Qt來發(fā)起對系統(tǒng)繪圖的調(diào)用)。 既然Gadget的程序邏輯都使用JavaScript來編寫,理所應(yīng)當(dāng)?shù)模珿adget Host必然要包含一個JavaScript解釋器來解釋這些代碼,這個解釋器也被叫做JavaScript引擎。Gadget Host里確實(shí)有這么個東西,叫做Spider Monkey,它恰好也是FireFox所使用的JavaScript引擎。廣義上說,一個引擎的作用主要是解釋它遇到的一切JavaScript代碼,如果代碼使用到核心JavaScript的功能和對象,它便直接提供;如果代碼使用到了一些依賴于底層的對象(例如Gadget Host就提供了很多專有的JavaScript對象和方法供使用,這些都是核心JavaScript之外的東西),則引擎還要負(fù)責(zé)轉(zhuǎn)發(fā)這樣的請求(你可以說,這實(shí)際上是適配器做的事,我這樣簡化有助于理解,請不要一再抬杠,笑)。 也可以這樣從邏輯上看Gadget的組成:即一個Gadget就是一組圖形界面,加這些界面上每個控件(按鈕啊,列表啊,輸入框等等)的事件監(jiān)聽函數(shù),這種界面描述與事件邏輯分離的程序模型,和微軟的XAML+C#簡直如出一轍。因此一個Gadget的開發(fā)實(shí)際上也就可以分為這兩大步驟:先寫界面的XML文件,再寫邏輯部分的JavaScript。下面一節(jié)就用一個小例子來看看具體如何做。別嫌我說得太詳細(xì)哦。 去年這一年被研究生院和所里揪著干了不少自己并不擅長的事,其中就包括為各種大小活動設(shè)計(jì)PPT,邀請函,節(jié)目表之類的東西。年底了,拿出來看看也能理一理自己從無到有,從門外漢到菜鳥的成長過程。共賞,共析哈。 最早的一張,元旦晚會時為模特隊(duì)做的。本來他們自己做了一套共計(jì)3張的PPT,趕巧我這張已經(jīng)做好了,便讓他們自己選,結(jié)果還是選了我的,呵呵。
同一場晚會為舞蹈隊(duì)做的,沒太多東西,只是字體和配色斟酌了一陣子。
青年博客大賽決賽頒獎晚會的主題PPT,剛提交第一版便遭到老師表揚(yáng),結(jié)果一點(diǎn)修改都沒有做便獲通過。
同一場晚會的領(lǐng)導(dǎo)致辭圖,風(fēng)格還挺一致的吧?(笑)
仍然是博客大賽決賽頒獎晚會,那一次晚會因?yàn)橥庹埞?jié)目比較多,整體水平著實(shí)不低呢。
計(jì)算所青年歌手大賽的節(jié)目單,其實(shí)參考了很有名氣的設(shè)計(jì),所以才能做成這個樣子,不敢專美,特此聲明。
計(jì)算所青歌賽的主題PPT,多虧有設(shè)計(jì)的四大原則幫忙啊。后來一個計(jì)算所的師兄還問我把這張片子討了去,說是只看一眼就喜歡上了里面的女孩,還一個勁的問我她是誰,是咱所的么,我趕緊解釋說不是不是……
最近一次為街舞社的表演做的PPT,發(fā)現(xiàn)自己的風(fēng)格算是定型了,怎么看都似曾相識,當(dāng)然也可以說,是黔驢技窮了…… |
|