flex绝对定位_Flex 3文章的绝对初学者教程

最新推荐文章于 2024-03-06 22:11:32 发布

culh2177

最新推荐文章于 2024-03-06 22:11:32 发布

阅读量292

点赞数

文章标签： java python 编程语言 css html

原文链接：https://www.sitepoint.com/beginners-tutorial-flex-3-2/

版权

flex绝对定位

To run this simple page as a Flex application, we need to compile our MXML code using the Flex SDK. The result is shown below:

要将这个简单页面作为Flex应用程序运行，我们需要使用Flex SDK编译我们的MXML代码。结果如下所示：

The first thing you’ll notice is that MXML is an XML format. To indicate to the Flex compiler that we’re defining an application, we use the <mx:Application/> element, in the same way we use the <html></html> tags to define a web page. We can then add other elements within the <mx:Application/> tag. In the above example, we’ve added a <mx:Button/> tag to create a button, just as we’d use an <input type="button" /> tag in a web page form.

您会注意到的第一件事是MXML是XML格式。为了向Flex编译器指示我们正在定义应用程序，我们使用<mx:Application/>元素，就像使用<html></html>标记来定义网页一样。然后，我们可以在<mx:Application/>标记内添加其他元素。在上面的示例中，我们添加了<mx:Button/>标记来创建按钮，就像在网页表单中使用<input type="button" />标记一样。

As you can see, this is all very similar to constructing a traditional web page, and the framework provides you with everything you might use in XHTML (buttons, lists, etc.) and more. All you have to learn is the properties, methods and the names of the components in the framework, all of which are available from the Adobe Flex 3 language reference.

如您所见，这都与构建传统的网页非常相似，并且该框架为您提供了XHTML中可能使用的所有内容(按钮，列表等)以及更多内容。您只需了解框架中组件的属性，方法和名称，即可从Adobe Flex 3语言参考中获得所有这些信息。

GA_googleFillSlot(“Articles_6_300x250”);

GA_googleFillSlot(“ Articles_6_300x250”);

Of course, the Flex framework doesn’t just consist of user interface components; it also contains actions that your application can utilise. For instance, there’s a component called HTTPRequest, which your application can use to send and receive data from a server-side service (PHP, ASP.NET, etc.). When you run your application, you don’t actually see the HTTPRequest, as it works in the background.

当然，Flex框架不仅包含用户界面组件，还包含其他组件。它还包含您的应用程序可以利用的操作。例如，有一个名为HTTPRequest的组件，您的应用程序可以使用该组件从服务器端服务(PHP，ASP.NET等)发送和接收数据。运行应用程序时，实际上看不到HTTPRequest，因为它在后台运行。

All these components have been bundled together by Adobe to form the Flex framework, so you don’t have to create them from scratch.

Adobe已将所有这些组件捆绑在一起以形成Flex框架，因此您不必从头开始创建它们。

Eventually, as you become more experienced with Flex, you’ll want to create your own components that you’ll use over and over. After a while, you’ll have created a little library of your own that extends the Flex core framework to meet your individual needs.

最终，随着对Flex的使用经验越来越丰富，您将需要创建自己的组件，并一再使用。一段时间后，您将创建一个自己的小库，该库可以扩展Flex核心框架以满足您的个人需求。

我需要什么入门？ (What Do I Need to Get Started?)

With the open sourcing of Flex 3, it’s never been easier to begin building RIAs. To get started, you can use one of two options:

借助Flex 3的开源，开始构建RIA从未如此简单。首先，您可以使用以下两个选项之一：

The tool of choice for most serious Flex developers is Adobe Flex Builder 3, the official Flex IDE from Adobe. Flex Builder is also available as a professional version, which includes a Flex charting component. Flex Builder 3 retails for around US$376.00, and the professional version sells for around US$900.00.
最重要的Flex开发人员选择的工具是Adobe Flex Builder 3 ，这是Adobe的官方Flex IDE。 Flex Builder也可以作为专业版本使用，其中包括Flex图表组件。 Flex Builder 3的零售价约为376.00美元，专业版的零售价约为900.00美元。
You’ll also need your own programming editor, combined with the Flex 3 SDK, which is free. Yes: free as in beer.
您还需要自己的编程编辑器，以及免费的Flex 3 SDK 。是的：与啤酒一样免费。

Installing Flex Builder 3 is quite straightforward, as it comes with a user-friendly installer.

安装Flex Builder 3非常简单，因为它带有用户友好的安装程序。

