{"title":"使用集成开发环境","inframe":false,"hidden":false,"roles":{"demo":1,"dev":1},"pageLink":"","children":[{"configs":{"itemId":"module"},"children":[{"configs":{"layout":"fit","itemId":"viewport1"},"children":[{"configs":{"autoScroll":"true","html":"<div class=\"wb_doc\">\n  <h2>使用集成开发环境<\/h2>\n  <hr class=\"wb_hr\">\n  <h3>概述<\/h3>\n  <p>集成开发环境，简称为IDE，用于开发应用系统，你可以在此完成从前台到后台的所有功能开发。IDE由顶部菜单工具条栏、左侧文件列表树，中间工作区，右侧控件箱和底部功能视图组成。<\/p>\n  <ul>\n    <li>菜单工条栏<\/li>\n    <p>菜单工具栏采用优化设计，即常用功能放在工具条按钮中，其他功能放在菜单中，且工具条按钮功能和菜单功能不重复。在工具条中点击[添加文件]按钮在当前上下文中添加模块文件或其他文件。如果在文件列表中当前选择的是模块节点，那么在当前节点下添加模块文件否则在当前节点下添加其他文件。在应用目录内创建的模块和文件都可以通过点击[运行]按钮运行。<\/p>\n    <li>文件列表<\/li>\n    <p>文件列表默认有3个根节点构成，分别为模块目录、应用目录和系统目录。在文件列表中可以进行添加、删除和移动文件等操作，这些操作都支持多选。在查看菜单下选择文件标题，可以同时显示文件名称和文件标题。IDE提供文件的同步功能，当在IDE中对应用目录内的任何文件或目录执行增删改等操作时，IDE能自动同步文件到变量sys.syncPath所指目录，通常该功能可用于Eclipse等工具调试时对文件的同步操作。<\/p>\n    <p>当选择焦点位于文件列表，可通过以下快捷键操作文件：<\/p>\n    <table class=\"wb_table\">\n      <tr><td width=\"100px\"><b>快捷键<\/b><\/td><td width=\"230px\"><b>功能描述<\/b><\/td><\/tr>\n      <tr><td>Ctrl+J<\/td><td>在当前选择位置添加文件<\/td><\/tr>\n      <tr><td>Ctrl+Shift+J<\/td><td>在当前位置添加目录<\/td><\/tr>\n      <tr><td>Ctrl+U<\/td><td>查看选择的文件/目录属性<\/td><\/tr>\n      <tr><td>Ctrl+X<\/td><td>剪切选择的文件/目录<\/td><\/tr>\n      <tr><td>Ctrl+V/Ctrl+Shift+V<\/td><td>粘贴文件/目录至选择的位置/子节点<\/td><\/tr>\n      <tr><td>Ctrl+Shift+X/Delete<\/td><td>删除选择的文件/目录<\/td><\/tr>\n    <\/table>\n    <p>在文件列表区，还可通过拖动的方式调整文件/目录位置。<\/p>\n    <li>工作区<\/li>\n    <p>双击文件列表中的任意文件会在工作区中打开，系统会根据打开的文件类型启用对应的文件编辑器。如果打开一个模块，系统就使用模块编辑器。模块编辑器有多个页面构成，首页是设计页面，由配置项/事件编辑器和对象视图构成，前者用于设置控件的配置项/事件，后者用于添加和编辑控件结构。对象视图支持多选操作，对象视图中允许不同层级的控件itemId重复。如果控件是容器，对于绝对布局可以使用布局设计器，其他布局可直接在对象视图中设计和编辑。在容器下添加的控件默认为子控件，在非容器下添加的控件默认为该控件的一个属性，可以通过设置控件的isConfig属性为true显式指定容器下的该控件为配置项。<\/p>\n    <li>控件箱<\/li>\n    <p>控件箱中包含前台和后台控件，这些控件可以通过双击或拖动的方式加到对象视图或布局设计器中。我们可以通过控件管理器来配置和维护控件，也可以通过它来方便添加新的控件。<\/p>\n    <li>功能视图<\/li>\n    <p>提供功能性的视图对象，包含标记、搜索和线程等多个视图。<\/p>\n  <\/ul>\n  <hr class=\"wb_hr\">\n  <h3>创建Hello World应用<\/h3>\n  <p>我们来创建一个含Hello World标题的窗口来演示如何创建和运行模块：<\/p>\n  <ul>\n    <li>创建模块：选择文件列表中模块下的任意一个节点，然后在工具条中点击[添加文件]按钮，在弹出对话框中输入文件名称，然后点击确定，即在选择的文件节点下创建模块；<\/li>\n    <li>添加控件：在控件箱中双击window控件或拖动window控件至对象视图；<\/li>\n    <li>设置属性：在对象视图左侧属性编辑器中设置window的autoShow=true，height=300,modal=true,title=Hello World,width=500；<\/li>\n    <li>运行模块：在工具条中点击[运行]按钮，即可看到窗口对象。在运行的模块页标签上双击可在新窗口中打开模块，该方法同样适用于主页模块。<\/li>\n  <\/ul>\n  <hr class=\"wb_hr\">\n  <h3>脚本编辑器<\/h3>\n  <p>脚本编辑器可以编辑js、html/css、serverscript、sql、java等。<\/p>\n  <p>脚本编辑器提供大量快捷键以方便编辑操作，熟记这些常用快捷键将会提高你的编码效率：<\/p>\n  <table class=\"wb_table\">\n    <tr><td width=\"100px\"><b>快捷键<\/b><\/td><td width=\"230px\"><b>功能描述<\/b><\/td><\/tr>\n    <tr><td>Ctrl+Shift+F<\/td><td>自动格式化代码<\/td><\/tr>\n    <tr><td>Alt+/<\/td><td>代码提示<\/td><\/tr>\n    <tr><td>Ctrl+.<\/td><td>当前页面最后修改处<\/td><\/tr>\n    <tr><td>Ctrl+9<\/td><td>返回到上一处光标位置<\/td><\/tr>\n    <tr><td>Ctrl+0<\/td><td>前进到返回前的光标位置<\/td><\/tr>\n    <tr><td>Ctrl+/<\/td><td>切换代码注释<\/td><\/tr>\n    <tr><td>Ctrl+F<\/td><td>查找（IE9以下使用Ctrl+E）<\/td><\/tr>\n    <tr><td>Ctrl+G<\/td><td>查找下一处<\/td><\/tr>\n    <tr><td>Ctrl+Shift+G<\/td><td>查找上一处<\/td><\/tr>\n    <tr><td>Ctrl+Shift+A<\/td><td>替换首个<\/td><\/tr>\n    <tr><td>Ctrl+Shift+R<\/td><td>替换全部<\/td><\/tr>\n    <tr><td>Ctrl+Shift+D<\/td><td>清除搜索到字符的高亮标记<\/td><\/tr>\n    <tr><td>Tab<\/td><td>自动增加缩进<\/td><\/tr>\n    <tr><td>Shift+Tab<\/td><td>自动减少缩进<\/td><\/tr>\n    <tr><td>Ctrl+]<\/td><td>增加缩进2个空格<\/td><\/tr>\n    <tr><td>Ctrl+[<\/td><td>减少缩进2个空格<\/td><\/tr>\n    <tr><td>Ctrl+M<\/td><td>添加书签<\/td><\/tr>\n    <tr><td>Ctrl+D<\/td><td>删除当前行<\/td><\/tr>\n    <tr><td>Ctrl+Home<\/td><td>文档首<\/td><\/tr>\n    <tr><td>Ctrl+End<\/td><td>文档尾<\/td><\/tr>\n    <tr><td>Ctrl+Left<\/td><td>按词组光标左移<\/td><\/tr>\n    <tr><td>Ctrl+Right<\/td><td>按词组光标右移<\/td><\/tr>\n    <tr><td>Alt+Left<\/td><td>行首<\/td><\/tr>\n    <tr><td>Alt+Right<\/td><td>行尾<\/td><\/tr>\n    <tr><td>Ctrl+Backspace<\/td><td>按词组往前删除<\/td><\/tr>\n    <tr><td>Ctrl+Del<\/td><td>按词组向后删除<\/td><\/tr>\n    <tr><td>Alt+鼠标选择<\/td><td>块状选择<\/td><\/tr>\n    <tr><td>Ctrl+鼠标点击<\/td><td>启用多光标点的编辑<\/td><\/tr>\n  <\/table>\n  <p>Apple系统和其他系统请参考上述说明按对应的键。<\/p>\n  <p>在脚本编辑器中可以通过Ctrl+双击文件列表中的文件或模块来添加url路径至脚本编辑器。<\/p>\n  <hr class=\"wb_hr\">\n  <h3>配置项/事件编辑器<\/h3>\n  <p>用于编辑对象视图中选择控件的配置项和事件。该编辑器名称如果为黑体表明为重要的配置项或事件；名称后加\u201c:\u201d表明该配置项为一个非字符串的表达式，不带该标记的字符串配置项可通过加前置\u201c@\u201d符号来指定表达式，如设置title配置项为@myVar，指明title取自变量myVar而非字符串myVar；名称加删除线表明该配置项或事件已经过期；在设置值的编辑框中如果出现触发器按钮，表明该属性可通过弹出指定类型的编辑器来设置值。<\/p>\n  <p>通过拖动文件列表中的模块或文件至该编辑器，可以快速设置文件或url路径属性。<\/p>\n  <hr class=\"wb_hr\">\n  <h3>布局设计器<\/h3>\n  <p>布局设计器用于对绝对布局的界面进行设计，其他布局的界面设计可在对象视图中直接按树状结构进行编辑。启用布局设计器，需要先选择任意一个容器控件，然后点击[布局设计器按钮]或按快捷键[Ctrl+B]。打开布局设计器后可通过拖动或双击控件箱中控件的方式来添加控件至设计器。<\/p>\n  <p>布局设计器中可通过下列快捷键操作被设计的控件：<\/p>\n  <table class=\"wb_table\">\n    <tr><td width=\"100px\"><b>快捷键<\/b><\/td><td width=\"230px\"><b>功能描述<\/b><\/td><\/tr>\n    <tr><td>Ctrl+箭头键<\/td><td>微调选择控件位置<\/td><\/tr>\n    <tr><td>Shift+箭头键<\/td><td>微调选择控件大小<\/td><\/tr>\n    <tr><td>Ctrl+A<\/td><td>全选控件<\/td><\/tr>\n    <tr><td>Ctrl+X<\/td><td>剪切选择控件<\/td><\/tr>\n    <tr><td>Ctrl+V<\/td><td>粘贴控件<\/td><\/tr>\n    <tr><td>Delete/Ctrl+Shift+X<\/td><td>删除选择控件<\/td><\/tr>\n  <\/table>\n  <hr class=\"wb_hr\">\n  <h3>查看服务器控制台信息<\/h3>\n  <p>点击工具条[自动获取服务端信息]按钮，系统将实时把当前用户输出至服务器端的信息（包括异常信息、调试信息（如SQL等）和使用app.info等方法打印的对象）显示在客户端（浏览器）的控制台中。如果需要获得调试信息，需要设置变量sys.debug为true。<\/p>\n<\/div>","itemId":"panel1","border":"false"},"children":[],"type":"panel","expanded":false}],"type":"viewport","expanded":true}],"type":"module","expanded":true}],"iconCls":""}