上一篇结合Struts2实现了分页的自定义标签。标签比较简单，3个参数，单一的显示样式。下面对该标签的功能进行进一步的扩充，主要包括：

1.可以为标签指定样式。通过styleClass属性，可以为标签指定一个样式表。

2.增加了分页样式的选择。通过theme属性指定分页样式。

theme="text"的样式：

theme="number"的样式：

修改方案：

1.在tld文件中增加这两个属性的声明：

<attribute>
                <name>styleClass</name>
                <required>false</required>
                <rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
                <name>theme</name>
                <required>false</required>
                <rtexprvalue>true</rtexprvalue>
</attribute>

 2.在自定义标签类中分别增加styleClass和theme属性，并提供setter方法：

   PageTag.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package com.tangs.tag;

import com.opensymphony.xwork2.util.ValueStack;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.components.Component;
import org.apache.struts2.views.jsp.ComponentTagSupport;

/**
 * 分页标签
 * @author tangs
 */
public class PageTag extends ComponentTagSupport {
    private String cpage;
    private String total;
    private String url;
    private String styleClass;   //新增的样式属性
    private String theme;   //新增的分页样式属性
    
    public void setTheme(String theme) {
        this.theme = theme;
    }
    
    public void setStyleClass(String styleClass) {
        this.styleClass = styleClass;
    }

    public void setCpage(String cpage) {
        this.cpage = cpage;
    }

    public void setTotal(String total) {
        this.total = total;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    @Override
    public Component getBean(ValueStack arg0, HttpServletRequest arg1, HttpServletResponse arg2) {
        return new Pages(arg0, arg1);
    }

    protected void populateParams() {
        super.populateParams();
        
        Pages pages = (Pages)component;
        pages.setCpage(cpage);
        pages.setTotal(total);
        pages.setUrl(url);
        pages.setStyleClass(styleClass);
        pages.setTheme(theme);

    }
}

   Pages.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package com.tangs.tag;

import com.opensymphony.xwork2.util.ValueStack;
import java.io.IOException;
import java.io.Writer;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.components.Component;

/**
 * 分页逻辑Bean
 * @author tangs
 */
public class Pages extends Component {
    private HttpServletRequest request;
    private String cpage;
    private String total;
    private String url;
    private String styleClass;
    private String theme;
    
    public String getTheme() {
        return theme;
    }

    public void setTheme(String theme) {
        this.theme = theme;
    }
    
    
    public String getStyleClass() {
        return styleClass;
    }

    public void setStyleClass(String styleClass) {
        this.styleClass = styleClass;
    }

    
    public String getCpage() {
        return cpage;
    }

    public void setCpage(String cpage) {
        this.cpage = cpage;
    }

    public String getTotal() {
        return total;
    }

    public void setTotal(String total) {
        this.total = total;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
    
    
    public Pages(ValueStack arg0, HttpServletRequest request) {
        super(arg0);
        this.request = request;
    }

    @Override
    public boolean start(Writer writer) {
        boolean result = super.start(writer);
        try {
            StringBuilder str = new StringBuilder();
            boolean isValid = true;
            
            //从ValueStack中取出数值
            if (isValid) {
                if (total.startsWith("%{") && total.endsWith("}")) {
                    total = total.substring(2, total.length() -1);
                    total = (String)this.getStack().findValue(total);
                    isValid = total == null ? false : true;
                } else {
                    isValid = false;
                }
            }
            if (isValid) {
                if (cpage.startsWith("%{") && cpage.endsWith("}")) {
                    cpage = cpage.substring(2, cpage.length() - 1);
                    cpage = (String)this.getStack().findValue(cpage);
                    isValid = cpage == null ? false : true;
                } else {
                    isValid = false;
                }
            }
            if (isValid) {
                if (url.startsWith("%{") && url.endsWith("}")) {
                    url = url.substring(2, url.length() - 1);
                    url = (String)this.getStack().findValue(url);
                    isValid = url == null ? false : true;
                } else {
                    isValid = false;
                }
            }

            if (isValid) {
                Integer cpageInt = Integer.valueOf(cpage);
                str.append("<span ");
                if (styleClass != null) {
                    str.append(" class='"+styleClass+"'>");
                } else {
                    str.append(">");
                }
                
                //文本样式
                if (theme == null || "text".equals(theme)) {  //theme="text"样式
                    //当前页与总页数相等
                    if (cpage.equals(total)) {
                        //如果total = 1，则无需分页，显示“[第1页] [共1页]”
                        if ("1".equals(total)) {
                            str.append("[第 " + cpage + " 页]");
                            str.append(" [共 " + total + " 页]");
                        } else {
                            //到达最后一页,显示“[首页] [上一页] [末页]”
                            str.append("<a href='");
                            str.append(url);
                            str.append("?cpage=1&total="+total+"&url="+url);
                            str.append("'>[首页]</a> <a href='");
                            str.append(url);
                            str.append("?cpage=" + (cpageInt - 1) + "&total=" + total+"&url="+url);
                            str.append("'>[上一页]</a> <a href='");
                            str.append(url);
                            str.append("?cpage=" + total + "&total=" + total+"&url="+url);
                            str.append("'>[末页]</a>");
                        }
                    } else {
                        //当前页与总页数不相同
                        if ("1".equals(cpage)) {
                            //第一页，显示“[首页] [下一页] [末页]”
                            str.append("<a href='");
                            str.append(url);
                            str.append("?cpage=1&total="+total+"&url="+url);
                            str.append("'>[首页]</a> <a href='");
                            str.append(url);
                            str.append("?cpage=" + (cpageInt + 1) + "&total=" + total+"&url="+url);
                            str.append("'>[下一页]</a> <a href='");
                            str.append(url);
                            str.append("?cpage=" + total + "&total=" + total+"&url="+url);
                            str.append("'>[末页]</a>");
                        } else {
                            //不是第一页，显示“[首页] [上一页] [下一页] [末页]”
                            str.append("<a href='");
                            str.append(url);
                            str.append("?cpage=1&total="+total+"&url="+url);
                            str.append("'>[首页]</a> <a href='");
                            str.append(url);
                            str.append("?cpage=" + (cpageInt - 1) + "&total=" + total+"&url="+url);
                            str.append("'>[上一页]</a> <a href='");
                            str.append(url);
                            str.append("?cpage=" + (cpageInt + 1) + "&total=" + total+"&url="+url);
                            str.append("'>[下一页]</a> <a href='");
                            str.append(url);
                            str.append("?cpage=" + total + "&total=" + total+"&url="+url);
                            str.append("'>[末页]</a>");
                        }
                    }
                } else if ("number".equals(theme)) {  //theme="number"的数字样式 [1 2 3 4 5 6 7 8 9 10 > >>]
                    Integer totalInt = Integer.valueOf(total);
                   
                    //如果只有一页，则无需分页
                    str.append("[ ");
                    if (totalInt == 1) {
                        str.append("<strong>1</strong> ");
                    } else {
                        //计算一共分几组
                        int group = (totalInt - 1) / 10 + 1;
                        //当前第几组
                        int cgroup = (cpageInt - 1) / 10 + 1;
                        
                        if (cgroup > 1) {
                            //当前不是第一组，要显示“<< <”
                            //<<：返回前一组第一页
                            //<：返回前一页
                            str.append("<a href='");
                            str.append(url);
                            str.append("?cpage=" + ((cgroup - 2) * 10 + 1 ) + "&total=" + total+"&url="+url);
                            str.append("'>«</a> " );
                            str.append("<a href='");
                            str.append(url);
                            str.append("?cpage=" + (cpageInt - 1) + "&total=" + total+"&url="+url);
                            str.append("'>‹</a> " );
                        }
                        //10个为一组显示
                        for (int i = (cgroup - 1) * 10 + 1; i <= totalInt && i <= cgroup * 10; i++) {
                            if (cpageInt == i) { //当前页要加粗显示
                                str.append("<strong>");  
                            }
                            str.append("<a href='");
                            str.append(url);
                            str.append("?cpage=" + i + "&total=" + total+"&url="+url);
                            str.append("'>" + i + "</a> ");
                            if (cpageInt == i) {
                                str.append("</strong>");
                            }
                        }
                        //如果多于1组并且不是最后一组，显示“> >>”
                        if (group > 1&& cgroup != group) {
                            //>>：返回下一组最后一页
                            //>：返回下一页
                            str.append("<a href='");
                            str.append(url);
                            str.append("?cpage=" + (cpageInt + 1) + "&total=" + total+"&url="+url);
                            str.append("'>›</a> " );
                            str.append("<a href='");
                            str.append(url);
                            str.append("?cpage=" + ((cgroup * 10 + 10) > totalInt ? totalInt : (cgroup * 10 + 10)) + "&total=" + total+"&url="+url);
                            str.append("'>»</a> " );
                        }
                    }
                    str.append("]");
                }
                str.append("</span>");
            }
         
            writer.write(str.toString());
            
        } catch (IOException ex) {
            Logger.getLogger(Pages.class.getName()).log(Level.SEVERE, null, ex);
        }
        return result;
    }
}

