Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 201 Article 1: Rich Interactions复杂交互 - Dynamic Panels动态面板

Overview

概述

    1. Dynamic Panels Demo
    1. 动态面板演示
    2. Dynamic Panel Widget
    2. 动态面板部件
    3. Editing Dynamic Panel States
    3. 编辑动态面板状态

    4. Dynamic Panel Manager

    4. 动态面板管理器

    5. Hiding Dynamic Panels
    5. 隐藏动态面板
    6. Interactions and Dynamic Panels
    6. 交互和动态面板
    7. Sample Usage

    7. 使用示例

1. Dynamic Panels Demo

1. 动态面板演示

Note: This video was created using version 5.0. Axure RP Pro 5.5 now includes the Dynamic Panel Manager (see section 4 below).
注意：该视频使用版本5.0创建，Axure RP Pro 5.5现在已包含Dynamic Panel Manager动态面板管理器（参见下面的第4部分）

 

Please turn on speakers for audio
请打开扬声器听声音

To view on Vimeo, please click here.
在Vimeo上观看高清视频，请单击 这里.

2. Dynamic Panel Widget

2. 动态面板部件

Dynamic Panels are widgets that allow you to demonstrate dynamicfunctionality in your prototype. Dynamic panels can contain one or morestates. Each state contains a collection of widgets. At any time, onestate can be made visible or the entire dynamic panel can be madehidden.
动态面板是允许在原型中展现动态功能的部件。动态面板包含一个或多个状态。每个状态都包括一个部件的集合。任何时候，可以设淀显示一个状态或者隐藏完整的动态面板。

Interaction Actions are available to hide, show, and change the state of dynamic panels.
动态面板的交互动作包括隐藏，显示和改变动态面板的状态。

Like other widgets, dynamic panels can be added to the wireframe by dragging and dropping from the Widgets pane.
像其他部件一样，动态面板可以从Widgets"部件"面板拖放到线框中。

3. Editing Dynamic Panel States

3. 编辑动态面板状态

Double-clicking a dynamic panel in a wireframe will open the DynamicPanel State Manager dialog. In this dialog, states can be created,renamed, reordered, removed, and edited. The first state in the panelis the default state of the panel.
在线框中双击一个动态面板将打开Dynamic Panel State Manager"动态面板状态管理器"对话框。 在这个对话框中，可以创建、重命名、排序、删除和编辑状态，面板中的第一个状态是面板的默认状态。

Selecting a panel state in the Dynamic Panel State Managerand clicking "Edit State", opens the wireframe for that panel state fordesign.
在动态面板状态管理器中选择一个面板状态后单击Edit State“编辑状态”，可以设计面板状态的线框。

Once open, panel states can be designed like any otherwireframe. A blue dashed outline on the wireframe indicates theboundaries of the dynamic panel.
打开后，面板状态可以像任何线框一样进行设计。 线框上的蓝色虚线轮廓表示动态面板的边界。

4. Dynamic Panel Manager

4. 动态面板管理器

Note: This feature is new in Axure RP Pro 5.5.
注意： 该特性是Axure RP Pro 5.5中的新特性。

The Dynamic Panel Manager can be shown using View->Dynamic PanelManager. It will be added to the bottom of the right-hand side. TheDynamic Panel Manager provides tools for managing the dynamic panels ona page.
单击View（查看）菜单，单击Dynamic Panel Manager（动态面板管理器）菜单项可以显示Dynamic Panel Manager（动态面板管理器），将被添加在右侧的底部，动态面板管理器提供管理一个页面上的动态面板的工具。

Dynamic panel states can be added, removed, andopened for editing in the manager. To add or remove states, right-clickon the dynamic panel name or a dynamic panel state and use the contextmenu.
动态面板管理器中可以添加、删除和打开编辑动态面板的状态。

In addition, dynamic panels on the page can be hidden from view in thewireframe editor for easier access to widgets beneath them. To hide adynamic panel, click on the blue square to the right of the dynamicpanel name, or to hide all the panels on a page, right-click on
thepage name and select Hide All.
进一步，为更方便的访问动态面板下侧的部件，在线框编辑器的视图中可以隐藏页面上的动态面板，要隐藏一个动态面板，可以单击动态面板名称右侧的蓝色方框，如果要隐藏页面上的所有动态面板，可以右击页面名称后选择Hide All（全部隐藏）菜单项。

To open a state for editing, double-click the state.To open all the states of a dynamic panel, right click on the DynamicPanel name and select "Edit All States".
双击状态可以编辑一个状态，右击动态面板名称后选择“Edit All States（编辑全部状态）”菜单项可以打开一个动态面板的所有状态。

