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

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 dynamic
functionality in your prototype. Dynamic panels can contain one or more
states. Each state contains a collection of widgets. At any time, one
state can be made visible or the entire dynamic panel can be made
hidden.

动态面板是允许在原型中展现动态功能的部件。动态面板包含一个或多个状态。每个状态都包括一个部件的集合。任何时候，可以设淀显示
一个状态或者隐藏完整的动态面板。

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 Dynamic
Panel State Manager dialog. In this dialog, states can be created,
renamed, reordered, removed, and edited. The first state in the panel
is the default state of the panel.

在线框中双击一个动态面板将打开Dynamic Panel State
Manager"动态面板状态管理器"对话框。 在这个对话框中，可以创建、重命名、排序、删除和编辑状态，面板中的第一个状态是面板的默认状态。

Selecting a panel state in the Dynamic
Panel State Manager
and clicking "Edit State", opens the wireframe for that panel state for
design.

在动态面板状态管理器中选择一个面板状态后单击Edit State“编辑状态”，可以设计面板状态的线框。

Once open, panel states can be designed
like any other
wireframe. A blue dashed outline on the wireframe indicates the
boundaries 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 Panel
Manager. It will be added to the bottom of the right-hand side. The
Dynamic Panel Manager provides tools for managing the dynamic panels on
a page.

单击View（查看）菜单，单击Dynamic Panel Manager（动态面板管理器）菜单项可以显示Dynamic
Panel Manager（动态面板管理器），将被添加在右侧的底部，动态面板管理器提供管理一个页面上的动态面板的工具。


Dynamic panel states can be added, removed, and
opened for editing in the manager. To add or remove states, right-click
on the dynamic panel name or a dynamic panel state and use the context
menu.

动态面板管理器中可以添加、删除和打开编辑动态面板的状态。



In addition, dynamic panels on the page can be hidden from
view in the
wireframe editor for easier access to widgets beneath them. To hide a
dynamic panel, click on the blue square to the right of the dynamic
panel name, or to hide all the panels on a page, right-click on

the
page 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 Dynamic
Panel 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, right
click on the dynamic panel and select Edit Dynamic Panel->Set
Hidden. This will hide the panel contents and change the mask for
dynamic 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. The
Interaction Case Properties dialog contains the following set of
actions 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 and
the states to set the panels to (if needed) can be specified by
clicking the links in the Actions descriptions.

在选择这些动作之一后，可以在Actions
“动作”描述中指定交互的面板，在需要时可以指定面板要设置成的状态。

When
selecting the dynamic panels, the dynamic panels are
identified by the Label of the dynamic panel assigned in the
Annotations & 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 control
with 3 tabs, the tab control is contained in a dynamic panel which has
three states, one for each tab. There is an interaction on each of the
three tab buttons that changes the state of dynamic panel to the state
corresponding 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 or
dynamically show and hide regions based on mouse movements. This can be
accomplished using a combination of the OnMouseEnter event and Actions
to 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 to
initialize a page's interface depending on a variable value. More
information 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


Microsoft
Office
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

Introduction
to 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
Introduction
to 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
Introduction
to 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
AXURE
201: Rich Interactions复杂交互 - Article 2: OnMouseEnter, OnMouseOut, and
Rollover 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
AXURE
202: 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
AXURE
301: Maximizing Reuse of Masters最大化重用主控 - Article 1: Affecting Widgets
in 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 customized
javascript 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动态面板部件在默认状态下的页面截图