 3.在页面中使用标签

<tangs:pages cpage="%{cpage}" total="%{total}" url="%{url}" styleClass="page" theme="number"/>

 指定了styleClass和theme属性，得到的分页样式：

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

    Struts2中实现自定义标签很简单，主要分为3步：

    1.创建taglib文件(.tld)，编写标签声明。

    2.编写自定义标签类。

    3.在页面中使用标签。

    下面以一个自定义的分页标签为例，进行说明。

    其实，开发自定义标签并不需要Struts2的支持，一般情况下，只需要继承javax.servlet.jsp.tagext.BodyTagSupport类，重写doStartTag，doEndTag等方法即可。这里在实现自定义标签时，继承的2个类分别是org.apache.struts2.views.jsp.ComponentTagSupport和org.apache.struts2.components.Component，ComponentTagSupport实际上是对BodyTagSupport的一次封装，看一下ComponentTagSupport类的继承关系就明了了：

java.lang.Object
  extended by javax.servlet.jsp.tagext.TagSupport
      extended by javax.servlet.jsp.tagext.BodyTagSupport
          extended by org.apache.struts2.views.jsp.StrutsBodyTagSupport
              extended by org.apache.struts2.views.jsp.ComponentTagSupport

 继承ComponentTagSupport类是为了获得标签中的属性值，并包装成Component对象。继承Component类是为了从Struts2中的ValueStack中获得相对应的值。

1.声明自定义标签。

首先，需要创建一个tld文件，这是一个标准的XML文件，这个文件中就包含有对自定义标签的声明，声明指出了标签的名字，实现标签的类，标签的属性等信息。当在页面中使用该标签时，web服务器就会从这个文件中找出相对应的标签类，并实例化后执行。这个文件其实与struts.xml文件的作用相类似。

tangs.tld

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<taglib>
	<tlib-version>2.2.3</tlib-version>
	<jsp-version>1.2</jsp-version>
	<short-name>tangs</short-name>
	<uri>/tangs</uri>
	<display-name>"Tangs Tags"</display-name>
	
        <tag>
            <name>pages</name>
            <tag-class>com.tangs.tag.PageTag</tag-class>   //标签类
            <body-content>empty</body-content>
            <attribute>   //标签中的属性
                <name>cpage</name>  //属性名
                <required>true</required>  //是否必须
                <rtexprvalue>true</rtexprvalue>  //表示该自定义标签的某属性的值可以直接指定或者通过动态计算指定
            </attribute>
            <attribute>
                <name>total</name>
                <required>true</required>
                <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                <name>url</name>
                <required>true</required>
                <rtexprvalue>true</rtexprvalue>
            </attribute>
        </tag>
</taglib>

 2.编写标签类

PageTag.java

package com.tangs.tag;

import com.opensymphony.xwork2.util.ValueStack;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.components.Component;
import org.apache.struts2.views.jsp.ComponentTagSupport;

/**
 * 分页标签
 * @author tangs
 */
public class PageTag extends ComponentTagSupport {
    private String cpage;  //当前页
    private String total;  //总页数
    private String url;  //请求地址

    public void setCpage(String cpage) {
        this.cpage = cpage;
    }

    public void setTotal(String total) {
        this.total = total;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    @Override
    public Component getBean(ValueStack arg0, HttpServletRequest arg1, HttpServletResponse arg2) {
        return new Pages(arg0); //返回Pages Component，分页的逻辑处理都在这个Component中
    }

    //获得参数
    protected void populateParams() {
        super.populateParams();
        
        Pages pages = (Pages)component;
        pages.setCpage(cpage);
        pages.setTotal(total);
        pages.setUrl(url);
    }
}

    Pages.java

package com.tangs.tag;

import com.opensymphony.xwork2.util.ValueStack;
import java.io.IOException;
import java.io.Writer;
import java.util.logging.Level;
import java.util.logging.Logger;
import org.apache.struts2.components.Component;

/**
 * 分页逻辑Bean
 * @author tangs
 */
public class Pages extends Component {
    private String cpage;
    private String total;
    private String url;

    public String getCpage() {
        return cpage;
    }

    public void setCpage(String cpage) {
        this.cpage = cpage;
    }

    public String getTotal() {
        return total;
    }

    public void setTotal(String total) {
        this.total = total;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
    
    
    public Pages(ValueStack arg0) {
        super(arg0);
    }

    @Override
    public boolean start(Writer writer) {
        boolean result = super.start(writer);
        try {
            StringBuilder str = new StringBuilder();
            boolean isValid = true;
            
            //从ValueStack中取出数值
            if (isValid) {
                if (total.startsWith("%{") && total.endsWith("}")) {
                    total = total.substring(2, total.length() -1);
                    total = (String)this.getStack().findValue(total);
                    isValid = total == null ? false : true;
                } else {
                    isValid = false;
                }
            }
            if (isValid) {
                if (cpage.startsWith("%{") && cpage.endsWith("}")) {
                    cpage = cpage.substring(2, cpage.length() - 1);
                    cpage = (String)this.getStack().findValue(cpage);
                    isValid = cpage == null ? false : true;
                } else {
                    isValid = false;
                }
            }
            if (isValid) {
                if (url.startsWith("%{") && url.endsWith("}")) {
                    url = url.substring(2, url.length() - 1);
                    url = (String)this.getStack().findValue(url);
                    isValid = url == null ? false : true;
                } else {
                    isValid = false;
                }
            }

            if (isValid) {
                Integer cpageInt = Integer.valueOf(cpage);
                //当前页与总页数相等
                if (cpage.equals(total)) {
                    //如果total = 1，则无需分页，显示“[第1页] [共1页]”
                    if ("1".equals(total)) {
                        str.append("[第 " + cpage + " 页]");
                        str.append(" [共 " + total + " 页]");
                    } else {
                        //到达最后一页,显示“[首页] [上一页] [末页]”
                        str.append("<a href='");
                        str.append(url);
                        str.append("?cpage=1&total="+total+"&url="+url);
                        str.append("'>[首页]</a> <a href='");
                        str.append(url);
                        str.append("?cpage=" + (cpageInt - 1) + "&total=" + total+"&url="+url);
                        str.append("'>[上一页]</a> <a href='");
                        str.append(url);
                        str.append("?cpage=" + total + "&total=" + total+"&url="+url);
                        str.append("'>[末页]</a>");
                    }
                } else {
                    //当前页与总页数不相同
                    if ("1".equals(cpage)) {
                        //第一页，显示“[首页] [下一页] [末页]”
                        str.append("<a href='");
                        str.append(url);
                        str.append("?cpage=1&total="+total+"&url="+url);
                        str.append("'>[首页]</a> <a href='");
                        str.append(url);
                        str.append("?cpage=" + (cpageInt + 1) + "&total=" + total+"&url="+url);
                        str.append("'>[下一页]</a> <a href='");
                        str.append(url);
                        str.append("?cpage=" + total + "&total=" + total+"&url="+url);
                        str.append("'>[末页]</a>");
                    } else {
                        //不是第一页，显示“[首页] [上一页] [下一页] [末页]”
                        str.append("<a href='");
                        str.append(url);
                        str.append("?cpage=1&total="+total+"&url="+url);
                        str.append("'>[首页]</a> <a href='");
                        str.append(url);
                        str.append("?cpage=" + (cpageInt - 1) + "&total=" + total+"&url="+url);
                        str.append("'>[上一页]</a> <a href='");
                        str.append(url);
                        str.append("?cpage=" + (cpageInt + 1) + "&total=" + total+"&url="+url);
                        str.append("'>[下一页]</a> <a href='");
                        str.append(url);
                        str.append("?cpage=" + total + "&total=" + total+"&url="+url);
                        str.append("'>[末页]</a>");
                    }
                }
            }
           
            writer.write(str.toString());
            
        } catch (IOException ex) {
            Logger.getLogger(Pages.class.getName()).log(Level.SEVERE, null, ex);
        }
        return result;
    }
}

3.服务端

服务端主要是获得请求然后转向显示的页面

DisplayAction.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package com.tangs.action;

import com.opensymphony.xwork2.ActionSupport;

/**
 *
 * @author tangs
 */
public class DisplayAction extends ActionSupport {
    private String cpage;
    private String total;
    private String url;

