自定义文本编辑组件(二)
2013-06-07 13:35
225 查看
本次较上一篇自定义文本组件新增对文字的大小写修改, 实现全部大写, 首字母大写以及还原成改变大小写之前文本状态. 这次把测试Demo也放上来, 以作参考.
TextElem.aspackage textCompment { public class TextElem extends UIComponent implements ITextElem { /**水平布局常量--左对齐*/ public static const HORIZONTAL_LEFT:String = "left"; /**水平布局常量--居中对齐*/ public static const HORIZONTAL_CENTER:String = "center"; /**水平布局常量--右对齐*/ public static const HORIZONTAL_RIGHT:String = "right"; /**垂直布局常量--上对齐*/ public static const VERTICAL_TOP:String = "top"; /**垂直布局常量--居中对齐*/ public static const VERTICAL_MIDDLE:String = "middle"; /**垂直布局常量--下对齐*/ public static const VERTICAL_BOTTOM:String = "bottom"; /**文字内容*/ private var _text:String; /**是否可编辑*/ private var _editable:Boolean = true; /**当前水平布局方式*/ private var _currentHorizontalAlign:String; /**当前垂直布局方式*/ private var _currentVerticalAlign:String; /**当前组件中文本部分*/ private var textField:TextField = new TextField(); /**文本格式*/ private var textFormat:TextFormat; /**显示对象滚动矩形范围*/ private var rect:Rectangle = new Rectangle(0, 0); //文本原件备份 private var previousText:String; /**构造函数*/ public function TextElem() { super(); this.addEventListener(FlexEvent.CREATION_COMPLETE, init); textField.addEventListener(Event.CHANGE, textChangeHandler); this.addEventListener(FocusEvent.FOCUS_IN, textFocusInHandler); } /** * 焦点移入监听事件 * @parameter e FocusEvent */ private function textFocusInHandler(event:FocusEvent):void { IME.enabled = true; } /** * 文本编辑监听事件 * @parameter e Event */ private function textChangeHandler(event:Event):void { this._text = textField.text; //校正文本垂直布局 if(this._currentVerticalAlign == TextElem.VERTICAL_MIDDLE) { this.textField.y = Math.round(this.height/2 - this.textField.height/2); } else if(this._currentVerticalAlign == TextElem.VERTICAL_TOP) { this.textField.y = 0; } else if(this._currentVerticalAlign == TextElem.VERTICAL_BOTTOM) { this.textField.y = Math.round(this.height - this.textField.height); } //校正文本输入时显示 if(textField.height > this.height) { this.textField.y = Math.round(this.height - this.textField.height); } //校正文本大小写格式 if(this._currentUpperOrLower == "uppercaseAllLetters") { textField.text = textField.text.toLocaleUpperCase(); textField.restrict = "^a-z"; } else if(this._currentUpperOrLower == "uppercaseFirstLetter") { if(textField.text.charAt(textField.text.length - 1) == " " || textField.text.length == 0) { textField.restrict = "^a-z"; } else { textField.restrict = "^A-Z"; } } else if(this._currentUpperOrLower == "normal") { textField.restrict = null; recordNormalText(); } } /** * 初始化创建完成监听事件 * @parameter e FlexEvent */ private function init(event:FlexEvent):void { this.graphics.lineStyle(1, 0x00ff00, 1); this.graphics.moveTo(0, 0); this.graphics.lineTo(0, this.height); this.graphics.lineTo(this.width, this.height); this.graphics.lineTo(this.width, 0); this.graphics.lineTo(0, 0); textField.border = true; textField.borderColor = 0xff0000; textField.autoSize="left"; textField.multiline = true; textField.wordWrap = true; textField.type = TextFieldType.INPUT; textField.y = Math.round(this.height/2 - this.textField.height/2); textField.width = this.width; textFormat = new TextFormat(); textFormat.align = TextElem.HORIZONTAL_CENTER; textFormat.bold = false; textFormat.color = 0x000000; textFormat.italic = false; textFormat.size = 12; textFormat.underline = false; textField.defaultTextFormat = textFormat; rect.width = this.width + 2; rect.height = this.height + 2; this.scrollRect = rect; this.addChild(textField); this._currentHorizontalAlign = TextElem.HORIZONTAL_CENTER; this._currentVerticalAlign = TextElem.VERTICAL_MIDDLE; this.doubleClickEnabled = true; } /** * 设置文本格式 * @parameter format 文本格式 * @parameter beginIndex 开始字符索引 * @parameter endIndex 结束字符索引 */ public function setTextFormat(format:TextFormat, beginIndex:int=-1, endIndex:int=-1):void { this.textFormat = format; if(textField.length == 0) { textField.defaultTextFormat = textFormat; } else { this.textField.setTextFormat(textFormat, beginIndex, endIndex); } } /** * 获取文本格式 * @parameter beginIndex 开始字符索引 * @parameter endIndex 结束字符索引 * @return 所选部分的文本格式 */ public function getTextFormat(beginIndex:int=-1, endIndex:int=-1):TextFormat { var tf:TextFormat = textField.getTextFormat(beginIndex, endIndex); return tf; } /**更新布局(组件拉伸的时候调用)*/ public function updateLayout():void { } /** * 设置组件大小 * @parameter width 组件宽度 * @parameter height 组件高度 */ public function setSize(width:Number, height:Number):void { this.width = textField.width = width; this.height = height; rect.width = width + 2; rect.height = height + 2; this.scrollRect = rect; if(this._currentVerticalAlign == TextElem.VERTICAL_MIDDLE) { textField.y = Math.round((this.height / 2) - (textField.height / 2)); } else if(this._currentVerticalAlign == TextElem.VERTICAL_BOTTOM) { textField.y = this.height - textField.height; } else if(this._currentVerticalAlign == TextElem.VERTICAL_TOP) { textField.y = 0; } if(textField.height > this.height) { this.textField.y = Math.round(this.height - this.textField.height); } } /** * 设置文本编辑状态 * @parameter value 布尔值, 表示文本是否可编辑, 可编辑为true, 不可编辑为false */ public function set isEdited(value:Boolean):void { if(value == true) { this.textField.type = TextFieldType.INPUT; } else { this.textField.type = TextFieldType.DYNAMIC; } this._editable = value; } /** * 获取文本编辑状态 * @return 表示文本是否可编辑的布尔值, 可编辑为true, 不可编辑为false */ public function get isEdited():Boolean { return this._editable; } /** * 设置文本内容 * @parameter value 文本中输入的字符串 */ public function set text(value:String):void { this._text = textField.text = value; } /** * 设置文本内容 * @return 文本中输入的字符串 */ public function get text():String { return _text; } /** * 设置文本水平布局方式 * @parameter value 代表水平对齐方式的字符串 * TextElem.HORIZONTAL_LEFT 左对齐 * TextElem.HORIZONTAL_CENTER 居中对齐 * TextElem.HORIZONTAL_RIGHT 右对齐 */ public function set horizontalAlign(value:String):void { this._currentHorizontalAlign = this.textFormat.align = value; if(textField.length == 0) { textField.defaultTextFormat = textFormat; } else { this.textField.setTextFormat(textFormat); } } /** * 获取文本水平布局方式 * @return 代表水平对齐方式的字符串 * TextElem.HORIZONTAL_LEFT 左对齐 * TextElem.HORIZONTAL_CENTER 居中对齐 * TextElem.HORIZONTAL_RIGHT 右对齐 */ public function get horizontalAlign():String { return _currentHorizontalAlign; } /** * 设置文本垂直布局方式 * @parameter value 代表垂直对齐方式的字符串 * TextElem.VERTICAL_TOP 上对齐 * TextElem.VERTICAL_MIDDLE 居中对齐 * TextElem.VERTICAL_BOTTOM 下对齐 */ public function set verticalAlign(value:String):void { this._currentVerticalAlign = value; if(value == TextElem.VERTICAL_MIDDLE) { textField.y = Math.round((this.height / 2) - (textField.height / 2)); } else if(value == TextElem.VERTICAL_BOTTOM) { textField.y = this.height - textField.height; } else if(value == TextElem.VERTICAL_TOP) { textField.y = 0; } } /** * 获取文本垂直布局方式 * @return 代表垂直对齐方式的字符串 * TextElem.VERTICAL_TOP 上对齐 * TextElem.VERTICAL_MIDDLE 居中对齐 * TextElem.VERTICAL_BOTTOM 下对齐 */ public function get verticalAlign():String { return this._currentVerticalAlign; } /** * 获取文本选中部分开始索引值 * @return 文本选中部分开始索引值 */ public function get selectionBeginIndex():int { return this.textField.selectionBeginIndex; } /** * 获取文本选中部分末尾索引值 * @return 文本选中部分末尾索引值 */ public function get selectionEndIndex():int { return this.textField.selectionEndIndex; } /** * 获取文本字符串长度值 * @return 当前组件中输入文本字符串长度值 */ public function get length():int { return this.textField.length; } /**当前文本大小写状态*/ private var _currentUpperOrLower:String = "normal"; /** * 获取当前文本大小写状态 * @return _currentUpperOrLower 当前文本大小写状态 */ public function get currentUpperOrLower():String { return this._currentUpperOrLower; } /** * 改变文本大小写 * @parameter changeName大小写名称 * uppercaseAllLetters : 全部大写 * uppercaseFirstLetter : 首字母大写 * normal : 正常 */ public function changeUpperOrLowerCase(changeName:String):void { if(changeName == "uppercaseAllLetters") { textField.text = textField.text.toLocaleUpperCase(); } else if(changeName == "uppercaseFirstLetter") { firstUpperCase(); } else if(changeName == "normal") { textField.restrict = null; recoverNormalText(); } this._currentUpperOrLower = changeName; } /**首字母大写*/ private function firstUpperCase():void { var arr:Array = textField.text.toLocaleLowerCase().split(" "); var newText:String = ""; for(var i:int=0; i<arr.length; i++) { var word:String = arr[i].toString().charAt(0).toLocaleUpperCase() + arr[i].toString().substring(1); newText += word + " "; if(i == arr.length - 1 && textField.text.charAt(textField.text.length - 1) != " ") { newText = newText.substring(0, newText.length - 1); } } textField.text = newText; } /**记录正常状态下文本中大写字母集合*/ private var normalArr:Array = new Array(); /**记录正常状态下文本*/ private function recordNormalText():void { if(normalArr.length != 0) { normalArr.splice(0, normalArr.length); } if(textField.length != 0) { for(var i:int=0; i<textField.length; i++) { if(textField.text.charAt(i).match(new RegExp(/^[A-Z]/)) != null) { normalArr.push(i); } } } } /**恢复原文本大小写*/ private function recoverNormalText():void { if(normalArr.length != 0) { var t:String = textField.text.toLocaleLowerCase(); for(var i:int=0; i<normalArr.length; i++) { var ps:String = t.substring(0, normalArr[i]); var cs:String = t.charAt(normalArr[i]).toLocaleUpperCase(); var ns:String = t.substring(normalArr[i] + 1); t = ps + cs + ns; } textField.text = t; } } } }Test.mxml
<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="800" height="600" creationComplete="init(event)"> <s:layout> <s:HorizontalLayout/> </s:layout> <fx:Script> <![CDATA[ [Bindable] private var fontSize:ArrayCollection = new ArrayCollection([ {id:1, size:10},{id:2, size:15},{id:3, size:20},{id:4, size:25},{id:5, size:30},]); [Bindable] private var fontList:ArrayCollection; protected function button1_clickHandler(event:MouseEvent):void { textElement = new TextElem(); textElement.x = 150; textElement.y = 150; textElement.setSize(300, 200); bc.addElement(textElement); } protected function button2_clickHandler(event:MouseEvent):void { Alert.show(textElement.text); } protected function colorpicker2_changeHandler(event:ColorPickerEvent):void { var tf:TextFormat = textElement.getTextFormat(); tf.color = ColorPicker(event.currentTarget).selectedColor; addFormat(tf); } protected function togglebutton1_changeHandler(event:Event):void { textElement.isEdited = true; } protected function button5_clickHandler(event:MouseEvent):void { var tf:TextFormat = textElement.getTextFormat(); tf.bold = event.currentTarget.selected; addFormat(tf); } /***********************/ private function addFormat(tf:TextFormat):void { if(textElement.length == 0) { textElement.setTextFormat(tf); } else if(textElement.selectionBeginIndex == textElement.length) { //当光标在最后位置时, 改变样式(点粗体),最后一个字符会变粗, 正常应该是从新打出的开始变粗, 没改过来 textElement.setTextFormat(tf, textElement.length - 1); } else { textElement.setTextFormat(tf, textElement.selectionBeginIndex, textElement.selectionEndIndex); } } protected function togglebutton2_clickHandler(event:MouseEvent):void { var tf:TextFormat = textElement.getTextFormat(); tf.italic = event.currentTarget.selected; addFormat(tf); } protected function togglebutton3_clickHandler(event:MouseEvent):void { var tf:TextFormat = textElement.getTextFormat(); tf.underline = event.currentTarget.selected; addFormat(tf); } protected function togglebutton4_clickHandler(event:MouseEvent):void { textElement.horizontalAlign = TextElem.HORIZONTAL_LEFT; } protected function togglebutton5_clickHandler(event:MouseEvent):void { textElement.horizontalAlign = TextElem.HORIZONTAL_CENTER; } protected function togglebutton6_clickHandler(event:MouseEvent):void { textElement.horizontalAlign = TextElem.HORIZONTAL_RIGHT; } protected function init(event:FlexEvent):void { //获取本机安装的字体 var arr:Array = Font.enumerateFonts(true); arr.sortOn("fontName", Array.CASEINSENSITIVE); fontList = new ArrayCollection(arr); fontFamilyDD.selectedIndex = 0; } /**字体改变*/ protected function fontFamilyDD_changeHandler(event:IndexChangeEvent):void { var tf:TextFormat = textElement.getTextFormat(); tf.font = DropDownList(event.currentTarget).selectedItem.fontName; addFormat(tf); } protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void { var tf:TextFormat = textElement.getTextFormat(); tf.size = DropDownList(event.currentTarget).selectedItem.size; addFormat(tf); } protected function togglebutton7_clickHandler(event:MouseEvent):void { textElement.verticalAlign = TextElem.VERTICAL_MIDDLE; } protected function button8_clickHandler(event:MouseEvent):void { textElement.verticalAlign = TextElem.VERTICAL_TOP; } protected function button9_clickHandler(event:MouseEvent):void { textElement.verticalAlign = TextElem.VERTICAL_BOTTOM; } protected function button10_clickHandler(event:MouseEvent):void { textElement.changeUpperOrLowerCase("normal"); } protected function button11_clickHandler(event:MouseEvent):void { textElement.changeUpperOrLowerCase("uppercaseAllLetters"); } protected function button12_clickHandler(event:MouseEvent):void { textElement.changeUpperOrLowerCase("uppercaseFirstLetter"); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:TileGroup width="200" height="100%"> <s:HGroup> <s:Button label="添加文本" click="button1_clickHandler(event)"/> <s:Button label="获取文本" click="button2_clickHandler(event)"/> </s:HGroup> <s:HGroup> <s:Label text="文本颜色"/> <mx:ColorPicker selectedColor="0xFFFFFF" change="colorpicker2_changeHandler(event)"/> </s:HGroup> <s:HGroup> <s:Label text="字体"/> <s:DropDownList id="fontFamilyDD" dataProvider="{fontList}" labelField="fontName" change="fontFamilyDD_changeHandler(event)"/> </s:HGroup> <s:HGroup> <s:Label text="字号"/> <s:DropDownList dataProvider="{fontSize}" labelField="size" selectedIndex="0" change="dropdownlist1_changeHandler(event)"/> </s:HGroup> <s:ToggleButton label="加粗" click="button5_clickHandler(event)" selected="false"/> <s:ToggleButton label="斜体" click="togglebutton2_clickHandler(event)" selected="false"/> <s:ToggleButton label="下划线" selected="false" click="togglebutton3_clickHandler(event)"/> <s:Button label="左对齐" click="togglebutton4_clickHandler(event)"/> <s:Button label="居中对齐" click="togglebutton5_clickHandler(event)"/> <s:Button label="右对齐" click="togglebutton6_clickHandler(event)"/> <s:Button label="上对齐" click="button8_clickHandler(event)"/> <s:Button label="居中对齐" click="togglebutton7_clickHandler(event)"/> <s:Button label="下对齐" click="button9_clickHandler(event)"/> <s:ToggleButton label="可编辑" selected="true" change="togglebutton1_changeHandler(event)"/> <s:Button label="正常" click="button10_clickHandler(event)"/> <s:Button label="全部大写" click="button11_clickHandler(event)"/> <s:Button label="每个单词首字母大写" click="button12_clickHandler(event)"/> <!--<s:Button label="小型大写字母" click="button12_clickHandler(event)"/>--> </s:TileGroup> <s:BorderContainer id="bc" width="100%" height="100%" backgroundColor="#AFE4FF"> </s:BorderContainer> </s:WindowedApplication>
相关文章推荐
- 第30课 Qt中的文本编辑组件
- 使用Swing组件编写一个支持中文文本编辑程序ChineseTextEdit.java
- [导入]自定义文本编辑控件中的光标控制
- Android--自定义带提示文本的EditText组件
- C#文本编辑工具HtmlTextBox组件
- Android--自定义带提示文本的EditText组件
- 封装的自定义dialog,文本编辑,EditText,按需更改
- 【深入浅出ADF】<af:richTextEditor>富文本编辑组件
- Flash文本编辑组件
- 第三十课、Qt中的文本编辑组件------------------狄泰软件学院
- 自定义可点击 富文本组件
- vue 封装自定义组件--tabal列表编辑单元格组件
- Ueditor文本编辑工具栏自定义
- input文本输入框所有用法 文字显示 点击选框编辑 文本框变色 只能输入中文、英文、数字 只读状态 不能黏贴
- Android四大组件之自定义Content Provider
- Android UI 之居间绘制文本内容的正确方法——实现自定义一个TextView
- android自定义组件
- 自定义组件 悬浮球的实现
- 定义新的长文本对象并用cl_gui_textedit编辑