热门标签 | 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


推荐阅读
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
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社区 版权所有