    public String list() {
        
        //Get data from server
        //...
        //这里没有做任何逻辑，直接跳转到了页面
        return SUCCESS;
    }
    public String getCpage() {
        return cpage;
    }

    public void setCpage(String cpage) {
        this.cpage = cpage;
    }

    public String getTotal() {
        return total;
    }

    public void setTotal(String total) {
        this.total = total;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
    
    
}

  struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd" >
<struts>
	<package name="tagTest" extends="struts-default">
                <action name="list" class="com.tangs.action.DisplayAction">
                    <result name="success">/list.jsp</result>
                </action>
	</package>
</struts>

4.在页面中使用标签

list.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="tangs" uri="/WEB-INF/tangs.tld"%>
<%@ taglib prefix="s" uri="/WEB-INF/struts-tags.tld"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>List</title>
    </head>
    <body>
        共 <s:property value="total"/> 页 第 <s:property value="cpage"/> 页<br>
        <tangs:pages cpage="%{cpage}" total="%{total}" url="%{url}"/>
    </body>
</html>

好了，启动服务器，从浏览器中输入http://localhost:7001/TagTest/list.page?cpage=1&total=5&url=list.page

就会得到下面的结果：

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

Basic MXML syntax

 MXML基本语法

Most MXML tags correspond to ActionScript 3.0 classes or properties of classes. Flex parses MXML tags and compiles a SWF file that contains the corresponding ActionScript objects.

许多MXML标签其实就是ActionScript3.0的类或类的属性。Flex解析MXML标签并编译成一个包含ActionScript对象的SWF文件。

ActionScript 3.0 uses syntax based on the ECMAScript edition 4 draft language specification. ActionScript 3.0 includes the following features:

ActionScript3.0语法基于ECMActionScript edtion 4 草稿说明。

• Formal class definition syntax
• Formal packages structure
• Typing of variables, parameters, and return values (compile-time only)
• Implicit getters and setters that use the get and set keywords
• Inheritance
• Public and private members
• Static members
• Cast operator

Naming MXML files

MXML文件命名

MXML filenames must adhere to the following naming conventions:

MXML文件名必须遵守以下规定：

• Filenames must be valid ActionScript identifiers, which means they must start with a letter or underscore character (_), and they can only contain letters, numbers, and underscore characters after that.
• 文件名必须是合法的ActionScript标识符，也就是说，必须以字母或下划线开头，只能包含字符、数字和下划线。
• Filenames must not be the same as ActionScript class names, component id values, or the word application . Do not use filenames that match the names of MXML tags that are in the mx namespace.
• 文件名不能与ActionScript类名，组件id或应用程序名相同。不要用于mx命名空间中的MXML标签名做文件名。
• Filenames must end with a lowercase .mxml file extension.
• 文件名必须以小写.mxml扩展名结束

Using tags that represent ActionScript classes

用标签做ActionScript类

An MXML tag that corresponds to an ActionScript class uses the same naming conventions as the ActionScript class. Class names begin with a capital letter, and capital letters separate the words in class names. For example, when a tag corresponds to an ActionScript class, its properties correspond to the properties and events of that class.

一个MXML标签相对于一个以相同名称命名的ActionScript类。类名以一个大写字母开头，大写字母用来分隔单词。例如，当一个标签相对于一个ActionScript类时，它的属性就相当于那个类的属性或事件方法。

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

Developing applications

开发应用程序

MXML development is based on the same iterative process used for other types of web application files such as HTML, JavaServer Pages (JSP), Active Server Pages (ASP), and ColdFusion Markup Language (CFML). Developing a useful Flex application is as easy as opening your favorite text editor, typing some XML tags, saving the file, requesting the file's URL in a web browser, and then repeating the same process.

MXML开发与其他的Web应用开发相似，比如HTML，JavaServer Pages(JSP)，Active Service Pages(ASP)和ColdFunsion Markup Language (CFML)。开发一个Flex应用很简单，打开你的文本编辑器，输入一些XML标签，保存这个文件，然后将这个文件的URL放到浏览器上，就可以看到结果了。

Laying out a user interface using containers

通过容器设计用户接口

In the Flex model-view design pattern, user interface components represent the view. The MXML language supports two types of user interface components: controls and containers. Controls are form elements, such as buttons, text fields, and list boxes. Containers are rectangular regions of the screen that contain controls and other containers.

在Flex的模型-视图设计模式中，用户接口组件在视图中展示出来。MXML语言支持两种类型的用户接口组件：控制组件和容器组件。控制组件是一些表单元素，如butttons, text fileds和list boxes。容器是包含了控制组件和其他容器的一个矩形的区域。

You use container components for laying out a user interface, and for controlling user navigation through the application. Examples of layout containers include the HBox container for laying out child components horizontally, the VBox container for laying out child components vertically, and the Grid container for laying out child components in rows and columns. Examples of navigator containers include the TabNavigator container for creating tabbed panels, the Accordion navigator container for creating collapsible panels, and the ViewStack navigator container for laying out panels on top of each other.

你可以用容器组件去设计用户接口，在应用中控制用户的操作。比如说，布局容器包括HBox容器，它是用来将子组件水平摆放，VBox容器将子组件垂直摆放，Grid容器将子组件以行列的形式展示。导航容器的例子有TabNavigator容器，它用来创建Tab面板，Accordion容器用来创建可伸展的面板，ViewStack导航容器将面板相互叠加。

The Container class is the base class of all Flex container classes. Containers that extend the Container class add their own functionality for laying out child components. Typical properties of a container tag include id , width , and height .

Container类是所有Flex容器的基类。容器通过集成Container class，增加自己的功能，来实现子容器。典型的容器标签包括id,width和height。

The List control and TabNavigator container are laid out side by side because they are in an HBox container. The controls in the TabNavigator container are laid out from top to bottom because they are in a VBox container.

List标签容器与TabNavigator容器分别在各自的旁边，因为它们在一个HBox容器中。在TabNavigator中的容器是从上到下排列，因为它们在一个VBox容器中。

Adding user interface controls

添加用户控制接口

Flex includes a large selection of user interface components, such as Button , TextInput , and ComboBox controls. After you define the layout and navigation of your application by using container components, you add the user interface controls.

Flex包含了许多用户接口组件，比如Button,TextInput和ComboBox等。当你定义好了应用的界面布局并且通过容器组件来控制你的应用时，你就添加了用户控制接口。

The following example contains an HBox (horizontal box) container with two child controls, a TextInput control and a Button control. An HBox container lays out its children horizontally.

下面这例子是一个包含有两个子控制组件，一个TextInput，一个Button的HBox容器。HBox容器将它的子容器横向排放。

<?xml version="1.0"?>
<!-- mxml/AddUIControls.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private function storeZipInDatabase(s:String):void {
                // event handler code here
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:TextInput id="myText"/>
        <mx:Button click="storeZipInDatabase(myText.text)"/>
    </mx:HBox>

</mx:Application>

Typical properties of a control tag include id , width , height , fontSize , color , event listeners for events such as click and change , and effect triggers such as showEffect and rollOverEffect.
一个典型的控制标签包括id,width,height,fontSize,color,event listeners（如click和change），还有效果触发器，如showEffect何rollOverEffect等。

Using the id property with MXML tags

在MXML中使用id属性

With a few exceptions (see MXML tag rules ), an MXML tag has an optional id property, which must be unique within the MXML file. If a tag has an id property, you can reference the corresponding object in ActionScript.

除了很少一部分标签，一个MXML标签都有一个可选的id属性。这个id属性，在一个MXML文件中必须唯一。如果一个标签包含有id属性，那么，你可以在ActionScript中通过这个id去直接引用这标签对象。

In the following example, results from a web-service request are traced in the writeToLog function:

下面的例子中，一个通过web-service请求回来的数据通过writeToLog方法被记录下来：

<?xml version="1.0"?>
<!-- mxml/UseIDProperty.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:VBox>
        <mx:TextInput id="myText" text="Hello World!" />
        <mx:Button id="mybutton" label="Get Weather" click="writeToLog();"/>
    </mx:VBox>
    <mx:Script>
        <![CDATA[
            private function writeToLog():void          {
                trace(myText.text);
            }
        ]]>
    </mx:Script>
</mx:Application>

This code causes the MXML compiler to autogenerate a public variable named myText that contains a reference to that TextInput instance. This autogenerated variable lets you access the component instance in ActionScript. You can explicitly refer to the TextInput control's instance with its id instance reference in any ActionScript class or script block. By referring to a component's instance, you can modify its properties and call its methods.

这段代码会让MXML编译器生成一个名叫myText的公共的变量，这个变量指向了那个TextInput实例。这个自动生成的变量可以让你在ActionScript中访问它所指向的实例。你可以在ActionScript类或script块中通过这id直接操作那个TextInput实例。通过这个指向容器实例的引用，你可以修改它的属性调用它的方法。

Because each id value in an MXML file is unique, all objects in a file are part of the same flat namespace. You do not qualify an object by referencing its parent with dot notation, as in myVBox.myText.text.
由于一个MXML文件中每一个id都是唯一的，一个文件中的所有的对象都是同一个命名空间的一部分。因此，你不需要在引用一个对象时在前面指定它的父对象。

Using XML namespaces

使用XML命名空间

In an XML document, tags are associated with a namespace. XML namespaces let you refer to more than one set of XML tags in the same XML document. The xmlns property in an MXML tag specifies an XML namespace. To use the default namespace, specify no prefix. To use additional tags, specify a tag prefix and a namespace.

在一个XML文件中，标签是与命名空间相关联的。XML命名空间可以让你在同一个XML文件中引用更多的XML标签。在MXML标签中，xmlns属性指定了XML命名空间。如果要用默认的命名空间，不要加前缀。要用额外的标签，需要制定标签的前缀和命名空间。

For example, the xmlns property in the following <mx:Application> tag indicates that tags in the MXML namespace use the prefix mx: . The Universal Resource Identifier (URI) for the MXML namespace is http://www.adobe.com/2006/mxml.

例如，在下面的<mx:Application>标签中的xmlns属性指定了命名空间mx。这个MXML命名空间的URI是http://www.adobe.com/2006/mxml。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 XML namespaces give you the ability to use custom tags that are not in the MXML namespace. The following example shows an application that contains a custom tag called CustomBox. The namespace value containers.boxes.*

indicates that an MXML component called CustomBox is in the containers/boxes directory.

XML命名空间可以让你使用不在MXML命名空间的自定义的标签。下面这个例子展示了一个叫CustomBox的自定义标签。这个命名空间containers.boxes.*指定了一个叫CustomBox的组件在containers/boxes目录下。

<?xml version="1.0"?>
<!-- mxml/XMLNamespaces.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComps="containers.boxes.*"
>
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <MyComps:CustomBox/>
    </mx:Panel>
</mx:Application>

The containers/boxes directory can be a subdirectory of the directory that contains the application file, or it can be a subdirectory of one of the ActionScript source path directories assigned in the flex-config.xml file. If copies of the same file exist in both places, Flex uses the file in the application file directory. The prefix name is arbitrary, but it must be used as declared.

containers/boxes路径可以是一个包含应用文件路径的子路径，也可以是一个在flex-config.xml文件中指定的ActionScript源文件路径的子路径。如果在这两个路径下都包含这个文件，Flex使用的是应用程序文件路径。前缀名可以是任意的，但是用的时候必须和声明时的一样。

When using a component contained in a SWC file, the package name and the namespace must match, even though the SWC file is in the same directory as the MXML file that uses it. A SWC file is an archive file for Flex components. SWC files make it easy to exchange components among Flex developers. You exchange only a single file, rather than the MXML or ActionScript files and images, along with other resource files. Also, the SWF file inside a SWC file is compiled, which means that the code is obfuscated from casual view.

当使用了一个包含在SWC文件中的组件时，包名与命名空间必须相符，即使这个SWC文件与要使用它的MXML文件在同一路径下。SWC文件是一个Flex组件的存档文件。SWC文件使得组件在Flex开发者的相互使用中更加方便。你只需要用一个SWC文件，而不是MXML或ActionScript类，以及图片等其他资源文件进行交互。另外，SWC文件中的SWF文件经过了编译，也就是说在一般的视图下打开SWC文件，看到的将是乱码。

Using MXML to trigger run-time code

用MXML触发运行时代码

Flex applications are driven by run-time events, such as when a user selects a Button control. You can specify event listeners , which consist of code for handling run-time events, in the event properties of MXML tags. For example, the <mx:Button> tag has a click event property in which you can specify ActionScript code that executes when the Button control is clicked at run time. You can specify simple event listener code directly in event properties. To use more complex code, you can specify the name of an ActionScript function defined in an <mx:Script> tag.

Flex应用是由运行时的事件驱动的，如当一个用户选择了一个Button控制组件，你可以通过MXML标签的事件属性编写事件监听器，来处理运行时的事件。如：<mx:Button>标签有一个click事件属性，通过这个属性，你可以用一段ActionScript代码控制当这个button在运行时被点击后的动作。你可以直接在事件属性中编写简单的事件监听器。如果要用更复杂的代码，你可以在事件属性中指定监听器的名字，这个监听器被定义在<mx:Script>标签中。

The following example shows an application that contains a Button control and a TextArea control. The click property of the Button control contains a simple event listener that sets the value of the TextArea control's text property to the text Hello World。
下面这个例子展现的是一个包含了一个Button和一个TextArea的应用。Button组件的click属性指定一个监听器，它会将TexaArea的text属性设置为Hello,World。

<?xml version="1.0"?>
<!-- mxml/TriggerCodeExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextArea id="textarea1"/>
        <mx:Button label="Submit" click="textarea1.text='Hello World';"/>
    </mx:Panel>
</mx:Application>

The following example shows the code for a version of the application in which the event listener is contained in an ActionScript function in an <mx:Script> tag:

下面是一段包含在<mx:Script>标签中定义的监听器代码：

<?xml version="1.0"?>
<!-- mxml/TriggerCodeExample2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private function hello():void {
                textarea1.text="Hello World";
            }
        ]]>
    </mx:Script>
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextArea id="textarea1"/>
        <mx:Button label="Submit" click="hello();"/>