The Flex SDK, on the other hand, is a little trickier. To install the Flex SDK, download the zip file and extract it to a folder of your choice. The trick is that that folder should be in your path (meaning you should be able to execute files in that folder from the command prompt, regardless of your current location).

另一方面，Flex SDK有点棘手。要安装Flex SDK，请下载zip文件并将其解压缩到您选择的文件夹中。诀窍是该文件夹应位于您的路径中(这意味着您应该能够从命令提示符处执行该文件夹中的文件，而不管当前位置如何)。

If you’re planning on taking your Flex development seriously, I recommend you go ahead and purchase the Flex Builder 3 IDE. Flex Builder is based on the open-source Eclipse editor, which alone is an extremely powerful IDE. If you want to try before you buy, Flex Builder 3 is available for a 30-day trial. While it’s great that the Flex 3 SDK is free, the benefits that Flex Builder 3 provides for Flex development over a standard text editor are many.

如果您打算认真对待Flex开发，建议您继续购买Flex Builder 3 IDE。 Flex Builder基于开源的Eclipse编辑器，仅此而已是一个功能非常强大的IDE。如果您想在购买前试用，则可以使用Flex Builder 3进行30天试用。 Flex 3 SDK是免费的，这很不错，但是Flex Builder 3通过标准文本编辑器为Flex开发提供了很多好处。

MXML很简单！ (MXML is Easy!)

Unlike other markup language acronyms, MXML doesn’t actually stand for anything specific. (Although some people, and I’m one of them, like to think that it should stand for Magic eXtensible Markup Language.)

与其他标记语言的首字母缩写不同，MXML实际上并不代表任何特定的东西。 (尽管有些人(我是其中的一员)喜欢认为它应该代表魔术可扩展标记语言。)

Macromedia created MXML in March 2004 before the organization was acquired by Adobe. MXML is primarily used to lay out a Flex application. Being a dialect of XML, standard validity rules apply: tags must be closed, and all the other XML rules apply.

在Adobe收购该组织之前，Macromedia于2004年3月创建了MXML。 MXML主要用于布置Flex应用程序。作为XML的方言，适用标准的有效性规则：必须关闭标签，而所有其他XML规则均适用。

Every component in MXML follows the same pattern:

MXML中的每个组件都遵循相同的模式：

You declare a namespace that tells Flex where to find a particular component.
您声明一个名称空间，该名称空间告诉Flex在哪里可以找到特定的组件。
You declare the component class you wish to use (e.g. Button) from that namespace.
您可以从该命名空间中声明要使用的组件类(例如Button)。
You modify the available properties and methods using attributes, as illustrated below.
您可以使用属性修改可用的属性和方法，如下所示。

Because they’re defined in the class structure of the component, the properties and methods that can be used from within each component vary.

由于它们是在组件的类结构中定义的，因此可以在每个组件内部使用的属性和方法会有所不同。

You style the visual components of your application with Flex Cascading Style Sheets. These styles can be added in the same location as the properties and methods of a component, but discussing Flex Cascading Style Sheets is beyond the scope of this article.

您可以使用Flex级联样式表为应用程序的视觉组件设置样式。可以在组件的属性和方法的相同位置添加这些样式，但是讨论“ Flex级联样式表”不在本文的讨论范围之内。

MXML components can have child elements (just like XML). For instance, a container element such as Canvas can have child elements like a Button or a Label. The code below demonstrates this point:

MXML组件可以具有子元素(就像XML)。例如，诸如Canvas之类的容器元素可以具有诸如Button或Label之类的子元素。下面的代码演示了这一点：

<mx:Canvas x="53" y="64" width="192" height="94"  
      cornerRadius="20" borderStyle="solid"  
      backgroundColor="#A9A9A9" id="mainCanvas">  
    
    <mx:Button x="10" y="10" id="newButton"  
        label="This is a button"/>  
           
    <mx:Label x="10" y="57" id="newLabel"  
        text="This is a label"/>  
  </mx:Canvas>

If you compile and run this code, you’d see this web page:

如果编译并运行此代码，则会看到以下网页：

By combining layout containers, such as Canvas, with other components, such as buttons and lists, it’s possible to create great application designs in no time at all.

通过将诸如Canvas之类的布局容器与诸如按钮和列表之类的其他组件结合起来，可以立即创建出色的应用程序设计。

Go to page: 转到页面： 1 | 1 | 2 | 2 | 3 3