メールとURLのリンクを表示する
メールとURLのリンクをアイコン付きで表示したいと思います。
メールもしくはURLがセットされている場合、日付けの上にアイコンが表示され、マウスをかざすとToolTipとしてメールアドレスやURLが表示される様にします。
アイコンをクリックするとメーラーが立ち上がったりブラウザで別ウインドウで表示する様にします。
以上の機能を実現するのにもっとも手っ取り早いコンポーネントはLinkコンポーネントです。以下の様に追加／変更しました。
<!-- メッセージ -->
<mx:VBox marginTop="15" marginBottom="15" marginLeft="15" marginRight="15">
<mx:Text id="titleText" widthFlex="1"
text="{currentMessage.titleText}" styleName="titleStyle"/>
<mx:Text id="contentText" widthFlex="1" heightFlex="1"
text="{currentMessage.content}"
marginLeft="10" styleName="contentStyle"/>
<mx:Spacer heightFlex="1"/>
<mx:HBox widthFlex="1" horizontalAlign="right">
<mx:Link id="mailLink" icon="@Embed('mail.gif')"
click="mailClicked()"
toolTip="{currentMessage.mail}"
visible="false" width="16" height="16"/>
<mx:Link id="urlLink" icon="@Embed('home.gif')"
click="urlClicked()"
toolTip="{currentMessage.url}"
visible="false" width="16" height="16"/>
</mx:HBox>
<mx:Spacer height="1"/>
<mx:Text id="submitDateText" widthFlex="1"
text="{currentMessage.submitDateText}" styleName="dateStyle"/>
</mx:VBox>
mailLink、urlLinkを追加しました。iconの設定は@Embedを使用します。こうする事によって、SWFにエンベッドされ、いちいちロードする必要がなくなります。
では、clickイベントハンドラに記述するスクリプトを見てみましょう。
//Mailのアイコンがクリックされた時
function mailClicked():Void {
var mail:String = currentMessage.mail;
getURL("mailto:"+mail);
}
//Urlのアイコンがクリックされた時
function urlClicked():Void {
var url:String = currentMessage.url;
getURL(url,"_blank");
}
関数getURLをコールしています。中身は見た通りです。二番目の引数に"_blank"と指定しているのは、通常のHTMLのリンク設定でのtarget属性と同じものです。簡単ですねー。
もう少し手を加える必要があります。というのは、MailやURLが設定されていない時は、このアイコン自体を見えなくしたいからです。
どのタイミングでvisibleをセットするか・・・getMessageByPk_result()の中で行うのが一番簡単です。さっそく実装してみますと、
function getMessageByPk_result(event):Void {
currentMessage = event.result;
if (currentMessage.mail.length ==0) {
mailLink.visible = false;
} else {
mailLink.visible = true;
}
if (currentMessage.url.length ==0) {
urlLink.visible = false;
} else {
urlLink.visible = true;
}
}
ちょっとバカっぽいソースですが許して下さいね（笑）。
こんなかんじになりました。（クリックで拡大）
以上をまとめたソースです。
