00:00
下面我们就来介绍啊,这个可视化工具怎么进入,以及它的功能又有什么,我们一起来看。打开我们的变声工具。我们呢,把这个DEMO呢,重命名一下啊,因为这是我们上一个章节的内容,我叫chapter three啊三那么我们在这个基础上再新建一个文件夹来做我们这个章节的chapter。THREE4啊。在这里我们来四个里面呢,我们新建一个新的文件。来对吗?一。好了,我们要做的就是在这个DEMO1的基础上来进行可视化编程。怎么做呢?我们来到这个页面啊,点击进入我们这个页面,在这个页面的左上部分能看到一个这样的一个尺子,一个笔的这个图标,绿色的图标,对吧,那么这个图标就是进入可视化变成工具的图标,我们点击诶即可进入。那么同样的来到这个界面,整个界面呢,就是那个可视化的编程编辑界面。
01:02
整个界面的功能呢,主要聚焦于这一款。这是整个页面的主要功能,它分为上面部分对吧,下面呢,又分为左中右三大块。那么首先啊,我们需要对这几块区域有些必要的了解,那么后续呢,我们再去研究里面具体细节。首先上面这一块呢,我们可以分别介绍一下它的功能,第一个按钮就是退出可视化编辑工具的一个按钮,点击呢,我们就会回到之前代码的这个页面,再点进去就进去,所以这个按钮就是退出啊这个按钮,那么退出之后呢,再点这个这个位置的按钮呢,它就是重新进入。好,这里呢,是一个放大缩小的一个一个调整啊,主要是对中间我们这个显示内容区域的内容进行放大缩小,比方说我们家啊,最大是百分百啊简就是缩小缩小缩小缩小,那么这个呢,就看你的屏幕大小了,对吧,你就可以把它放到一个比较合适的大小来去查看效果。
02:07
那么这一块呢,就是撤销,当我们写了代码,诶发现或者是拖到了组件,发现这个东西有点不太合适啊,我们可以撤销掉,对吧,那么这一个呢,就是恢复你之前的撤销。然后这是公测板啊,这是这个,然后这一块呢,是可以对我们的左边这一块板块和右边这个板块进行关闭和展开的一个调整,你看然后点击这个左边这个板块就会消失,再点它就展开。点击右手边这个呢,它就会把右边的这个策略栏隐藏掉,然后再点开它就展开。所以这个按钮,这两个按钮分别是隐藏这个左边的侧侧面栏和隐藏这个右边的侧面呢,它这个展开隐藏的一个操作啊。好,那么上面的介绍完了,接下来再叫下面部分,下面部分呢,还是分为三块区域,左中右三块区域,对吧,左边这里面呢,又分为上。
03:01
和下两块区域,那么上面呢指的就是组建的三种类型组件,后续我们会给大家详细介绍,那么这样呢,大家需要知道就是系统组件,就是我们前面学习IBM框架所学的组件。那么UI组件是在系统组件基础上呢,做了一些啊,主要做了些样式的操作啊,样式的封装,让整个组件的样式更好看一些,可以满足满足一些特定的需求。高级组件呢,那就更牛逼了,对吧,在UI组件的基础上再做一层封装,让它的功能呢更加强大,可以立即完成一些指定的功能,这是高级组件,但是同样的它对样式啊,这些东西的定制化呢,就更就更差一些啊,就是你用的高级组件,那么基本上样式呢,我们就不会做太大的调整,如果样式上你想做更多的调整,那请用UI或者系统组件。好,这些组件呢,分别都有很多组件,下面有搜索组件的区域,下面呢,这就是各种组件的一些内容,那么这些组件呢,后续我们会详细介绍,这里我们做些了解啊,这些组件都在这啊,每一个都是一个可以操作的组件。
04:09
好,下面呢是一个大纲数,这个大纲数非常重要,当我们在这里搭建起来用户界面之后,那么在这里就会呈现一个这个树状结构来显示页面的大纲。比方说我们这里有一个view啊,View里面套一个view,然后view里面要套一个文本,对吧,大概这样的结构,那么在左边这里,它大概竖着里就会生成一个view view里面套一个view,然后view里面再套一个test,就会对应的生成相应的这个结构,我们通过这个大概数呢,能够非常快速的观察页面的结构,因为有时候页面的元素写的非常多的时候,你是不太好观察它的结构的,那么大概数这地方观察,同时当我们元素写的很挤的时候啊,有时候不好去选中某一个元素,此时在大概数中我们可以快速的选中一个元素,然后在右手边对这个元素的内容做操作。所以大概数很关键,然后这个呢,就是展开和折叠大纲数啊,快速展开和快速折叠大概数。
05:05
然后这个呢,就是你要不要看大招数,可以自己的操作啊,可以自己操作。好,中间就是内容显示啊,我们写的整个页面都会在中间显示,那么右边就是对内容进行调整的啊,对内容调整举个例子,比方说现在呢,我点击这块空白,这些空白区域的话,那么它操作的就是整个页面。我们可以给页面绑定事件,对吧,可以绑定一些事件,然后也可以绑定自定义事件,同时可以设置页面的样式,它的窗口背景是什么,然后状态栏这些东西可以做设置。如果我们拖了一个组件的话,诶,我们把一个组件拖进去啊,拖进去诶这个组件在这显示了,对吧?那么此时当我们选中组件,选中组件的时候,那么右边就会出现组件的密码,你可以调整组机的属性,有所有通用属性,有组件自身独有的属性,对吧?也有data set,就是data,他干那个自定义属性啊自定义属性对,他干你可以设置它自定义属性。
06:05
然后可以设置它的样式。有,我们有没有取一些独有的类名,可以复用样式,可以设置它的一些啊,就是各种样式的那种布局啊,定位啊,字体啊,边框啊,背景啊等样式,还可以给他绑定相应的事件啊,通用事件和组件相关的一些独有事件。这些都可以做的。那么具体操作后续我们会详细研究啊,如果你要看别的地方,你只要点击你想要看的地方,那么右手边就会对应成相应的这个页面,想看组件就点击这个组件,诶,就会来到这个主机的这个密码了。好,那么这里呢,就是咱们功能区域的介介绍啊,再说一遍。呃,上面呢是一个导航对吧,整个导航呢,这个按钮是打开显示的按钮,这一块缩放呢,是被中间内容显示的一个缩放,然后撤销和恢复,右边呢是左边这个按钮是显示展开和隐藏这个左侧导航,那么右边是展开和隐藏右侧导航。
07:07
OK,然后回到这里呢,左中右啊,左边的话呢,又分为上和下两个结构,上面呢就是我们所有能用的组件,分别为UI组件,高级组件和系统组件,那么下面这块呢,就是我们整个的大概数了。我们写的这个页面结构都会在大纲数中能够看到,你看现在里面就有个按钮在大概数中都能看到,然后呢,我们可以能快速折叠,快速展开这个大战树,这个就是快速折叠快速展开,以及大樟树整体的一个折叠展开。那么右手边就是当你选中组件,或者是点击空白去选中这个页面,对页面的样式,对页面的事件啊,对它的属性做一些调整。那么后续我们回答详细来看啊。好了,这个呢,就是咱们整个可视化编辑工具,它的一些功能介绍,那么下节我们再研究它的一些具体细节。
我来说两句