Maqetta中文教程练习(20135).docx

1、 基础介绍创作不同应用的快捷菜单，同工具栏中“Create”菜单作用相同1.1 欢迎界面视图登录成功后，将进入到欢迎界面视图，如下：创建菜单：桌面、手机、低高保真、样式、JS、工程、文件打开菜单：文件TAB页：列出当前打开所有文件1.2 页面编辑视图布景面板控件调色板：应用控件属性面板：对编缉区选中的控件属性进行设置轮廓调色板：显示文档中的控件层次结构视图创建应用的编缉区快捷工具栏：保存、回退、剪切、复制、粘贴、删除系统设置用户设置重点调色板功能介绍： 轮廓调色板1、 轮廓调色板显示文档中的控件层次结构视图。2、 你可以通过拖放重新排列你的部件。3、 轮廓调色板还包括一个上下文菜单（选中一个层次，点击“右键”将弹出此菜单），使许多相同的部件的操作（例如，删除），可在网页编辑器画布。 上下文操作菜单 层次结构图 属性调色板各种属性调色板（Widget，事件，布局，等等），你可以改变部件特定的属性值和不同的部分：1、 Widget - 本节列出了控件特定的属性，例如，一个复选框部件有一个“检查”的性质，而其他大多数控件将不具有这种特性。对于大多数的控件，一个“标题”属性出现。这对应于HTML标题属性通常用于指定为一个给定的工具提示文本。2、 事件(Events)- 定义在一个特定的控件发生某些事件时采取的行动。包括鼠标事件（例如，onclick）和文本输入控件焦点事件（即，onfocus和onblur3、 布局(Layout)：在布局总面积不同的CSS属性。包括CSS属性的大小（例如，“宽度”和“高度”）和位置（例如，“左”和“上”）。还包括CSS属性如“位置”，“显示”，“浮”，“溢出”和“不透明度”。4、内边距（Padding） - 检索或设置对象四边的补丁边距。语法：padding :padding-top | padding-right | padding-bottom | padding-left说明：检索或设置对象四边的内补丁。对于td和th对象而言默认值为1。其他对象的默认值为0。参数：length :长度值、% : 百分比，由父元素宽度决定 。初始值：对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。5、外边距（Margins） - 这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。注释：允许使用负值。例子 1margin:10px 5px 15px 20px;上外边距是 10px右外边距是 5px下外边距是 15px左外边距是 20px6、 背景：CSS背景属性。“”按钮可用来调出背景对话框，可以选择背景图像和定义的梯度。7、 边框（Border）： CSS边框属性。注意 show 属性的选择项： props、Sides, 选择 props 界面，包括如下属性 边框的宽、样式、颜色、合并分开（表格应用）：选择 sides时 界面，包括如下属性 上、下、左、右边框大小的设置：8、 字体和文本的CSS属性（Font/Text）9、 SVG的CSS属性只适用于SVG内容。这些属性通常只用于从绘图工具部分的调色板窗口。 属性调色板属性调色板两大功能点：1、应用状态 ：maqetta包括“应用”功能，允许用户定义的交互性，无需编程。随着应用程序状态的特征，你可以组织你的应用程序为不同的状态，然后确定哪些组件是可见的（或样式不同的方式在不同的国家）。状态的变化可以使用事件触发的调色板。2、Dojo移动视图之间切换 ：如果你创建一个移动应用程序，包括Dojo移动视图控件（视图，ScrollableView或swapview）在你的应用中，场景面板将显示列表视图，再加上视图的层次。你可以很容易地通过点击在场景视图的一个调色板视图之间切换1.3 工具栏菜单 保存菜单，重点是“Save As Wedget”功能，是把文件保存成控件模板：撤消和重做：分别为裁剪、复制、粘贴、删除： 增加标注： 对选择的表格进行操作 编缉视图中模式, Design: 界面设计， Source分为三种，分别为纯代码、左界面设计右代码、上界面设计下代码 ：位置方式设置文档设置：Switch theme: 样式设置Choose device: 手机款式及样式设置Rotate device: 呈现方式设置，主要为横竖1.4 深入学习必备可以参考如下资料： HTML和CSS入门必备（1、2章）.pdf CSS样式表手册.chm css3.0参考手册.chm w3c标准html5手册.chm2、 教程学习1.1 桌面应用（基础级）当经历maqetta的教程，建议你有两个并排的浏览器窗口中打开一个显示，教程，和其他在你运行应用程序，执行在教程中列出的步骤。功能描述：角色管理的作用是为用户灵活的配置权限，决定用户可以看到哪些菜单和数据，可以执行哪些功能。角色管理用来维护角色基本信息、角色对应的菜单权限、功能权限和数据权限本练习案例盖以下主题：l 控件使用，如树、表、按钮、文本l 复杂对象的选择l 拖拉过程中对齐的操作操作步骤：1、点击“Create”菜单，在弹出的层菜单中选择“Desktop Applicaton”,将弹出创建桌面应用对话框2、在 建桌面应用对话框 中，输出文件名，选择存放路径及样式，点击“Create”按钮，将进入“页面编辑视图”3、 在“页面编辑视图”中，可以进行应用程序开发4、 在“控件调色板“中，查找到 树菜单 控件，拖拉到”编辑调色板“中在“控件调色板“中，查找控件两种方式：A、当不熟悉控件的名称时，通过点击下拉菜单来选中所需要的控件B、当熟悉控件的名称时，直接在搜索文本框中输入控件名，如下：5、在弹出的树配置页面中，在右边的“节点属性“中修改选中左边菜单节点的文件、图标及事件操作5、 在“控件调色板“中，拖拉两个Lable控件到“编缉调色板”中，双击Lable控件，弹出一个对话框，在对话框中录入角色列表，点击“确定”按钮6、 选中“角色列表”，在“属性调色板”中设置位置（要自由拖动，要选absolute项）、字体大小7、在“控件调色板“中，拖拉一个Table表格控件到“编缉调色板”中（或双击Table控件），弹出一个对话框，在对话框中录入行数、列数、边框大小等信息，点击“确定”按钮8、在“轮廓调色板“或“编缉调色板”中选中对易用，在“属性调色板中”设置字体、位置、边框等属性9、在“控件调色板“选择button按钮按钮，拖拉三个到编缉调色板中，更改名称和调整位置。 运行按钮运行效果：在工具栏中，点击“运行”按钮，系统将打一个新的界面最终界面运行时展示的效果如下：1.2 桌面应用（高级）-状态事件功能描述：选中树菜单中角色时，右边的TAB页中将显示角色的基本信息，用户信息，菜单权限、功能权限、数据权限等信息本练习案例盖以下主题：l 控件使用，如树、TAB、按钮、文本l 复杂对象的选择l 轮廓对象的消失和呈现使用l 状态和事件动作运用操作步骤：1、在“控件调色板”中，查找到tab控件后，拖位到“编缉调色板”中，在弹出的对话框中输出 角色基本信息、用户信息、菜单权限、功能权限、数据权限，点击确定按钮2、在“角色基本信息”TAB页中，拖入三个Lable及一个文件Text控件到到“编缉调色板”中， 拖拉调整位置如下图所示：3、在“用户信息”TAB页中，拖拉一个Table表到“编缉调色板”中，拖拉调整位置如下图所示：状态设置：4、在“轮廓调色板”中，单击“眼睛”图标，图标变成了“”，同时所选中的对象将在编缉调色板消失5、“布景调色板”中选中刚才创建的“role_message”，在“轮廓调色板”中同是选中“角色管理”、“角色列表”、“”项，单击“”图标，图标变成了“”6、 继续在“轮廓调色板”中，单击“角色管理、角色列表、新建、删除、新增角色”的“”图标，使图标变成了“”，单击“TabContainer”使它的“”图标变成“”。角色管理、角色列表、新建、删除、新增控件在编缉调色板中消失，TAB控件在编缉调色板中消失呈现出来。7、在“编缉调色板”中双击树控件，在弹出的树配置对话框中选中树子节点，在其对应的属性的onclicK中选择“State:role_message”,在母节点（省公司角色列表和广州角色列表）的属性的onclicK中选择“State:Bacekground”,点击“Save”保存运行查看效果：1、点击“”按钮后，打开一个新的页面，页面显示内容如下：2、点击“管理员”或其它的子节点，将以TAB页方式呈现对应角色基本信息，如下所示：4、 点击“省公司角色列”或“广州角色列表”，左边将弹出角色管理信息界面1.3桌面应用低保真（基础级）功能描述：通过查询条件，查询我的待办任务、已办任务和我的消息信息操作步骤：1、点击“Create”菜单，在弹出的层菜单中选择“Sketch(low-fidelity)”,将弹出创建低保真应用对话框在对话框中录入文件名及选择存放的路径：2、在“控件调色板“中查找Fieldset控件，拖拉到“编缉区域”，在打开的提示框中输入查询条件。 在“控件调色板“中查找文件Lable控件，拖拉4个相同控件到“编缉区域”（或复制），分别修改名称为 任务名称、任务类型、发送人、任务接受时间。 在“控件调色板“中查找文件框Text控件，拖拉3个相同控件到“编缉区域”（或复制），在“控件调色板“中查找时间DateTextBox控件，拖拉到“编缉区域”。对文本、文本框、时间控件进行调整对齐。4、 在“控件调色板“中查找DIV控件，拖拉到“编缉区域”。然后在“控件调色板“中查找BUTTON按钮控件，拖拉两个到“编缉区域”（或复制），在打开的提示框中输入名称查询、重置5、 在“控件调色板“中查找Tab控件，拖拉到“编缉区域”,在弹出的提示框中修改名称为我的待办、我的已办和我的消息6、 在“控件调色板“中查找Table表控件，拖拉到“编缉区域”中“我的待办”区域中，在弹出的表对话框中修改行为3，列为6，边框值为17、对Table控件中填入如下内容:运行效果：点击运行按钮，打开一个新的页面，界面效果如下所示：1.4桌面应用高保真（交互动作）功能描述：在我的待办任务中操作中点击“提交下一步处理”按钮时，将弹出流程选择界面操作步骤：1、在“控件调色板”查找div层控件，拖拉到编缉区域，在“属性调色板”中布局属性中调协宽为500PX,高为400PX2、在“控件调色板”拖拉另一个层到上面层内的顶部，修改名称为“流程下一步处理”，拖拉一个关闭按钮在其最右边。在“属性调色板中”修改其背景色为灰和字体为粗3、在“控件调色板”中查找FieldSet控件，拖拉到编辑区，修改其名称为 请选择提交的路径5、 在“控件调色板”中查找tree控件，拖拉到”请选择提交的路径”层内，在弹出的tree配置对话框中修改节点的名称为： 广东移动、技术室、卡类室、分析室等6、 在“控件调色板”中查找FieldSet控件,拖拉到“请选择提交的处理人”的上面，修改其名称为请选择提交的路径， 在“控件调色板”中查找MultSelet双选控件拖拉到“请选择提交的路径”中，修改其中的内容为：提交需求技术分析和退回需求技术分析7、 在“控件调色板”中查找FieldSet控件,拖拉到“请选择提交的处理人”的下面，修改其名称为请填写意见（500字内）。在“控件调色板”中查找TextArea控件,拖拉到“请填写意见（500字内）”内设置状态及动作：8、在“布景调色板”中，点击“”新增按钮，在弹出的对话框中输入名称step_manage8、 在“轮廓调色板”中选中“流程下一步处理”这个大层，单击“”使之为变为“”，此时“流程下一步处理”这个大层在编辑区域消失9、在“我的待办”中，选中“提交下一步处理”的按钮，在“属性调色板”中的onclick中选择State:step_manage项，点击“Save”保存。运行效果：1、点击” ”运行按钮，打开一个新的页面，界面效果如下所示：2、点击”提交下一步处理”按钮，将弹出“流程下一步处理”对话框3、在“流程下一步处理”对话框中，点击“关闭按钮”，将关闭“流程下一步处理”对话框”1.5手机应用功能描述：角色管理的作用是为用户灵活的配置权限，决定用户可以看到哪些菜单和数据，可以执行哪些功能。角色管理用来维护角色基本信息、角色对应的菜单权限、功能权限和数据权限操作步骤：创建两个不同的视图：1、在工具栏菜单中选择“Create”子菜单中“Moble Application”2、在弹出的对话框中输入文件名mobile_lowApp,点击“Create”按钮，将打开如下界面：3、在“控件调色板”中查找View控件，拖拉到手机中，在属性调色板中的Widget中的ID设置root_view4、在“控件调色板”中查找RoundRectList控件，拖拉到手机中，修改内容为 alerts、status、news5、在“控件调色板”中查找View控件，拖拉到手机中，在属性调色板中的Widget中的ID设置alert_view6、在“轮廓调色板”中选中“root_view”,在“编辑调色板”选中“alert”,在其属性调色板中的Widget中的moveto属性选择为alert_view7、在“轮廓调色板”中选中alert_view,在“控件调色板”中拖拉View控件到编缉区域中 9、 选中Heading，修改文本为Alerts,在其对应的“属性调色板”中设置如下 ：Back: HOME，界面中增加一个HOME字体的按钮. 点击保存按钮 Moveto: root_view 运行效果：1、在界面可以选择手机样式，改变大小2、点击“alerts”,手机界面转到alerts界面，如下3、技巧及方法介绍1.1 控件自由拖动到适当位置设置为了让控件自由在编缉调色板通过拖拉放在适当的位置， 在工具栏中最右边的位置菜单中设置为“Absolute”,如下所示应用：低保真时需要设置1.2 如何在拖拉控件过程中有效对齐在拖拉到编缉调色板时会出现对齐的红线，调整红线可以有效对齐1.3 复杂对象的有效选择在选择一些复杂控件时，如TAB页是由多个控件组成的或多个控件叠级在一起时，在需要操作整体TAB页时，很容易选择到它的部件控件，此时我们可以通过如下两个方式操作：A、选择控件的最边延B、在“轮廓调色板”中选中1.4 表格像EXCEL有效操作注意：不要选择表中行头（heading）, 点击鼠标右键不会弹出相关行、列操作菜单出来选中要操作的表中一个单元格，点击鼠标右键，在弹出的层中选中要操作事项选中选择这一列，然后拖到适当的宽度1.5 如何把自己建的文件共享给别人或传递给别人进行团队合作1、在”Create”菜单中选择“Review”2、在弹出的新建共享界面中操作如下3个步骤即可：1.6 制作控件模板当你发现一些控件在其它地方需要重复使用时，可以通过如下方面把它变成控件模板，放在“控件调色板”中：你想把“查询条件”作为控件模板使用，在点击“Save”时选择“Save as Widget”打开“控件调色板”时，发现增加一个用户个性化控件项，刚才增加的模板控件在里面：1.7 标注应用当你在与客户确认需求过程中，对一些控件在界面中的业务处理逻辑或验证规则进行说明时，以免今后产生一些误解，可以在对应的控件后增加标注信息，也可以作为最终交付成果给用户友好的提示如下面对时间控件进行说明时，还有输入密码或用户名不正确有效提示等操作步骤如下：在工具栏中选中拖拉一个“”控件到对应的标注位置，在打开的富文本对话框中输入内容和调整字体样式、颜色