5. Hiding Dynamic Panels

5. 隐藏动态面板

Dynamic panels can be set to be hidden by default. This is different than hiding the dynamic panel from view in the editor using the dynamic panel manager. To do this, rightclick on the dynamic panel and select Edit Dynamic Panel->SetHidden. This will hide the panel contents and change the mask fordynamic panels from blue to yellow.
动态面板可以设置为默认隐藏，这和使用动态面板编辑器在编辑视图中隐藏动态面板不同。右击动态面板后选择Edit Dynamic Panel"编辑动态面板"子菜单后选择Set Hidden"设置隐藏"菜单项即可实现。这将隐藏面板内容并把动态面板的遮罩颜色从蓝色改为黄色。

The dynamic panels can be dynamically shown in the prototype using interactions as discussed below.
动态面板可以按下面的讨论在原型中通过交互动态显示。

6. Interactions and Dynamic Panels

6. 交互和动态面板

Interactions can be designed to interact with dynamic panels. TheInteraction Case Properties dialog contains the following set ofactions that affect dynamic panels:
可以设计与动态面板互操作的交互。Interaction Case"交互用例"对话框包含下列影响动态面板的操作集：

• Set Panel state(s) to State(s)
• 设置面板的状态为State(s)
• Show Panel(s)
• 显示面板
• Hide Panel(s)
• 隐藏面板
• Toggle Visibility for Panel(s)
• 切换面板的可见性
• Move Panel(s)
• 移动面板
• Bring Panel(s) to Front
• 将面板移到最前

After selecting one of these actions, the panels to interact with andthe states to set the panels to (if needed) can be specified byclicking the links in the Actions descriptions.
在选择这些动作之一后，可以在Actions“动作”描述中指定交互的面板，在需要时可以指定面板要设置成的状态。

When selecting the dynamic panels, the dynamic panels areidentified by the Label of the dynamic panel assigned in theAnnotations & Interactions Pane. If no label has been specified,dynamic panels will be identified as "Unlabeled".
在选择动态面板时，通过Annotations & Interactions"标注和交互"面板中设定的动态面板的Label"标签"来识别动态面板。没有指定标签时，动态面板将标识为“Unlabeled”。

Beginning with version 5.5, conditions can be created to evaluate the current dynamic panel state in the Condition Builder.
从版本5.5开始，在条件编辑器中可以创建判断当前动态面板状态的条件

6. Sample Usage

6.使用示例

Tab Control:
标签控件：

A dynamic panel can be used to create a tab control. For a tab controlwith 3 tabs, the tab control is contained in a dynamic panel which hasthree states, one for each tab. There is an interaction on each of thethree tab buttons that changes the state of dynamic panel to the statecorresponding to the clicked tab.
动态面板可用于创建标签控件，对于包括三个标签的标签控件，标签控件包含在一个有三个状态的动态面板中，每个状态对应一个标签。三个标签按钮的每一个都有一个交互用于改变动态面板的状态到与单击的标签对应的状态上。

To see a sample containing a tab control created using a dynamic panel, visit this blog entry.
访问博客可以看到一个通过动态面板创建的包含标签控件的示例。

Flyout Menu:
弹出菜单：

Dynamic panels can be used to prototype custom flyout menus ordynamically show and hide regions based on mouse movements. This can beaccomplished using a combination of the OnMouseEnter event and Actionsto show and hide dynamic panels.
动态面板可以用定制弹出菜单原型或者按鼠标的移动动态显示或隐藏区域。这可以通过OnMouseEnter事件和显示或隐藏动态面板的动作协作实现。

To see a sample containing a flyout menu created using a dynamic panel, visit this blog entry.
 访问博客可以看到一个通过动态面板创建的包含弹出菜单的示例。

Basic flyout menus can be created using the Menu widgets as discussed in AXURE 201 Lecture 3: Menus
基本的弹出菜单也可以使用AXURE 201: Rich Interactions复杂交互 - Article 3: Menus菜单中讨论的Menu"菜单"部件来创建。

Page Initialization:
页面初始化：

Dynamic panels can be used in combination with the OnPageLoad event toinitialize a page's interface depending on a variable value. Moreinformation on this usage is available in AXURE 202 Lecture 5: OnPageLoad Event.
动态面板与动态面板相结合可以依据变量值初始化一个页面的界面。关于这种用法更多的信息参见AXURE 202: Rich Functionality复杂功能 - Article 6: OnPageLoad Event.

[Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 201: Rich Interactions复杂交互 - Article 1: Dynamic Panels动态面板 - 文档]

http://www.axure.com/p201_1.aspx

[Axure RP Pro - 官方网站]

http://www.axure.com/

[Axure RP Pro - 关键词]

axure

[Axure RP Pro - 相关论坛]

http://axure.com/cs/forums/

[Axure RP Pro - Download下载]

当前版本AXure RP Pro 5.5.0.1939, http://axure.cachefly.net/AxureRP-Pro-Setup.exe

 

当前版本AXure RP Pro 5.5.0.1939, http://www.axure.com/files/AxureRP-Pro-Setup.exe

Microsoft .Net Framework 2.0, http://www.microsoft.com/downloads/details.aspx?FamilyID=0856EACB-4362-4B0D-8EDD-AAB15C5E04F5

翻译, Manual Installation手工安装包, http://www.axure.com/Files/AxureRPFiles.zip

 

MicrosoftOffice Compatibility Pack兼容包 Service Pack 1 (SP1),http://www.microsoft.com/downloads/details.aspx?FamilyID=9a1822c5-49c6-47bd-8bec-0d68693ca564

Axure RP Pro 5.1.0.1699, http://www.axure.com/files/5-1-0-1699/AxureRP-Pro-Setup.exe

 

Axure RP Pro 5.0.0.1515, http://www.axure.com/files/5-0-0-1515/AxureRP-Pro-Setup.exe

 

[Axure RP Pro - Beta测试版]

下载Axure RP Pro 5.5 Beta, http://www.axure.com/downloadbeta.aspx

Introductionto Version 5.5 Features: Part 1,http://axure.com/cs/blogs/axure/archive/2008/11/19/Introduction-to-Version-5.5-Features_3A00_-Part-1.aspx

Introductionto Version 5.5 Features: Part 2,http://axure.com/cs/blogs/axure/archive/2008/11/13/Introduction-to-Version-5.5-Features_3A00_-Part-2.aspx

Introductionto Version 5.5 Features: Part 3,http://axure.com/cs/blogs/axure/archive/2008/11/13/Introduction-to-Version-5.5-Features_3A00_-Part-3.aspx

 

[Axure RP Pro - Tutorial教程 - 翻译]

AXURE 101: Introduction介绍 - Article 1: Introduction to Axure RP - Axure RP介绍, http://www.axure.com/p101_1.aspx

AXURE 101: Introduction介绍 - Article 2: Annotated Wireframes, http://www.axure.com/p101_2.aspx

AXURE 101: Introduction介绍 - Article 3: Basic Interactions基本交互, http://www.axure.com/p101_3.aspx

AXURE 101: Introduction介绍 - Article 4: Masters主控文档, http://www.axure.com/p101_4.aspx

AXURE 101: Introduction介绍 - Article 5: HTML Prototypes - HTML原型, http://www.axure.com/p101_5.aspx

AXURE 101: Introduction介绍 - Article 6: Functional mq s功能规格, http://www.axure.com/p101_6.aspx 

AXURE 102: Flow Diagrams流程图 - Article 1: Flow Shapes & Connectors流程图形和连接符号, http://www.axure.com/p102_1.aspx 

AXURE 102: Flow Diagrams流程图 - Article 2: Generating Flow Diagrams生成流程图, http://www.axure.com/p102_2.aspx

 

AXURE 201: Rich Interactions复杂交互 - Article 1: Dynamic Panels动态面板, http://www.axure.com/p201_1.aspx

AXURE201: Rich Interactions复杂交互 - Article 2: OnMouseEnter, OnMouseOut, andRollover Effects - OnMouseEnter, OnMouseOut和翻转效果,http://www.axure.com/p201_2.aspx

 

AXURE 201: Rich Interactions复杂交互 - Article 3: Menus菜单, http://www.axure.com/p201_3.aspx

5.5 AXURE 202: Rich Functionality复杂功能 - Article 1: Conditional Logic条件逻辑, http://www.axure.com/p202_1.aspx

AXURE 202: Rich Functionality复杂功能 - Article 2: OnChange Event - OnChange事件, http://www.axure.com/p202_2.aspx

 

 

AXURE 202: Rich Functionality复杂功能 - Article 3: OnKeyUp Event - OnKeyUp事件, http://www.axure.com/p202_3.aspx

AXURE202: Rich Functionality复杂功能 - Article 4: OnFocus and OnLostFocus Events- OnFocus和OnLostFocus事件, http://www.axure.com/p202_4.aspx

AXURE 202: Rich Functionality复杂功能 - Article 5: Variables - 变量, http://www.axure.com/p202_5.aspx

