淺析利用Flex輸入框?qū)崿F(xiàn)圖片顯示的方法

劉立毅　楊格

摘要：QQ是大家經(jīng)常用的軟件，其中用戶錄入文字聊天時可使用的表情豐富有趣，本文將論述如何在跨平臺程序上，實現(xiàn)類似QQ的聊天表情。因為在大多數(shù)的即時通訊軟件里發(fā)送表情都只是在輸入框里顯示字符，發(fā)送后才顯示出圖片。而通過本文介紹的方法，利用自己寫的TextArea組件，便可以實現(xiàn)如同QQ2013一樣的表情效果。

關(guān)鍵詞：IM；文字聊天；字符；組件

QQ2013是采用C++語言開發(fā)的，因此在表情處理方面具有得天獨厚的優(yōu)勢，可以完美實現(xiàn)表情的預(yù)覽輸入（如圖1）。利用Adobe的Flex來編寫跨平臺程序（包含PC、Android和IOS），具有速度快、成本低等優(yōu)點。但是其編寫的程序，有時無法實現(xiàn)C++程序所能達(dá)到的效果。因此需要自行編寫一些組件，來實現(xiàn)Flex沒法直接實現(xiàn)的效果。

實現(xiàn)流程

1.添加兩個TextArea組件

啟動FlashBuilder后新建一個Flex項目，在程序主類的Vgroup容器里添加兩個TextArea組件（一個作為輸入框，另一個作為顯示框），兩個Button按鈕組件（一個用于加載圖片顯示框，另一個用于發(fā)送信息）。

2.準(zhǔn)備XML文件

3.建立一個讀取XML文件路徑的類

要在工程中讀取到這個XML，就需要建立一個相應(yīng)的類，作用就是獲取XML文件的路徑，因為只有獲取到路徑，才有辦法讀取XML文件。圖2為建立好的AS的類。

4.建立一個用于存放讀取到的XML路徑的Model類

通過上面步驟可讀取到的XML路徑，必須暫存起來，這樣才能方便后面的使用。而在Flex中用Model類來存儲，需要新建一個Model類：ModelImages（如圖3）。

這個類的主要作用是將讀取到的存放圖片路徑信息的XML文件里的相關(guān)字段存放在固定的位置，方便圖片的讀取。

5.加載圖片信息

在主類初始化序列（如圖4）時加載圖片信息（如圖5）。

在程序入口處就可將與表情相關(guān)的XML里的路徑讀取出來放在ModelImages類里方便后面直接使用相關(guān)信息，不用重復(fù)讀取。

6.建立一個TitleWindow組件

建立一個TitleWindow組件在初始化的時候加載ModelImages的圖片路徑（如圖6）。圖7為初始化加載圖片路徑。

將上一步里存放圖片路徑等信息的ModelImages的數(shù)據(jù)賦值給Image對象（如圖8），如將圖片路徑賦值給Image對象的source屬性。這樣就實現(xiàn)了圖片在TitleWindow組件里顯示的效果。

當(dāng)用戶點擊相應(yīng)表情進(jìn)行檢測時，便可執(zhí)行預(yù)期事件。通過以上的步驟，就可以實現(xiàn)類QQ的聊天表情效果了。