善用tool tip

網路應用程式,最重要的莫過於貼心的使用者介面設計,畢竟這些網路服務的目標對象,是一群不一定很瞭解程式的普羅大眾,所以如果能夠有足夠又不至於干擾使用者瀏覽資訊時的貼心小提示,就會為網站加不少分數。

Ajax網站為什麼會廣受歡迎,很重要的一個理由是它比傳統的網站還要不干擾使用者的使用程序以及心情;平常隱藏起來卻只當使用者觸發某種條件時才會出現的資訊,既可以適時的提供使用者正確的指引,又不至於干擾使用者的瀏覽網頁的程序。

使用Ajax做這些事情,需要不少的動作,但是在Flex裡面,卻只需要幾個簡單動作就可以做到相當漂亮的提示介面,這篇文章要介紹的就是如何在Flex裡面製作出兩種不同類型的提示對話框。

Flex toolTip範例

第一個方法,是製作畫面當中黃色那個小小的提示框,它幾乎可以放在任何的元件標籤當中,作用有點類似html當中的title屬性,就是滑鼠移上去之後就會低調跳出來的提示訊息。語法超簡單,只要在標籤當中加上tooTip=”提示字串”,就可以馬上看到這個效果;你可以從設計介面隨便拉個選單或是按鈕出來,加上這個屬性就可以達到你想要的提示效果了。

比較難的是旁邊那個紅色還有小尖尖的對話提示框,想要做出那種漂亮的提示框,必須使用createToolTip()的內建函式,但是在那之前,我們必須要import我們所需要的類別進來,程式寫法如下:

import mx.managers.ToolTipManager; 
  import mx.controls.ToolTip; 
  public var theTip:ToolTip;

  private function createSmallTip(myString:String,event:Object):void{ 
  var tip:String = myString; 
  var tipx:Number = event.currentTarget.x +event.currentTarget.width; 
  var tipy:Number = event.currentTarget.y; 
  theTip = ToolTipManager.createToolTip(tip,tipx,tipy); 
  theTip.width = 270; 
  theTip.setStyle("styleName", "theTip"); 
}

上面的程式是建立一個提示對話框,並且指定字串以及它所出現的位置。createToolTip()內建函式的使用方式為createToolTip('顯示內容字串', X軸的位置, Y軸的位置, 小尖尖方向,conText ),在這裡,我只在函式當設定前面三個,因為剩下的我會使用CSS來設定它的外觀。

再來,請將寬以及樣式名稱的屬性給放上去,這樣一來,我們要的第一個函式就完成了;但是光有「建立提示對話框函數」還不夠,因為只有這個函數,提示框出現了以後就不在消失了,那就有點討厭了,所以我們還必須要建立另外一個把提示對話框消滅掉的函式。

private function destroySmallTip():void { 
  ToolTipManager.destroyToolTip(theTip); 
}

這段程式碼非常簡單,我們只是利用一個相反的函式destroyToolTip('要摧毀掉的toolTip名稱'),這樣一來,就不用擔心對話框一直呆在那邊不走了;接著,我們就把這段函式應用到我們的物件上面,我選擇在Panel上面加上觸發事件,這樣他就會根據Panel的位置決定對話框出現的位置,當然,你也可以試著放在任何其他你想放的元件上面,也會有同樣的效果。

<mx:Panel rollOver=”createSmallTip(‘提示訊息是不是讓介面變得更方便使用了?’,event)” rollOut=”destroySmallTip()” width=”149″ height=”171″>

測試看看,你就會發現滑鼠移上去就會看到可愛的提示對話框出現在旁邊囉!可是…怎麼有點醜…

使用CSS來美化使用著介面是一種網頁標準化的規範,也是相當快速方便的一種方式,因此在這裡我們也同樣使用CSS來美化我們的提示對話框。還記得之前我們在 createSmallTip() function當中有特別指定提示對話框的樣式名稱嗎?沒錯,就是theTip.setStyle("styleName", "theTip")這一行,因此我們知道,這個對話框的樣式名稱叫做theTip,因此我們新增了一個CSS規則:

.theTip { 
  color: #FFFFFF; 
  fontSize: 11; 
  fontWeight: "bold"; 
  shadowColor: #333333; 
  borderColor: #CE2929; 
  borderStyle: "errorTipRight"; 
  backgroundColor: #BB0000; 
  paddingBottom: 4; 
  paddingLeft: 4; 
  paddingRight: 4; 
  paddingTop: 4; 
}

其他的部分都是相當簡單的CSS樣式,但是有幾個要特別拿出來講一下。borderStyle: "errorTipRight",這個東西,就是決定小尖尖要不要出現,而且要出現在哪裡的設定;總共有四種設定”errorTipRight“、”errorTipAbove“、”errorTipBelow“、或是不設定(就是不會出現小尖尖),你問我為什麼沒有”errorTipLeft“,我也不知道,一開始我還以為我搞錯了,結果是根本沒有。errorTipAbove指得是小尖尖會出現在下面,因為Tip指得是那個提示框,所以不要弄反囉!

其他還有許多有趣的設定,包括backgroundAlpha的透明度設定(預設為0.95,請用小數點標示)以及設定背景影像的backgroundImage屬性,有興趣想要更加了解的人,可直接到toolTip屬性說明頁仔細閱讀裡面的介紹喔!

Advertisements

4 thoughts on “善用tool tip

  1. 有個小小疑問?
    theTip = ToolTipManager.createToolTip(tip,tipx,tipy);
    這行語法無法編譯?不知是否我有少加入啥宣告?

    煩請大大不吝告知! 謝謝

    方便把你的檔案或是程式碼寄給我嗎?我的email在這裡

  2. 謝謝您的回覆! 上述問題已經解決了。
    theTip = ToolTipManager.createToolTip(tip,tipx,tipy) as ToolTip;

    原因是型態不同,後面加上 as tooltip 強制轉型就能通過了。
    找了不少例子@@”

    現在的新問題是… orz
    mx.controls.dataGridClasses::DataGridItemRenderer/tooltipshowhandle();
    透過debug模式會出現這樣的錯誤!這是加上drag & drop事件之後,才會產生!
    想用try catch抓都無從下手= =” 還是有少宣告啥型態之類?
    不知大大是否有遇過類似情形?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s