创建一些简单的Flex接口元素

2023-07-03 21:50:03 61

在上一篇有关在Windows上安装Flex的博客文章之后，我想我将讲解如何使用mxml创建接口。创建Flex3项目时，第一个文件名为Main.mxml，其内容如下。

该文件用于编译和运行Flex项目，并且是其余所有编译过程的中心起点。该文件控制程序的界面。最初，此文件可能看起来令人生畏，但是有很多元素可供选择，如果您知道CSS，那么您应该对元素的着色，填充和定位有所了解。

编译应用程序时，它将在名为bin的文件夹中创建一个swf文件。您可以从FlashDevelop编译并运行此文件，但如果只想对其进行编译，则可以导航到该文件夹并单独运行swf文件。

现在，我将介绍您创建一个简单的界面可能需要的一些元素。最好在开始编写代码之前就习惯应用程序的外观和风格，因此本文将着重于简单的界面设计，后续的文章将介绍实际的操作。

应用

application元素必须是您的mxml文档的根元素。它基本上是应用程序所有其他元素的容器。

按钮

该按钮的确切含义是，它只是向您的界面添加了一个按钮。下面将创建一个名为“abutton”的按钮，其文本为“Abutton”，但没有任何作用。

这将创建以下元素。

图像

再次，image元素就是听起来像的样子，它将图像添加到您的应用程序中。这是语法。

这将产生带有简单渐变图像的以下输出。

但是，要注意的一件事是，映像的源是相对于bin目录中swf文件的路径的。请记住，如果您移动swf文件，则需要将这些文件与之一起移动。这花了我一段时间才能弄清楚。

控制板

panel元素用于包含其他元素并在界面中创建部分。这是一个布局容器的示例，如果您要创建左右面板，每个面板中都有不同的元素，则该容器很有用。

下面的示例创建一个单独的面板，即应用程序窗口的整个宽度，其中包含本文之前已讨论过的标签，按钮和图像元素。

这将产生以下输出。

panel元素带有一组精美的边框和header元素，如果您想摆脱这些边框，请为面板使用以下属性。

像前面的示例一样，添加了其他元素之后，该面板现在看起来像这样。

帆布

canvas元素类似于panel元素，它允许您向其添加其他元素，并且它是一个布局容器。主要区别出现在渲染元素时。panel元素将阻止子元素重叠，而canvas元素无关紧要，并且将重叠元素，除非您指定x和y坐标。以下示例显示了一个canvas元素，其中包含一个图像和一个按钮，两者均位于绝对位置。

这将产生以下输出。

垫片

间隔元件用于在两个元件之间提供一定的空间。它是一个空白元素，不应包含任何子元素，而应仅用于在元素之间添加填充。它具有以下语法，在这种情况下，分隔符将创建一个10像素高的空间。

还有许多其他元素可供选择，这只是对一些简单元素的非常简要的概述。如果您想了解更多信息，请查阅Flex3API文档，其中包含有关此处讨论的所有元素的更多信息，以及此处未涵盖的更多信息。但是，应该注意的是，API中讨论的并不是所有的东西都是接口元素。诸如Date对象之类的东西仅仅是为了提供日期函数的包装并构成应用程序脚本的一部分而存在，我将在下一篇文章中对此进行介绍。

创建一些简单的Flex接口元素

应用

标签

按钮

图像

控制板

帆布

垫片

热门推荐

随机推荐