开发自定义组件是OperaMasks 2.3以及OperaMasks Studio 6.1的重要特性之一。 本章将以scrolledTabLayout组件为例，介绍如何使用OperaMasks Studio6.1开发一个OperaMasks组件。

首先，在视图空白处点右键，选择“新建”-->“Apusic组件工程”，如下图：

Figure 1. 新建Apusic组件工程

在出现的创建Apusic组件工程向导中，输入工程名：scrolledTabLayout，如下图：

Figure 2. 输入工程名

点下一步，填好新建的taglib.xml的相关信息，注意：命名空间不要使用apusic或operamasks的官方域名， 以免与官方组件冲突，如下图：

Figure 3. 填写taglib.xml相关信息

点击完成，一个名为scrolledTabLayout的组件工程就创建好了。

将组件要用到的资源文件包（如这里的ext文件夹）放入新建的组件工程下的META-INF下的resource文件夹下，如下图：

Figure 4. 将资源文件放入resource文件夹下

双击工程下的“资源描述符”，在资源管理器编辑器的“设计”页签中，添加资源到组件中，这里分别添加了JS资源和CSS资源。如下图：

Figure 5. 添加资源

然后保存该文件

双击命名空间http://www.mynamespace.com结点下的scrolledTabLayout.taglib.xml文件，如下图：

Figure 6. taglib.xml文件的位置

出现Facelet组件库编辑器，选择tags标签，然后点击“添加”，添加一个标签。如下图：

Figure 7. Facelet组件库编辑器

右侧出现标签编辑项，向component-type中写入组件名（一个带包名的类名），dependJSPackages和dependCSSPackages中分别选择刚才加入的资源，如下图：

Figure 8. 编辑标签属性

注意：保存scrolledTabLayout.taglib.xml文件。

填好上述内容后，选择该标签，点击“发布”，如下图：

Figure 9. 发布标签

此时在命名空间http://www.mynamespace.com下的src包中会生成Base文件和RenderHandler文件，如果开启了自动构建功能，还会构建出一个组件类文件，如下图：

Figure 10. 发布标签后生成的文件

打开Base文件，将其父类改为“UITabLayout”，打开Render类，让它继承TabLayoutRenderHandler。如下图，点击ctrl+shift+o，导入相应的包后，保存文件，此时会重新构建组件类。

Figure 11. 更改Base类的父类

Figure 12. 更改Render类

最后，打开resource-dependences.xml，可以看到此组件依赖了我们之前配置的scrolledTabPanel.js和scrolledTabPanel.css, 而scrolledTabPanel.js又依赖于AOM中Ext.TabPanel资源。所在需在此加上JS的资源依赖关系，如下图：

Figure 13. 修改resource-dependences.xml

选择组件工程scrolledTabLayout，点击右键-->导出，选择Apusic Studio-->组件Jar文件，点下一步，组件工程选择scrolledTabLayout，输入导出的Jar包名（这里假设为C：\scrolledTabLayout.jar），点完成。如下图：

Figure 14. 导出组件工程

新建一个Apusic标准工程，加入web模块，将导出的组件包（C：\scrolledTabLayout.jar）放入 web-->WebContent-->WEB-INF-->lib中，再配置operamasks.xml文件，加入

<metadata>
<!-- 配置作为元数据进行扫描 -->
  	<jar>scrolledTabPanel.jar</jar>
</metadata>

在WebContent中新建一个Faces页面（testScrolledTab.xhtml），双击打开它，在出现的编辑器中选择“设计”页签，在右侧的选用板中出现我们刚刚生成的组件，选择它拖入页面中，效果如下图：

Figure 15. 导出组件工程

测试scrolledTabLayout组件的页面代码如下：

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
    renderKitId="AJAX" 
xmlns:my="http://www.mynamespace.com">
    <w:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </w:head>
    <w:page title="My ScrolledTabLayout">
        <my:scrolledTabLayout width="500" height="300" tabPosition="left">
            <layout:panel title="t1">tab1</layout:panel>
            <layout:panel title="t2">tab2</layout:panel>
            <layout:panel title="t3">tab3</layout:panel>
        </my:scrolledTabLayout>
    </w:page>
</f:view>

这样，开发一个自定义组件就大功告成了，最后来看看组件渲染的效果：

Figure 16. 导出组件工程