[教学]如何利用Flex设计表单?

2020-05-22

当Flex的专案建立完成后,接着就要进行Flex的程式设计。当然要设计Flex程式,首先要了解Flex软体介面的各项功能,不然怎幺写程式都不知道。接下来会简单的和大家介绍Flex该怎幺使用,如何利用Flex拉出表单,简单的介面设计等等,当然这篇文章仍是属于笔记类型,所以有些东西会跳过或是稍略介绍。

因为学校作业要利用Flex写出「查课系统」,而查课系统介面就是表单设计,所以第一步我们要先利用Flex拉出表单来,然后将整个外观处理好,之后若要传值,有机会的话会再介绍给大家,如果急需的话,就要上网搜寻一下Flex教学了,或是看看梅干的教学。

若抛开程式码撰写部分,其实Flex的介面使用上和Dreamweaver很像,一些介面的东西都是拖曳就可以完成,所以难度不是很高,比较有问题的会发生在物件该哪一项包住哪一项,排版定位很容易跑位,不然基础的操作部分并不困难。

在设计表单之前,首先要了解哪个东西要包住哪个东西。整个Flex专案里,首先你要先拉出一个「Panel」元件当作底,接下来所有东西都在上面处理。再来要拉表单「Form」到Panel里,接着表单(Form)里面要再拉「Grid」,这个用途是为了表单内的小项要排版,透过表格(Grid)来切割方便排版,然后每个表格(Grid)里面就是摆放表单内各小项,像是下拉式选单(ComboBox)、文字输入区块(TextInput)等等,最后把按钮(Button)摆在表格外面表单里面,这样才能完成一个简单的表单。您可以参照以下示意图来帮助了解。

[教学]如何利用Flex设计表单?

第1步 当你先前的专案建立好后,在Flex程式的主画面中,首先要先拉一个「Panel」,您可以在左下角的【Components】中的找到「Panel」然后拖曳到编辑区,就会产生一个Panel,您可以在右下角调整Panel大小、对齐格式,当然您也可以点击左上角的绿色按钮或是「Ctrl+F11」产生预览来查看结果。

[教学]如何利用Flex设计表单?

第2步 如果你有按下左上角的绿色按钮或是Ctrl+F11,这时候Flex就会开始编译程式码产生结果,当然第一次编译会比较慢,出现以下画面时请不用担心,等待画面处理完成后,就会跳出浏览器并秀出您製作的结果了。

[教学]如何利用Flex设计表单?

第3步 当处理完「Panel」后,接着请在右下角找到「Form」,然后拖曳到Panel上面,Panel要包住Form,一样,在右下角也可以调整Form的大小与对齐格式。

[教学]如何利用Flex设计表单?

第4步 再来请在左方中找到「Grid」然后拖曳到编辑画面中,这时会跳出表格的格数设定,在Row中输入「5」,在Column中输入「2」然后点击﹝OK﹞,建立Grid就是为了帮助排版。

[教学]如何利用Flex设计表单?

第5步 当Grid建立好后,可能大小不是您需要的,您可以透过又下角的部分来设定表格大小或是将滑鼠移到表格的右下角,透过拖曳来调整大小,当调整完成后建议按一下「Crrl+F11」来预览看看是不是版面正确,若不正确再调整看看,再按一次预览来检查。

[教学]如何利用Flex设计表单?

第6步 当Grid处理完后,接着我们可以开始拉表格内要放置的东西,首先我们要拉的是下拉式选单(ComboBox),请在左下角找到「ComboBox」然后拖曳到表格之外。

[教学]如何利用Flex设计表单?

第7步 接着再点选你刚拖曳的物件,记得点选时要连同下拉式选单旁的Lable字样也要包在线内,然后拖曳到你要放置的表格位置,这样就可以了,如果你有很多个下拉式选单(ComboBox)要产生,请重複本步骤与上一步骤,将下拉式选单处理完。

[教学]如何利用Flex设计表单?

第8步 当处理完下拉式选单后,接着可能需要单行的文字输入区块,所以请找到左下角的「TextInput」,然后拉到表格之外。

[教学]如何利用Flex设计表单?

第9步 接着再点选你刚拖曳的「TextIput」物件,记得点选时要连同下拉式选单旁的Lable字样也要包在线内,然后拖曳到你要放置的表格位置,一样,若有多个文字栏位要放置,请重複本步骤与上一步骤,完成单行文字区块的物件新增。

[教学]如何利用Flex设计表单?

第10步 当您的下拉式选单与单行文字输入区块都拖曳完成后,相信这时您应该看到一大堆「Lable」字样,您可以点击两下「Lable」字样,然后进行编辑,如果不需要则把Lable删除即可。

[教学]如何利用Flex设计表单?

第11步 当前面的部分都处理完成后,您可以先点击「Ctrl+F11」来看看呈现的结果,若确定版面都可以后,最后我们在左下角找到「Button」然后拖曳到画面的表格以框、表单以内,如果有出现Lable,可以将它删除。

[教学]如何利用Flex设计表单?

第12步 当表单整个都完成后,也确定面板都显示正确,接着我们要来加入下拉式选单中的值,所以请先点击任一个下拉选单(ComboBox),然后在点击编辑区的左上方的「Source」切换到原始码编辑画面。

[教学]如何利用Flex设计表单?

第13步 接着请在下方加入以下语法,语法中的「data=”数字”」应该是选单的序列,而「lable=”变数”」则是选单的显示的名称,因为网路上好像没又详细解释这部分的资料,若有说错,麻烦指正一下,谢谢。

[教学]如何利用Flex设计表单?

第14步 接着在切回「Design」部分,你就会看到下拉式选单就会出现一个「0」,这就表示设定成功,若您有其他下拉式选单,请按照本步骤与上一步骤处理,完成后建议按一下「Ctrl+F11」查看,看看效果有没有出现,如果都出现了就表示设定正确啰!

[教学]如何利用Flex设计表单?

基本上,经过以上操作已经把基本的介面都处理好了,这时候有些人可能以为完成了,就会想要点按钮试试看,不过因为我们没有加入Script,所以点了并不会有反应的,做完的东西记得储存档案,忘记储存就要重做一次,那是很累人的唷!

上一篇: 下一篇:

相关新闻

推荐阅读