热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

将Callout容器添加到移动设备应用程序中

在移动设备应用程序中,callout是在应用程序顶部弹出的容器。该容器可以容纳一个或多个组件,并且支持不同类型的布局。callout容器可以是模态或非模态容器。模态容器在其

在移动设备应用程序中,callout 是在应用程序顶部弹出的容器。该容器可以容纳一个或多个组件,并且支持不同类型的布局。

callout
容器可以是模态或非模态容器。模态容器在其关闭之前接受所有的键盘和鼠标输入。非模态容器允许应用程序中的其它组件在该容器处于打开状态时接受输入。

Flex 提供了两个可用于将 callout 容器添加到移动设备应用程序中的组件:CalloutButton 和 Callout。


 

使用 CalloutButton 控件创建 callout
容器


CalloutButton 控件提供了一种创建 callout 容器的简单方式。通过该组件,您可以定义显示在
callout 中的组件和设置容器布局。

在移动设备应用程序中选择 CalloutButton 控件时,该控件将打开 callout 容器。Flex 会自动绘制一个从 callout 容器指向
CalloutButton 控件的箭头,如下图所示:

 


bubuko.com,布布扣

 

以下示例说明了用于创建上图中显示的 CalloutButton 的移动设备应用程序:




xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView">

paddingLeft="10" paddingTop="10"/>



horizOntalPosition="end"
verticalPosition="after"
label="Open callout">





click="myCB.closeDropDown();"/>
click="myCB.closeDropDown();"/>


CalloutButton 控件定义显示在 callout 容器内的两个 Button 控件。CalloutButton 控件还指定将
HorizontalLayout 用作 callout 容器的布局。默认情况下,该容器使用 BasicLayout。

使用 CalloutButton 控件打开和关闭 Callout 容器

当用户选择 CalloutButton 控件或您调用 class="codeph">CalloutButton.openDropDown() 方法时,callout 容器将打开。class="codeph">horizontalPosition 和 class="codeph">verticalPosition 属性确定 callout 容器相对于 CalloutButton
控件的位置。有关示例,请参阅确定
callout 容器的大小和位置。

CalloutButton 打开的 callout 容器始终都是非模态的。这意味着应用程序中的其它组件可以在 callout 处于打开状态时接受输入。使用
Callout 容器创建模态 callout。

在您单击 callout 容器以外的位置或调用 class="codeph">CalloutButton.closeDropDown() 方法之前,callout
容器一直处于打开状态。在该示例中,对于 callout 容器中两个 Button 控件的 class="codeph">click 事件,您在事件处理函数中调用了 class="codeph">closeDropDown() 方法。



使用 Callout 容器创建 callout


CalloutButton 控件将 callout 容器以及打开和关闭 callout
必需的所有逻辑封装在一个控件中。则 CalloutButton 控件成为 callout 容器的主机

您还可以在移动设备应用程序中使用 Callout 容器。Callout 容器的好处是它不与单个主机关联,因此可以重用于应用程序中的任何位置。

通常,为了响应事件,使用 class="codeph">Callout.open() 和 class="codeph">Callout.close() 方法打开 Callout 容器。调用 open() 方法时,可以传递可选参数以指定调用容器为模态容器。默认情况下,调用容器为非模态容器。

调用容器的位置相对于主机组件。class="codeph">horizontalPosition 和 class="codeph">verticalPosition 属性确定容器相对于主机的位置。有关示例,请参阅确定
callout 容器的大小和位置。

由于它为弹出窗口,因此不能创建一个 Callout 容器作为应用程序的正常 MXML 布局代码的一部分。应在 MXML 文件中将 Callout
容器定义为自定义 MXML 组件。

在以下示例中,在应用程序的 comps 目录的 MyCallout.mxml 文件中定义 Callout 容器:




xmlns:s="library://ns.adobe.com/flex/spark"
horizOntalPosition="start"
verticalPosition="after">
paddingTop="10" paddingLeft="5" paddingRight="10">


fOntWeight="bold"/>




fOntWeight="bold"/>









MyCallout.mxml 定义一个简单的弹出窗口以允许用户输入名和姓。请注意,按钮调用 class="codeph">close() 方法关闭 callout 以响应 class="codeph">click 事件。

