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

Flex中文字与图片同时显示

    博客分类：
  • flex
FlexAdobeXML 
阅读更多

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

 

分享到：
| Flex截图并向PHP发送数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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等文件样式的计算机语言。 - **作用**：用于控制网页的...

Magicbox
Global site tag (gtag.js) - Google Analytics