[Teamcenter 2007 开发系列] 整合Extjs 展现页面组件

前言

Teamcenter web 端处理浏览器的请求的流程是：

1. 浏览器点击一个link

2. 在app map.xml 中定义的 response-chian 来处理这个link (response-chain 由action component 组成，每个action component 都是做通过输入，得到输出这样一些事情)

3. 最终的resposne chain 都会导入到一个 jsp 的 page页面中， 而且有一个handle来处理这个jsp 页面。 

com.sdrc.metaphase.wcc.mwau.util.TemplatePageHandler

这个handler 的作用就是，在jsp页面之前，读取system preference的配置文件组成一些bean存到request 中（比如页面的button 配置是怎样的）， 这样的话在jsp中就可以得到这个bean. 这个bean 是直接显示，还是render 显示，或是通过标签来显示都可以了。

总之，返回的就是定义的一个java 的bean.(更直接就是一个java 的实例)

如何整合Ext JS

对于Ext js 的组件而言，只需要通过store从服务端取到 json 格式的子串就可以了。

这种解法可能行得通：

在jsp里取到哪些bean,然后解析那些bean成Ext js需要的格式。

但是问题是：

1. 需要很清楚的知道那些bean 的结构，而且如果对于一些新的组件来说，TC或许没有这样的bean , 或者说没有提供合适的bean.

2. 还有就是Ext js的优势在store 可以异步的获取资料。 页面的框架可以先出来， 这样用户感觉上会更好。（其实这也是Teamcenter 2007 web的一个最大的弱势，没有异步调用的方式，页面要全部刷新才能够出得来）

其他的设想不再做了，直接给出觉得比较好的解法：

解法思路：

使用JSON lib直接返回标准的JSON格式的数据，

改动如果写在TemplatePageHandler，则需要修改和覆盖这个问题， 看上去很麻烦。

这里的例子是获取Ext tree grid 的栏位的方式：

正确步骤：

1.  在system preference XML 定义一个新的widget

<edit parent="/PageInfo/WidgetDefinitions">
	<add>
	    <node name="ExtTreeJSArrayWidget">
        	<map>
        		<entry key="widget_type" value="ExtTreeColJSArray"/>
        		<entry key="bean_name" value="ExtTreeColJSArrayBean"/>
        		<entry key="parameters" value="ItemHandleParam"/>
        		<entry key ="content" value="ExtTreeColContent"/>
        	</map>
	    </node>
	</add>
</edit>

2. 针对这个类型的widget , 定义一个处理它的processor

<edit parent="/AppConfig/WidgetProcessors">
	<add>
		<node name="ExtTreeColJSArray">
			<map>
				<entry key="class"
					value="com.oscar999.widgets.ColumnJSArrayProcessor" />
			</map>
		</node>
    </add>
</edit>

3. 完成ColumnJSArrayProcessor 的内容

public class ColumnJSArrayProcessor extends BaseWidgetProcessor {
	boolean debug_;
	public ColumnJSArrayProcessor() {
		this.debug_ = false;
	}

	public void prepareWidget() {
	    HttpServletRequest request = getRequest();
	    ServletContext servlet_ctx = getServletContext();
	    RequestContext context = getContext();
            WidgetPreferencesReader preferences_ = getWidgetPreferencesReader();
        Session session = WebAppSupportUtil
                .getESSession(request, servlet_ctx);
        Manager manager = WebAppSupportUtil.getESManager(servlet_ctx);
        Locale locale = context.getServerLocale();
        ResourceLookup resourceLookup = context.getResourceLookup();
        Processor proc =null;
        try {
            proc = (Processor) manager.getProcessor("base.Processor",
                    session);
        } catch (UnknownProcessorException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

   .........................
            request.setAttribute(presentationBeanName_, jsonArray.toString());
      }

}

这里面该有的都有了， preference , Proce; 接下来可以写任何想写的逻辑。

4. web端使用

tree的col 定义有了，tree 的框架就可以出来了。 数据可以通过store 的proxy 去异步获取。

需要的数据的栏位也可以通过col 传给store 的proxy .

	Ext.create('Ext.tree.Panel', {
	    title: 'Tree',
	    width: '100%',
	    //height: 150,
	    store: store,
	    rootVisible: false,
	    renderTo: doc_div,
	    columns: treeCols
	}); 

结言

当然，如果以及完全不使用OOTB的jsp Template的话，可能就不需要这样。

但是， 她的这个widget 和widge processor 的设计的确很好， 很灵活。