以下示例说明了用于打开 MyCallout.mxml 的 View 容器以响应 class="codeph">click 事件:




xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView">

paddingLeft="10" paddingTop="10"/>

import comps.MyCallout;

// Event handler to open the Callout component.
protected function button1_clickHandler(event:MouseEvent):void {
var myCallout:MyCallout = new MyCallout();
// Open as a modal callout.
myCallout.open(calloutB, true);
}
]]>

label="Open Callout container"
click="button1_clickHandler(event);"/>

首先,将 MyCallout.mxml 组件导入至应用程序。为了响应 class="codeph">click 事件,名为 calloutB 的按钮创建了一个 MyCallout.mxml
实例,然后调用 open() 方法。

open() 方法指定两个参数。第一个参数指定 calloutB 是 callout
的主机组件。因此,callout 在应用程序中将自身定位在相对于 calloutB 位置的位置。第二个参数为 class="codeph">true 以创建模态 callout。



定义内联 callout 容器


您无需在单独文件中定义 Callout 容器。以下示例使用 class="codeph"> 标签将其定义为 View 容器的内联组件:




xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView">

paddingLeft="10" paddingTop="10"/>

// Event handler to open the Callout component.
protected function button1_clickHandler(event:MouseEvent):void {
var myCallout:MyCallout = new MyCallout();
// Open as a modal callout.
myCallout.open(calloutB, true);
}
]]>


horizOntalPosition="end"
verticalPosition="after">
paddingTop="10" paddingLeft="5" paddingRight="10">

fOntWeight="bold"/>



fOntWeight="bold"/>










label="Open Callout container"
click="button1_clickHandler(event);"/>



从 Callout 容器中传回数据


使用 Callout 容器的 class="codeph">close() 方法将数据传回主应用程序。class="codeph">close() 方法具有如下签名:


public function close(commit:Boolean = false, data:*):void


其中:

  • 如果应用程序应提交返回的数据,则 commit 包含  class="codeph">true


  • data 指定返回的数据。

调用 close() 方法会分派 close 事件。与 class="codeph">close 事件关联的事件对象是类型为 spark.events.PopUpEvent 的对象。PopUpEvent 类定义两个属性:class="codeph">commit 和 class="codeph">data,这两个属性包含 class="codeph">close() 方法的相应参数值。在 class="codeph">close 事件的事件处理函数中使用这些属性,以便检查从 callout 返回的任何数据。

callout 容器是 SkinnablePopUpContainer 类的子类,它使用相同的机制将数据传回主应用程序中。有关从
SkinnablePopUpContainer 容器传回数据的示例,请参阅从 Spark SkinnablePopUpContainer 容器传回数据。

以下示例将修改如上所示的 Callout 组件以返回名和姓值:




xmlns:s="library://ns.adobe.com/flex/spark"
horizOntalPosition="start"
verticalPosition="after">
import spark.events.IndexChangeEvent;

public var retData:String = new String();

// Event handler for the click event of the OK button.
protected function clickHandler(event:MouseEvent):void {
//Create the return data.
retData = firstName.text + " " + lastName.text;
// Close the Callout.
// Set the commit argument to true to indicate that the
// data argument contains a valid value.
close(true, retData);
}

]]>
paddingTop="10" paddingLeft="5" paddingRight="10">

fOntWeight="bold"/>



fOntWeight="bold"/>








在该示例中,创建 String 返回名和姓,以对用户选择“确定”按钮做出响应。

View 容器然后使用 Callout 中的 class="codeph">close 事件以显示返回的数据:




xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView">

paddingLeft="10" paddingTop="10"/>

import comps.MyCalloutPassBack;
import spark.events.PopUpEvent;

public var myCallout:MyCalloutPassBack = new MyCalloutPassBack(); // Event handler to open the Callout component.
protected function clickHandler(event:MouseEvent):void {
// Add an event handler for the close event to check for
// any returned data.
myCallout.addEventListener(‘close‘, closeHandler);
// Open as a modal callout.
myCallout.open(calloutB, true);
}

// Handle the close event from the Callout.
protected function closeHandler(event:PopUpEvent):void {
// If commit is false, no data is returned.
if (!event.commit)
return;

// Write the returned Data to the TextArea control.
myTA.text = String(event.data);

// Remove the event handler.
myCallout.removeEventListener(‘close‘, closeHandler);
}

]]>

