构建Flex用户界面：AF-客户端管理器项目实战
立即解锁
发布时间: 2025-08-19 01:52:23 阅读量: 9 订阅数: 16 
Flex与Spring构建RIA企业级应用
### 构建Flex用户界面：AF - 客户端管理器项目实战
#### 1. 引言
在当今的软件开发中，构建一个高效、美观且功能强大的用户界面是至关重要的。Flex作为一种强大的开发技术，能够帮助我们实现丰富的用户体验。本文将详细介绍如何构建AF - 客户端管理器应用程序的Flex用户界面，包括组件模型定义、应用程序布线、远程对象配置、组件构建以及皮肤和样式设计等方面。
#### 2. Flex架构与组件定义
在开始构建Flex应用程序之前，我们需要定义一个组件模型。组件模型的目的是为应用程序的各个组件命名，并在编写应用程序逻辑之前构建每个视图的骨架。这样做的好处是可以让开发者更清晰地了解需要编码的内容，并且便于进行模块化开发。
创建组件模型的步骤如下：
1. 完成应用程序的线框图设计，以便有可视化的参考。
2. 根据线框图创建组件模型，确定各个组件的名称和功能。
3. 可以使用本地XML文件进行快速原型开发，在没有实时数据源的情况下演示应用程序的功能。
组件模型创建完成后，我们可以根据该模型编写应用程序的骨架。这样可以在深入编写各个组件的实际代码之前，解决流程问题，并且更容易调试。
#### 3. AF - 客户端管理器组件模型与目录结构
我们之前已经完成了AF - 客户端管理器应用程序的设计并生成了线框图。现在，我们将对应用程序的组件进行建模，并将应用程序连接起来，以便了解应用程序的流程和屏幕之间的过渡效果。
首先，根据组件模型创建目录结构，示例如下：
```plaintext
af_ClientManager
├── view
│ ├── ClientManager
│ │ ├── components
│ │ ├── ClientDetailViews
│ │ ├── ClientProjectsDetailViews
│ │ ├── ClientFinancialsDetailViews
│ │ └── ClientManagerView.mxml
│ ├── ProjectManager
│ │ └── ProjectManagerView.mxml
│ ├── Dashboard
│ │ ├── DashboardView.mxml
│ │ ├── GraphCanvas.mxml
│ │ └── MetricsMenu.mxml
│ └── Main
│ ├── Header.mxml
│ ├── Footer.mxml
│ └── MainView.mxml
├── model
│ ├── ModelLocator.mxml
│ └── vo
│ └── ClientVO.as
└── services
└── Services.mxml
```
#### 4. AF - 客户端管理器模型
为了正确连接应用程序，我们需要使用模型进行绑定。以下是`ModelLocator.mxml`和`ClientVO.as`的代码示例：
```actionscript
// ModelLocator.mxml
package com.af.clientmanager.model
{
import com.adobe.cairngorm.model.ModelLocator;
import com.af.clientmanager.model.vo.*;
import mx.collections.ArrayCollection;
[Bindable]
public class ModelLocator implements com.adobe.cairngorm.model.ModelLocator
{
private static var modelLocator : com.af.clientmanager.model.ModelLocator;
public static function getInstance() : com.af.clientmanager.model.ModelLocator
{
if ( modelLocator == null )
modelLocator = new com.af.clientmanager.model.ModelLocator();
return modelLocator;
}
public function ModelLocator()
{
if( com.af.clientmanager.model.ModelLocator.modelLocator != null )
throw new Error( "Only one ModelLocator instance should be instantiated" );
}
public const SERVICE_ENDPOINT:String = "http://localhost:8080/af_Central/spring/messagebroker/amf";
public const YAHOO_APP_ID:String = "YOUR YAHOO APP ID";
public const UPLOAD_URL:String = "";
public const DIRECTORY_NAME:String = "af_Central";
//Global Menu Constants
public const CLIENT_MANAGER:int = 0;
public const PROJECT_ADMIN:int = 1;
public const DASHBOARD:int = 2;
public var MainViewStackState:int = 0;
// Data Providers
public var clientsDP:ArrayCollection = new ArrayCollection();
public var contactsDP:ArrayCollection = new ArrayCollection();
public var issuesDP:ArrayCollection = new ArrayCollection();
public var documentsDP:ArrayCollection = new ArrayCollection();
public var selectedClient:ClientVO = new ClientVO;
public var selectedContact:ClientContactsVO = new ClientContactsVO;
}
}
```
```actionscript
// ClientVO.as
package com.af.clientmanager.model.vo
{
[Bindable]
[RemoteClass(alias="com.af.core.domain.Client")]
public class ClientVO
{
public var objectIdentifier:Number;
public var assocobjectID:Number;
public var clientName:String;
public var clientID:int;
public var link:String;
public var description:String;
public var notes:String;
public var phone:String;
public var addressLine1:String;
public var addressLine2:String;
public var city:String;
public var state:String;
public var zip:String;
}
}
```
#### 5. AF - 客户端管理器应用程序布线
应用程序布线是将各个组件连接起来，形成一个完整的应用程序。我们将从应用程序视图开始，逐步深入到各个关键视图。
##### 5.1 应用程序视图
应用程序视图的根文件是`af_ClientManager.mxml`，示例代码如下：
```xml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
pageTitle="AF Client Manager"
layout="absolute"
xmlns:view="com.af.view.*"
xmlns:services="com.af.clientmanager.services.*"
xmlns:control="com.af.clientmanager.control.*"
xmlns:Main="com.af.clientmanager.view.Main.*"
xmlns:model="com.af.clientmanager.model.*"
initialize="initApp()" >
<mx:Style source="assets/css/style.css"/>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.Alert;
private function initApp():void
{
// Currently set to applicationView to bypass
// the login process.
vsAppLevel.selectedChild = applicationView;
}
public function loginSuccess():void
{
vsAppLevel.selectedChild = applicationView;
}
]]>
</mx:Script>
<!-- ===================================================================== -->
<!-- the ServiceLocator where we specify the remote services -->
<services:Services id="services"/>
<!-- the FrontController, containing Commands-to-Event mappings -->
<control:MainController id="mainController" />
<!-- ===================================================================== -->
<mx:Fade id="fadeInApp" alphaFrom="0" alphaTo="1" duration="500" />
<mx:VBox width="100%" height="100%" backgroundAlpha=".88"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
verticalAlign="top" horizontalAlign="center">
<mx:ViewStack id="vsAppLevel" width="100%" height="100%" paddingTop="0"
creationPolicy="all">
<mx:Canvas id="loginView" showEffect="Fade" hideEffect="Fade">
<Main:Login width="100%" height="100%" />
</mx:Canvas>
<mx:VBox width="100%" height="100%"
id="applicationView" backgroundAlpha="0"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
paddingTop="0"
verticalAlign="top" horizontalAlign="center"
showEffect="Fade" hideEffect="Fade">
<mx:VBox width="985" height="735"
paddingTop="0" verticalGap="0"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
borderStyle="solid" borderThickness="2"
backgroundColor="#FFFFFF"
backgroundAlpha=".75">
<Main:Header backgroundColor="red" />
<mx:VBox width="100%" height="100%">
<Main:MainView />
</mx:VBox>
<Main:Footer backgroundColor="blue"/>
</mx:VBox>
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
```
该文件包含了应用程序的根标签`<mx:Application>`，在`<mx:Script>`块中，`initApp()`函数用于设置视图堆栈的初始选择。视图堆栈控制着应用程序的可见部分，同时包含了应用程序的头部、主视图和底部。
##### 5.2 头部和底部组件
头部组件`Header.mxml`和底部组件`Footer.mxml`的示例代码如下：
```xml
<!-- Header.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="75">
<mx:Script>
<![CDATA[
import com.af.clientmanager.view.dialogs.DeleteClientConfirmationDialog;
import mx.managers.PopUpManager;
import com.af.clientmanager.control.commands.events.DeleteClientEvent;
import com.af.clientmanager.control.commands.events.InsertClientEvent;
import mx.events.ItemClickEvent;
import com.af.clientmanager.model.vo.ClientVO;
import com.adobe.cairngorm.control.CairngormEventDispatcher;
import com.af.clientmanager.control.commands.events.UpdateClientEvent;
import mx.controls.Alert;
import com.af.clientmanager.model.ModelLocator;
[Bindable]
public var model : ModelLocator = ModelLocator.getInstance();
private function clearClientDetails():void
{
// remove all information from
// the panels after pop-up
model.selectedClient = new ClientVO();
}
private function saveClient():void
{
if(model.selectedClient.objectIdentifier > 0)
CairngormEventDispatcher.getInstance().dispatchEvent(new UpdateClientEvent(model.selectedClient));
else
{
CairngormEventDispatcher.getInstance().dispatchEvent(new InsertClientEvent(model.selectedClient));
}
}
private function deleteClient():void
{
// Don't try to delete unless a client is selected
if(model.selectedClient.objectIdentifier > 0)
{
var pop1:DeleteClientConfirmationDialog = DeleteClientConfirmationDialog(
PopUpManager.createPopUp(this, DeleteClientConfirmationDialog, true));
pop1.confirmationMessageTitle = "Delete Confirmation";
pop1.confirmationMessageBody = "Are you sure you want to delete: " + model.selectedClient.clientName;
PopUpManager.centerPopUp(pop1);
}
}
private function functionsBBClick(event:ItemClickEvent):void
{
switch (event.index)
{
case 0:
clearClientDetails();
break;
case 1:
saveClient();
break;
case 2:
deleteClient();
break;
}
}
private function componentsBBClick(event:ItemClickEvent):void
{
switch (event.index)
{
case 0:
model.MainViewStackState = model.CLIENT_MANAGER;
break;
case 1:
model.MainViewStackState = model.PROJECT_ADMIN;
break;
case 2:
model.MainViewStackState = model.DASHBOARD;
break;
}
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:Image width="190" height="74"/>
<mx:VBox width="100%" height="100%" verticalAlign="bottom">
<mx:HBox width="100%">
<mx:Button label="N" click="clearClientDetails()"/>
<mx:Button label="S" click="saveClient()"/>
<mx:Button label="D" click="deleteClient()"/>
<mx:Spacer width="100%" />
<mx:Button label="Client Manager"
click="{model.MainViewStackState=model.CLIENT_MANAGER}"/>
<mx:Button label="Project Administrator"
click="{model.MainViewStackState=model.PROJECT_ADMIN}"/>
<mx:Button label="Dashboard"
click="{model.MainViewStackState=model.DASHBOARD}"/>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Canvas>
```
```xml
<!-- Footer.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="25">
<mx:Label text="Footer" fontSize="16" color="white" fontWeight="bold" />
</mx:Canvas>
```
头部组件包含了一些导航按钮和操作按钮，用于切换视图和执行客户端的增删改操作。底部组件仅用于显示公司信息。
##### 5.3 主视图
主视图`MainView.mxml`的示例代码如下：
```xml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
backgroundColor="#888888"
xmlns:ClientDetailViews="com.af.clientmanager.view.ClientManager.ClientDetailViews.*"
xmlns:ClientFinancialsDetailViews="com.af.clientmanager.view.ClientManager.ClientFinancialsDetailViews.*"
xmlns:ClientProjectsDetailViews="com.af.clientmanager.view.ClientManager.ClientProjectsDetailViews.*"
xmlns:components="com.af.clientmanager.view.ClientManager.components.*"
xmlns:ClientManager="com.af.clientmanager.view.ClientManager.*"
xmlns:ProjectManager="com.af.clientmanager.view.ProjectManager.*"
xmlns:Dashboard="com.af.clientmanager.view.Dashboard.*">
<mx:Script>
<![CDATA[
import com.af.clientmanager.model.ModelLocator;
[Bindable]
public var model : ModelLocator = ModelLocator.getInstance();
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<components:ClientList />
<mx:ViewStack id="vsMain" width="100%" height="100%"
paddingTop="0"
creationPolicy="all"
selectedIndex="{model.MainViewStackState}">
<mx:Canvas id="clientManagerView"
showEffect="Fade" hideEffect="Fade">
<ClientManager:ClientManagerView />
</mx:Canvas>
<mx:Canvas id="projectManagerView"
showEffect="Fade" hideEffect="Fade">
<ProjectManager:ProjectManagerView />
</mx:Canvas>
<mx:Canvas id="dashboardView" showEffect="Fade"
hideEffect="Fade">
<Dashboard:DashboardView />
</mx:Canvas>
</mx:ViewStack>
</mx:HBox>
</mx:Canvas>
```
主视图包含了客户端列表和一个视图堆栈，视图堆栈根据`model.MainViewStackState`的值切换不同的视图。
##### 5.4 客户端管理器视图
客户端管理器视图`ClientManagerView.mxml`的示例代码如下：
```xml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
xmlns:ClientDetailViews="com.af.clientmanager.view.ClientManager.ClientDetailViews.*"
xmlns:ClientProjectsDetailViews="com.af.clientmanage
```
400次
会员资源下载次数
300万+
优质博客文章
1000万+
优质下载资源
1000万+
优质文库回答
0
0
复制全文
相关推荐
最低0.47元/天 解锁专栏
赠100次下载
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
千万级
优质文库回答免费看
立即解锁
专栏目录
最新推荐
【PJSIP高效调试技巧】：用Qt Creator诊断网络电话问题的终极指南
# 摘要
PJSIP 是一个用于网络电话和VoIP的开源库，它提供了一个全面的SIP协议的实现。本文首先介绍了PJSIP与网络电话的基础知识，并阐述了调试前所需的理论准备，包括PJSIP架构、网络电话故障类型及调试环境搭建。随后，文章深入探讨了在Qt Creator中进行PJSIP调试的实践，涵盖日志分析、调试工具使用以及调试技巧和故障排除。此外，
【PyTorch图像识别进阶】：专家级攻略！从零到英雄的全流程
# 摘要
本文系统地介绍了使用PyTorch进行图像识别的核心技术和实践方法。首先，文章从深度学习理论出发，详细解释了神经网络的基本概念、前向传播与反向传播算法以及卷积神经网络（CNN）的原理和应用。随后，通过PyTorch框架的具体操作，展示了如何构建和训练一个基础的CNN模型，并介绍了模型保存、加载、GPU加速等高级技术。文章还结合实际项目案
未知源区域检测与子扩散过程可扩展性研究
### 未知源区域检测与子扩散过程可扩展性研究
#### 1. 未知源区域检测
在未知源区域检测中，有如下关键公式：
\((\Lambda_{\omega}S)(t) = \sum_{m,n = 1}^{\infty} \int_{t}^{b} \int_{0}^{r} \frac{E_{\alpha,\alpha}(\lambda_{mn}(r - t)^{\alpha})}{(r - t)^{1 - \alpha}} \frac{E_{\alpha,\alpha}(\lambda_{mn}(r - \tau)^{\alpha})}{(r - \tau)^{1 - \alpha}} g(\
分布式系统中的共识变体技术解析
### 分布式系统中的共识变体技术解析
在分布式系统里，确保数据的一致性和事务的正确执行是至关重要的。本文将深入探讨非阻塞原子提交（Nonblocking Atomic Commit，NBAC）、组成员管理（Group Membership）以及视图同步通信（View - Synchronous Communication）这几种共识变体技术，详细介绍它们的原理、算法和特性。
#### 1. 非阻塞原子提交（NBAC）
非阻塞原子提交抽象用于可靠地解决事务结果的一致性问题。每个代表数据管理器的进程需要就事务的结果达成一致，结果要么是提交（COMMIT）事务，要么是中止（ABORT）事务。
WPF文档处理及注解功能深度解析
### WPF文档处理及注解功能深度解析
#### 1. 文档加载与保存
在处理文档时，加载和保存是基础操作。加载文档时，若使用如下代码：
```csharp
else
{
documentTextRange.Load(fs, DataFormats.Xaml);
}
```
此代码在文件未找到、无法访问或无法按指定格式加载时会抛出异常，因此需将其包裹在异常处理程序中。无论以何种方式加载文档内容，最终都会转换为`FlowDocument`以便在`RichTextBox`中显示。为研究文档内容，可编写简单例程将`FlowDocument`内容转换为字符串，示例代码如下：
```c
多项式相关定理的推广与算法研究
### 多项式相关定理的推广与算法研究
#### 1. 定理中 $P_j$ 顺序的优化
在相关定理里，$P_j$ 的顺序是任意的。为了使得到的边界最小，需要找出最优顺序。这个最优顺序是按照 $\sum_{i} \mu_i\alpha_{ij}$ 的值对 $P_j$ 进行排序。
设 $s_j = \sum_{i=1}^{m} \mu_i\alpha_{ij} + \sum_{i=1}^{m} (d_i - \mu_i) \left(\frac{k + 1 - j}{2}\right)$ ，定理表明 $\mu f(\xi) \leq \max_j(s_j)$ 。其中，$\sum_{i}(d_i
边缘计算与IBMEdgeApplicationManagerWebUI使用指南
### 边缘计算与 IBM Edge Application Manager Web UI 使用指南
#### 边缘计算概述
在很多情况下，采用混合方法是值得考虑的，即利用多接入边缘计算（MEC）实现网络连接，利用其他边缘节点平台满足其余边缘计算需求。网络边缘是指网络行业中使用的“网络边缘（Network Edge）”这一术语，在其语境下，“边缘”指的是网络本身的一个元素，暗示靠近（或集成于）远端边缘、网络边缘或城域边缘的网络元素。这与我们通常所说的边缘计算概念有所不同，差异较为微妙，主要是将相似概念应用于不同但相关的上下文，即网络本身与通过该网络连接的应用程序。
边缘计算对于 IT 行业
分布式应用消息监控系统详解
### 分布式应用消息监控系统详解
#### 1. 服务器端ASP页面：viewAllMessages.asp
viewAllMessages.asp是服务器端的ASP页面，由客户端的tester.asp页面调用。该页面的主要功能是将消息池的当前状态以XML文档的形式显示出来。其代码如下：
```asp
<?xml version="1.0" ?>
<%
If IsObject(Application("objMonitor")) Then
Response.Write cstr(Application("objMonitor").xmlDoc.xml)
Else
Respo
嵌入式平台架构与安全：物联网时代的探索
# 嵌入式平台架构与安全：物联网时代的探索
## 1. 物联网的魅力与挑战
物联网（IoT）的出现，让我们的生活发生了翻天覆地的变化。借助包含所有物联网数据的云平台，我们在驾车途中就能连接家中的冰箱，随心所欲地查看和设置温度。在这个过程中，嵌入式设备以及它们通过互联网云的连接方式发挥着不同的作用。
### 1.1 物联网架构的基本特征
- **设备的自主功能**：物联网中的设备（事物）具备自主功能，这与我们之前描述的嵌入式系统特性相同。即使不在物联网环境中，这些设备也能正常运行。
- **连接性**：设备在遵循隐私和安全规范的前提下，与同类设备进行通信并共享适当的数据。
- **分析与决策
以客户为导向的离岸团队项目管理与敏捷转型
### 以客户为导向的离岸团队项目管理与敏捷转型
在项目开发过程中，离岸团队与客户团队的有效协作至关重要。从项目启动到进行，再到后期收尾，每个阶段都有其独特的挑战和应对策略。同时，帮助客户团队向敏捷开发转型也是许多项目中的重要任务。
#### 1. 项目启动阶段
在开发的早期阶段，离岸团队应与客户团队密切合作，制定一些指导规则，以促进各方未来的合作。此外，离岸团队还应与客户建立良好的关系，赢得他们的信任。这是一个奠定基础、确定方向和明确责任的过程。
- **确定需求范围**：这是项目启动阶段的首要任务。业务分析师必须与客户的业务人员保持密切沟通。在早期，应分解产品功能，将每个功能点逐层分
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
