Flex in Mobile(第二篇、第一個Mobile專案)

首先開啟FlashBuilder4.5，在來點選右上角的「新增」按鈕，選擇FlexMobileProject。

接下來會出現以下的視窗，這時候請在ProjectName填入專案的名稱，並且勾選SDK使用的版本，這邊使用預設的Flex 4.5.1即可。

接下來選擇運行的平台這裡就暫時勾選Andorid平台吧，以及應用程式將以哪種方式呈現(Tab、標題、空白)，接下來勾選下面的選項，Full Screen選項勾選後該應用就會以全螢幕顯示，這邊有個地方需要注意，如果沒有要指定該應用要再和總DPI機器上運行的話，使用預設的Auto即可。

接下來將視窗切換到Permission視窗，這裡Android用戶必須注意，因為Android使用一些功能必須給予應用程式權限，所以必須在這裡勾選，往後的GPS範例會使用到這裡的選項。

在來是Server的設定，這個範例沒有使用到Server因此暫時不予理會它，直接跳過。

最後在Application ID上填寫該應用程式唯一的識別編號，按下Finish即可。

相信有人不曉得這個設定要做甚麼用的，其實ApplicationID的用處就是給移動平台知道該軟體的編號，每個應用對應著一個唯一的編號，因此這裡請別隨便打個Hello了事，建議使用com.[你的英文名].[專案名稱]。

恭喜你，如果你順利地到這一步驟，你已經完成一個HelloFlexMobile的建立啦。

Flex in Mobile(第一篇、有何不同)

本文章將一系列的介紹關於Flex在4.5版本之後所支援的Mobile專案與一般網頁專案之差別，以及在撰寫必須注意的事項，並且在文章的後半部會對mobile新功能做一些入門的介紹。

一、          Mobile與網頁、桌面版本的差異

平台	內容
網頁	使用瀏覽器的FlahPlayer運行SWF檔案
桌面	使用標準的AIR運行在電腦
行動裝置	使用標準的AIR運行在手機或平板

1.      因為螢幕大小受到限制，通常會將應用程式在一個時間只有一個畫面，必須將程式設計很多個畫面來操作。

2.      不管在平板或是手機 CPU 與 GPU 效能是有限的。

3.      使用者介面可能在不同解析度或是不同平台使用。

4.      因為記憶體有限，所以必須很小心的使用元件的使用及創建。

基於以上幾點，在建立Mobile程式的時就不是簡單的將解析度降低成不同解析度這樣而已。

二、          Mobile元件使用表

Component	Component	Use in mobile?
Spark ActionBar Spark BusyIndicator Spark TabbedViewNavigator Spark TabbedViewNavigatorApplication	Spark View Spark ViewMenu Spark ViewNavigator Spark ViewNavigatorApplication	Yes
Spark Button Spark CheckBox Spark DataGroup Spark Group/HGroup/VGroup/TileGroup Spark Image/BitmapImage Spark Label	Spark List Spark RadioButton/RadioButtonGroup Spark SkinnableContainer Spark Scroller Spark TextArea Spark TextInput	Yes
Other Spark skinnable components		Discouraged
Spark DataGrid	Spark RichEditableText Spark RichText	Discouraged
MX components other than Spacer and charts		No
MX Spacer		Yes
MX chart components		Yes, but with performance implications

三、          Mobile為我們準備一定可以使用的元件

Controls	BusyIndicator (new component) Button ButtonBar CheckBox HSlider Image (BitmapImage is also supported) Label List (supports touch scrolling, includes scroll indicator) RadioButton / RadioButtonGroup TextArea TextInput
Layout	DataGroup Group HGroup Scroller (supports touch scrolling, includes scroll indicator) Spacer TileGroup VGroup
Charts	All

四、          Mobile為我們準備一定可以使用的元件

    在移動設備中皮膚(skin)不直接的支援MXML格式。在普通的Web專案中，我們可以為元件創建MXML皮膚，這樣的好處是快速方便，而且可以使用MXML圖形為我們省很多事，壞處就是因為MXML元件結構的複雜性，在移動設備上容易引發性能問題。所以對於移動專案，建議只能使用ActionScript為元件創建皮膚。

    在圖片使用上片，盡量的使用點陣圖，如果真的要使用類別的向量圖也盡量使用原生的FXG向量圖，為什麼不要使用向量圖呢?這是因為在移動設備上，記憶體與處理器都是受限制的，我們因該減少執行時渲染計算。

    因此我們必須自己為我們的移動設備自定義皮膚(Skin)，這在後面的[自定義Mobile皮膚]一篇中會提到。

Android在XML中透明顏色

我想因該很多人都與我存在同樣的問題，我們可以使用

Color.argb(alpha,red,green,blue)

來進行透明顏色的調製

但是如果是在XML呢? 那該怎麼辦，相信大家都知道怎麼使用十六進位方式定義顏色，就類似這樣 :

#FF0000

表示紅色，但是如果要調製透明度為150的紅色該怎麼辦呢?或許你嘗試過Android:alpha這個屬性，但是卻沒有找到對吧!!!其實使用透明的方式非常的簡單，只需要在十六進為前再加兩個位數即可，所以我們可以這樣設定 :