label="Open Callout container"
click="clickHandler(event);"/>




将 ViewNavigator 添加到 Callout 中


您可以在 Callout 容器中使用 ViewNavigator。通过 ViewNavigator 可以向 callout 中添加操作栏和多个视图。

例如,以下 View 打开了在文件 MyCalloutPassBackVN 中定义的 Callout 容器:




xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView">

paddingLeft="10" paddingTop="10"/>

import comps.MyCalloutPassBackVN;
import spark.events.PopUpEvent;

public var myCallout:MyCalloutPassBackVN = new MyCalloutPassBackVN();

// Event handler to open the Callout component.
protected function clickHandler(event:MouseEvent):void {
myCallout.addEventListener(‘close‘, closeHandler);
myCallout.open(calloutB, true);
}

// Handle the close event from the Callout.
protected function closeHandler(event:PopUpEvent):void {
if (!event.commit)
return;

myTA.text = String(event.data);
myCallout.removeEventListener(‘close‘, closeHandler);
}
]]>



click="clickHandler(event);"/>


MyCalloutPassBackVN.mxml 文件定义用于容纳 ViewNavigator 容器的 Callout 容器:




xmlns:s="library://ns.adobe.com/flex/spark"
cOntentBackgroundAppearance="none"
horizOntalPosition="start"
verticalPosition="after">

import mx.events.FlexMouseEvent;
import views.SettingsView;

protected function done_clickHandler(event:MouseEvent):void {
// Create an instance of SettingsView, and
// initialize it as a copy of the current View of the ViewNavigator.
var settings:SettingsView = (viewNav.activeView as SettingsView);

// Create the String to represent the returned data.
var retData:String = new String();
// Initialze the String from the current View.
retData = settings.firstName.text + " " + settings.lastName.text;
// Close the Callout and return thhe data.
this.close(true, retData);
}
]]>









在 MyCalloutPassBackVN.mxml 中,指定 ViewNavigator 的第一个视图是
SettingsView。SettingsView 定义针对用户名字和姓氏的 TextInput 控件。用户选择“确定”按钮时,将关闭 Callout
并将任何返回数据传回 MyCalloutPassBackVN。



注: 当 ViewNavigator 出现在
Callout 容器中时,ActionBar 会具有透明的背景颜色。在此例中,您将 Callout 容器上的 class="codeph">contentBackgroundAppearance 设置为 none。此设置会防止透明
ActionBar 区域中出现 Callout 的默认白色 class="codeph">contentBackgroundColor

下图显示在 Callout 处于打开状态下的应用程序:

 


查看完全大小图形bubuko.com,布布扣id="ca_calloutViewNav_ca" src="https://img.php1.cn/3cd4a/18ace/696/1d8e759bd3e6bbec.jpeg">

 

SettingsView.mxml 如下所示:




xmlns:s="library://ns.adobe.com/flex/spark"
title="Settings"> paddingTop="10" paddingLeft="5" paddingRight="10">

fOntWeight="bold"/>



fOntWeight="bold"/>





注: 由 Callout 容器中的
ViewNavigator 定义的 ActionBar 具有透明背景。默认情况下,从一个 View 到另一个 View 的过渡效果可以正确显示在 Callout
中。但是,如果您指定非默认的过渡效果(例如 CrossFadeViewTransition 或 ZoomViewTransition),两个视图的
ActionBar 区域可能会重叠。要解决该问题,为使用非透明背景的 ActionBar 和 Callout 创建一个自定义外观类。



确定 callout 容器的大小和位置


CalloutButton 控件和 Callout 容器使用以下两个属性指定 callout 容器相对于其主机的位置:horizontalPosition 和 class="codeph">verticalPosition。这两个属性可以具有下列值:“class="codeph">before”、“start”、“middle”、“class="codeph">end”、“after”和“auto”(默认值)。

例如,按照如下所示的方式设置这两个属性:


horizOntalPosition="before"
verticalPosition="after"

callout 容器将在主机组件的左下方打开。如果按照如下所示的方式设置这两个属性:


horizOntalPosition="middle"
verticalPosition="middle"

callout 容器将在主机组件的顶部打开,callout 的中心与主机组件的中心对齐。

