前几天流浪的孩子(网名)问我flex里怎么解决文字与图片同时出现时的现实问题。我使用的方法是flex中iframe的形式。不过他找到了一种更好一点的方法,就是不知道怎么实现,找我想想办法。
主要的思路是:先计算出整个句子的长度,然后计算需要几个Hbox,然后在对每个hbox分别处理,将image放在合适的位置
进入页面
代码如下
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.containers.HBox;
import mx.controls.Text;
import mx.controls.Alert;
[Bindable]
private var ImgList:Array = [
{label: "astonish.gif", data: "[astonish.gif]"},{label: "biggrin.gif", data: "[biggrin.gif]"},
{label: "cool.gif", data: "[cool.gif]"},{label: "happy.gif", data: "[happy.gif]"},
{label: "lol.gif", data: "[lol.gif]"},{label: "mad.gif", data: "[mad.gif]"},
{label: "rage.gif", data: "[rage.gif]"},{label: "sad.gif", data: "[sad.gif]"},
{label: "sheepish.gif", data: "[sheepish.gif]"},{label: "shocked.gif", data: "[shocked.gif]"},
{label: "sleep.gif", data: "[sleep.gif]"},{label: "smile.gif", data: "[smile.gif]"},
{label: "tongue.gif", data: "[tongue.gif]"},{label: "wink.gif", data: "[wink.gif]"},
{label: "wronged.gif", data: "[wronged.gif]"}
];
private function sub():void
{
var newTxt:Object = content.addChild(VboxImg(text.htmlText));
}
private function VboxImg(string:String):VBox
{
var result:VBox = new VBox();
if(string.indexOf("</TEXTFORMAT>") != -1)
{
result.addChild(HboxImg(string.substring(0,string.indexOf("</TEXTFORMAT>")+13)));
string = string.substring(string.indexOf("</TEXTFORMAT>")+String("</TEXTFORMAT>").length,string.length)
var newTxt_R:Object = result.addChild(VboxImg(string));
}else{
result.addChild(HboxImg(string))
}
return result;
}
private function HboxImg(string:String):HBox
{
var result:HBox = new HBox();
if(string.indexOf("[") != -1)
{
var tempstr:String = string.substring(string.indexOf("["),string.indexOf("]")+1);
//Alert.show(tempstr);
for(var i:Number =0 ;i< ImgList.length;i++)
{
if(tempstr == ImgList[i].data)
{
var newTxt_L:Object = result.addChild(new Text());
newTxt_L.htmlText = string.substring(0,string.indexOf(ImgList[i].data));
var Img:Object = result.addChild(new Image());
Img.source = "./smilies/"+ImgList[i].label;
string = string.substring(string.indexOf(ImgList[i].data)+String(ImgList[i].data).length,string.length)
var newTxt_R:Object = result.addChild(HboxImg(string));
}
}
}else{
var newTxt:Object = result.addChild(new Text());
newTxt.htmlText = string;
}
return result;
}
private function addImage():void
{
text.text += imagelist.selectedItem.data;
}
]]>
</mx:Script>
<mx:VBox id="content" height="200" width="100%" backgroundColor="#FFFFFF" />
<mx:HBox width="100%">
<mx:TextArea id="text" width="80%" height="150" />
<mx:VBox>
<mx:TileList dataProvider="{ImgList}" change="addImage()" id="imagelist">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="./smilies/{data.label}" width="20" height="20" />
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:Button label="sub" click="sub()" />
</mx:VBox>
</mx:HBox>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.containers.HBox;
import mx.controls.Text;
import mx.controls.Alert;
[Bindable]
private var ImgList:Array = [
{label: "astonish.gif", data: "[astonish.gif]"},{label: "biggrin.gif", data: "[biggrin.gif]"},
{label: "cool.gif", data: "[cool.gif]"},{label: "happy.gif", data: "[happy.gif]"},
{label: "lol.gif", data: "[lol.gif]"},{label: "mad.gif", data: "[mad.gif]"},
{label: "rage.gif", data: "[rage.gif]"},{label: "sad.gif", data: "[sad.gif]"},
{label: "sheepish.gif", data: "[sheepish.gif]"},{label: "shocked.gif", data: "[shocked.gif]"},
{label: "sleep.gif", data: "[sleep.gif]"},{label: "smile.gif", data: "[smile.gif]"},
{label: "tongue.gif", data: "[tongue.gif]"},{label: "wink.gif", data: "[wink.gif]"},
{label: "wronged.gif", data: "[wronged.gif]"}
];
private function sub():void
{
var newTxt:Object = content.addChild(newLine(text.text));
}
private function newLine(string:String):VBox
{
var result:VBox = new VBox();
if(string.length >= 80)
{
result.addChild(VboxImg(string.substring(0,80)));
Alert.show(string.substring(0,80));
string = string.substring(80,string.length)
Alert.show(string);
var newTxt_R:Object = result.addChild(newLine(string));
}else{
result.addChild(VboxImg(string))
}
return result;
}
private function VboxImg(string:String):VBox
{
var result:VBox = new VBox();
if(string.indexOf("</TEXTFORMAT>") != -1)
{
result.addChild(HboxImg(string.substring(0,string.indexOf("</TEXTFORMAT>")+13)));
string = string.substring(string.indexOf("</TEXTFORMAT>")+String("</TEXTFORMAT>").length,string.length)
var newTxt_R:Object = result.addChild(VboxImg(string));
}else{
result.addChild(HboxImg(string))
}
return result;
}
private function HboxImg(string:String):HBox
{
var result:HBox = new HBox();
if(string.indexOf("[") != -1)
{
var tempstr:String = string.substring(string.indexOf("["),string.indexOf("]")+1);
//Alert.show(tempstr);
for(var i:Number =0 ;i< ImgList.length;i++)
{
if(tempstr == ImgList[i].data)
{
var newTxt_L:Object = result.addChild(new Text());
newTxt_L.htmlText = string.substring(0,string.indexOf(ImgList[i].data));
var Img:Object = result.addChild(new Image());
Img.source = "./smilies/"+ImgList[i].label;
string = string.substring(string.indexOf(ImgList[i].data)+String(ImgList[i].data).length,string.length)
var newTxt_R:Object = result.addChild(HboxImg(string));
}
}
}else{
var newTxt:Object = result.addChild(new Text());
newTxt.htmlText = string;
}
return result;
}
private function addImage():void
{
text.text += imagelist.selectedItem.data;
}
private function addBr():void
{
}
]]>
</mx:Script>
<mx:VBox id="content" height="200" width="100%" backgroundColor="#FFFFFF" />
<mx:HBox width="100%">
<mx:TextArea id="text" width="80%" height="150" />
<mx:VBox>
<mx:TileList dataProvider="{ImgList}" change="addImage()" id="imagelist">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="./smilies/{data.label}" width="20" height="20" />
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:Button label="sub" click="sub()" />
</mx:VBox>
</mx:HBox>
</mx:Application>
由于加了一个新的函数:文字达到一定长度后自动换行,发现这个函数原来的函数有一个冲突。输入时的换行功能需要使用htmlText,而长度控制的函数需要调用text,又需要将两者结合使用,计算就相当复杂。随后想通过输入框来调整,发现特许textarea没有enter这一函数,点击回车(enter),textarea会自动生成html的代码。
暂时没有想到好的办法解决这个问题,可能需要自己做一个组件来替换textarea吧。不知谁有更好的方法可以分享一下。