SVG技巧：How to use SVG Include SVG

為方便做程式管理，「物件」是最理想的管理方式，但在Firefox的某些限制上，使用html + svg 的架構撰寫程式，在function取用上會產生function無法直接被取用的問題。但若是使用「SVG Include SVG」的方式，就不會產生資源取用上的難題。

google了數天，外文資源中實在找不到「SVG Include SVG」的教學，大部份都是「Html include SVG」，試著往xml的方向搜尋後，找到以下讀取外部xml檔案的程式碼法 ：

function getDoc(){
　var XmlsReq;
　if(window.XMLHttpRequest){
　　XmlsReq = new XMLHttpRequest();
　}else if(window.ActiveXObject){
　　try{
　　　XmlsReq = new ActiveXObject("Msxml2.XMLHTTP");
　　} catch(e){
　　　XmlsReq = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　}
　if(!XmlsReq) return;
　XmlsReq.open('GET','test.xml');
　XmlsReq.send(null);
　var xmldoc= XmlsReq.responseXML;
}

暫且不去理會我們所要讀取的xml檔案的內容，因為這裡的動作是要「讀取」外部的xml文件檔案，所以在執行前一定要確定路徑資料夾中已經建立必要的外資檔案。以上程式片段，最後宣告的xmldoc變數內容，即為同層資料夾之下所置放的「test.xml」。

接下來我們做一些小幅的修改：

var XmlsReq;

function getDoc(){
　if(window.XMLHttpRequest){
　　XmlsReq = new XMLHttpRequest();
　}else if(window.ActiveXObject){
　　try{
　　　XmlsReq = new ActiveXObject("Msxml2.XMLHTTP");
　　} catch(e){
　　　XmlsReq = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　}
　if(!XmlsReq) return;
　XmlsReq.open('GET','test.svg');
　XmlsReq.send(null);
　setTimeout("getSVG()",10);
}

function getSVG(){
　var svgDoc= XmlsReq.responseXML;
}

以上程式片段，當然…如果取得的SVG內容將會被大量使用，svgDoc的宣告最好放到外部，但在這裡僅做簡單的教學。此時 svgDoc可以直接被當成一個SVG document使用，也就是說可以直接對這個變數做「getElementById」的動作。

Firefox修改：Firefox 介面修改（一）

前一篇文章已經知道Firefox介面內容及程式碼所在的檔案，本篇接著簡單的對Firefox的各工具做位置上的改變，以簡單的了解程式內容。

首先進行以下動作：
1、到Firefox資料夾下，進入 chrome資料夾，先找到「browser.jar」檔案
2、以任何可行的方式，將「browser.jar」壓縮檔開啟，但不必解壓縮，或是右鍵以7-Zip解壓軟體開啟


3、開啟壓縮檔後，進入 browser.jar\content\browser\ 之後，找到「browser.xul」檔案
4、將browser.xul從壓縮檔裡拉出來，建議先建立一個資料夾，再將browser.xul放到該資料夾，這個動作是準備對browser.xul做修改，我們無法從 browser.jar中修改此檔案，因而做這個動作。
5、開啟browser.xul(建議使用free ware : Notepad++ )。
開啟browser.xul檔案後，直接到行數第 733行，會看到　「＜!--Menu-->」的字樣，可以確定以下開始的程式片段，會是Firefox的工具列至狀態列元件的所在位置。


a.接著在742及743行分別是 ：

　＜menu id="file-menu" label="&fileMenu.label；"
　　accesskey="&fileMenu.accesskey;"＞

　　其中 ＜menu＞元件即為工具列中「File、Edit、View、…、Help」程式片段。

　　

b.程式在744行為

　　＜menupopup id="menu_FilePopup" onpopupshowing="getContentAreaFrameCount』();"＞

　　此為工具列下拉式選單中的「分隔線」元件

c.程式745到749行的內容

　　＜menuitem id="menu_newNavigator"
　　label="&newNavigatorCmd.label;"
　　accesskey="&newNavigatorCmd.accesskey;"
　　 key="key_newNavigator"
　　 command="cmd_newNavigator"/＞

　　其中『＜menuitem＞』即為工具列中，下拉式選單中的項目


　　


6、到目前為止，對於工具列的元件已有初步的了解，接著回到742、743行看看…


　　＜menu id="file-menu" label="&fileMenu.label；"
　　accesskey="&fileMenu.accesskey;"＞


　　我們可以注意到「label="&fileMenu.label;"」這一段敘述中「&fileMenu.label」的地方，label屬性可以指定這個個按鈕項目顯示的文字，而「&fileMenu.label」可參照至其他檔案中的「fileMenu.label」所給定的數值。假如使用Notepade++編輯此xul檔案，可以將「fileMenu.label」做反白的動作，再按下ctrl + F，並指定搜尋所有解壓過的檔案，搜尋的檔案類型請設定為「*.js *.xml *.xul *.dtd」(以空白隔開搜尋值)，設定好了之後按下「全找」：

　　

在找到的資料中能夠發現在「en-US」資料夾中，browser目錄下browser.dtd檔案第137行有疑似指定fileMenu.label變數值的資料，雙擊載入此檔，程式會自動到達en-US中browser.dtd檔案的137行：

　　

進入browser.dtd後，看到的137~139行的程式片段：

＜!ENTITY fileMenu.label "File"＞
＜!ENTITY fileMenu.accesskey "F"＞
＜!ENTITY newNavigatorCmd.label "New Window"＞

我們可以試著將137行的 "File" 改成 "修改後"字樣，並且將下一行的 "F"改為 "修"。修改之後要注意的是「若要檢視修改的結果，一定要將修改過的檔案重新置入 *.jar中，重新開啟Firefox程式」，而將修改過的檔案置入　*.jar中的過程，Firefox是不能夠在開啟的狀態的，否則會無法取代檔案而失敗。以下是「修改後」工具列的結果：







對於其他按鈕顯示的文字，可以利用相同的方法去改變。


接著回到browser.xul檔案，注意以下行數：

　　第722行到1415行：工具列程式碼
　　第1417到1438行：瀏覽器頁面程式碼
　　第1440到1436行：狀態列程式碼

這裡試著將各物件的位置做搬移的動作，首先請將第1417到1438行的程式碼做「剪下」的動作，剪下後，到722行的前一行做「貼上」的動作。

　　


以上簡單介紹小幅修改Firefox介面的動作，下一篇對程式內容做其他方面的介紹。

Firefox修改：Firefox UI 及程式碼所在檔案 の 架構

本篇以介紹Firefox的使用者介面及Mozilla Firefox裡的Chrome資料夾內容為主，下一章節將介紹如何修改此UI。

一、原Firefox的介面配置如下：


由上至下分別是：

• 標題列
• 程式工具選項
• 工具列
• 頁面內容(browser content)
• 狀態列

二、對於原Firefox介面，於Mozilla Firefox 資料夾裡，名為「Chrome」的資料夾裡，包涵了所有Firefox介面的程式內容：

1. Chrome資料夾中的檔案主要分為兩種檔案類型：*.manifest、*.jar。
2. *.manifest檔案：Chrome程式中，規定檔案讀取路徑的前置設定檔案。
3. *.jar檔案：即一種壓縮檔，Firefox的介面內容主要存放在 *.jar內部。
4. 相對於一個 *.jar 檔案，就會有一個搭配 *.jar的*.manifest檔案存在，例如 browser.jar必需搭配一個browser.manifest。
5. 何謂Chrome?　請參考：https://developer.mozilla.org/en/Chrome_Registration，簡單的說，Chrome提供了一種簡易取用windows介面物件的機制，可供使用者建立視窗應用軟體。

三、 *.jar檔案包括：

• browser.jar
• en-US.jar
• reporter.jar
• toolkit.jar
• pippki.jar
• comm.jar
• classic.jar

在修改Firefox的外觀當時，最重要的即是 browser.jar及en-US.jar兩個檔案。

四、browser.jar內容：
tools menu : 工具選項的內容，即File、Edit、…、Help這一群組的工具，由browser.jar配置。
tools : 在工具選項下方，「上一下」、「下一頁」等小工具，亦由browser.jar來建立。
browserContent : 即一般來說的「網頁頁面」，為網頁內容顯示區域，其定義於browser.jar內。
status bar : 位於整個程式最下方，同於IE的狀態列。

以上簡單介紹Firefox介面的架構及程式內容所在的檔案，後面一個章節將說明如何去做「修改」。

Firefox修改：How to re-build Firefox(XP環境)

這裡以Win XP作業系統做為Firefox的re-bulild及開發環境

1、首先確認re-build環境（這裡的環境指的即是電腦裡應該要有的某些套件）

• 需有 Visual C++ (Visual Studio)
• 下載 MozillaBuildSetup
• 將 Mozilla Build 程式碼原始檔 下載解壓至 C:\ 底下，檔案路徑需單純，不要有空白字元及某些不合法字元。(連結為FTP站，自選一個Firefox版本，建議下載3.5 rc3)

2、準備動作：

• 將Mozilla解壓後，置於C:/下，並將資料夾名稱改為「mozilla」
• 將先前下載好的 MozillaBuildeSetup 做setup的動作，程式路徑請設定於C:\mozillaBuilder。
• 進入mozilla資料夾，建立一個「.mozconfig」檔案，並以對內容做編輯，加入以下兩行指令：

　　　　ac_add_options --enable-application=browser

　　　　mk_add_options MOZ_CO_PROJECT=browser

　　　　加入指令的動作可參考下圖...

　　　

• 以上動作完成後，進入MozillaBuilder資料夾，依據你的VS版本，選擇相對應的.bat檔案執行。
  start-msvc6.bat
  start-msvc71.bat 　(VS 2003)
  start-msvc8.bat 　(VS 2005)
  start-msvc9.bat 　 (VS 2008)
  

3、下達 firefox re-build 指令

假設系統內的VS為2008，即執行 start-msvc9.bat。一開始的畫面如下圖：

此時要做的動作是『進入mozilla資料夾』

　A、鍵入「cd c:」以到達C:\底下

　B、鍵入「ls」可以得知目前目錄下的所有檔案名稱

　C、鍵入「cd mozilla」進入 mozilla資料夾

最後鍵入「make -f client.mk build」，開始re-build Firefox

☆請注意：

　A、re-build的時間通常非常的漫長，也許數小時以上不等，主要視硬體狀況。

　B、re-build結束後，可以在 mozilla/dist/bin/ 找到 re-build完成的Firefox程式內容，執行Firefox.exe即可開啟re-build過的Firefox。

4、建立Install檔案：

　A、同第3步驟的前段，開啟.bat檔案後，將位置移至mozilla資料夾

　B、鍵入「make installer」，程式開始建立一個installer的執行檔

　C、到 C:\mozilla\dist\install\sea\ 之下即可找到剛剛建立完成的 .exe 檔案

新開張

測試用...