細談Dreamweaver擴展插件

     網站設計人員都知道插件,擴展插件又很重要。 編程

    須要瞭解到Dreamweaver擴展(插件)製做的基本步驟,即瞭解擴展文件(.mxp)在打包前的文件結構及文件內容。可參看「使用擴展管理器」幫助文檔(Macromedia擴展管理器菜單「幫助」); 函數



2,應瞭解打包前的擴展安裝文件(.mxi)的結構及相關語法應用,可參考Dreamweaver擴展幫助文檔:Extending Dreamweaver(Dreamweaver菜單「幫助」-「擴展Dreamweaver保?br>
3,擴展(插件)的應用是方便咱們對Dreamweaver的使用,將特定的功能製做成擴展(插件),將大大提升了工做的效率。這也同時說明插件的開發就避免不了與Dreamweaver「內核」打最直接的交道。如何進行,將須瞭解到Dreamweaver的API(Application Programming Interface 應用編程接口),可參考Dreamweaver API Reference文檔(Dreamweaver菜單「幫助」-「Dreamweaver API 參考」)

4,在操做用戶、擴展文件、Dreamweaver三者間進行交互,則必須對Javascript有所掌握,不然Dreamweaver擴展(插件)開發無從談起。 動畫

   what,s Dreamweaver的擴展(插件)?

不管是在Dreamweaver中插入圖像、仍是添加行爲,歸根到底,也就是經過彈出的對話框進行相關設置後,將這些信息內容插入到頁面文檔中。雖然這是很方便的,但Dreamweaver的設計者不可能會面面俱到,因此還有些功能是不能經過Dreamweaver只要鼠標點點就能實現的。

好比,我須要爲網頁添加一個「加入收藏」的連接功能,這在Dreamweaver中就沒有,要進行這樣的操做就必須手動的來輸入代碼,如:
 

這是對一個超級連接添加的Javascript功能。若是每次都要添加「加入收藏」的連接功能,而每次又不多是同一個站點時,就只有重複地輸入、修改該連接代碼了。因此,一個該功能的擴展(插件)急需開發出來。

那麼這的擴展(插件)文件是什麼呢?是一個mxp文件,只要得到該文件就可安裝,並在Dreamweaver中使用該插件的功能。
具體擴展(插件)的方法:http://www.dw8.cn/dw8_1/79.asp 
網站

在安裝了該插件後,就能夠在Dreamweaver中使用該功能了,圖:。

那麼本文這裏就來講說這個提供給Dreamweaver用戶應用的MXP文件是如何生成的。 
ui



首先要明確的就是源文件和目標文件,好比Flash動畫,你們最終看到的是swf文件,而製做它的源文件則是fla文件。

因此最終的擴展文件mxp爲目標文件,而生成它的主要源文件便是mxi文件,爲何說是主要呢,由於在擴展打包以前除了擴展安裝文件mxi外,還可能有網頁、腳本、圖像等文件,只是最終打包以mxi爲準。

那麼一個mxi文件,其中都須要包括哪些內容呢?

mxi文件的內容具體都應該有些什麼內容,這些內容又如何的組織?能夠先參看下現成的文件。

打開 Program Files\Macromedia\Extension Manager\Samples\Dreamweaver 文件夾便可看到三個文件,其中

Blank.mxi文件就是一個空的很純的MXI文檔,這是一個XML格式的文件

爲了知足能儘快開發插件的強烈慾望,這些元素就不逐個詳細介紹,就談談如上fav.mxp的開發,即fav.mxi文件的內容,以下:

url

<macromedia-extension
    name="加入收藏夾"
    version="1.0.0"
    type="object">
<author name="cnbruce" />

<products> 
    <product name="Dreamweaver" version="6" primary="true" />
</products> 

<description> 
    <![CDATA[這是製做加入收藏夾超級連接的擴展]]> 
</description> 

<ui-access> 
    <![CDATA[彈出對話框中進行進行相關的設置]]> 
</ui-access> 

<files> 
    <file name="fav.htm" destination="$dreamweaver/configuration/objects/common" /> 
    <file name="fav.gif" destination="$dreamweaver/configuration/objects/common" />
</files> 

</macromedia-extension>


能夠注意到,macromedia-extension以後的各項參數屬性,是在擴展安裝後對該擴展的識別

好比 name="加入收藏夾" ,version="1.0.0" , type="object" 分別表明「已安裝的擴展」名,「版本」和擴展的「類型」

而 <author name="cnbruce" /> 則表示「創做者」

同時<description>與<ui-access>則分別顯示在下方的說明欄中。

那主要的則是

<files> 
<file name="fav.htm" destination="$dreamweaver/configuration/objects/common" /> 
<file name="fav.gif" destination="$dreamweaver/configuration/objects/common" />
</files> 

name="fav.htm" 和 name="fav.gif" 分別表示擴展的功能文件和安裝後擴展的圖標,圖標文件名應與擴展功能文件名同

destination="$dreamweaver/configuration/objects/common" 則表示這兩個文件將安裝於該目錄下,在Dreamweaver的體現就是「插入」面板的「經常使用」類別中。

固然,更詳細的mxi文檔格式介紹,請下載官方PDF文件閱讀:
http://download.macromedia.com/pub/exchange/mxi_file_format.pdf 

其實MXI擴展安裝文件,就是定義了擴展的一些信息,並選擇擴展所需的文件進行安裝。

說完了MXI,就該談談主要功能文件,即MXI中談到的fav.htm了

這個文件就是擴展的主要功能,它是鏈接操做用戶與Dreamweaver之間的橋樑,擴展文件的內容應根據功能分析而得。

好比這裏是添加「加入收藏」的功能,那麼能夠確定每次輸入的收藏網址和收藏名稱都不一樣,因此提供兩個表單文本輸入框,在輸入了內容後,在Dreamweaver中自動生成該段連接代碼。
spa

有了這個平臺,怎樣才能使得輸入的內容與「加入收藏」的連接代碼結合,並最終顯示在Dreamweaver的文檔中呢?這就不得不說到Javascript和Dreamweaver的API了。

好比函數objectTag()就是插入字符串或代碼至用戶文檔中,並使用return返回值。

This function inserts a string of code into the user’s document. In Dreamweaver MX, returning an empty string, or a null value (also known as "return;"), is a signal to Dreamweaver to do nothing.

那麼,能夠寫入以下的函數內容:

插件


function objectTag() {
var favurl="";
var favtext="";

if (document.favform.favurl.value != ""){
favurl=document.favform.favurl.value;
}
else {favurl=''; }

if (document.favform.favtext.value != ""){
favtext=document.favform.favtext.value;
}
else {favtext=''; }

return ('<A HREF=\"Javascript:window.external.AddFavorite(\'' + favurl +'\',\''+ favtext +'\')\">加入收藏</A>');

}


得到文檔中表單元素favurl和favtext的值,並結合到「加入收藏」的連接代碼中,最終返回文檔顯示。

另外,若是還含有displayHelp()函數,則是指明彈出對話框中「幫助」按鈕的相應功能,好比:


function displayHelp(){
    dreamweaver.browseDocument("http://www.dw8.cn/");
}

其中dreamweaver.browseDocument即相關API函數,(open the Hotwired home page in a browser)

此外,若是是擴展是彈出窗口式,則在文檔首行聲明:


<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">


其餘還有好比:

<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine5.0//floater">
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine5.0//pi">

因此,一個完整的fav.htm代碼以下

HTML這裏略 設計


有了MIX擴展安裝文件fav.mxi,還有擴展功能文件fav.htm, 
code

就剩下擴展圖標fav.gif了

http://www.cnbruce.com/test/dwex/fav.gif 

以上三個文件保存於同一目錄下,打開Macromedia擴展管理器,選擇「將擴展打包」,選擇fav.mxi文件進行打包,生成提供給用戶使用fav.mxp擴展(插件)文件

   

插件開發完畢。

end

adiOS

相關文章
相關標籤/搜索