話先說在前頭. 這個是測試版. 但它支援了最新版Adobe Flex SDK 4.5 版.及 Flash Player 10.3 版
要想試用最新功能的可以試用. 但是不建議用來做為日常開發程式的.
你可以在底下的連結下載它
http://www.flashdevelop.org/community/viewtopic.php?f=9&t=3529
它會同時安裝2種SDK 分別是 Adobe Flex SDK 4.5 及 Adobe AIR 2.7
不過你大概在裝完後極容易碰到底下的錯誤訊息.
會碰到這個錯誤訊息是因為在安裝FlashDevelop 時會自動下載 Flex SDK 時失敗了. 碰到這種情況就
要自力救濟了.只好請您移駕到底下的網址去下載 Adobe Flex SDK
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.5
選最肥大的那個下載 229MB 那個
這可不是什麼寶島鐘錶眼鏡公司新推出的鉻合金輕質框架, 這個框架是由知名的搜尋引擎google所推出的,眾所週知的google 不只是僅有搜尋引擎,本身它也有推出一款名為 chrome 的瀏覽器.這個名字的中文翻譯就是鉻合金
Google 公司推出的 chrome 跟Mozilla 基金會推出的 firefox 及 apple 公司推出的瀏覽器 Safari
及Opera Software ASA 軟體公司的 opera 皆是支援CSS 3 HTML5 等新技術的次世代網路瀏覽器
看到這裏.有沒有發現一個知名的瀏覽器似乎不在筆者列出的次世代網路瀏覽器之列?
沒錯. 它就是舉世聞名的微軟公司推出的瀏覽器 Internet Explorer 是也. 底下的文章引述自維基百科正體中文版 全文的連結如右: http://zh.wikipedia.org/wiki/Internet_Explorer
Windows Internet Explorer（舊稱Microsoft Internet Explorer，簡稱Internet Explorer，縮寫IE），是微軟公司推出的一款網頁瀏覽器。截至2010年9月止，統計的數據顯示Internet Explorer的市場佔有率高達55.1%[1]。雖然它依然是使用最廣泛的網頁瀏覽器，但與2003年最高峰時相比，市場佔有率相差超過30%。
它是所有網頁程式開發者的夢魘, 以測試網路瀏覽器相容性的ACID 3.0 而言 連目前最新的 IE 9 也無法取得 100分 右側是 ACID 3.0 測試網頁的網址 http://acid3.acidtests.org/
很不幸的仍然有許多的使用者或是公司行號仍使用著舊版的瀏覽器. 例如 IE6 ,IE7 ,IE8 ,這些瀏覽器也就是造成網頁開發者夢魘的源頭.
更不幸的是 Internet Explorer 9瀏覽器不再支援Windows XP及其以前版本，對Windows Vista SP1和RTM版本亦不支援,這意謂著目前仍在使用 Windows XP 及 Windows Vista SP1 的使用者將無法享用 IE9. 此外最初隨 Windows XP 一起捆綁出貨(意指不管你要不要用IE它都內建在WINDOWS XP 作業系統)的 IE 它卻是惡名召彰的 IE 6.0 版
我們來回顧一下 IE 6 做了什麼好事
雖然每一個版本的IE都會改善基本支援，包括在版本6中引採用的「符合標準模式」，
其中用來建立網頁（HTML和CSS）的核心標準卻仍然是以不完全且不正確的方式來實作的。
舉例來說，它不支援 元素，但這是HTML 4.01 標準的一部份，而且它對CSS1標準中的float-margin 部份的實作有缺陷。Internet Explorer盒模型錯誤 是Internet Explorer 對CSS標準的實作中，最為人熟知的缺陷之一。
網頁標準的支援Internet Explorer使用了Trident排版引擎，幾乎完整支援HTML 4.01，CSS Level 1，XML 1.0和DOM Level 1，只是有一些排版錯誤。它亦部份支援CSS Level 2和DOM Level 2。
它內建的XML直譯器支援XHTML，但是微軟從IE 5.0以後取消了這一支援，使它變得難以存取。如其它瀏覽器一樣，當MIME型別標識為「text/html」，它能解釋為XHTML。當MIME型別標識為「application/xml」和「text/xml」時，它也能解釋把XHTML解釋為XML，但需要一個小的XSLT度量[9]來重新啟用XML對XHTML的支援。當把它定義為偏好型別如「application/xhtml+xml」時，它假裝不理解XHTML，相反把它當成一種不了解的供下載的文件型別來對待。
Internet Explorer依靠DOCTYPE判斷一個網頁應該按老版本渲染還是按W3C標準渲染（在列印中，Internet Explorer總使用W3C標準。）。根據MSXML的版本不同，它可以完全支援XSLT 1.0或1998年12月的XSL草案。Internet Explorer有一個自己的ECMAScript變體，名為JScript。
最新版的Internet Explorer（版本9），支援了部份全新的HTML5新標準以及CSS3，於The HTML5 tset當中，獲得了130/400分，不過相較於其他流行的瀏覽器而言，支援度仍屬於偏低。
要測試您現在用的 IE 對於最新的 HTML 5 的測試請列用下列的測試網址
http://www.html5test.com/
IE 8 目前在Windows XP 上能安裝的最高版本,在ACID 3 及 HTML5 測試中得的分數真是非常的難看
以下是ACID 3 測試
以下是 HTML5 測試
好囉. 數落了 IE 的罪名後. 大家大概能明白 IE 不能被敬列於次世代瀏覽器之列的原因有所了解了
而廣大還在使用 IE6 , IE7 ,IE8 以致於 IE9 的客戶怎麼辦? 對於網頁開發人員一邊被客戶要求要最新的技術.最好的畫
面呈現一邊又被要求舊瀏覽器上面即使看不到正確的畫面至少要做到不能歪斜. 這真是陷入兩難
一般的做法是先來段 CSS RESET 修正 IE 6 重大缺陷盒模型錯誤, 再使用 CSS HACK 再來修正 PNG 透明背景的問題, 再利用 JS 來迫使 IE8 認得 SVG .這對每一個網頁開發人員來說都是惡夢.
無數的網頁開發人員深陷其中不能自拔. 如果上述的做法你都還不明白或能熟悉掌握
那麼你將來要面對它時.得有心理準備
反觀 Google Chrome 及其他的次世代瀏覽器根本沒這些問題.而Google 公司推出了
Google Chrome Frame 簡稱 GCF 來解決廣大的網頁開發人員的惡夢.
它的做法是安裝這個軟體到IE 去.適用的版本是 IE 6,7,8 適用的版本 WINDOWS XP2 VISTA SP1 RTM
並如下圖勾選用並按下接受並安裝
稍待數分鐘即可完成安裝.
安裝完後對用者來說算是 "無感安裝" 因為它完全不會影嚮您的日常操作,也不會因為裝了它而導致一些 IE ONLY 的網頁無法運作
例如某些網頁本身開發之初就僅考慮到IE 是否能正常運作或正確顯示的特定網站.
因為安裝好GCF 預設上它並不工作.
除非它偵測到您現在開啟的網頁中有底下的這行指令
<meta http-equiv="X-UA-Compatible" content="chrome=1">或偵測到您開啟的XHTML 網頁中有底下的這行指
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>它才會把現在您的IE 瀏覽器的網頁引擎換為Google Chrome 來觀看網頁這對網頁開發者的意義是什麼呢? 這表示利用Google Chrome Frame 後,您就可以放心發揮您的創意例如加上特別的創意字形並以SVG格式顯示及儲存.也可以安心使用HTML5 及 CSS3 (當然這要看Google Chrome 支援的程度而定) HTML 5 與 CSS3 能為您帶來什麼視覺上的震撼那就要勞駕您去研究一下了
不過還有一個情況就是你大概不可能一一告之用戶要安裝 GCF ,那麼用幾道指在令寫在網頁裏吧假設一個情境:一般的公司網站大概會有一個以FLASH 做的導引頁面 也幾乎會設計一個 SKIP 按鍵對吧?那麼建議您在Flash 導引動畫底下加上那麼一句話"若您的Internet Explorer 網頁瀏覽器過於老舊為了您的最佳視覺體驗強烈建議您安裝使用 Google Chrome Frame或其它次世代的網頁瀏覽器"再來的動作就是就是在 index.html
<body>
<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
#prompt
{
width: 100%;
margin:0px auto;
text-align:center;
border: 2px solid orange;
}
</style>
<div id="prompt">
<p>
您的網頁瀏覽器太過老舊請安裝Google Chrome Frame 才能得到最佳的顯示效率及最美觀的效果</p>
</div>
<script>
window.attachEvent("onload", function() {
CFInstall.check({
mode: "overlay", // the default
destination:"http://localhost/ohmytest.html"
});
});
</script>
<![endif]-->
</body>
下來的文章是針對網頁管理者,稍後再補上這篇文章
承 Flash Builder 4 教學其之六的教學,你應該可以完成如下圖畫面,若有困難通常是沒有弄清楚如何正確的選取你要進行排版的元件所致.
承上例,你會發現這張圖好像有點不那麼正規,若我們把中間這兩個按鍵移到右邊去,再把下面那個標籤移到右下角去是不是會美觀些?
好吧. 那麼動手作吧. 若你實在不知道怎麼讓這樣做出這樣的版面,那麼你參考底下的圖把程式輸入進去就可以了.
你可能會發現你把程式輸入進去後,也完成了執行是沒有問題的但是版面就是歪的. 沒錯! 本來我給的範例就是歪的.
這樣吧. 你先試著進入視計視圖(忽然我覺的翻譯成視圖有點怪怪的,以後我會統稱設計視野)好好的把玩一下試著把那兩個按鍵
拉到右邊去,而且要跟最左邊的按鍵一樣高度. 底下留一點空間看起來較美觀, 中間的標籤拉到右下角去.
在你把玩一番後,可能拖曳按鍵到定會是比較容易的事,可是那個標籤怎麼拖也拖不動簡直不動如山,那麼請仔細看一下底下的圖
仔細觀察這張圖的右邊,你明明如上圖所示滑鼠游標是停在要點選的標籤上面,可是右邊的屬性面版卻顯示你選中的元件是s:Group 容器.當然你會無法拖曳因為這就是之前提到的難以選取某些元件的問題.
其實這樣問題在爾後使用設計視野會經常碰到,解決的方法就是有效的利用大綱視野,請參考下圖
在大綱視野這張圖片,應該可以很清楚的看出各個容器,按鍵,標籤等的排列方式. 在設計視野時搭配左下角的OUTLINE(大綱視野)
你就能正確點選到你要修改或是拖曳的元件,這一點很重要你也會常常利用到此功能在設設UI排版時.
接下來我們回頭看那兩個不太上相的按鍵,如何利用條件限制式使其對齊.既然我們要仿效左邊的按鍵,那麼我們先來觀察一下左側的按鍵是怎麼設定的,那麼先點選左上的按鍵. 再把右側的功能視窗拉到最底下(因為條件限制式就在最底下) 參考一下下圖
注意看到這部份:
在屬性面版的右下角就是Constraints (這個就是條件限制式),先把它晾在一邊不理它,往上看是Size and Position 這是用來調整你所選取的元件的寬度及高度還有水平位置x 及 y 垂直位置. 你看到的左側這個按鍵Flex 是X:5 Y:5 ,你可以在設計視野試著單獨改變
其中一項的值來觀察它們的變化來了解這些設定值的作用,但是X 跟 Y 以外的值暫時讓它保持預設值(什麼數值都保留空白即是預設值)
那麼,你已經知道Y 是垂直位置,那麼也把其它兩個按鍵改為Y=5 看看, 看到執行結果了吧. 三個按鍵都是同一垂直位置了,美觀多了.
接下來解說條件限制式. 看到下圖的條件限制式應該有注意到在那個方框外有六個可以核選的方框吧.
你先選取Flex 這個按鍵,然後直接勾選上面那一排的最左則的勾選框,跟左側那一排的最上面的勾選框. 這作法就是把按鍵以左上的限制條件式來對齊. 你會發現這個設置跟之前的x:5 y:5 根本一樣嘛. 是沒錯, 只是一個是你用手動拖曳或透過程式視野來改動數值, 而這個卻是利用條件限制式來對齊
有一點要提醒你,你在條件限制式輸入的數值,記得要按一下ENTER,這樣它才會如實反映在設計視野中. 有一個重要的觀念要提示你那就是限制條件式的對齊方式並不是以水平位置或垂直位置中的其它元件來對齊.而是以父元素作為對齊的對象. 以這個例子來說這三個按鍵的父元素是誰? 看一下大網視野自然不言可喻
在之前的Flash Builder 4 教學 : 初探系列其之五 裏, 你已經定義了一個應用程序的一部分使用MXML版面佈置，但現在你將使用設計視圖中添加更多的元素，並設定其屬性。
附上之前練習的程式碼供您參考
- <?xml version="1.0" encoding="utf-8"?>
- <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" >
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
- <s:controlBarLayout>
- <s:BasicLayout/>
- </s:controlBarLayout>
- <s:controlBarContent>
- <s:Button id="btnCheckOut" y="10" label="Checkout" right="10"/>
- <s:Button id="btnCartView" y="10" label="View Cart" right="90"/>
- <s:Button label="Flex" x="5" y="5"/>
- </s:controlBarContent>
- <s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>
- <s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">
- <s:layout>
- <s:HorizontalLayout/>
- </s:layout>
- <s:Group width="100%" height="150" id="products">
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Label text="Milk" id="prodName"/>
- <s:Label text="$1.99" id="Price"/>
- <s:Button label="AddToCart" id="add"/>
- </s:Group>
- <s:Group id="cartGroup" height="100%">
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Label text=" Your Cart Total: $"/>
- <s:Button label="ViewCart"/>
- </s:Group>
- </s:Group>
- </s:Application>
那麼, 怎麼進入 Design View 設計視圖,請按照底下的圖片操作吧,按下Design View 的圖示.
按下Design View的圖示後,你會看到你所設計的應用程式的外觀.在這兒我們將會學習到為每一個元件設定它的屬性及相關的程式設定.
注意看到左下角的 Components 組件視圖,你可以從這兒拖曳你想要使用的組件,像是Button按鍵到你的應用程式去
也就是可以連一行程式都不用寫,只要再自行調整它的位置或設定它的程式行為,可以大大的節程式開發的時間
及左下角的 OUTLINE 大綱視圖,這兒可以很方便的檢視應用程式內各元件的排列
如果你所做的練習不同上面的範例,試著去熟用Design Mode 設計模式,讓它跟上面的範例一模一樣.
在Flash Builder 中,我們可以使用containers (容器)跟layout objects.(版面物件)來做幾乎是全部的版面排版,之前提到Flash Builder 可以輕鬆的用來為您的應用程式製做UI(使用者界面),也是因為它在這方面提供了便利又強大的功能.
在技術層面上，容器只是一種特殊類型的組件，它包含和Group 群組和其他項目。Group群組內包括的這些項目我們統稱為子元件，或者更明白地說，LayoutElements 版面元件（這僅僅是一個廣泛的術語元件如按鈕，複選框和等）和GraphicalElements 圖形元件如正方形，圓形等。雖然group 群組將它們收納在在一起，但它們不會知道
這些項目在螢幕上的位置或順序。
當您選擇一個容器來使用，你基本上要做的是設置他們精確的座標位置,然而容器最廣泛應用的功能是它能夠被
skinning殖皮或換膚(內地的翻譯是翻成:"蒙皮". 總之就像你把你的手機拿去做封膜一樣,容器的外觀是可以被改變成你想要的樣子。
skinning 植皮/換膚 是定義視覺外觀組件的處理步驟。在一個容器上，你能想到的外觀包括如背景，邊框，陰影，等等。一些Flex的容器可以植皮，這意味著你可以定義它們在屏幕上顯示的樣子。其他容器存在只是為了確保聚攏它們的子元件，他們自己沒有一個視覺外觀。也就是說不是所有容器都可以植皮,能夠植皮的條件是至少它們必需是一個視覺外觀組件.
容器的類別有下述幾種:
Group 群組容器: 在Flex 4 中最簡單的類別,一個群組可以用來包括子元件,但它們沒有自己的視覺外觀..
SkinnableContainer 可植皮/換膚的容器: 一個可以換膚的容器的功能等同Group群組並且能夠用來定義營幕 上的視覺外觀 .
BorderContainer 外框容器: 也是一種可植皮/換膚的容器,它可以用來將子元件包覆在框內 .
Panel 平面容器: 也是一種可植皮/換膚的容器,它有個邊框包覆,它可以有一個控制橫列(Control bar),可設置標題列及控制區域 .
Application 應用容器:也是一種可植皮/換膚的容器,它通常應用在你的應用程式的根本層,像是Panel容器,它也可以擁有控制橫列(Control Bar) .
NavigationContent 導引欄容器: 也是一種可植皮換膚的容器.通常用ViewStack來控制,稍後會再提及它
介紹到這裏,接下來要提的是 Layout Object版面物件.
版面物件是與容器一起運作的,用來決定如何容器群組內的子元件如何顯示在螢幕上,flex 4 提供了幾種
版面物件你可以自由應用它來定義你想要展示的版面.
底下介紹幾種版面物件的用途
BasicLayout: basic layout基本版面配置,用來做為絕對定位用,你必需為每一個版面元件定義x 跟 y 的座標 .
HorizontalLayout: horizontal layout 水平版面配置,水平排列每一個子元件一個緊接另一個橫向排列 .
VerticalLayout: vertical layout 垂直版面配置,垂直排列每一個子元件一個緊接一個縱向排列 .
TileLayout: tile layout瓦狀版面配置,可視需求任意排列子元件成水平或垂直布置
底下分別列出兩個範例: 請你解釋給我聽這樣版面配置是怎麼組成的?
範例1:
- <s:Group>
- <s:layout>
- <s:HorizontalLayout/>
- </s:layout>
- <s:Button label="1"/>
- <s:Button label="2"/>
- <s:Button label="3"/>
- </s:Group>
範列 2
- <s:Group>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Button label="1"/>
- <s:Button label="2"/>
- <s:Button label="3"/>
- </s:Group>
反應快的讀者似乎會抱怨,呃.. 你好像連第一行程式都還沒開始教! 的確沒錯我是一行都還沒開始解說
一般而言應該是見樹先見林,你總是先得對樹林的外觀有所認識才會走近才會見到樹沒錯吧,一般程式介紹幾乎
很快就會提到Say Hello的範例程式,我倒不急著介紹因為我認為其意義不大,以FLEX來說,了解了程式的基本架構就要開始疊床架屋了,也就是可以開始動手寫更為複雜的程式了
這也不是揠苗助長,實際上的原因是讀者您真的是個人才,您真的好有才因此我決定給您施行精英教育
那麼還是先做個比喻好了,假設您在烹調手上拿者菜刀對各式的食材做料理,當然因應你要做的菜色及針對食材的特性有的要切丁,有的要切絲,有的要切塊,如此這般那樣的來進行料理對吧, 但無論怎麼地切好分類好的食材一個一個拿來看,大概不會有人想立刻吃下去(例如生的,未調味的,未經烹煮的. 那麼最後也會因食譜建議的料理方式將各式食材組合起來再爆香大火快炒並調味吧?
看到這裏,轉過頭來FLEX程式設計 一般食材被料理成各式形狀就像是FLEX 程式裏各式容器的功用,有的是橫條狀,有的是四方型,還有更多不同功用及類型的容器. 您必需把它們適當的組合起來,就像料理一道菜一樣
在介紹諸多容器的特性之前,我先讓你看看一段程式,這段程式很簡短只有六行
- <s:controlBarLayout>
- <s:BasicLayout/>
- </s:controlBarLayout>
- <s:controlBarContent>
- <s:Button label="Flex Grocer"/>
- </s:controlBarContent>
先解釋前三行
- <s:controlBarLayout>
- <s:BasicLayout/>
- </s:controlBarLayout>
- <s:controlBarLayout>
- </s:controlBarLayout>
- <s:BasicLayout/>
再來解釋 5,6,7 行
- <s:controlBarContent>
- <s:Button label="Flex Grocer"/>
- </s:controlBarContent>
- <s:Button label="Flex Grocer"/>
將這六行加進去. 你問我要加在那裏? 看底下的範例吧.
- <?xml version="1.0" encoding="utf-8"?>
- <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
- <s:controlBarLayout>
- <s:BasicLayout/>
- </s:controlBarLayout>
- <s:controlBarContent>
- <s:Button label="Flex Grocer"/>
- </s:controlBarContent>
- </s:Application>
再來請到你的瀏覽器去看一下,這是您的第一隻程式,由於剛起步您也只寫了六行程式,所以只能看到一個控制橫bar,跟控製橫bar裏的一個按鍵,當然按下去不會有任何作用(因為也還沒有相對應的處理程式),而這隻程式可是一個不折不扣的flash 技術為主的應用程式,它是一個swf檔
Flash Builder 4 教學 : 初探系列其之五
程式寫作之道在於明白其真實意義,即使任何微不足道的程式,也是有其嚴謹的定義必需遵循
電腦科技的文明來自沒有人性的設計,在冰冷的程式碼裡展現您的心血與苦心.
完善的程式是一連串正確無誤的運算所產生的必然結果,這也意謂著一個程式師很嚴謹的一丁點的錯誤都不能犯,在程式裡打錯一個字,或未正確區分大小寫都會導致不可預期的錯誤,日本有句俗諺 "油斷一秒 怪我一生"(因為一時的疏忽而導致終身的遺憾 .切記!
步驟1: 參考下圖的畫面,我將一一解釋各行的用意
完整的程式列表於下: 以方便對照底下的說明
- <?xml version="1.0" encoding="utf-8"?>
- <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
- </s:Application>
先看第一行
這一行很簡短的,只是指明了這個XML檔案要使用UTF-8 的編碼(這種編碼方式適用於雙字組的中日韓等語系
- <?xml version="1.0" encoding="utf-8"?>
再來看2,3,4行
- <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
這幾行是用來告訴FlashBuilder 使用了那些XML的命名空間,命名空間的意謂者用來宣告FLASH Builder 去那兒取得這些類別庫,及提供類別的參照好提供程式使用
這兒列出了三個命名空間
1. xmlns:fx 這一個是提供Flex 的語言標籤
2.xmlns:s 是提供了spark 組件的類別庫標籤
3.xmlns:mx 則是提供了mx組件的類別庫標籤,在這兒同時提供了minWidth="955" minHeight="600" 設定了應用程式最小的寬度及最小的高度
除了第三個xmlns:mx 命名空間需設定後面尾隨的參數, 一般前面那個只要有宣告就行
程式的內容通常是包含在上段的命名空間s:Application ... 一直到 底下的應用程式結束標籤前.
- </s:Application>
好像漏了中間的這幾行,這第5,6,7 行的程式是用來放置.非視覺元件的. 日後會慢慢明白視覺元件與非視覺元件的差異
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
看到這裡對上述的程式應該大概知道做什麼用途了,附註一點多利用維基百科,有關不懂的術語在那幾乎可以找到全部詳盡的解說
接下來請看 Flash Builder 4初探系列其之三
在完成了Flash Builder 4.0 的預設安裝後,接下來試著來建立第一個程式專案吧
剛啟動完成,沒有例外的話會看到底下光禿禿的Flash Builder 4.0 的畫面
底下的圖片說明了.如何新建一個專案,再來請按圖操課試著建立新的專案
接下來在這畫面停一下,這是未設定程式名稱/專案路徑名稱時的樣子
為了便利日的探討,請按下圖設置,當然你也可以改變名稱或專案的儲存路徑
請養成習慣,一般而言嚴謹的程式設計是英文大小寫有別的,所以請一字不差的輸入吧免得發生不必要的錯誤
步驟5: 按預設值不任何更動,點擊next 進行下一步
步驟6: 按預設值不任何更動,點擊Finish 進行下一步
步驟7:當你正確無誤看到底下的程式畫面時,恭喜你已經可已經走上程式設計的不歸路了
接下來請看下一篇 :Flash Builder 4 初探系列其之二
在Flash Builder 4 編寫程式時,可以按下滑鼠右鍵如下圖,再執行Compare with 的子選項,再選擇LocalHistory 來對稍早之前撰寫的程式來進行比較
圖1-1
圖1-2
在Flash Builder 4 的選項中,可以設定 Local History 的選項
圖1-3
一般在儲存程式時,Flash Builder 會自動撿查程式有無錯誤,若是一些顯而易見的錯誤則會以紅色的x圖示來表示
如下圖所示
圖2-1
只要將滑鼠移至紅色錯誤圖示那兒懸停,就會出現程式錯誤的相關提示:
承上例,這是很簡單又顯而易見的錯誤卻也是初學者最常犯的錯誤,不外乎是拼錯字或是少打了標記結尾符號.
在Flash Builder 裡,大部份的MXML標籤指令都是成對出現的. 這點需留心注意
也可以在Flash Builder 4 左下角的Problems 查看錯誤發生的原因,搞清楚錯誤怎麼發生的也很重要
以上圖所示的錯誤訊息(Could not resolve
這個錯誤很容易明白,它是指程式無法找到
有點必需注意! MXML 並不是每個標籤都是成對出現,也是可以簡化的 例如
Flash Builder 4 初探系列其之四