AXURE 202: Rich Functionality复杂功能 - Article 6: OnPageLoad Event - OnPageLoad事件, http://www.axure.com/p202_6.aspx

AXURE301: Maximizing Reuse of Masters最大化重用主控 - Article 1: Affecting Widgetsin Masters在主控中影响部件, http://www.axure.com/p301_1.aspx

AXURE 301: Maximizing Reuse of Masters最大化重用主控 - Article 2: Raised Events发起事件, http://www.axure.com/p301_2.aspx

AXURE 401: Collaboration协作 - Article 1: Shared Projects共享工程, http://www.axure.com/p401_1.aspx

[Axure RP Pro - Introduction介绍]

RP的含义

面板的组织方式

[Axure RP Pro - Action动作]

Parent Window父窗口

[Axure RP Pro - Event事件]

窗口间互操作

[Axure RP Pro - Master主控文档]

拖放控件
Expand.Collapse伸缩控件

将主控文档添加到多个页面

[Axure RP Pro - Prototype原型]

关闭Internet Explorer打开原型时出现的安全警告

[Axure RP Pro - Specification规格文档]

规格文档中显示部件的属性

规格文档中屏幕截图的脚标

[Axure RP Pro - Wireframe线框]

选择后面的部件

rollover style翻转样式的常见误解

[Axure RP Pro - Widget部件]

水平线不能调整高度，垂直线不能调整宽度

如何实现页内多个锚的效果

菜单部件不支持选中样式

[Axure RP Pro - jQuery]

如何在Axure RP Pro生成的HTML原型文档中集成jQuery, How to integrate jQuery into HTML prototype document generated by Axure RP Pro

如何获取IFrame的URL，How to retrieve the URL of IFrame widget

如何在Axure RP Pro生成的HTML原型文档中使用自定义脚本, How to integrate customizedjavascript into HTML prototype document generated by Axure RP Pro

“移到最前”效果，"Bring to Front" Interaction

如何实现淡入淡出效果，How to implement fade in and fade out effects

如何设置焦点，How to implement the "set focus" action

[Axure RP Pro - 相关问题]

Manual Installation

原型中切换页面时会闪一下

让规格文档中的页面图片和标题保持在同一页，fit section header and page image on one page

跨原型链接页面

显示视频

OnMouseOver事件和Rollover翻转效果浏览器不兼容

导入时保持变量有效

变量值与部件内容并不都能相互传递

导出在PDF

显示Google地图

在规格文档中描述Inline Frame部件的Default Target规格

渐变填充

使用正则表达式的较验函数在Firefox下出错

Style Editor样式编辑器以及已知的一些缺陷

Text Panel部件在设计时的效果与原型不一致

在不同工程之间使用masters主控文档

判断动态面板的状态

原型中Droplist“下拉列表”部件在IE6中总显示在最前面

设置首页面

自定义样式不能应用于翻转样式

线框中的字号与原型中的字号的关系

修改自定义样式对已应用该样式部件的逻辑

与IFrame部件中的页面互操作

在OnPageLoad事件中使用多个case用例

Open Link in Current Window，Close Current Window，Open Link in Parent Frame将忽略其余动作

使用Google Code服务分享工程的限制及原因

Button按钮部件不支持设置文字以及解决方法

修改生成的prototype原型的css样式表

在文本框中显示提示信息

OnPageLoad事件中的动作不会触发部件的事件

Droplist下拉列表框部件在规格文档中不包括默认值

dynamic panel动态面板上的image图片部件设置了rollover翻转图片后在OnClick事件中不能正确隐藏所在面板

文本不支持Rollover翻转效果以及迂回解决办法

设定多套初始化变量

表格的单元格不能使用动作设置文字

Text Panel文本部件不支持超链接及迂回处理办法

设置页面尺寸

在规格文档中显示部件工具提示

master主控文档的behavior行为是custom widget自定义部件时丢失raised event可触发事件

模拟加法运算

设置打开原型的默认浏览器

Listbox列表框部件不支持修改选项

数字键盘

checkbox复选框部件的OnClick事件中复选框的状态已发生了改变

监视变量

限制输入数字

Wireframe线框绘制尺寸的范围及处理方案

不支持最大化显示Popup窗口

使用masters组件监视变量

在规格文档中动态面板中的droplist下拉列表框部件会重复输出选项列表

一些字符无法直接进入编辑部件文字状态

Hyperlink超链接部件不使用浏览器的超链接效果

Specification规格文档中仅包含Dynamic Panel动态面板部件在默认状态下的页面截图