`
hereson
  • 浏览: 1449924 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Flex中文字与图片同时显示

    博客分类:
  • flex
阅读更多

前几天流浪的孩子(网名)问我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吧。不知谁有更好的方法可以分享一下。

 

分享到:
评论

相关推荐

    actionscript3 FLEX显示MovieClip, sprite, 文字等demo源代码.zip

    值得注意的是,当`embedFonts`属性设为`false`时,嵌入的字体不会被使用,这可能导致在某些情况下无法正确显示特定的中文字体,如`如何在AS3中使用嵌入字体 当testText的embedFonts属性为false时,嵌入的中文字体不...

    FlexBuilder+3+中文教程

    通过这个中文教程,开发者将能够逐步掌握FlexBuilder 3的使用,熟练地创建和部署富互联网应用程序,同时也能深入理解Flex的开发理念和实践技巧。无论是初学者还是有一定基础的开发者,都能从中获益。

    flex自定义“折叠手风琴”组件CollapsibleAccordion

    几经尝试发现是由于Flex控件在旋转后中文就不显示了,因此做了相应修改以支持中文,并添加了一些删除,增加子组件的方法,以方便编程式的使用。当然如果熟悉了Flex组件的生命周期,可以根据需求增添功能。 对于中文...

    flex 文件上传 预览下载 及中文名乱码解决问题

    例如,图片文件可以直接使用`Image`组件显示;文本文件可以读取内容并显示在`Label`或`TextArea`中;PDF等文档则可能需要借助第三方库,如PDF.js,将其转换为HTML5 Canvas进行预览。处理中文文件名时,需确保读取...

    Flex电子版中文教程

    ### Flex电子版中文教程知识点概览 #### 一、Flex简介 - **定义**:Flex是一种开源框架,由Adobe公司开发,旨在帮助开发者构建高质量、交互性强的富客户端互联网应用程序(Rich Internet Applications, RIA)。Flex...

    总结flex各种用法

    根据提供的文件信息,我们可以总结出Flex中的多个实用技巧与应用场景。以下是对这些知识点的详细解析: ### 1. 获取屏幕分辨率 在Flex中获取屏幕分辨率是通过`Capabilities`类完成的,具体做法如下: ```...

    鼠标悬停九宫格图片高亮显示

    标题中的“鼠标悬停九宫格图片高亮显示”是一个常见的网页交互效果,通常用于提升用户体验,让用户在浏览图片网格时能清晰地看到当前选中的图片。这种效果可以通过JavaScript(JS)和CSS来实现,而标签中的“源码...

    AlivePDF生成pdf技术文档[参照].pdf

    6. **兼容性**:AlivePDF在RIA(Rich Internet Applications)和AIR(Adobe Integrated Runtime)环境下都能运行,同时提供了与Flash Player 9及更高版本的兼容性。 使用AlivePDF的步骤大致如下: 1. **创建PDF...

    CSS3.0 中文手册

    **CSS3.0 中文手册** CSS(Cascading Style Sheets)是用于描述HTML或XML(包括各种XML方言,如SVG、XHTML等)文档样式的样式表语言。CSS3.0作为其最新版本,引入了许多增强功能和新特性,为网页设计提供了更丰富的...

    图片九宫格布局,鼠标悬停图片文字切换

    在【鼠标悬停图片文字切换】的效果中,当用户将鼠标光标移到图片上时,原本隐藏的文字会显示出来,为用户提供额外的信息。这种交互设计能够增加用户体验,让用户在不离开当前页面的情况下,了解图片的相关描述或标题...

    VSFlexGrid Pro 7.0的中文使用说明 8.0也可以参照

    - 支持图片显示:`NodeOpenPicture` 和 `NodeClosedPicture`。 - 提供强大的节点编辑和管理功能。 6. **定制化功能** - 支持自定义单元格内容和格式。 - 提供丰富的模板编辑功能。 - 支持复杂的数据格式化,如...

    HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试

    24. 安装DevEco Studio工具时,安装路径不应包含中文字符,以避免潜在问题。 25. Flex组件在渲染时可能存在二次布局,影响性能优化。 这些知识点涵盖了HarmonyOS应用开发的基础概念、组件使用、通信机制、应用生命...

    css3.0中文参考手册

    - **背景裁剪与铺展**:`background-size`控制背景图片大小,`background-origin`定义背景定位原点,`background-clip`定义背景显示区域。 ### 三、盒模型与布局 - **盒阴影**:`box-shadow`添加阴影效果,增强...

    Head First HTML与CSS 第2版 中文版

    《Head First HTML与CSS 第2版 中文版》是一本非常适合初学者的Web前端开发教材。这本书以生动、直观的方式介绍了HTML(超文本标记语言)和CSS(层叠样式表)的基础知识,帮助读者从零开始构建网页设计的能力。下面...

    CSS3中文完全参考手册

    **CSS3中文完全参考手册**是一本详尽的资源,旨在帮助开发者全面理解和掌握CSS3这一强大的样式表语言。CSS3是Web设计领域中的一个重要里程碑,它极大地扩展了CSS2的功能,提供了更多丰富的样式和布局选项,使得网页...

    CSS样式表中文手册(必看)

    **CSS样式表中文手册概述** CSS(Cascading Style Sheets)是用于定义网页元素外观、布局和结构的重要工具。作为Web开发中的核心技术之一,CSS使得网页设计者能够将内容(HTML或XML)与表现(样式)分离开来,实现...

    Wrox.Adobe.AIR.Create.Modify.Reuse.Apr.2008.pdf

    - **章节6**:图像查看器和编辑器的实现,包括图片加载、显示、编辑等技术细节。 - **章节7**:HTML和CSS编辑器的设计与实现,帮助读者了解如何在Adobe AIR应用中集成代码编辑功能。 - **章节8**:天气小部件的开发...

    CSS权威指南(中文 全)

    ### CSS权威指南(中文全)知识点总结 #### 一、CSS基础 1. **CSS简介**: - **定义**:层叠样式表(Cascading Style Sheets, CSS)是一种用来表现HTML或XML等文件样式的计算机语言。 - **作用**:用于控制网页的...

Global site tag (gtag.js) - Google Analytics