    </mx:Panel>
</mx:Application>

Binding data between components

组件中的数据绑定

Flex provides simple syntax for binding the properties of components to each other. In the following example, the value inside the curly braces ({ }) binds the text property of a TextArea control to the text property of a TextInput control. When the application initializes, both controls display the text Hello . When the user clicks the Button control, both controls display the text Goodbye .

Flex提供了一套简单语法用来将组件间的属性进行绑定。下面的例子中，在{}中的值将一个TexaArea的text属性与一个TextInput的text属性相绑定。当应用初始化时，两个组件都会显示Hello。当用户点击Button时，两个组件会同时显示Goodbye.

<?xml version="1.0"?>
<!-- mxml/BindingExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextInput id="textinput1" text="Hello"/>
        <mx:TextArea id="textarea1" text="{textinput1.text}"/>
        <mx:Button label="Submit" click="textinput1.text='Goodbye';"/>
    </mx:Panel>
</mx:Application>

As an alternative to the curly braces ({ }) syntax, you can use the <mx:Binding> tag, in which you specify the source and destination of a binding.

与{}有相同功效的是<mx:Binding>标签，你可指定源和目的进行数据绑定。

Using RPC services

使用RPC服务

Remote-procedure-call (RPC) services let your application interact with remote servers to provide data to your applications, or for your application to send data to a server.

远程方法调用(RPC)服务可以让你的应用与远程服务器通信并获得数据，或者向远程服务器发送数据。

Flex is designed to interact with several types of RPC services that provide access to local and remote server-side logic. For example, a Flex application can connect to a web service that uses the Simple Object Access Protocol (SOAP), a Java object residing on the same application server as Flex using AMF, or an HTTP URL that returns XML.

Flex设计了几种与本地和远程服务器通信的RPC服务方式。例如，一个Flex应用可以通过SOAP协议进行web service通信，并返回AMF(Action Message Format)对象，或者是一个HTTP请求，返回XML数据。

The MXML components that provide data access are called RPC components. MXML includes the following types of RPC components:

提供数据访问的MXML组件叫做RPC组件。MXML包括以下RPC组件：

• WebService provides access to SOAP-based web services.
• HTTPService provides access to HTTP URLs that return data.
• RemoteObject provides access to Java objects using the AMF protocol (Adobe LiveCycle Data Services ES only).
• WebService 提供了基于SOAP的web服务
• HTTPService提供了通过HTTP URL访问并返回数据的方式
• RemoteObject提供了用AMF协议访问Java对象（只适用于Adobe LiveCycle Data Service ES）
  

The following example shows an application that calls a web service that provides weather information, and displays the current temperature for a given ZIP code. The application binds the ZIP code that a user enters in a TextInput control to a web service input parameter. It binds the current temperature value contained in the web service result to a TextArea control.

下面的例子展示的是一个Flex应用通过调用web service获得天气信息并根据给出的地区编码获得当前的温度。应用将TextInput中的地区编码与web service输入参数绑定，并将web service中获得的当前温度值与TexaArea绑定。

<?xml version="1.0"?>
<!-- mxml/RPCExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Define the web service connection
        (the specified WSDL URL is not functional). -->
    <mx:WebService id="WeatherService"       
        wsdl="http:/example.com/ws/WeatherService?wsdl" 
        useProxy="false">

