[Teamcenter 2007 開發系列] 整合Extjs 展現頁面組件 · PLM

### 前言 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 的設計的確很好，很靈活。