#AAFF0000

這樣就是一個稍微透明的紅色。

怎樣~夠簡單吧!! 

CSS 超連結無法完全包覆DIV解決辦法

假設使用<a><div></div></a>因該會發現一個問題，就是如果我們滑鼠是在div內容的外面，就無法使用超連結，解決辦法如下，將css display屬性設定

display: block; display: inline-block;

Android動畫系列 – GONE無法使用動畫解決方法

相信大家都有嘗試過，在為元件設定動畫的時候會使用Visiable與invisiable來操作，這樣子可以很檢的的實現動畫效果，但是有時候並不是只是要讓元件不可見而已，而真正的將他從畫面移除，也就是GONE屬性，這時候大家有沒有發現設置GONE的元件，即使設定了動畫效果但是卻看不到，原因很簡單，因為它在動畫開始前就先消失了。

此篇文章在這裡找到一個解決辦法，也就是為我們的動畫註冊監聽器，來監測目前動畫的狀態。

參考以下程式碼:

Animation alphaAnim = AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.fade_out); alphaAnim.setAnimationListener(new AnimationListener() {      public void onAnimationStart(Animation arg0) {      }      public void onAnimationRepeat(Animation arg0) {      }      public void onAnimationEnd(Animation arg0) {          mDrawPaneLayout.setVisibility(View.GONE);      } }); mLayout.setAnimation(alphaAnim); mLayout.setVisibility(View.INVISIBLE);

首先我們宣告一個動畫，該動畫使用android內建的fade_out效果，再來我們為這個動畫類別註冊一個監聽動畫的監聽器，這邊是重點，我們在onAnimationEnd寫入將元件從畫面移除的程式碼，而外部依然使用INVISIBLE屬性來達到元件隱藏，這時候我們會看到動畫撥放，當動畫撥放結束，這時候會被監聽到，此時會執行GONE將元件移出。

雖然這是個很簡單的思維，但相信對大家會有幫助。

Flex in Moblie 菜單使用方法

在view中加入viewMenuItems標籤，並加入ViewMenuItem作為菜但的按鈕。

<s:viewMenuItems>      <s:ViewMenuItem id="tours" label="1" click="itemClickInfo(event)" iconPlacement="left" />      <s:ViewMenuItem id="tours2" label="2" click="itemClickInfo(event)" iconPlacement="left" />      <s:ViewMenuItem id="tours3" label="3" click="itemClickInfo(event)" iconPlacement="left" /> </s:viewMenuItems>

定義點擊菜單的間聽器，以回應點擊菜單按鈕要做的事情。

<fx:Script>     <![CDATA[         import flashx.textLayout.elements.BreakElement;         protected function itemClickInfo(event:Event):void{             switch(event.currentTarget.id){                 case "tours":                     this.title="tours";                     break;                 case "tours2":                     this.title="tours2";                     break;                 case "tours3":                     this.title="tours3";                     break;             }         }     ]]> </fx:Script>

完成簡單的菜單使用。

CSS - Overflow清除Float效果的妙用

Overflow清除Float效果的妙用

問題與解決辦法

一、問題引發思考

今天在工作遇到一個很奇妙的問題，使用了clear:both始終無法消除浮動視窗所帶來的不確定div大小，後來在網路上找到了修改overflow這個方法，效果非常好!! 以下為方法來自於mr.mu studio

在使用css設計版面時我們常常會遇到的情況之一，就是用來包覆float子區塊的父區塊無法跟隨float子區塊的高度一併延伸：

而通常我們要解決這種情況，我們會增加一個具有 clear 屬性的元素 (例：具有clear:both設定的div元素) 在float子區塊後面來清除Float效果，讓父區塊可以成功的包覆子區塊：

但是你知道嗎？其實我們也可以用overflow這個屬性來達到清除float的效果。什麼是overflow呢，overflow屬性原本是用來控制當內容超出顯示範圍時，是否出現捲軸效果的屬性，它的預設值是visible，也就是讓內容完全顯示出來，不嵌入顯示捲軸的顯示區域。我們在此要使用的是設定是overflow:auto，也就是為內容嵌入顯示捲軸的顯示區域，但視情況顯示捲軸。(請google以獲得更多overflow的詳細使用方式)

當我們為父區塊設定overflow:auto的屬性後，我們就不需額外去clear掉float的效果了：

本文章內容轉載於 http://www.mrmu.com.tw/2011/02/19/css-overflow-clear-float/

CSS 群控制器

有時候某些標籤所要修改的內容是一樣的，例如我們要將<h1><h2>標籤都設定為粗體字，這時候我們就可以使用CSS中的群控制器來達成，例如 :

h1, h2 {         text-align: right; }

<h1>這個是靠右的段落1</h1> <h2>這個是靠右的段落2</h2>

群控制器是使用逗號將各個選擇器隔開，以達到集體設定的目的。

CSS color 顏色屬性

在CSS中，我們可以用顏色屬性來指定元素的顏色，例如

p{         color:blue; }

顏色屬性有五中方法可以定義 :

color: <color keyword> color: #rrggbb color: rgb(rrr,ggg,bbb) color: rgb(rrr%,ggg%,bbb%) color: inherit

Resin服務器介紹