        <!-- Bind the value of the ZIP code entered in the TextInput control
            to the ZipCode parameter of the GetWeather operation. -->
        <mx:operation name="GetWeather">
            <mx:request>
                <ZipCode>{zip.text}</ZipCode>
            </mx:request>
        </mx:operation>
    </mx:WebService>
    
    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <!-- Provide a ZIP code in a TextInput control. -->
        <mx:TextInput id="zip" width="200" text="Zipcode please?"/>

        <!-- Call the web service operation with a Button click. -->
        <mx:Button width="60" label="Get Weather"
            click="WeatherService.GetWeather.send();"/>

        <!-- Display the location for the specified ZIP code. -->
        <mx:Label text="Location:"/>
        <mx:TextArea text="{WeatherService.GetWeather.lastResult.Location}"/>

        <!-- Display the current temperature for the specified ZIP code. -->
        <mx:Label text="Temperature:"/>
        <mx:TextArea
            text="{WeatherService.GetWeather.lastResult.CurrentTemp}"/>
    </mx:Panel>
</mx:Application>

Storing data in a data model

在数据模型中存储数据

You can use a data model to store application-specific data. A data model is an ActionScript object that provides properties for storing data, and optionally contains methods for additional functionality. Data models provide a way to store data in the Flex application before it is sent to the server, or to store data sent from the server before using it in the application.

你可以用一个数据模型存储应用中的数据。数据模型是一个提供了存储数据的ActionScript对象，并可以增加一些方法对功能进行扩展。数据模型提供了一种将数据发送到服务端前进行存储的方式，或缓存从服务端回来的数据。

You can declare a simple data model that does not require methods in an <mx:Model> , <mx:XML> , or <mx:XMLList> tag. The following example shows an application that contains TextInput controls for entering personal contact information and a data model, represented by the <mx:Model> tag, for storing the contact information:

你可以在<mx:Model>,<mx:XML>或<mx:XMLList>中声明一个没有方法的简单数据模型。下面的例子是一个包含了用于输入个人信息的TextInput和一个由<mx:Model>声明的用于存储这些信息的数据模型。

<?xml version="1.0"?>
<!-- mxml/StoringData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- A data model called "contact" stores contact information.
        The text property of each TextInput control shown above
        is passed to a field of the data model. -->
    <mx:Model id="contact">
        <info>
            <homePhone>{homePhoneInput.text}</homePhone>
            <cellPhone>{cellPhoneInput.text}</cellPhone>
            <email>{emailInput.text}</email>
        </info>
    </mx:Model>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >
        <!-- The user enters contact information in TextInput controls. -->
        <mx:TextInput id="homePhoneInput"
            text="This isn't a valid phone number."/>
        <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
        <mx:TextInput id="emailInput" text="me@somewhere.net"/>
    </mx:Panel>

</mx:Application>

Validating data

数据验证

You can use validator components to validate data stored in a data model, or in a Flex user interface component. Flex includes a set of standard validator components. You can also create your own.

你可以通过数据验证组件对存储在数据模型或Flex用户接口中的数据进行验证。Flex包含一组标准的数据验证组件。你也可以自定义自己的验证组件。

The following example uses validator components for validating that the expected type of data is entered in the TextInput fields. Validation is triggered automatically when the user edits a TextInput control. If validation fails, the user receives immediate visual feedback.

下面的例子是一个通过数据验证组件验证输入到TextInput中数据。当用户对一个TextInput进行编辑操作时，验证会自动触发。如果验证失败，用户可以立刻看到相关的错误提示信息。

<?xml version="1.0"?>
<!-- mxml/ValidatingExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- A data model called "contact" stores contact information.
        The text property of each TextInput control shown above
        is passed to a field of the data model. -->
    <mx:Model id="contact">
        <info>
            <homePhone>{homePhoneInput.text}</homePhone>
            <cellPhone>{cellPhoneInput.text}</cellPhone>
            <email>{emailInput.text}</email>
        </info>
    </mx:Model>

    <!-- Validator components validate data entered into the TextInput controls. -->
    <mx:PhoneNumberValidator id="pnV" 
        source="{homePhoneInput}" property="text"/>
    <mx:PhoneNumberValidator id="pnV2" 
        source="{cellPhoneInput}" property="text"/>
    <mx:EmailValidator id="emV" source="{emailInput}" property="text" />

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >
        <!-- The user enters contact information in TextInput controls. -->
        <mx:TextInput id="homePhoneInput"
            text="This isn't a valid phone number."/>
        <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
        <mx:TextInput id="emailInput" text="me@somewhere.net"/>
    </mx:Panel>

</mx:Application>

Formatting data

数据格式化

Formatter components are ActionScript components that perform a one-way conversion of raw data to a formatted string. They are triggered just before data is displayed in a text field. Flex includes a set of standard formatters. You can also create your own formatters. The following example shows an application that uses the standard ZipCodeFormatter component to format the value of a variable:

格式化组件是一组ActionScript组件，它提供一种将原始数据格式化的方式。它们只会在在数据显示在文本区域后触发。Flex包含了一组标准的格式化组件。你也可以创建自己的格式化组件。下面是一个使用标准的格式化组件ZipCodeFormatter对数据进行格式化的例子。

<?xml version="1.0"?>
<!-- mxml/FormatterExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Declare a ZipCodeFormatter and define parameters. -->
    <mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####"/>

