`
darrenzhu
  • 浏览: 806989 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex自动调整大小的TextArea

阅读更多
AutoResizableTextArea类的定义:
<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:mx="library://ns.adobe.com/flex/mx" wordWrap="true">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
		
		// auto resize setting
		private var _autoResizable:Boolean = false;
		
		// getter
		[Bindable(event="changeAutoResize")]
		public function get autoResize():Boolean
		{
		return _autoResizable;
		}
					
		override public function drawFocus( isFocused:Boolean ):void
		{
			
		}
			
		// setter
		public function set autoResize(b:Boolean):void
		{
			_autoResizable = b;
			// if the text field component is created
			// and is auto resizable
			// we call the resize method
			if (this.mx_internal::getTextField() != null && 
			_autoResizable == true)
			resizeTextArea();
			// dispatch event to make the autoResize 
			// property bindable
			dispatchEvent(new Event("changeAutoResize"));
		}
		
		// setter override
		override public function set text(value:String):void
		{
			// calling super method 
			super.text = value;
			// if is auto resizable we call 
			// the resize method
			if (_autoResizable)
			resizeTextArea();
		}
		
		override public function set htmlText(value:String):void
		{
			super.htmlText = value;
			if (_autoResizable)
				resizeTextArea();
		}
			
		// resize function for the text area
		private function resizeTextArea():void
		{
			// initial height value
			// if set to 0 scroll bars will 
			// appear to the resized text area 
			var totalHeight:uint = 10;
			// validating the object
			this.validateNow();
			// find the total number of text lines 
			// in the text area
			var noOfLines:int = this.mx_internal::getTextField().numLines;
			// iterating through all lines of 
			// text in the text area
			for (var i:int = 0; i < noOfLines; i++) 
			{
				// getting the height of one text line
				var textLineHeight:int = 
				this.mx_internal::getTextField().getLineMetrics(i).height;
				// adding the height to the total height
				totalHeight += textLineHeight;
			}
			// setting the new calculated height
			this.height = totalHeight;
		}
		]]>
	</fx:Script>
</mx:TextArea>


注意事项,如果你是通过MXML的方式使用基本没有什么要注意的,如下方式使用:
<local:AutoResizableTextArea id="txtArea" autoResize="true" width="500"/>


但是如果是通过编程方式使用,那么就需要注意了,要保证设置宽度的代码位于加入容器的代码前面,即保证ta.width=500先于this.detailNavigatorContent.addElement(ta)被执行,
要保证设置Text或htmlText的代码位于添加到容器的代码的后面,即要保证this.detailNavigatorContent.addElement(ta)先于ta.htmlText=temp[size=medium][/size]被执行,这样AutoResizableTextArea才会正确工作。
					var	ta:AutoResizableTextArea=new AutoResizableTextArea();
						ta.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelChangeHandler);
						ta.editable=false;
						//ta.percentWidth=100;
						ta.width=500;
						ta.autoResize=true;
						this.detailNavigatorContent.addElement(ta);
						ta.htmlText=temp;
						ta.setStyle("borderStyle","none");
						ta.setStyle("borderAlpha","0");
						ta.verticalScrollPolicy=ContainerCreationPolicy.NONE;
						ta.addEventListener(FlexEvent.CREATION_COMPLETE,onTxtAreaCreationComplete);
分享到:
评论

相关推荐

    FLEX自动调整大小文本框控件

    总的来说,这个"FLEX自动调整大小文本框控件"是FLEX应用中提高用户体验的一个重要工具,它体现了FLEX的灵活性和可扩展性,让开发者可以轻松地创建响应式且适应性强的文本输入区域。通过深入理解和运用这类组件,...

    flex3 textArea 高度自适应

    在标题“flex3 textArea 高度自适应”中提到的问题,就是如何实现这样一个功能,让`TextArea`的大小随着其内容的增加而自动调整。 在描述中提到,已经有一个自定义的解决方案,可以依据文本内容自动调整`TextArea`...

    [转]TextArea TextField 文本 即时显示最后一行

    它提供了比TextField更丰富的文本格式化选项,例如换行、滚动条和自动调整大小等特性。而TextField则通常用于单行文本输入或显示,虽然也支持多行文本,但其功能相对简单。 在AS3中,我们可以通过监听文本字段的...

    csss.rar_flex_flex 聊天

    它可以处理不同屏幕尺寸和方向下的自适应布局,使组件能够根据需要自动调整大小和位置。 7. **事件处理**:在聊天应用中,事件驱动编程是非常关键的。例如,当用户点击发送按钮时,需要触发一个事件,将消息发送到...

    Flex样式生成工具

    2. **组件库**:包含Flex组件的完整列表,如Button、Label、TextArea等,用户可以选择需要的组件并自定义样式。 3. **实时预览**:提供实时预览功能,让用户在修改样式时能立即看到效果,便于调整和优化。 4. **代码...

    flex第一步案例3-10

    布局管理器帮助开发者自动调整组件的位置和大小,以适应不同尺寸的显示区域。 4. **数据绑定**:Flex支持数据绑定,这意味着可以将UI组件的属性直接与应用程序的数据模型关联。在“Chapter_6”中,你可能会学习到...

    Flex4视频教程_03-02使用文本组件.rar

    通过属性设置,如text、width和height,可以调整文本的显示内容和区域大小。 2. **RichText组件** - RichText组件允许开发者创建富文本,支持HTML样式的文本格式,如字体、颜色、对齐方式、链接等。这对于创建复杂...

    flex组件重写

    1. 扩展功能:当Flex已有的组件无法满足特定业务需求时,我们可以通过继承现有组件并进行扩展,比如创建一个长文本不自动换行的自定义按钮。 2. 提高可复用性:通过组合多个组件创建更复杂的复合控件,例如,将...

    文本框自动换行

    3. **自适应宽度和高度**:为了让文本框能随着文本内容的增加而动态调整大小,通常需要设置合适的布局或样式。例如,使用CSS的`display: flex`或`display: inline-block`可以让HTML元素根据内容自动扩展;在Android...

    可伸缩的:表单元素自动调整大小,应采用的方式

    `,可以使它们根据父元素的大小自动调整。这种方法简单但可能无法应对复杂的布局需求。 4. **响应式设计**: 使用媒体查询(`@media`)可以根据不同的屏幕尺寸应用不同的样式规则,确保表单在不同设备上看起来合适。 ...

    flex4.5学习笔记

    - **平铺布局** (`s:TileLayout`): 类似于网格布局,自动调整大小以适应容器宽度。 - **基本布局** (`s:BasicLayout`): 默认布局,没有自动调整特性。 - **边框容器** (`s:BorderContainer`): - **属性**: `...

    Developing Mobile Applications with ADOBE FLEX and ADOBE FLASH BUILDER

    - **支持多种屏幕尺寸**:通过CSS样式表调整布局,确保应用能在不同大小和分辨率的屏幕上正常显示。 - **持久化支持**:使用本地存储技术,如SQLite数据库,保存用户数据。 #### 五、文本处理 ##### 5.1 文本元素 -...

    flex3的cookbook书籍完整版dpf(包含目录)

    3.16 节创建并控制可调整大小的容器 3.17节在TabNavigator内创建、启用和禁用TAB组件(TabControls) 3.18 节使用可关闭Tabs 创建一个TabNavigator 3.19 节创建和控制Alert 3.20 节根据呼出组件设置对话框的尺寸和位置...

    关于应用容器(Application Container)

    这段代码演示了如何使用不同的容器类型(如`mx:Panel`、`mx:HDividedBox`等)来构建复杂的应用程序布局,并确保这些容器能根据父容器的大小自动调整。 #### 总结 应用容器是Flex应用程序的核心组成部分之一,负责...

    css3响应式表单制作留言表单提交代码

    "响应式设计"是CSS3中的一个重要概念,允许网页根据用户设备的屏幕尺寸和方向自动调整布局,提供优秀的用户体验。本主题将深入探讨如何利用CSS3来创建一个响应式的表单,特别是针对留言表单的提交功能。 一、响应式...

    纯CSS实现漂亮的表单

    `flex`布局适合处理一列元素,如表单输入框和标签,它允许元素在一行内自动调整大小和位置。`grid`布局则更适用于多列或多行的设计,能更灵活地控制表单元素的位置。 接下来是样式设计。表单元素如`&lt;input&gt;`、`...

    基于html+css的装修网站设计

    响应式设计允许网页根据用户的设备屏幕尺寸自动调整布局,确保在手机、平板电脑和桌面电脑上都能良好展示。这通常通过使用媒体查询、流式布局(如Flexbox或Grid)和百分比单位来实现。 4. 页面布局: 在装修网站中...

    HTML+CSS+JavaScript原生购物网站首页案例

    5. **页面布局**:在设计购物网站时,可能会使用Flexbox或Grid布局来实现灵活的多列布局,使内容可以根据屏幕大小自动调整。例如,`display: flex`或`display: grid`可以创建容器,`flex-wrap`或`grid-template-...

    2021年最新版前端面试题精选

    - 使用`margin`自动调整:`margin: auto;`(适用于宽度固定的情况) 3. **单位rem, em, vh, vw, px的含义** - rem:相对于根元素(通常是html)的字体大小的单位。 - em:相对于父元素的字体大小的单位。 - vh/...

    Responsive-Survey-Form:响应调查表(HTML和CSS)

    4. 字体调整:使用相对单位(如em或rem)来设定字体大小,以便随着容器大小的变化而自动缩放。 5. 响应式图片:通过设置`max-width: 100%;`,确保图片不会超过其容器的宽度。 6. 视口单位(如vw和vh):这些单位...

Global site tag (gtag.js) - Google Analytics