绘制一个从 Callout 指向主机的箭头

对于除 horizontalPosition 与 class="codeph">verticalPosition 属性的五种组合之外的所有位置,callout
都会绘制一个指向主机的箭头。当 Callout 位于主机中部上方居中以及角落时,不会显示箭头。以下组合不显示箭头:


// Centered
horizOntalPosition="middle"
verticalPosition="middle"
// Upper-left corner
horizOntalPosition="before"
verticalPosition="before"
// Lower-left corner
horizOntalPosition="before"
verticalPosition="after"
// Upper-right corner
horizOntalPosition="after"
verticalPosition="before"
// Lower-right corner
horizOntalPosition="after"
verticalPosition="after"

对于 Callout 容器,class="codeph">horizontalPosition 和 class="codeph">verticalPosition 属性还确定 class="codeph">Callout.arrowDirection 只读属性的值。callout
容器相对于主机的位置确定 class="codeph">arrowDirection 属性的值。可能的值包括 class="codeph">"up""left" 和其它。

Callout.arrow 外观部件使用 arrowDirection 属性的值基于
callout 位置绘制箭头。



管理 callout 容器的内存


使用 callout 容器时的一个注意事项是如何管理 callout 使用的内存。例如,如果希望减少应用程序使用的内存,则在每次打开应用程序时创建
callout 的实例。然后,在应用程序关闭时破坏 callout。但是,确保删除 callout(尤其是事件处理函数)的所有引用,否则 callout
不会被破坏。

或者,如果 callout 容器相对比较小,则可以在应用程序中多次重用相同的 callout。在该配置中,应用程序创建单个 callout
实例。然后,它重用该实例,callout 在使用的间隔保留在内存中。该配置减少了在应用程序中的执行时间,因为应用程序无需在每次打开时重新创建
callout。

使用 CalloutButton 控件管理内存

要配置 CalloutButton 控件使用的 callout,请设置 class="codeph">CalloutButton.calloutDestructionPolicy 属性。class="codeph">"auto" 的值配置在 callout 关闭时将其破坏的控件。class="codeph">"never" 的值配置将 callout 缓存在内存中的控件。

使用 Callout 容器管理内存

Callout 容器不定义 class="codeph">calloutDestructionPolicy 属性,而是按照您在应用程序中创建 callout
容器实例的方式控制其内存使用。在以下示例中,将在每次打开 callout 容器时创建它的实例:


protected function button1_clickHandler(event:MouseEvent):void {
// Create a new instance of the callout container every time you open it.
var myCallout:MyCallout = new MyCallout();
myCallout.open(calloutB, true);
}

或者,也可以定义在每次打开 callout 容器时重用的单个 callout 容器实例:


// Create a single instance of the callout container.
public var myCallout:MyCallout = new MyCallout();
protected function button1_clickHandler(event:MouseEvent):void {
myCallout.open(calloutB, true);
}

将 Callout 容器添加到移动设备应用程序中,布布扣,bubuko.com


推荐阅读
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 网络爬虫的规范与限制
    本文探讨了网络爬虫引发的问题及其解决方案,重点介绍了Robots协议的作用和使用方法,旨在为网络爬虫的合理使用提供指导。 ... [详细]
  • 自动验证时页面显示问题的解决方法
    在使用自动验证功能时,页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]
  • 本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog,包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 本文介绍了如何使用 CMD 批处理脚本进行文件操作,包括将指定目录下的 PHP 文件重命名为 HTML 文件,并将这些文件复制到另一个目录。 ... [详细]
  • 两个条件,组合控制#if($query_string~*modviewthread&t(&extra(.*)))?$)#{#set$itid$1;#rewrite^ ... [详细]
  • 本文详细介绍了DMA控制器如何通过映射表处理来自外设的请求,包括映射表的设计和实现方法。 ... [详细]
  • 本文详细介绍了如何利用Duilib界面库开发窗体动画效果,包括基本思路和技术细节。这些方法不仅适用于Duilib,还可以扩展到其他类似的界面开发工具。 ... [详细]
  • Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案
    本文探讨了在使用Spark的map或flatMap算子将一个数据集转换为另一个数据集时,遇到的Schema变为Binary的问题,并提供了详细的解决方案。 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
author-avatar
纽约纽约MrWaNg
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有