    <mx:Script>
        <![CDATA[
            [Bindable]
            private var storedZipCode:Number=123456789;
        ]]>
    </mx:Script>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <!-- Trigger the formatter while populating a string with data. -->
        <mx:TextInput text="{ZipCodeDisplay.format(storedZipCode)}"/> 
    </mx:Panel>
</mx:Application>

Using Cascading Style Sheets (CSS)

使用CSS

You can use style sheets based on the CSS standard to declare styles to Flex components. The MXML <mx:Style> tag contains inline style definitions or a reference to an external file that contains style definitions.

你可以使用基于标准CSS的样式表对Flex组件进行定义。<mx:Sytle>标签包含了内嵌的样式定义或一个指向外部样式定义文件的引用。

The <mx:Style> tag must be an immediate child of the root tag of the MXML file. You can apply styles to an individual component using a class selector, or to all components of a certain type using a type selector.

<mx:Style>标签必须是MXML文件跟标签的直接子标签。你可以通过一个类选择器将样式应用于单独的组件，或所有的组件。

The following example defines a class selector and a type selector in the <mx:Style> tag. Both the class selector and the type selector are applied to the Button control.

下面的例子在<mx:Style>中定义了一个类选择权和一个样式选择器。两个选择器都应用于Button控件上。

<?xml version="1.0"?>
<!-- mxml/CSSExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Style>
        .myClass { color: Red } /* class selector */
        Button { font-size: 18pt} /* type selector */
    </mx:Style>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Button styleName="myClass" label="This is red 18 point text."/>
    </mx:Panel>
</mx:Application>

Using skins

使用皮肤

Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that define vector images. Skins can define the entire appearance, or only a part of the appearance, of a component in various states.

换肤是通过改变或替换组件的可视化原始进而改变组件样式的过程。这些元素可以是位图、SWF文件或包含绘图方法的类文件。通过换肤可以定义组件的全部或一部分表现。

Using effects

使用效果组件

An effect is a change to a component that occurs over a brief period of time. Examples of effects are fading, resizing, and moving a component. An effect is combined with a trigger , such as a mouse click on a component, a component getting focus, or a component becoming visible, to form a behavior . In MXML, you apply effects as properties of a control or container. Flex provides a set of built-in effects with default properties.

所谓效果是指在一段很短的时间内组件发生的一些变化。效果的一些例子如褪色、尺寸变换、组件移动等。一个效果会与一个触发器相结合，就像用鼠标点击一个组件，组件获得焦点或组件可视等一些行为。在MXML中，你可将效果作为组件或容器的属性使用。Flex定义了一些默认的内置效果。

The following example shows an application that contains a Button control with its rollOverEffect property set to use the WipeLeft effect when the user moves the mouse over it:

下面的例子是一个包含了rollOverEffect属性的button控件，当鼠标在控件上时，WipeLeft效果会被触发。

<?xml version="1.0"?>
<!-- mxml/WipeLeftEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Define the effect. -->
    <mx:WipeLeft id="myWL" duration="1000"/>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <!-- Assign effect to targets. -->
        <mx:Button id="myButton" rollOverEffect="{myWL}"/>
    </mx:Panel>
</mx:Application>

Defining custom MXML components

定义自定义MXML组件

Custom MXML components are MXML files that you create and use as custom MXML tags in other MXML files. They encapsulate and extend the functionality of existing Flex components. Just like MXML application files, MXML component files can contain a mix of MXML tags and ActionScript code. The name of the MXML file becomes the class name with which you refer to the component in another MXML file.

自定义MXML组件是你自己创建的MXML标签。它们继承已存在的Flex组件。就像MXML应用程序文件，MXML组件文件可以包含MXML标签和ActionScript代码。MXML文件的名字就是你在其他MXML文件中使用这个组件的类名。

The following example shows a custom ComboBox control that is prepopulated with list items:

下面的例子是一个自定义ComboBox组件：

<?xml version="1.0"?>
<!-- mxml/containers/boxes/MyComboBox.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:ComboBox >
        <mx:dataProvider>
            <mx:String>Dogs</mx:String>
            <mx:String>Cats</mx:String>
            <mx:String>Mice</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
</mx:VBox>

The following example shows an application that uses the MyComboBox component as a custom tag. The value containers.boxes.* assigns the MyComps namespace to the containers/boxes sub-directory. To run this example, store the MyComboBox.mxml file in that sub-directory.

下面的例子是一个应用使用MyComboBox自定义组件。containers.boxes.*指定了MyComps命名空间为containers/boxes子路径。运行这个例子需要将MyComboBox.mxml放在那个路径下。

<?xml version="1.0"?>
<!-- mxml/CustomMXMLComponent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*">

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10" 
    >
        <MyComps:MyComboBox/>
    </mx:Panel>
</mx:Application>

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

      如何从服务器端获得数据并通过Flex以图表形式展现出来，主要思路是：用户通过浏览器调用嵌入Flex应用的html页面->Flex应用发送请求到服务端请求数据->服务端将数据返回给Flex应用->Flex向用户展示数据。 下面分别从服务端和Flex进行说明：

1.编写服务端

       服务端用来向Flex应用返回请求的数据。这里的数据格式设置为XML数据。对于XML数据，可以直接返回一个XML文件或者通过编码返回XML格式的数据。这里我们采用后者，这里的服务端还接收一个参数：type，根据type不同返回不同的XML数据。

package service;

import java.io.*;

import javax.servlet.*;
import javax.servlet.http.*;

/**
 * 返回Flex请求的XML数据
 * @author tangs
 */
public class DataServiceServlet extends HttpServlet {
   
    /** 
    * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
    * @param request servlet request
    * @param response servlet response
    */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            //根据type不同，返回不同的XML数据
            String type = request.getParameter("type");
            
