🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 前言 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 的设计的确很好, 很灵活。