`

在RichEditableText的LinkElement上添加自定义函数

    博客分类:
  • Flex
阅读更多

在Flex中,如何实现在一段文字上某部分字符上显示超链接,点击后显示自定义操作呢?如下:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
			   xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:local="*">
	
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.conversion.TextConverter;
			import flashx.textLayout.elements.FlowElement;
			import flashx.textLayout.elements.FlowGroupElement;
			import flashx.textLayout.elements.LinkElement;
			import flashx.textLayout.elements.TextFlow;
			import flashx.textLayout.events.FlowElementMouseEvent;
			
			import mx.controls.Alert;
			
			import spark.utils.TextFlowUtil;
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				var d:String = '<p>The quick brown <span color="#ff0000">fox jumps over</span> the lazy dogg.</p>';
				richTxt.textFlow = TextFlowUtil.importFromString(d);
			}
			
			private function handleClickEvent(e:FlowElementMouseEvent):void {
				Alert.show("dd");
			}   
			
			protected function button2_clickHandler(event:MouseEvent):void
			{
				var d:String = '<p>Search for product info on <a click="handleClickEvent(event)">Google</a></p>';
				richTxt2.textFlow = TextConverter.importToFlow(d, TextConverter.TEXT_FIELD_HTML_FORMAT);
			}
			
			protected function button3_clickHandler(event:MouseEvent):void
			{
				var d:String = '<p>Search for product info on <a>Google</a></p>';
				//richTxt2.textFlow = TextConverter.importToFlow(d, TextConverter.TEXT_FIELD_HTML_FORMAT);
				richTxt3.textFlow = addLinkClickHandler(d, handleClickEvent);
			}
			
			/**
			 * Converts the html string (from the resources) into a TextFlow object
			 * using the TextConverter class. Then it iterates through all the 
			 * elements in the TextFlow until it finds a LinkElement, and adds a 
			 * FlowElementMouseEvent.CLICK event handler to that Link Element.
			 */
			public static function addLinkClickHandler(html:String, 
													   linkClickedHandler:Function):TextFlow {
				var textFlow:TextFlow = TextConverter.importToFlow(html, 
					TextConverter.TEXT_FIELD_HTML_FORMAT);
				var link:LinkElement = findLinkElement(textFlow);
				if (link != null) {
					link.addEventListener(FlowElementMouseEvent.CLICK, 
						linkClickedHandler, false, 0, true);
				} else {
					trace("Warning - couldn't find link tag in: " + html);
				}
				return textFlow;
			}
			
			/**
			 * Finds the first LinkElement recursively and returns it.
			 */
			private static function findLinkElement(group:FlowGroupElement):LinkElement {
				var childGroups:Array = [];
				// First check all the child elements of the current group,
				// Also save any children that are FlowGroupElement
				for (var i:int = 0; i < group.numChildren; i++) {
					var element:FlowElement = group.getChildAt(i);
					if (element is LinkElement) {
						return (element as LinkElement);
					} else if (element is FlowGroupElement) {
						childGroups.push(element);
					}
				}
				// Recursively check the child FlowGroupElements now
				for (i = 0; i < childGroups.length; i++) {
					var childGroup:FlowGroupElement = childGroups[i];
					var link:LinkElement = findLinkElement(childGroup);
					if (link != null) {
						return link;
					}
				}
				return null;
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<fx:String id="htmlTextAsMarkup"><![CDATA[<p>The quick brown <span fontWeight="bold">fox jumps over</span> the lazy dogg.</p>]]></fx:String>
	</fx:Declarations>	

	<s:RichText id="richTxt"
				horizontalCenter="0" verticalCenter="0" />
	<s:Button x="34" y="32" label="richtext" click="button1_clickHandler(event)"/>
	
	<s:RichEditableText top="70" editable="false" focusEnabled="false"  id="richTxt2">
	</s:RichEditableText>
	<local:HtmlLabel id="richTxt3" top="100">
		
	</local:HtmlLabel>
	<s:Button x="130" y="32" label="RichEditableText" click="button2_clickHandler(event)"/>
	<s:Button x="258" y="32" label="htmlLabel" click="button3_clickHandler(event)"/>
	
</s:Application>

 以下是HtmlLabel的定义内容:

<?xml version="1.0" encoding="utf-8"?>
<s:RichEditableText xmlns:fx="http://ns.adobe.com/mxml/2009"
					xmlns:s="library://ns.adobe.com/flex/spark"
					xmlns:mx="library://ns.adobe.com/flex/mx"
					focusEnabled="false"
					selectable="false"
					editable="false">
	
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.conversion.TextConverter;
			
			override public function set text(value:String):void {
				super.textFlow = TextConverter.importToFlow(value, 
					TextConverter.TEXT_FIELD_HTML_FORMAT);
			}
		]]>
	</fx:Script>
	
</s:RichEditableText>

 运行后,界面如下所示:



 点击“Google"即弹出对话框,完成了自定义操作的实现。

  • 大小: 3.7 KB
分享到:
评论

相关推荐

    VBA自定义函数智能提示.rar

    在VBA中编写自定义函数能够极大地提高工作效率,尤其是在处理大量数据时。标题“VBA自定义函数智能提示.rar”表明这个压缩包包含了一种资源,可能是VBA的插件或库,用于提供自定义函数的智能提示功能,类似于IDE中的...

    android SDK中添加自定义api

    在Android开发过程中,有时我们需要为SDK提供额外的功能或者扩展,这时就需要在Android SDK中添加自定义API。这个过程涉及到Java API的设计与JNI(Java Native Interface)的使用,以实现Java层与C/C++层的交互。...

    在layui.use 中自定义 function 的正确方法

    3. 为DOM元素添加事件监听器,如 `click`,并在事件处理函数中调用自定义函数。 4. 如果需要在HTML中直接调用自定义函数,可以将其声明为全局函数,例如 `window.hello`。 5. 谨慎使用 `onclick` 等行内事件,尽量将...

    vb添加dll函数

    而在VB.NET中,需要在类上添加`&lt;DllImport&gt;`属性来声明导出函数,如`("MyDLL.dll")&gt; _ Public Shared Function MyFunction(ByVal arg1 As Integer) As Integer`。 三、添加DLL引用 在VB应用程序中调用DLL函数之前,...

    VB函数添加大师 99.5KB

    3. **兼容性优化**:为了确保生成的DLL能在各种VB应用程序中顺利运行,该插件在生成过程中会考虑API调用约定、平台目标等兼容性问题,确保函数在不同环境下都能正常工作。 4. **错误检查与调试**:在DLL制作过程中...

    element-ui 的el-button组件中添加自定义颜色和图标的实现方法

    1. 在Element UI源码中添加自定义指令,如`otherRender`,处理颜色自定义。 2. 创建一个局部组件`vRender`,实现动态图标渲染。 3. 定义CSS样式,根据`type`属性应用不同颜色和图标。 4. 使用自定义全局指令和局部...

    esp32 components 添加自定组件

    在开发过程中,有时我们需要添加自定义组件来扩展其功能。"esp32 components 添加自定组件"这个主题主要涉及如何在ESP32项目中集成自定义的硬件驱动、库或者特定功能模块。 首先,了解ESP32项目的构建系统是至关...

    dede列表页添加自定义联动

    在织梦内容管理系统(DedeCMS)中,"dede列表页添加自定义联动" 是一个高级定制功能,主要用于在列表页面中实现自定义字段的联动筛选效果。这个功能允许用户根据自己的需求,在列表页中调用特定的联动类型,比如在本...

    在自定义指令中使用动画.rar

    在`link`函数中,我们可以访问到与指令关联的DOM元素(`element`),这是添加动画的关键。AngularJS动画通过监听特定的CSS类来触发动画,这些类由ngAnimate自动添加和移除。例如,我们可以添加一个`ng-enter`和`ng-...

    WinCC调用自定义DLL.rar

    在WinCC中调用自定义DLL,意味着我们可以将特定的控制逻辑或者复杂算法封装到DLL中,然后在WinCC的画面中通过函数调用来执行这些功能。 C++是一种强大的面向对象编程语言,特别适合开发底层的、性能要求高的代码,...

    VB函数添加大师 V2.2

    使用时请先将VB安装目录下原LINK.EXE改名为LINK2.EXE,再将本程序复制过去,在编译DLL时本程序会自动显示出DLL内的函数列表,在选择需要的函数后,点击“生成带参数ActiveXDLL”按钮就可以完成添加工作了。...

    VB函数添加大师 1.95

    使用VB作为开发工具的朋友,应该都知道VB的IDE不支持对AciveDLL添加输出函数的方法.这样的DLL文件只能采用"引用"的办法来用.有没有办法让它像普通DLL一样拥有输出函数呢?请使用本程序吧!它能让你ActiveDLL内的函数...

    django admin 添加自定义链接方式

    在实际项目中,有时我们需要在Django Admin中添加自定义链接,以便于管理员更高效地处理各种业务需求。本篇文章将详细介绍如何在Django Admin中添加自定义链接。 首先,我们探讨一下这个问题的背景。在开发过程中,...

    EXCEL常用函数库代码

    在Excel中,使用DLL可以创建自定义函数,这些函数能够执行Excel内置函数无法实现或更高效的操作。 此压缩包中的"excel03"可能是一个包含对应DLL文件的子目录,也可能是一个DLL文件本身,用于提供对Excel 2003的函数...

    DLL函数查看,一键劫持源码~支持64位DLL

    劫持DLL函数常用于Hook技术,例如,当一个函数被调用时,可以先执行自定义的代码,然后再执行原始函数。这种方式在游戏外挂、软件调试和安全分析中常见。 描述中的“@丶lc”可能是指作者或者相关项目的名字,并且...

    ckeditor自定义按钮

    本文档将介绍如何在CKEditor中添加自定义按钮,并提供相应的代码示例和配置步骤。 ### CKEditor自定义按钮的配置步骤 #### 1. 准备工作 首先,开发者需要下载CKEditor的最新版本,这通常包括`lang`、`plugins`、`...

    易语言DLL返回自定义数据类型源码

    在易语言中,创建DLL并返回自定义数据类型是一项常见的任务,这涉及到数据结构的设计、函数接口的定义以及调用约定等多个方面。 1. 自定义数据类型:在易语言中,程序员可以根据需求定义自己的数据结构,如结构体...

    element深色系资源

    在 Element 官网上,你可以找到一个名为“主题定制”的功能。通过这个功能,你可以上传一个配置文件 `config.json`,该文件定义了颜色、字体等视觉元素的自定义设置。在提供的 `dark` 文件中,可能就包含了一个预设...

    让易语言的DLL不依赖任何插件都能拥有完整的入口函数(DllMain)

    在编程领域,DLL(Dynamic Link Library)是一种共享库文件,它包含可由多个程序同时使用的代码和数据。DLL文件能够减少内存占用,提高系统效率,同时也方便代码复用。易语言,作为一款中国本土的编程环境,也支持...

    loadrunner函数

    这些函数用于添加过滤器,其中`web_add_filter`用于添加自定义过滤器,而`web_add_auto_filter`则用于添加自动过滤器。 #### 23. web_remove_auto_filter 此函数用于移除自动过滤器。 #### 24. web_add_auto_...

Global site tag (gtag.js) - Google Analytics