            StringBuilder xml = new StringBuilder();
            xml.append("<?xml version='1.0' encoding='UTF-8'?>");
            if ("1".equals(type)) {
                xml.append("<root>");
                xml.append("<Expense name='Taxses' value='3000'/>");
     		xml.append("<Expense name='Rent' value='1520'/>");
                xml.append("<Expense name='Bills' value='500'/>");        
                xml.append("</root>");
            } else if ("2".equals(type)) {
                xml.append("<root>");
                xml.append("<Expense name='Taxses' value='5000'/>");
     		xml.append("<Expense name='Rent' value='1020'/>");
                xml.append("<Expense name='Bills' value='210'/>");        
                xml.append("</root>");
            }
            out.println(xml.toString());
        } finally { 
            out.close();
        }
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /** 
    * Handles the HTTP <code>GET</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /** 
    * Handles the HTTP <code>POST</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }
    // </editor-fold>
}

 服务端很简单，就是返回请求数据。

2.编写Flex应用

       这个例子总Flex需要向服务端发送请求的同时，传递一个参数。用Flex发送带参数请求很简单，但是如何向Flex应用传递参数，却有些繁琐。下面先来看Flex应用如何获得外部传来的参数：

<?xml version="1.0"?>
<!-- charts/BasicPie.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="getParams();">    //Flex应用初始化时，向服务端获取数据
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
	 import mx.rpc.http.HTTPService;
	 import mx.controls.Alert;
	 
	 [Bindable]
	 private var service:HTTPService ;
		
	 private function get_Label(item:Object, field:String, index:Number, percentValue:Number):String
	 {
		 return item["name"].toString()+":"+item[field].toString();
	 }
		
	 //获得参数
	 private function getParams():void {
	 	 //获得参数
	 	 var params:Object = this.parameters;
		 if (params != null) {
				//向服务端请求数据
				service = DataLoader.getData(params["type"].toString());
		 } else {
				Alert.show("No params");
		 }
			
	 }
		
		
  ]]></mx:Script>

  <mx:Panel title="Pie Chart" backgroundColor="#FFFFFF">
    //展示饼状图
     <mx:PieChart id="myChart" 
        dataProvider="{service.lastResult.root.Expense}"    //获得服务端返回的数据
        showDataTips="true"
     >
        <mx:series>
           <mx:PieSeries 
                field="value" 
                nameField="name" 
                labelPosition="callout"
                labelFunction="get_Label"
           />
        </mx:series>
     </mx:PieChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

 从上面的代码可以看出，Flex获得参数的方法：

	 private function getParams():void {
	 	 //获得参数
	 	 var params:Object = this.parameters;


		 if (params != null) {
				//向服务端请求数据
				service = DataLoader.getData(params["type"].toString()

);
		 } else {
				Alert.show("No params");
		 }
			
	 }

 在应用加载的时候，通过调用getParams()方法，获得传入的参数，并向服务端请求数据。

 Flex向服务端请求数据有3种方式：REST-sytle service，web service，Remote object service。这里使用的是第一种方式。REST-style service实际上就是采用HTTP协议通信的方式。Flex提供了HTTPService component，使用起来很方便。这里用的是ActionScript：

  DataLoader.as

package
{
	import mx.controls.Alert;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.HTTPService;

	public class DataLoader
	{
		
		public function DataLoader()
		{
		}
		public static function getData(type:Object):HTTPService {
				var service:HTTPService;
                service = new HTTPService();
                service.url = "http://localhost:7001/DataService/getData?type="+type;
                service.method = "POST";
                service.addEventListener("result", httpResult);
                service.addEventListener("fault", httpFault);
                service.send();
                
                return service;
        }

        public static function httpResult(event:ResultEvent):void {
                var result:Object = event.result;
        }

        public static function httpFault(event:FaultEvent):void {
                var faultstring:String = event.fault.faultString;
                Alert.show("Fault: " + faultstring);
        }
}

 下面的代码得到服务端返回的数据：

<mx:PieChart id="myChart" 
        dataProvider="{service.lastResult.root.Expense}

"    //获得服务端返回的数据
        showDataTips="true"
     >
  。。。
</mx:PieChart>

之后，Flex就可以根据获得的数据将图展现出来了。

上面说了Flex如何获得参数并向服务端发送请求，那么参数是如何传递给Flex应用的呢？这里就有点复杂了。需要写一段JS脚本进行参数的传递。

    chartType.js

var requiredMajorVersion = 9;
var requiredMinorVersion = 0;
var requiredRevision = 0;

<!-- 动态创建Flash -->
<!-- id:应用编号 -->
<!-- url:嵌入网页的SWF文件名称 -->
<!-- width:应用在网页中的宽度 -->
<!-- high:应用在网页中的高度 -->
<!-- type:服务端需要的参数 -->

function sendParameters(id, url, width, high, type)
{
	var hasProductInstall = DetectFlashVer(6, 0, 65);
	var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

	if(hasProductInstall && !hasRequestedVersion)
	{
		var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
		var MMredirectURL = window.location;
    	document.title = document.title.slice(0, 47) + " - Flash Player Installation";
	    var MMdoctitle = document.title;

		AC_FL_RunContent

(
			"id", id,
			"src", "playerProductInstall",
			"name", url,
			"width", width,
			"height", high,
			"menu", false,
			"wmode", "opaque",
			"align", "middle",
			"quality", "high",
			"bgcolor", "#808080",
			"allowScriptAccess","always",
			"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
			"type", "application/x-shockwave-flash",
			"pluginspage", "http://www.adobe.com/go/getflashplayer");
	}
	else if(hasRequestedVersion)
	{
		var flashvars = "type=" + type;
		
		AC_FL_RunContent

(
			"id", id,
			"src", url,
			"name", url,
			"flashvars", flashvars,
			"menu", false,
			"width", width,
			"height", high,
			"wmode", "opaque",
			"align", "middle",
			"quality", "high",
			"bgcolor", "#808080",
			"allowScriptAccess","always",
			"type", "application/x-shockwave-flash",
			"pluginspage", "http://www.adobe.com/go/getflashplayer");
	}
	else
	{
    	var alternateContent = 'Alternate HTML content should be placed here. '
	  		+ 'This content requires the Adobe Flash Player. '
	   		+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
	    document.write(alternateContent);  // insert non-flash content
	}
}

function getInfoForFlash(type)
{    
	if(type.toLowerCase().indexOf("f_code") != -1)
	{
        var target = document.getElementById("f_code");
        if(target != null)
        	return target.value;
        else
		    return "g01";
	}
	else if(type.toLowerCase().indexOf("f_title") != -1)
    {
        var target = document.getElementById("f_title");
        if(target != null)
        	return target.value;
        else
		    return "unkown";
	}
	else
		return "unkown";
}

 上面的脚本中，调用了AC_FL_RunContent方法，这个方法是Flex提供给我们的一个方法，用FlexBuilder创建一个Flex Project后，就可以在html-template这个文件夹中看到一个叫AC_OETags.js的文件。这个方法就在这个文件中。下面是调用Flex应用的html页面：

   chart.html

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="AC_OETags.js" language="javascript"></script>

</head>
<body bgcolor="#EBEAE5" leftmargin="0" topmargin="0">
<script language="JavaScript" type="text/javascript" src="history.js"></script>
<script language="javascript" type="text/javascript" src="chartType.js"></script>
<table width="770" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td></td>
  </tr>
  <tr>
  <td align="center">
	<script>
		sendParameters("Chart1", "Chart1", 800, 600, "2");
	</script>
  </td>
  </tr>
</table>
</body>
</html>

 这个HTML页面包含了AC_OETags.js和chartType.js。通过sendParameters方法向Flex应用传递参数，并将应用嵌入网页中显示出来。

OK，上面的工作都做好后，在浏览器中输入http://...../chart.html，就可以看到结果了：

这是type=1时的结果：

这是type=2时的结果：

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

About MXML

关于MXML

You use two languages to write Flex applications: MXML and ActionScript. MXML is an XML markup language that you use to lay out user interface components. You also use MXML to declaratively define nonvisual aspects of an application, such as access to data sources on the server and data bindings between user interface components and data sources on the server.

你可以用两种方式去编写Flex应用：MXML和ActionScript。MXML是一种用来设计编写用户接口组件的XML标记语言。你也可以用MXML去定义一个应用的非可视部分，比如访问服务器数据源和用户接口组件和服务器数据的绑定。

Like HTML, MXML provides tags that define user interfaces. MXML will seem very familiar if you have worked with HTML. However, MXML is more structured than HTML, and it provides a much richer tag set. For example, MXML includes tags for visual components such as data grids, trees, tab navigators, accordions, and menus, as well as nonvisual components that provide web service connections, data binding, and animation effects. You can also extend MXML with custom components that you reference as MXML tags.

就像HTML一样，MXML用标签来定义用户接口。如果你用过HTML那么再看MXML会感到很熟悉。不过，MXML比HTML更加结构化，规范化，它提供了很多“富标签集”。例如，MXML包含了定义可视化组件的标签，如data grids, trees, tab navigators, accordions, and menus，在非可视化组件方面，包含了web service connections, data binding, and animation effects。你也可以通过继承MXML组件定义自己的组件标签。

One of the biggest differences between MXML and HTML is that MXML-defined applications are compiled into SWF files and rendered by Adobe® Flash® Player or Adobe® AIR™, which provides a richer and more dynamic user interface than page-based HTML applications.

MXML与HTML的最大不同之处就是，MXML编写的应用将被编译成SWF文件，并运行在Adobe® Flash® Player or Adobe® AIR™上面，它提供了比基于页面的HTML应用更丰富的表现。

You can write an MXML application in a single file or in multiple files. MXML also supports custom components written in MXML and ActionScript files.

你可以将一个MXML应用用一个文件或多个文件编写。MXML同样支持用MXML或ActionScript编写的自定义组件。

Writing a simple application

一个简单的应用

Because MXML files are ordinary XML files, you have a wide choice of development environments. You can write MXML code in a simple text editor, a dedicated XML editor, or an integrated development environment (IDE) that supports text editing. Flex supplies a dedicated IDE, called Adobe® Flex® Builder™, that you can use to develop your applications.

由于MXML就是一个普通的XML，因此，你有多种开发方式可以选用。你可以在一个简单的文本编辑器里编写MXML代码，或一个专用的XML文件编辑器，或者用一个IDE进行开发。Flex提供了一个专用的Flex开发IDE：Adobe® Flex® Builder™，你可以用它来开发Flex应用。

The following example shows a simple "Hello World" application that contains just an <mx:Application> tag and two child tags, the <mx:Panel> tag and the <mx:Label> tag. The <mx:Application> tag defines the Application container that is always the root tag of a Flex application. The <mx:Panel> tag defines a Panel container that includes a title bar, a title, a status message, a border, and a content area for its children. The <mx:Label> tag represents a Label control, a very simple user interface component that displays text.

下面是一个非常简单的"Hello World"应用。这个应用只包含了一个<mx:Application>标签和两个子标签：<mx:Panel>和<mx:Label>。<mx:Application>标签用来定义一个应用容器，它一定是一个Flex应用的根标签。<mx:Panel>标签定义了一个版面容器，它里面可以包含一个标题栏，标题，状态栏，边框以及一个内容区域。<mx:Label>标签定义了一个标签控件，用来显示文本信息。

<?xml version="1.0"?>
<!-- mxml\HellowWorld.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

About XML encoding

关于XML编码

The first line of the document specifies an optional declaration of the XML version. It is good practice to include encoding information that specifies how the MXML file is encoded. Many editors let you select from a range of file encoding options. On North American operating systems, ISO-8859-1 is the dominant encoding format, and most programs use that format by default. You can use the UTF-8 encoding format to ensure maximum platform compatibility. UTF-8 provides a unique number for every character in a file, and it is platform-, program-, and language-independent.

上面代码的第一行声明了XML的版本信息。指定MXML文件的编码方式是一个很好的习惯。许多编辑器可以选择不同的编码方式。如果是北美的操作系统，一般是ISO-8859-1编码。你可以用UTF-8编码方式来获得最大限度的平台兼容性。UTF-8编码方式为每个字符提供了独一无二的编码，并且它是与平台、语言无关的。

If you specify an encoding format, it must match the file encoding you use. The following example shows an XML declaration tag that specifies the UTF-8 encoding format:

如果你指定了一种编码方式，则它必须符合你这个文件的编码。下面是一个为一个XML文件声明了UTF-8编码方式的例子：

<?xml version="1.0" encoding="utf-8"?>

 About the <mx:Application> tag

In addition to being the root tag of a Flex application, the<mx:Application>

tag represents an Application container. A container is a user-interface component that contains other components and has built-in layout rules for positioning its child components. By default, an Application container lays out its children vertically from top to bottom. You can nest other types of containers inside an Application container, such as the Panel container shown above, to position user interface components according to other rules.

关于<mx:Application>标签

除了作为Flex应用的根标签外，<mx:Application>标签实际上指定了一个应用容器。所谓“容器”，就是一个用户接口组件，它可以包含其他子组件，并且用一定的规则去安排这些子组件的位置。默认情况下，一个应用容器的将它上面的组件垂直排列，即从上到下。你可以嵌入其他类型的容器，比如上面例子中的面板容器，并可以通过指定排列规则来排列这些组件。

About MXML tag properties

关于MXML标签的属性

The properties of an MXML tag, such as thetext , fontWeight , and fontSize properties of the <mx:Label> tag, let you declaratively configure the initial state of the component. You can use ActionScript code in an <mx:Script> tag to change the state of a component at run time.

MXML标签的属性，如text,fontWeight,以及<mx:Label>标签的fontSize属性，可以让你直接去配置组件的初始状态。你可以在运行时通过<mx:Script>标签，用ActionScript代码去改变一个组件的状态。

The relationship of MXML tags to ActionScript classes

MXML标签与ActionScript classes的关系

Adobe implemented Flex as an ActionScript class library. That class library contains components (containers and controls), manager classes, data-service classes, and classes for all other features. You develop applications by using the MXML and ActionScript languages with the class library.

Adobe 将Flex封装为一个ActionScript class库。这个类库包含了组件（容器和控制器），管理类，数据服务类以及实现其他特性的类。你通过MXML和ActionScript类库去开发应用程序。

MXML tags correspond to ActionScript classes or properties of classes. Flex parses MXML tags and compiles a SWF file that contains the corresponding ActionScript objects. For example, Flex provides the ActionScript Button class that defines the Flex Button control. In MXML, you create a Button control by using the following MXML statement:

MXML标签实际上相当于ActionScript类或类中的属性。Flex将MXML标签解析并编译成一个SWF文件，这个文件包含了与之对应的ActionScript对象。例如，Flex提供了ActionScript Button类来定义Flex Button控制器。在MXML中，你可以通过下面的MXML语句来创建一个Button：

<mx:Button label="Submit"/>

When you declare a control using an MXML tag, you create an instance object of that class. This MXML statement creates a Button object, and initializes the label property of the Button object to the string "Submit".
当你用MXML标签创建一个控制组件时，实际上是创建了一个这个组件的对象。这个MXML语句创建了一个Button对象，并将它的label属性初始化为"Submit"。

An MXML tag that corresponds to an ActionScript class uses the same naming conventions as the ActionScript class. Class names begin with an uppercase letter, and uppercase letters separate the words in class names. Every MXML tag attribute corresponds to a property of the ActionScript object, a style applied to the object, or an event listener for the object.

一个MXML标签就相当于一个与之名称相同的ActionScript类。类目以一个大写字母开头，大写字母用以区分不同的单词。每一个MXML标签的属性相当于ActionScript类的属性，如一个样式属性或一个事件监听器。

Understanding a Flex application structure

理解一个Flex应用的架构

You can write an MXML application in a single file or in multiple files. You typically define a main file that contains the <mx:Application> tag. From within your main file, you can then reference additional files written in MXML, ActionScript, or a combination of the two languages.

你可以在一个或多个文件中编写MXML应用。一般会定义一个主文件，里面包含了<mx:Application>标签。在这个主文件里，可以应用其他MXML文件、ActionScript或两者的结合。

A common coding practice is to divide your Flex application into functional units, or modules, where each module performs a discrete task. In Flex, you can divide your application into separate MXML files and ActionScript files, where each file corresponds to a different module. By dividing your application into modules, you provide many benefits, including the following:

一般情况下，一个Flex应用要将不同的功能放到不同的模块中。在Flex中，你可以将你的应用分为MXML文件和ActionScript文件，并且每一个文件都实现了不同的功能。将应用模块化，有以下好处：

Ease of development 

利于团队开发

Different developers or development groups can develop and debug modules independently of each other.

不同的开发人员或不同的开发小组可以进行单独的开发或调试。

Reusability 

重用性好

You can reuse modules in different applications so that you do not have to duplicate your work.
你可以在不同的应用中重用这些模块，避免了重复开发。

Maintainability 

可维护行好

You can isolate and debug errors faster than if your application is developed in a single file.

你可以更快更好的调试程序的错误。

In Flex, a module corresponds to a custom component implemented either in MXML or in ActionScript. These custom components can reference other custom components. There is no restriction on the level of nesting of component references in Flex. You define your components as required by your application.

在Flex中，一个模块就是用MXML或ActionScript实现的一个自定义组件。这些自定义组件可以引用其他组件。Flex中没有组件之间相互引用的限制。你可以按需定义你应用程序中的组件。

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

    刚开始学习Flex，不知从何下手。从以往学习C++，Java的经验来看，任何一门语言都要理论与实践结合。就是找一本书，边看边练，这样学的快。如果有一位前辈教，那就更好了。不过目前看来，只能“自学成才”了。

    Flex相关的书，市面上不是很多，而且质量参差不齐。到dangdang，china-pub上看了看，都没有相中的。突然想起曾经一位高人说过的话：帮助是最好的参考书。就是说，看“帮助”比看什么书都强。于是乎，找到Flex的在线帮助文档http://livedocs.adobe.com/flex/3/html/index.html，浏览了前几章节，感觉讲的很详细，毕竟是官方的，虽然都是E文，但借着金山词霸的帮助，读下来还是没问题的。ok，就是它了。

    在学习之前，还得找个写代码的工具。对于Flex来说，最好的当然就是Flex Builder了。从Adobe官网下载了最新的Flex3 Builder，http://www.adobe.com/products/flex/，安装好后，就可以开始了。

    Hello，Flex！

    记得以前每看一本语言的基础教程的时候，第一个例子就是经典的“Hello, World!”。当看到自己的第一个程序在屏幕上打印出“Hello，World!”的时候，一种小小的成就感油然而生。看来学Flex也得从这下手了。这里，就不Hello World了，来个“Hello，Flex!”吧。

    1.选择“File”->“New”->“Flex Project”

2.输入工程名称，指定路径

3.直接点击“Finish”就可以了。

4.Flex Builder自动生成了HelloFlex.mxml文件，下面就在这个文件中写入代码：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Panel title="Hello Flex" 

        paddingTop="10" 

        paddingBottom="10"

        paddingLeft="10" 

        paddingRight="10"

    >

        <mx:Label text="Hello Flex!" fontWeight="bold" fontSize="24"/>

    </mx:Panel>

</mx:Application>

 5.右键点击HelloFlex.mxml文件，选择“Run Application”，就会以网页的形式将结果展现出来

哈哈，成了！第一个Flex程序诞生了！感觉还挺简单。至于上面那些代码是什么意思？怎样产生这样的效果。只能往下看才知道了。

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

      上大学时，对游戏非常感兴趣，梦想着以后去做游戏开发，谁知毕业后竟做起了Java。已经好久没有和游戏打交道了，唉，现在看来，只能先拿出来做一个回忆了。说不定以后。。。who knows?

这些都是自己看着书边学边练。

1.QQ连连看。

为什么叫“QQ连连看”？因为上面的图片是QQ头像

这是主界面：

2.光车（Light Car）

这是一个双人游戏。两辆车从主界面的正上方和正下方相对而行，两人分别用键盘控制各自的车。车开过的地方都会形成一条线，谁先撞到车围成的线，谁就输掉了比赛。比赛中会随机产生一些物品，吃掉后会产生加速或减速的效果。

游戏界面：

3.UFO（一个射击DEMO）

界面上一个飞碟，键盘控制运动和发射导弹。

游戏界面：

这是源代码：

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

        用WebService传输文件，实际上就是客户端将文件先做成比特流，然后调用webservice接口，服务端再将比特流还原成文件。下面是代码：
服务端：

public   class  FileTransferWs  ... {
     public   int  uploadFile( byte  []bs, String fileName)  ... {
        FileOutputStream out  =   null ;