Axure新手技能训练手册

Axure新手技能Axure布局1、MainMenu&Toolbar:主菜单和工具栏区2、WireframePane:线框面板，页面设计区域。3、SitemapPane：地图面板，用于显示页面的隶属关系。4、WidgetsPane：控件面板，用于可用的控件资源。5、MastersPane:公用模块管理器。6、PagesPropertiesPane：页面属性面板，管理页面属性的各类参数。7、WidgetPropertiesPane：控件属性面板，管理控件的各类属性参数。三类：（1）Annotations:注释。（2）Interactions:交互；（3）Formatting：格式化。8、DynamicPanelManagerPane:动态面板控制面板。隐藏和显示动态面板，以及增加、删除、及管理动态面板状态。线框的注释网站地图：SitemapSitemap用于增加、删除和组织你所设计的页面。页面数量是没有极限的。可通过鼠标功能来增加、删除、组织页面，也可以通过鼠标拖拽方式来组织页面级次。双击Sitemap中的页面，可进入线框设计界面。控件：Widgets控件是设计线框的交互对象。控件面板中包括了丰富的控件可供使用。1、从Widgets控件库中选择和搜索合适的控件。2、增加、移去和改变控件的尺寸。3、编辑控件的风格和属性。4、多控件的分组和解除分组。Group。5、控件风格编辑器（WidgetStyleEditor）：允许你编辑缺省的控件格式及创建定制的控件风格。如果编辑了控件的缺省格式，则可能影响到全部该控件。6、格式画笔（FormatPainter）：FormatPainter允许你拷贝一个控件的格式属性到其他多个控件。类似于格式属性的剪切板一样。7、改变选择模式。有两个选择模式，分别为"SelectIntersectedMode"和"SelectContainedMode".大致叫做：分割模式和容器模式。缺省为分割模式。分割模式意味着只要鼠标框定的范围所碰到的控件都会包括在所选范围内。而容器模式一定要将控件完全用鼠标完全框定后才能处于选定状态。注释Annotations注释用于对控件增加说明文字。增加注释后，控件会在右下角显示一个黄色的数字脚注。如果想隐藏这个脚注，可以在主菜单的线框区域中点击反选“ShowFootnotes”。这是全局设置项。允许用户自定义注释项。也允许用户自主修改注释项的脚注。页面属性：PagePropertiesPageNote:页面备注页面备注允许你收集你所设计的页面级次信息。你可以组织页面备注到独立域。如果你需要将备注分别向不同的角色，如客户、开发者、测试人员进行展示时，这个功能就很有用。你可以添加备注的独立域，如下图：最终所显示的独立域的备注样式为：也可以通过EditorToolbarorthestandardtextformattingshortcuts(i.e.,Ctrl/Cmd+B,Ctrl/Cmd+I,Ctrl/Cmd+U,etc.)，来对页面备注进行格式化。PageFormatting:页面格式化页面格式化的范围包括如下：1、PageStyle:页面风格。定义页面风格，编辑页面的缺省风格或定义一个定制的页面风格。2、PageAlign：页面的排列方式。3、BackColor:页面的背景颜色。4、BackImage：页面的背景图。5、HorizAlignandVertAlign：水平对齐和垂直对齐模式设置。6、Repeat：重复背景图的水平、垂直和两者。SketchEffects:草图效果使当前的页面获得手绘风格的草图效果。Sketchiness参数的值越大，空间的手绘草图风格就越明显。LineWidth用于指定控件的边框宽度在手绘时的效果。通常设置为+1.GlobalandPageGuides:全局和页面向导通过鼠标拖拽标尺获得，尚未明白确切作用。基础交互：BasicInteractions交互概述Axure中的交互包括三个主要部分：事件（events）、案例（case）和动作（action）。事件Event事件是交互的触发器。控件的事件包括如下：OnClick:当一个控件被鼠标点击时触发；OnMouseEnter:当鼠标光标移入一个控件上时触发。OnMouseOut:当鼠标光标从一个空间上移出时触发。OnKeyUp:当在一个控件内部按键释放时触发。如文本框的录入字段或者文字区的录入字段发生。OnFocus:当一个控件通过鼠标点击或Tab切换获得焦点时触发。OnLostFocus:当一个控件失去焦点时触发。OnChange:当一个下拉式列表框或列表框选项发生改变时触发。案例CaseCase是响应事件发生时的可能路径。如按下登录按钮时，可能因为输入错误的用户名或密码导致登录失败，也可能登录成功，这是两个不同的路径。你也可以通过变量控制条件的自动转向。动作ActionAction是一个事件被出发后根据case的路径所得到的响应。如下是Action的列表：1、Linkactions:链接动作OpenLinkinCurrentWindow:在当前窗口打开一个外部链接。OpenLinkinNewWindow/Tab:在新窗口或Tab打开一个外部链接。OpenLinkinPopupWindow:在一个弹出式窗口中打开一个页面或者外部URL.你可以指定这个窗口的尺寸和属性。OpenLinkinParentWindow:用以从一个弹出式窗口，改变父窗口中的页面装载并打开它。CloseCurrentWindow:关闭当前窗口。OpenLink(s)inFrame(s):在inlineFrame中用以打开inlineframe控件以改变页面装载。OpenLinkinParentFrame:在父frame中打开一个页面。DynamicPanel的关联动作。Usedfromapageloadedinaninlineframe.DynamicPanelrelatedactions:2、Dynamicpanel的动作:SetPanelstate(s)toState(s):设置当前的一个或者多个动态面板的可视状态ShowPanel(s):使一个或者多个的动态面变为可视状态。HidePanel(s):隐藏一个或者多个动态面板的内容。ToggleVisibility:Showsorhidesdynamicpanelsbasedontheircurrentvisibility.MovePanel(s):Movesadynamicpaneltoaspecificlocationorbyaspecifieddistance.BringPanel(s)toFront:Bringsadynamicpaneltothetoplayerofthepage.3、WidgetsandVariablesactions:SetVariable/Widgetvalue(s):Setsthevalueofoneormorevariablesand/orwidgetvalues(i.e.,thetextvalueonawidget).ScrolltoImageMapRegion:Scrollsapagetothelocationofanimagemapregionwidget.Similartoananchororjumplink.EnableWidget(s):Enablesformwidgetslikeadroplistortextfield.DisableWidget(s):Disablesformwidgets.SetWidget(s)toSelectedState:Setsthestyleofawidgettoitsselectedstyleorbacktoitsdefaultstyle.SetFocusonWidget:Setsthefocusofthecursoronaformwidget(i.e.,atextfield).ExpandTreeNode(s):展开Expandsthenodesofatreewidget.CollapseTreeNode(s):折叠Collapsesthenodesofatreewidget.Miscellaneousactions:WaitTime(ms):Delaysactionsbyaspecifiedtime.Other:Showsaspecifiedtextdescriptionofanactionsuchas“Sendemailtouser”.交互案例编辑器：InteractionsCaseEditor增加交互选择一个控件可以显示其可用的事件。1、要增加一个Case，选择一个事件并点击“AddCase”，或者双击这个事件并打开Case编辑对话框。可以编辑该Case的描述，2、添加动作，Action，可以选择不同的Action。3、组织这些动作。多case的情况下。4、对Action动作的详细配置，比如具体要打开哪个窗口。二、定义多案例MultipleCases动态面板基础：DynamicPanels(Basic)动态面板是一个容纳了不同控件的多层状况或图表的容器。这个面板可以被隐藏、显示、移动。而且当前的可视图表可以被动态设置。允许你在原型系统中展示诸如customtooltips,lightboxes,tabcontrols,anddraganddrop。因此当你需要在原型中显示、隐藏、改变或移动对象时，可使用动态面板控件。你会发现这是在你原型工具箱中最常使用的工具。动态面板状态动态面板包括多个状态，而且每个状态是一个能够容纳其他控件的图表。动态面板的在一个时刻只能有一个状态是可视的。可以将现有的控件集合转化为动态面板。增加和设计动态面板状态缺省情况下，动态面板是空的，所以需要你去在其状态上添加控件。双击动态面板打开动态面板状态管理对话框。在这个对话框中，你可以增加、移除、排序及打开状态进行编辑。动态面板的第一个状态是面板的缺省状态。你可以在动态面板的状态看到轮廓蓝线，这是动态面板的尺寸，和你所能看到面板状态内的分界线。你可以将所需的控件拖拽到动态面板中进行设计。动态面板的滚动条：EditDynamicPanel->ShowScrollbarsasNeeded。缺省情况下隐藏内容的设置：动态面板在缺省情况下可以设定隐藏。right-clickonthepanelinthewireframeandchooseEditDynamicPanel->SetHiddenfromthecontextmenu.。设置隐藏后该动态面板将显示为黄色。动态面板管理器：DynamicPanelManager动态面板管理器用于管理页面上的多个动态面版。动态面板的隐藏功能。动态面板的交互：InteractingwithDynamicPanels动态面板的Action包括如下：SetPanelstate(s)toState(s)：将面板的状态更改为另一个状态；ToggleVisibilityforPanel(s)：ShowPanel(s)：显示动态面板MovePanel(s),：移动动态面板到坐标（XY）,相对坐标By，绝对坐标To。HidePanel(s)：隐藏动态面板BringPanel(s)toFront：将动态面板前置；SendPanel(s)toBack：将动态面板后置。你可以在一个动作内控制多个面板的状态。这点功能非常强大。Usethe“ToggleVisibilityforPanel(s)”actiontotogglebetweenshowingandhidingapanel.动画和转场效果在动态面板的移动过程中，可提供动画效果而非乏味的效果。但这个动画效果在原型系统中易于实现而在代码开发时很难实现。这个问题一定要注意。动态面板的几个最重要的应用：1、弹出错误信息。2、Tab标签3、定制的Tip显示4、弹出式菜单。母版：MastersMaster是文件中可重用的控件集合。Master可以在多个页面重用，并可达到一次设计，多次重用；一次修改，全体更新的作用。组织和设计MasterMasterPane，让你在文件中增加和组织所有的Master。AddMaster用于创建一个Master。慢速双击一个Master可以修改Master的名称。可以通过鼠标拖拽来改变Master的排列和组织顺序。双击一个Master用于打开框架设计页面，并对Master进行编辑。通过鼠标拖拽将控件拖拽至Master，支持Master的嵌套，意即在Master之上形成新的Master。可以通过eConvert->ConverttoMaster功能将控件集转化为Master。MasterBehaviorsMaster可以被设置为3个不同的行为：1、正常2、放置在背景3、定制在某一个控件的下面。为了改变Master的行为，右键点击Master控件并在弹出式菜单中选择Behavior子菜单。通过鼠标拖拽可以很方便的将Master放入原型页面中。流程图：FlowDiagrames人们通常使用这个功能在最高视野观察页面的业务流向。创建一个FlowDiagrame在线框图的类型中，将WireFrame改为Flow即能使其转成流程图。线框图转化为流程图后其图标会改变。通过连线将Flow控件连接起来，缺省情况下，连接会自动避开其他控件，如果要改变这个状态，通过EditorConnector->DoNotAutoReflow功能来手工连线。增加参考页面ReferencePages参考页面是流程图中形状（控件）的页面影射，即该控件对应于原型系统中的哪个页面。如果该页面在线框图中被修改了名称，那么这个修改过程会被自动同步。通过EditFlowShape->EditReferencePage功能，为流程图中的控件关联参考页面。生成流程图略。原型交互：InteractivePrototypes概述原型交互的过程有助于简化文档，获得客户的反馈、得到确认及阐述我们的需求。在原型系统完成设计、注释和交互制作后，可以生成基于浏览器的Web系统，这个系统没有任何代码开发工作。Axure的原型系统，基于HTML、js、和CSS，你可以在主流的Web浏览器如火狐、IE、Safari和Chrome中查看。无需安装Axure的阅读器，因此更便于多方分享。如果需要对原型系统进行编辑的话，仅需要安装RP的客户端就可以了。配置和生成原型按F5或者在主菜单中选择Generate->Prototype以生成原型系统。在生成原型系统的选项中：1、General:选择生成原型系统的目标文件夹位置，以及要打开原型系统的浏览器。可以选择其他存储原型系统的位置，或使用UseDefault功能重置原始缺省位置。2、Pages:选择生成原型系统要包括的页面。缺省情况下包括全部页面。3、Notes:选择是否要在原型系统中生成页面备注。4、Annotations:注释域是否在原型系统中生成。5、Interactions:常用来在多case中显示选择case的注释或仅显示case的注释。6、Logo:设置原型系统的Logo。7、Mobile/Device:选择是否插入一个移动设备的视觉标签。这个标签会告知原型系统在设备上浏览原型系统的尺寸、缩放等选项。8、Distribution(forPConly):生成一个CHM的单文件原型系统发布版本。9、Advanced:3个高级选项。完成选项配置后，即可生成原型系统。使用原型原型系统有两个部分：1、Sitemap,PageNotes,andDiscuss(Left)，即左侧的地图、页面备注和讨论。这个面板中有3个Tabs。Sitemap允许你在页面框架中打开一个具体页面。PageNote标签中查看页面的备注，而使用Discuss标签来添加标题备注。2、MainFrame(Right):右侧的主框架。基于线框图和流程图进行交互。共享和分发原型有如下几个方法分享和分发原型：1、以Zip文件包形式发送。2、发行到一个分享服务或Web服务器。3、出版到AxShare。4、生成一个CHM文件（仅PC）。功能规格：FunctionalSpecifications概述规格是对设计的有效的文档化、通信和达成一致。AxureRP生成的规格文件为MSOffice格式，生成时不要求安装Word，但是在阅览和修改时要求客户端安装Word。配置和生成规格有一系列的方法使你能够定制包括选择那些页面、采用导入模板、以及定制的页头和页脚的规格。通过生成规格的对话框定制参数，然后点击Generate按钮生成Word文档。GenerateSpecificationdialog中包括如下选项：1、General:输入目标文件的存储位置。2、Pages:选择要生成规格文档的页面。3、Masters:选择规格文档中所包括的Master。4、PageProperties:选择和排序页面的备注。5、Screenshots:显示或不显示对线框图进行截屏的选项。6、WidgetProperties:控件属性。选择和排序注释，你可以将注释分解到多个表中。7、Layout:选择排列和排序内容的是单列或双列布局。8、WordTemplate：选择和编辑文档模板。中级技能WidgetStyles:控件风格概述作为缺省风格的追加，你可以在图片、按钮、矩形、菜单等控件上编辑附加的风格，如rollover（翻滚）、选定。在原型系统中，rollover风格应用于自动、而选定则用于菜单或者导航的高亮交互。应用控件风格为了增加和编辑控件风格，在控件中右键并选择“Edit[widgettype]”子菜单，这个可用的风格包括：Rollover:当光标移动过这个控件时。MouseDown:当在这个控件上鼠标点击时。Selected:当控件被设置为它的选中状态时。Disabled:当控件被设置为禁用状态时。上述功能并非对所有控件有效。可以通过Preview功能来校验控件的风格效果。交互及控件风格控件风格可以和交互事件结合起来使用。当你的鼠标经过或在控件上点击时，rollover和MouseDown事件会被自动应用，你需要使用“SetWidget(s)toSelectedState”Action用于应用控件的这个状态。这个功能非常棒。SelectionGroups:Menu&TreeWidgets使用Menu控件Meun控件便于你容易的创建Web和桌面应用的导航菜单。在线框的控件库中，分别有垂直和水平的菜单控件可供使用。编辑菜单控件缺省情况下，每个菜单附带有3个菜单项，可以按需进行编辑，扩展或删减菜单项。通过pading选项改变菜单外围的宽度。二、添加和删除菜单项很简单，略。三、编辑附加的风格。设置菜单控件的鼠标rollover和MouseDown风格的详细参数。使用Tree控件Tree控件用于构造一个可以伸缩/展开的基于浏览器的Web导航。如果你的设计需要一个定制的树控件，你可以使用动态面板和MovePanelAction进行控制。一、编辑树控件很简单，略。二、增减和删除树节点很简单，略。三、树控件和交互你可以使用“ExpandTreeNode(s”and“CollapseTreeNode(s)’动作来动态展开或收缩一个树节点。如果你需要的话，你可以通过点击一个按钮展开或收缩一个树节点。条件逻辑：ConditionalLogic概述比如说，我们希望从一个下拉式列表中选择一个水果，并将其图片显示出来。你会创建一个动态面板，其状态包括了这个水果的图片。当下拉列表的值发生变化（OnChange），你则可以定义事件的条件逻辑，去评估这个下拉列表中的值（如果这个水果下列列表的值为“苹果”）并设置这个动态面板的状态发生相应的变化。交互和条件逻辑一、条件创建对话框：TheConditionBuilderDialog为了向Case中创建条件，首先需要在控件属性的交互Tab为一个事件创建Case。在步骤1的CaseEditordialog中，有一个选项是“AddCondition”。打开这个选项，可看到ConditionBuilderDialog。ConditionBuilder让你建立条件表达式，如“IfselectedoptionofFruitDroplistequals‘apple’”.使用下拉菜单和输入域，你可以创建你所需要求值的条件。一个简单的方法是，将这个表达式拆分为三个部分:你所要比较的两个子项，和它们比较的类型。即：[Onevalue]+[Howitcompares]+[Toanothervalue]你可以基于如下的值类型创建条件：1、Ischeckedof:thecheckstateofacheckboxorradiobutton/一个Checkbox和Radio的check状态。2、Selectedoptionof:theselectedoptionofadroplistorlistbox/一个下拉列表和列表框中被选择项。3、Valueofvariable:thecurrentvaluestoredinavariable：变量当前所存储的值4、Lengthofvariablevalue:thenumberofcharactersinavariablevalue：变量值的字符数。5、Textonwidget:thetextenteredinaformfield：一个Form域的输入文字。6、Lengthofwidgetvalue:thenumberofcharactersinthetextonaformfield：一个Form域输入的文字的字符长度。7、Stateofpanel:thecurrentstateofadynamicpanel一个动态面板的当前状态8、Visibilityofpanel:whetheradynamicpaneliscurrentlyvisibleorhidden一个动态面板当前是可见或隐藏。9、Textonfocusedwidget:thetextinthewidgetthatisfocused控件上获得焦点的文本。10、Dragcursor:thelocationofthecursorduringadrag在拖拽过程中的光标位置。11、Areaofwidget:therectangularareathatawidgetoccupies(usedfordraganddrop)，在使用拖拽时，一个控件占用的矩形区域。你可以通过+号键，添加一个新的条件。或者使用-号键，删除一个条件。条件之间可以通过全部满足或任意一个满足进行控制。条件的多Case一个事件可以具有多个条件case。例如，你有一个不同选项的下拉式列表框，你可以增加多个多个OnchangeCase的条件，来控制选择每一个不同选项时可能发生的情况。缺省情况下，每个增加的条件都将是一个elseif语句。如果你增加的一个case没有条件，那么它将是一个“ElseIfTrue”语句。典型应用如下图所示：上述为if…elseif…elseif..的判断路径走向。下图是另一种路径走向，注意体会：通过右键中的乒乓开关来控制。动态面板（高级）：DynamicPanels动态面板的事件概述动态面板有7个事件，OnMove,OnShow,OnHide,OnPanelStateChange,OnDragStart,OnDrag,andOnDragDrop。OnMove事件OnMove事件在驱动一个动态面板“Movepanel”Action时触发。Onshow和OnHide事件略。OnPaneStateChange事件TheOnPanelStateChangeeventistriggeredwhenadynamicpanelstateissetusingthe“SetPanelStatetoState”action.DragandDrop事件OnDragStart,OnDrag,andOnDragDrop三个事件让你增加了对动态面板在鼠标拖拽过程的交互控制。如果你希望一组控件具有可拖拽性，请将其集中放置在一个动态面板上。OnDragStart:Occurswhenthedragbegins.发生在拖拽开始时。OnDrag:Occursasthepanelisdragged.发生在拖拽过程中。OnDragDrop:Occurswhenthepanelisdropped.发生在鼠标松开完成拖拽时。"withdrag":Movesthepanelwiththecursor.Thisisthemostcommonlyused.允许动态面板可随鼠标拖拽，这是最常见的使用方式。"withdragx":Movesthepanelwiththecursorinonlythehorizontaldirection.只允许动态面板在水平方向上的拖拽。"withdragy":Movesthepanelwiththecursorinonlytheverticaldirection.只允许动态面板在垂直方向上的拖拽。"tox,ybeforedrag":Movesthepanelbacktothepositionitwasinbeforethedragstarted.Thisisusefulonthedragdrop.这个用于在dragdrop时，将动态面板移回拖拽前的位置。定制的控件库：CustomWidgetLibraries概述定制的控件库，让你能够创建自己的图标、设计样式、商标元素等控件，并可以直接装载它们到控件面板。控件库以独立的RPLIB文件格式创建，可以简便的与其他用户或团队成员共享。你可以下载和使用我们AxureRP客户所创新的库文件。装载定制的控件库在控件面板工具栏中使用“LoadLibrary”功能寻找.rplib文件并装载。控件库装载完成后，控件将会出现在控件面板中，你可以将其拖拽至线框中进行使用。为了在启动AxureRP的时候自动装载这些定制库，将rplib文件放在PC的~/MyDocuments/MyAxureRPLibraries文件夹。AxureRP会从这些位置将之前装载过的定制库再度装载.如果需要卸载一个定制库，选择“Unloadlibrary”，将从控件面板中卸载当前的定制库。创建定制的控件库为创建你自己的控件库，使用控件面板的下拉菜单中的“Createlibrary”功能并指定.rplib文件的名称.这将创建.rplib文件，并将启动AxureRP的另一个实例，因为这是一个库文件，Sitemappane将被WidgetLibrarypane替换，你可以在该面板中增加、删除和组织控件。你可以从已存在的空间中创建自己的定制控件，包括从其他的定制控件库中获取控件，采用同样的方式进行页面设计。专家技能设置控件的值SetWidgetValues这部分主要学习像动态改变文本面板上的文本、或者checkcheckbox，在设置值时使用变量和数据、字符串等函数。概述通过交互可以动态设定控件的值，如一个文本框中的文字、或者一个下拉列表框中的选项。当一个条件满足时，将文本框的文字设为一个变量值，或动态checkcheckbox的状态非常有用。你也可以使用数学和字符函数来计算要设置的值。设置变量的值增加一个交互的case，并在CaseEditordialog对话框选择“SetVariable/WidgetValue(s)”动作，以设置一个控件的值。在CaseEditor的对话框，点击“OpenSetValueEditor”，打开SetVariableandWidgetValues的对话框。在这个对话框中，你可以构造action(s)来设置一个控件值。你可以在一个action中设置多个控件的值。为了实现此目标，在第一个action后点击+按钮。如果要移除一个action，点击-按钮。在每一行，第一个和第二个域是控件值的类型，和你想要设置的具体控件。你可以设置控件值的下列类型：Ischeckedof:一个checkbox和radiobox的check状态。Selectedoptionof:一个下拉列表和列表框的选择项。Textonwidget:一个控件的显示文本。Textonfocusedwidget:当前获得焦点的控件所显示的文本.infocus.第3和4个域，是你将要设置的值的类型和和具体的值。这些选项依赖于你正在设置和包括正在输入的一个固定的值的控件的类型，将这个值设置存储到一个变量，或者将这个变量的值设置给其他的控件。TextValuesonTextFieldsandTextAreas当设置像textfields和textareas这样的表单控件的文字值时，你可以选择将文本内容设置设置为一个值（静态文本值）、变量的值、变量值的长度、一个下拉式列表框或列表框的选项、控件的文本、控件值的长度、或者获得焦点控件的文本。例如，如果你要创建一个action，设置Job字段的文本，使其等于一个Job下拉列表框中的一个选项。这个原型将当前所选择的选项写入到文本字段中去。TextValuesonTextPanels,ButtonShapes,andImages当要向无格式的控件，如TextPanel、按钮、图片设置文版值时，你需要找到一个“EditText”按钮，点击其打开EnterTextdialog。在这个对话框中，你可以输入和格式化这个控件的文本值。你也可以插入变量值和数学、字符串函数到这个文本。本地变量LocalVariables如果你在设置文本时需要使用另一个控件的值，你可以创建一个本地的变量来存储这个值。本地变量存在于一个action的范围，而且不能传递到其他页面。在EnterTextdialog底部区域点击“AddLocalVariable”来插入一个本地变量。然后将文本域的值赋予本地变量，然后你可以设置空间值到本地变量LVAR1。变量名称必须为字母而且不能为空格。定义数学和字符串函数DefineMathandStringFunctions在EnterTextdialog中，有一系列可用的计算值和操控字符串的函数。例如，你可以设置一个文本面板控件上的字符为两个文本控件上的数值之和。或者，你可以从一个textbox中将文本的最后一位字符移除。LocalVariablesinFunctions：函数中本地变量如上所述，如果你需要在数学和字符串函数中使用一个控件的值，你需要建立一个本地变量来存储这个值。例如，如果你建立一个饭店菜单的计算器，你可以使用一个textfield中输入的值来计算小费，这个textfield的值将存储在一个本地变量中，以该值的20%计算消费。即[[LVAR1*0.20]]MathandStringFunctions：数学和字符串函数这是一系列可用的数学和字符串函数：+:Addition.E.g.,[[LVAR1+LVAR2]]-:Subtraction.E.g.,[[LVAR1-5]]/:Division.E.g.,[[LVAR1/4]]*:Multiplication.E.g.,[[LVAR1*0.25]]LVAR.toFixed(decimalPoints):使用一个指定的位数来格式化小数点后面的位数。例如：ifLVAR1is3.1415926,[[LVAR1.toFixed(2)]]returnthevalueof3.14.LVAR.substring(from,to):returnsthecharactersfromastring,betweenthestartindex(“from”)andtheendindex(“to).返回一个字符串的字符，从开始的位数到截止的位数，如：IfLVAR1is“BillHaverchuck”,[[LVAR1.substring(2,10)]]returns“llHaver”.LVAR.length:returnsthelengthofastring.返回字符串的长度，如IfLVAR1is“LindsayWeir”,[[LVAR1.length]]returns12.LVAR.toLowerCase():将一个字符串转化为小写.E.g.,[[LVAR1.toLowerCase()]]LVAR.toUpperCase():将一个字符串转化为小写.E.g.,[[LVAR1.toUpperCase()]]LVAR.toString():将一个值转化为字符串，E.g.ifLVAR1is09,[[LVAR1]]returns9,but[[LVAR1.toString()]]returns"09".BuildingaMathExpression：建立一个数学表达式考虑到一个餐馆账单的例子，如果本地变量LVAR1被设置为1个文本字段用来表现账单总额，我们可以设置一个文本面板来呈现这个总额。

Thetotalbillis$[[LVAR1]]如果为这个账单总额增加15%的小费，那么这个表达式应该如下所示：

Thetotalbillis$[[LVAR1*1.15]]includinga15%tip.因为我们希望账单总额只留小数点后2位，因此我们使用toFix函数来表达：Thetotalbillis$[[(LVAR1*1.15).toFixed(2)]]BuildingaStringExpression：建立一个字符串表达式String函数的工作同上。例如，下列的表达式给我们讲LVAR1中的字符串最末一个字符移除，类似按下了Backspace或Delete键。[[LVAR1.substring(0,LVAR1.length-1)]]这个substring函数带有两个值，开始的序号和截止序号。在我们的表达式中，我们希望这个这个字符串从0开始，到字符串的长度截止，而实际我们要截取的字符串的长度为总长减一。页面装载的交互PageLoadInteractions概要OnPageLoad事件允许你创建页面开始装载前的交互。在PageInteractions的标签页可以找到OnPageLoad事件。这个常用来执行一些像在菜单中高亮一个菜单项、设置一个动态面板到一个特定状态，或者将变量值插入到控件的文本。OnPageLoadEventAddcasestotheOnPageLoadeventthesamewayyoudowithwidgetevents.Justlikewithwidgetinteractions,youcanperformanyoftheactionsavailableandasmanyasneeded.Youcanalsouseconditionallogictodeterminehowtoinitializethepage.Frequently,thisinvolvesconditionsbasedonvariablevalues.Youcanalsoaddpageloadinteractionsinmasters.TheOnPageLoadeventonamasterfirewhenapagethatcontainsthemastersloadsintheprototype.IfthepagealsohasanOnPageLoadinteraction,thecasesonthemasterwilloccuraftertheonesdefinedonthepage.SetWidgetstoSelectedStatesOnPageLoadevent的常规用法是高亮一个导航项，比如菜单项的一个子项，或者指向当前页面的一个按钮形状。如果你的页面包括了按钮形状或者一个选定风格的菜单，你可以在OnPageLoadevent中使用

“SetWidget(s)toSelectedStyle”action，以在页面装载时高亮这个菜单项，或者按钮形状。二、ConditionallySetDynamicPanelStates：有条件的设置动态面板状态使用条件逻辑的联合、变量和SetPanelStatetoState行为，你可以基于变量中存储的值设置一个动态面板到一个特定状态。如，如果你有一个变量保存着是否用户登入的标记，你可以设置一个面板到登入状态或登出状态。三、SetTextonaWidgettoaVariableValue将控件上的文本设置给一个变量值OnPageLoadevent的另一个通用交互式，将控件上的文本设置给一个变量值。例如，如果你有一个变量存储了一个名字，那么你可以设置一个控件的文字为："Welcome,[[NameVar]]".变量Variables变量概述VariablesOverview变量用于在一个页面向另一个页面传递数据。通常来说，任何情况下，都可能有来自一个页面的交互需求去影星另一个页面的控件，这时需要使用变量。在AxureRP中你可以无限数量的使用变量，但我们建议不要超过25个变量，特别在使用IE查看原型系统时。你可以在条件中使用变量值，对控件中设置包括数学和字符串表达式的文本CreatingandSettingVariableValues：创建和设置变量的值Tomanagethevariablesinyourproject,gotoWireframe->ManageVariablesinthemainmenu.在ManageVariablesdialog中，可以创建、移去、更名和记录变量。缺省情况下，你的文件会以一个名叫OnLoadVariable的变量开始。在创建变量名字时，他们需要是字母，而且少于25个字符，不能包含空格。TIP:Trytogiveyourvariablesdescriptivenames(i.e.,“UsernameVar”and“CartTotalVar”vs.“Var1”and“Var2”)sothatitiseasyforyouandothersworkingwithyourfiletoidentifythem.设置变量和控件值对话框：TheSetVariableandWidgetValuesDialog在CaseEditordialog中添加“SetVariable/WidgetValue(s)”action来将变量赋值。在第4步的CaseEditor，点击“OpenSetValueEditor”来打开SetVariableandWidgetValuesdialog。在这个对话框中，你可以创建表达式为变量赋值。你可以在同一个action中通过增加行的方式对多个变量赋值。你可以点击+创新一个新行（赋值），点击-按钮删除一个赋值行。在行的第一个列中，设置“Valueofvariable”并选择第二列中的变量名，在下拉式列表框中选择"AddNew..."，打开ManageVariablesdialog，并增加一个新变量。第三、四个列是你要设置的值的类型和确定的值。一个完成的Action看上去是这样，“SetvalueofvariableNameVarequaltotextonwidgetNameField”。在原型系统中，如果用户在Name列中输入“StringerBell”，将触发该行为，将值“StringerBell”存储到NameVar中去。一旦变量的值被设置，它在页面之间执行传递。你可以设置一个变量到下列类型的值：Value:Avalueyoumanuallyenter：你手工输入的一个值。Valueofvariable:Thevaluestoredinanothervariable.Choosefromthelistofvariables,oraddanewone.另一个变量存储的值，从一个变量列表中选择，或者添加一个新的。Lengthofvariablevalue:Thecharacterlengthofanothervariablevalue(number).Choosefromthelistofvariables,oraddanewone.另一个变量值的字符长度，从变量列表中选择，或添加一个新的变量。Selectedoptionof:Thecurrentlyselectedvalueofadroplistorlistbox.Choosefromthelistofdroplistandlistboxwidgetsonthepage.一个下拉列表框或列表框当前被选择的值。从页面一个下拉式列表框或列表框中选择。Ischeckedof:“True”or“False”basedonwhetheraradiobuttonorcheckboxisselectedorunselected.Choosefromthelistofcheckboxandradiobuttonwidgetsonthepage.T/F基于一个checkbox或radiobox是被选中或是非选中。从页面的checkbox和radiobox控件列表中选择。Textonwidget:ThevalueenteredintoaTextFieldorTextAreawidget.Choosefromthelistoftextfieldandtextareawidgetsonthepage.Lengthofwidgetvalue:Thecharacterlengthofthevalueonaformwidget(number).Textonfocusedwidget:Thevalueenteredintothewidgetthatiscurrentlyinfocus.UsingVariableValues：使用变量的值ConditionsandVariables：条件和变量BuildingontheConditionalLogicarticle,youcanalsodefineconditionsbasedonvariablevalues.IntheConditionBuilderdialog,you’llfindtwovariable-basedvaluesyoucanuse:valueofvariableandlengthofvariable.例如：你有一个按钮，在OnClick事件中有两个case，以链接到不同的页面。判断的条件是基于变量LoggedInVar值为"Yes"or"No"。这个交互可能会像这样：(Case1)IfvalueofLoggedInVarequals“Yes",openCheckoutinCurrentWindow,and(Case2)IfvalueofLoggedInVarequalsto“No”,openLogininCurrentWindow.TheconditiononthesecondcasecouldbeomittedandreadElseIfTruetohandlethe"notYes"case.SetWidgetTextUsingVariables：使用变量来设置控件文本UsingtheSetWidgetValuesaction,youcaninsertavariablevalueintowidgettextintheEnterTextdialog.ThisisfrequentlydoneinanOnPageLoadevent.但是变量的值又从哪里来？有3种不同类型的变量值，你可以插入到文本中：1、全局变量；2、built-invariables：内置变量3、localvariables：本地变量。为了将变量插入到文本中，变量名字将要围绕双方括号，“[[variablename]]”。变量的值将替换双括号中的变量名。内置的变量用于插入当前的名字、页面被查看的当前日期、原型生成的时间等。这里有一系列内置的变量：1、PageName,2、Day,3、Month,4、MonthName,5、DayOfWeek,6、Year,7、GenDay,8、GenMonth,9、GenMonthName,10、GenDayofWeek,11、GenYear.本地变量存在于一个action范围，不能像全局变量一样在页面之间传递数据，为了插入一个本地变量，点击EnterTextdialog.底部的“AddLocalVariable”功能。OnPageLoad,ConditionsandVariablesOneofthemorecommonusesfortheOnPageLoadeventistoperformandactionbasedonavariablevalue.Here'sanexample.Let’ssaythere’sadroplistontheStartPagewheretheuserselectstheirrolefromthreeoptions:marketing,sales,orsupport.Whentheuserselectsanoption(OnChange),thevalueoftheRoleVariableissetto“marketing”,“sales”,or“support”.ClickingabuttontakestheusertotheInformationPagewhichcontainsadynamicpanelwiththreestates.Eachstateisspecifictooneoftheroles.IntheOnPageLoadeventwecancheckthevalueofRoleVariableandsetthestateofthepanel(InfoPanel)accordingly.Case1:IfvalueofvariableRoleVariableequals“marketing”,setInfoPanelstatetoMarketingInfo.Case2:ElseIfvalueofvariableRoleVariableequals“sales”,setInfoPanelstatetoSalesInfo.Case3:ElseIfvalueofvariableRoleVariableequals“support”,setInfoPanelstatetoSupportInfo.Theprototypewillperformoneofthecaseswhenthepageloadsbasedontheroleselectedandtheuserwillautomaticallyseethecorrectcontent.RaisedEvents概述RaiseEvent是创建在master上的定制事件，允许你对每个master的实例增加不同的交互。你也可以在希望一个master的内部控件影响master外部的页面控件时使用raisedevent。Raiseevent在master内部的控件从交互被触发。例如，如果你在master中创建了一个"Back"or"Previous"按钮。你可以从按钮的OnClick事件中raise一个事件，然后依赖一个页面上使用的一个master，连接到另一个不同的页面。或者如果你的页面有一个maseter和一个动态面板，master中有一个按钮需要隐藏动态面板。你可以在点击这个master的按钮时raise一个事件，这样可以在master之上可以定义一个交互来隐藏这个面板。CreateandUseRaisedEvents:创建和使用raiseeventMaster中的交互都可以raise一个事件。在CaseEditordialog，选择“RaiseEvent”action。在第四步的对话框里，你可以增加和管理raiseevent和选择交互中要raise的事件。有助于你给出raise事件一个名字，如OnHelpButtonClick.。Raisedevents也能在线框中的ManageRaisedEventsdialog中进行管理。在菜单的Wireframe->ManageRaisedEventsinthemainmenu.当你在页面中添加一个master时，在交互面板中选择你想要看到raiseevent的master。你便可以增加事件的交互，同样的，其他任何事件都是这样处理。该功能主要是面向master，因为master是一个公共模块，可以在不同页面中重用，而且每个页面中都有不同操作行为。下面为一个应用的案例：1、页面中有两个master，如下图：2、"<<PREVIOUS"textpanel将在其onclick事件中，添加raiseevent。3、raiseevent的动作设置：4、增加一个新的raiseeventOnPreviousClick，如下图；这是一个虚空的事件。未来在页面中应用该master的时候，才会编制事件action。5、当该master控件应用在page2中，即可以为该raiseevent添加case。项目共享SharedProjects概述团队共享的意思是多人可以在同一时间内对RP文件进行编辑，维护项目文件的版本控制。共享的项目文件会放在一个网络驱动器或者一个SVN服务器。网络驱动器通常情况部署起来比较简单，但你需要在远程通过VPN连接。我们推荐存储在SVN服务器的文件夹下。SettingUpaNewSharedProject：设置一个新的共享项目CreateSharedProjectDialog：创建共享项目对话框步骤一、输入共享项目的名字。文件和文件夹也将被创建并与项目名称保持一致。步骤二、SharedProjectDirectory:共享项目的目录。选择共享项目的文件夹目录。这个目录通常为一个网络驱动器，其他用户应能访问。这不需要安装任何其他的附加软件。然而，通过VPN访问速度将会很慢，我们通常不推荐采用这种方式。步骤三、LocalDirectoryfortheSharedProject:选择一个电脑本地目录，共享项目的本地拷贝将被创建。SharedProjectEnvironment&LocalCopy：共享项目环境和本地拷贝一旦你完成配置共享项目，AxureRP将打开你的本地拷贝。你将看到AxureRP环境中有如下不同的情况：SitemapandMasterPanes:Therearedifferenticonsnexttothepages/masterslistedinthepanesthatindicatethecurrentstatusofthatitem.注意指示图标的不同。WireframeToolbar:Thetoolbarabovethewireframepaneincludesinformationaboutthestatusofthepage/masterbeingdesigned,andadropdownmenutochangethestatus.如下图：共享项目的本地拷贝由.rpprj文件和一个DO_NOT_EDIT文件夹组成。这个文件夹包括了项目数据和版本控制信息，而且不允许被AxureRP之外的软件修改。确定不要单独移走DO_NOT_EDIT文件夹。你如果需要在这个共享项目上工作，不需要每次都去获得一个新的本地拷贝。GettinganExistingSharedProject要开始在已创建的共享项目上工作，在主菜单中选择Share->GetandOpenSharedProject。这将打开GetSharedProject向导，并带你逐步创建一个共享项目在电脑本地的拷贝。当你结束这个过程，rpprjfileandDO_NOT_EDITfolder将在你所选择的目录中自动创建。.如果你在寻找这个共享目录时发生了麻烦，注意这个共享目录的名字应带有最新的项目文件夹名字，你也可以通过打开一个已经存在的本地拷贝来找到共享文件夹，这需要使用主菜单中的->BrowseSharedProjectHistory.对话框中显示有共享目录的名字。如果电脑已经有了一个本地拷贝，你不需要获取一个新的本地拷贝或者不要只打开这个RPPRJ文件。为了多台电脑一起访问这个共享项目，通过上述步骤为不同的电脑各自创建一份本地拷贝。不要创建本地拷贝的拷贝，如将本地的rpprj文件发邮件给自己，或者从一台电脑拷贝到另一台电脑，这个可能造成项目冲突，每个电脑都有它们自己的本地拷贝。WorkingwiththeSharedProject在共享项目中工作编辑一个页面或master。为了修改共享页面中的页面或master，你首先需要通过checkout操作，将共享项目文件checkout到本地。当你完成修改后，通过checkin将修改写回共享项目。如果你想发送更改单仍保持页面和master的更改状态，则使用SendChanges功能。CheckOut:Toeditapageormaster,usetheCheckOutoperation.Thisupdatestheitemwithanychangesfoundintheshareddirectoryandreservesitforyoutoedit.YoucantheneditthewireframelikeyouwouldinaregularRPfile.YoucanalsouseShare->CheckOutEverythinginthemainmenutocheckoutallofthepages,masters,andprojectpropertiesintheSharedProject.Keepinmindthatcheckoutsareperlocalcopyandnotperuser.Soifyouhavemultiplelocalcopies,apagewillonlybecheckedoutinoneofthem.UnsafeCheckOut:不安全的checkout。

Ifanitemisalreadycheckedoutwhenyoutrytocheckitout,theUnabletoCheckOutdialogappearsgivingyoutheoptiontodoanEditw/oCheckOut.Thisallowsyoutoedittheitemeventhoughit’salreadycheckedoutbyanotheruser,alsoknownasanUnsafeCheckout.我们不推荐不安全的checkout，因为这将可能导致冲突。Aconflictoccurswhenmultiplepeopleeditthesameitematthesametime,andtheshareddirectorycanonlychooseonesetofchangestoaccept.Theotherset(s)ofchangesaredismissed,andwillneedtobemanuallyreapplied.However,unsafecheckoutscanbeusefulif(forsomereason)youcannotCheckInfromthelocalcopythathasanitemcheckedoutorifyoutemporarilycannotconnecttotheshareddirectorytodoaCheckOut.GetChanges:Toretrievethelatestversionofapageormasterfromtheshareddirectory,usetheGetChangesoperation.Thisupdatestheitemaswellasanyprojectpropertiesthepageormasteruses.Toretrievethelatestversionoftheentiresharedproject,chooseShare->GetAllChangesfromSharedDirectoryinthemainmenu.Tip:Itisgoodpracticetofrequentlygetallchangestoyourlocalcopytokeepituptodateandinsyncwiththeshareddirectory.SendChanges:Tosendyourchangestoapageormastertotheshareddirectorybutkeepthepageormastercheckedout,usetheSendChangesoperation.ThisopenstheSendChangesdialogwhereyoucanaddnotesaboutthechangesbeforesendingthem.YoucansaveyourlocalcopyusingFile->Saveinthemainmenu,butthisdoesnotsendyourchangestotheshareddirectory.Tos