?

? ? ? ?一. 客戶端代碼開發工具

?

? ? ? Openbravo3.0客戶端代碼開發是大量的javascript代碼，CSS代碼和極少量的html代碼開發。我們是通過瀏覽器加載來查看客戶端主要的javascript代碼的，一般如下兩個工具選擇一個，Chrome Developers Tools和Firebug

?

?

? ? ? 二. smartclient源碼整合入Openbravo項目

?

? ? ? 1. 到如下地址將smartclient源碼下載下來：? https://code.openbravo.com/erp/mods/org.openbravo.userinterface.smartclient.dev/，點擊如下圖的zip即可。

? ? ? ?2. 將下載下來的smartclient源碼，解壓縮（注意先要重命名一下，名稱太長，解壓縮會報錯）放到openbravo項目的modules文件夾下面，比如：G:\openbravo3.0\Openbravo-3.0MP11\modules。

?

? ? ? ?3. 命令行窗口，切換到openbravo項目的頂層目錄，比如：G:\openbravo3.0\Openbravo-3.0MP11。運行如下命令：ant smartbuild。

?

? ? ? ?4. 編譯成功之后，刷新在eclipse里面的openbravo項目，可以在modules文件夾下面看到smartclient module。今后直接從這里查看smartclient的源碼。（可以使用Ctrl+Shift+r命令快速打開某一個源文件，比如FormItem.js）

?

?

? ? ? 三. ?客戶端獲取沒有壓縮和模糊的JS代碼

?

? ? ? openbravo會自動壓縮javascript代碼，為了減輕客戶端的加載壓力。但是，這回讓客戶端調試代碼更加困難，那么如何獲取沒有壓縮的javascript代碼。

? ? ? openbravo如果發現這個模塊不是開發狀態，就會壓縮javascript代碼。但是，如果是開發態就不會了。通常我們將如下幾個模塊設置成處于開發狀態：org.openbravo.client.kernel，org.openbravo.client.application，org.openbravo.userinterface.selector

? ? ? smartclient源碼在加載到客戶端的時候，通常會被壓縮。但是，客戶端調試的時候，非常需要看得見smartclient的源碼。為了能夠看到，需要安裝smartclient模塊，也就是第二步所說的。第二步做完之后，啟動服務，瀏覽器進入模塊管理頁簽，將smartclient模塊修改成處于開發狀態，然后重啟服務。

? ? ? 客戶端如何調試代碼，通過chrome瀏覽器打開某一個頁面之后，打開chrome開發人員工具，點擊scripts查看javascript代碼，下拉框找到一個名詞很長的javascript代碼，比如：27c45aef548fedad34ife42.js. 這個js代碼包含了整個壓縮了的js代碼。需要注意幾點：

? ? ? 1. 這個javascript名稱是動態生成的，內容變化，名稱就會變化，瀏覽器就會重新加載。

? ? ? 2. 如果這個文件是被壓縮的，請查看如上說的那三個通常說要設置成開發態的模塊是否設置了。

? ? ? 3. 這個文件不包含smartclient的源碼。

? ? ?找到這個js文件之后，在上面代碼搜索里面輸入this.messageBar = isc.OBMessageBar.create?，定位之后，在左邊數據行號的地方點擊右鍵就可以加斷點了，然后隨便打開一個窗口，就會觸發這個斷點。

?

?

? ? ? 四. 添加javascript到openbravo系統

?

? ? ? javascript加入到openbravo系統可以通過如下方式：

? ? ? 1. 靜態的javascript文件必須放在它所在模塊的如下目錄：web/[modulepackage]/js

? ? ? 2. javascript必須要注冊通過java語言，比如：

?

globalResources.add(createStaticResource("web/org.openbravo.client.application.examples/js/example-view-component.js", true));

?

? ? ? ?五. openbravo客戶端javascriptAPI介紹

?

? ? ? ?當添加新的實例或者類的時候，需要遵守如下協議：

? ? ? ?1. 所有的全局數據必須加載全局對象OB里面。

? ? ? ?2. 所有CSS樣式命名必須以OB打頭。

? ? ? ?3. 所有的smartclient類命名必須以OB打頭。?

? ? ? ?在這一部分，我們將探討OB對象里面的功能函數。

?

? ? ? ?1. OB.Application

? ? ? ?它包含服務器端的一些基本信息，比如采用的是那種語言，基本訪問路徑是什么，系統版本之類的。見下圖：

? ? ??

?

? ? ? 2. OB.User

? ? ? 包含當前登錄用戶的相關信息

? ? ??

?

? ? ? 3. OB.Constants

? ? ? 包含了在整個系統運作過程中會用到的常量。

?

? ? ? 4. OB.Datasource

? ? ? 提供標準和定制的數據源，它提供2個方法，create和get。

? ? ? get方法在獲取數據源的時候，會先判斷在客戶端是否已經緩存了，如果緩存了直接返回。如果沒有，則發生一個請求到服務端，要求服務端生成一個數據源返回。需要注意的是，這個get方法是異步的：

?

// ** {{{ OB.Datasource.get(dataSourceId, target, dsFieldName) }}} ** // // Retrieves a datasource from the server. The return from the server is a // javascript string which is evaluated. This string creates a datasource. The // datasource // object is set in a field of the target (if the target parameter is set). This // is done asynchronously. // // The method returns the datasourceid. // // Parameters: // * {{{dataSourceId}}}: the id or name of the datasource // * {{{target}}}: the target object which needs the datasource // * {{{dsFieldName}}}: the field name to set in the target object. // * {{{doNew}}}: if set to true then a new datasource is created // If not set then setDataSource or optionDataSource are used. // OB.Datasource.get = function(/* String */dataSourceId, /* Object */ target, /* String */dsFieldName, /*Boolean*/ doNew) { ... } ?

? ? ? create方法不會調動服務器端來生成數據源，而是在客戶端自己生成，利用傳過來的參數

?

// ** {{{ OB.Datasource.create}}} ** // Performs a last check if the datasource was already registered before // actually creating it, prevents re-creating datasources when multiple // async requests are done for the same datasource. // Parameters: // * {{{dsProperties}}}: the properties of the datasource which needs to be // created. OB.Datasource.create = function(/* Object */dsProperties) {

?

? ? OB.Datasource通過isc.OBRestDataSource來創建數據源，isc.OBRestDataSource繼承自SmartClient RestDatasource方法。

?

? ? ?5. OB.Format

? ? ?負責當前用戶全局日期，數字的格式設置， 特殊字段的設置在format.xml里面設置，

? ? ?

?

? ? ? 6. OB.I18N

? ? ? 改對象提供一個getLabel方法，用于獲取一個翻譯過的提示信息，當用戶加載一個窗口的時候，系統會自動調用這個方法將提示信息下載下來。方便今后使用。

?

? ? ? 7. OB.PropertyStore

? ? ? 負責獲取和設置一些屬性值。

? ? ? get方法，可以返回一個特定窗口的某一個屬性值。

dataPageSizeaux = OB.PropertyStore.get('dataPageSize',this.view.windowId);

? ? ? set方法，?function(propertyName, value, windowId, noSetInServer, setAsSystem):設置某一個屬性值。如果不需要設置服務器端這個屬性的值，noSetInServer為true. 如果要在系統中都設置，setAsSystem為true.

? ? ??OB.PropertyStore.set('OBUIAPP_GridConfiguration', result, this.windowId);

? ? ? OB.PropertyStore可以加監聽， 值改變的時候會通知監聽對象。

?

? ? ? 8. OB.RemoteCallManager

? ? ? 負責調用服務端的方法，提供一個Call方法，有如下參數：

? ? ? actionName：接收請求處理的類名。

? ? ? data：請求的表體數據

? ? ? requestParams：請求的參數

? ? ? callback：請求返回時，調用的方法

? ? ? callContext

?

? ? ? 9. OB.ViewManager

? ? ? 管理我們打開的所有頁簽，像回退，刷新頁面也屬于它的管轄范圍。它有一個比較重要的方法是打開一個頁簽，openView(viewName, params), viewName: 將要創建“視圖”的名稱。params: 創建“視圖”需要的一些數據。頁簽也就是視圖，有一個屬性showItSelf，如果設置成true，那么就是彈出窗口。如果false，那么就會在頁簽里面打開視圖。

?

? ? ? 10.OB.Utilities.Action

? ? ? 用來定義一系列動作執行方法，定義方法如下：

?

OB.Utilities.Action.set('showAlert', function (paramObj) {alert(paramObj.text); });

?

? ? 執行方法如下：

?

OB.Utilities.Action.execute('showAlert', {'text': 'This is just an example'});

?

? ? executeJSON方法可以順序執行多個方法,如下：

?

OB.Utilities.Action.executeJSON([{'showAlert': {'text': 'This is the first alert'}}, {'showAlert': {'text': 'This is the second alert'}}])

?

? ? ? 當調用executeJSON方法的時候，會生成一個線程，全程監控執行過程。這個線程可以中止執行，暫停執行和繼續執行。比如：

?

OB.Utilities.Action.set('confirmDialog', function(paramObj) {var text = 'Hello ' + paramObj.name + ', do you want to continue with the thread?';if (!confirm(text)) {OB.Utilities.Action.cancelThread(paramObj.threadId);} });OB.Utilities.Action.set('promptDialog', function(paramObj) {var text = '';if (paramObj.value) {text += 'You have introduced: ' + paramObj.value + '\n';}text += 'Please, introduce here a 0 in order to continue'paramObj.value = prompt(text);if (paramObj.value === '0') {OB.Utilities.Action.resumeThread(paramObj.threadId);} else {OB.Utilities.Action.pauseThread(paramObj.threadId);OB.Utilities.Action.execute('promptDialog', paramObj, 100);} });OB.Utilities.Action.set('alertDialog', function(paramObj) {var text = 'You have finished the thread!\nBye ' + paramObj.name;alert(text); });OB.Utilities.Action.executeJSON([{'confirmDialog': {name: 'John Smith'}},{'promptDialog': {}},{'alertDialog': {name: 'John Smith'}} ]);

?

? ? ? 11. OB.Utilities.Number

? ? ? 提供幾個方法用來格式化數字，比如：

? ? ??OB.Utilities.Number.roundJSNumber(num, dec)將數字num按照dec設置的精度處理。

? ? ??OB.Utilities.Number.OBMaskedToJS(numberStr, decSeparator, groupSeparator):將OB中格式的數字轉換成JS中的格式。

? ? ??OB.Utilities.Number.JSToOBMasked(number, maskNumeric, decSeparator, groupSeparator, groupInterval):將JS格式的數字轉換成OB中的格式。

?

? ? ? ?12. OB.Utilities.Date

? ? ? ?格式化日期，比如：

? ? ? ?OB.Utilities.Date.OBToJS(OBDate, dateFormat):將OB中date的格式轉換成JS中的格式

? ? ? ?OB.Utilities.Date.JSToOB(SDate, dateFormat):?反之。

?

? ? ? ?13. OBGrid

? ? ? ?OBGrid是openbravo中的表格定義類，如果你要實現自己的表格類，必須繼承它，以保證你的表格跟系統中的表格風格一樣。

?

? ? ? 14. Openbravo Window Components?

? ? ? Openbravo里面的一個窗口是由多個頁簽組成，每一個頁簽有編輯模式和表格模式，另外，還有工具欄和消息框。下面具體介紹一下這些信息。

?

? ? ? OBStandardWindow：窗口對象

? ? ? Openbravo里面的窗口是通過實例化窗口對象創建的，窗口對象里面的頁簽是通過實例化OBStandardView創建的。每一個頁簽對象里面包含了多個子頁簽，每一個頁簽通過實例化OBViewGrid來實現表格模式和實例化OBViewForm來實現編輯模式。窗口對象一般包含以下屬性：

? ? ? 1. WindowId：窗口存儲在數據庫中對應的id

? ? ? 2. view：根頁簽

? ? ? 3. views：窗口中所有的頁簽

?

? ? ? OBStandardView：頁簽對象

? ? ? 頁簽對象包含以下一些信息：

? ? ? a form(一個編輯頁面)，a grid(一個表格頁面)，a tab set with tabs(一個包含頁簽的頁簽集合)，a message bar(消息顯示條)，a toolbar(工具欄)

? ? ? OBStandardView有如下屬性：

? ? ? tabId：tab ID

? ? ? tabTitle：頁簽的標題

? ? ? StandardWindow：一個返回所屬窗口的鏈接

? ? ? childTabSet：所有子頁簽集合

? ? ? parentView：一個返回父頁簽的鏈接，如果是子頁簽

? ? ? parentTabSet：一個返回父頁簽所有子頁簽集合的鏈接

? ? ? toolBar：本頁簽OBToolBar實例化對象

? ? ? messageBar：消息框

? ? ? viewForm：編輯頁面

? ? ? viewGrid：列表頁面

? ? ? dataSource：為編輯頁面和列表頁面提供數據

? ? ? isActiveView：一個方法，如果頁簽是活動的返回true

?

? ? ? OBViewGrid：表格頁面

? ? ? OBViewGrid是smartclient ListGrid的子類，除開listGrid的屬性外，它還有額外的屬性：

? ? ? setItemValue(item,value)方法：為item設值，并觸發onChange事件。

? ? ? getSelectedRecord：得到當前選中行

? ? ? getEditForm：當編輯表格某一行的時候，返回當前編輯的一行信息

? ? ? getEditRow：得到當前編輯的行

? ? ? setValue(item,value),設置item的值，不觸發onChange事件

?

? ? ? OBViewForm：編輯頁面

? ? ? OBViewForm是DynamicForm的一個子類，有如下重要屬性：

? ? ? view：指向所屬頁簽

? ? ? gird：

? ? ? hasChanged：如果至少有一個字段的值改變，則為ture

? ? ? isNew：the form是否是為了新增一條記錄而打開

?

? ? ? OBMessageBar：提示信息框

? ? ? 給予用戶一些提示信息，比如警告，錯誤等等。它有如下方法：

? ? ? setType(type)：設置消息的類型，不同類型的消息顏色和圖標不同，type有如下幾種： isc.OBMessageBar.TYPE_SUCCESS,TYPE_ERROR,TYPE_WARNING,TYPE_INFO.

? ? ? setText(title,text)：設置提示信息框的內容，和標題，如果標題為空，則設置為默認的

? ? ? setMessage（type,title,text）：上述兩方法結合，同時會顯示消息框

? ? ? hide/show：隱藏或者顯示消息框。

?

? ? ? OBToolBar：工具欄

? ? ? 窗口中的每一個頁簽都有一個工具欄，但是窗口只顯示一個工具欄。當前活動的頁簽，的工具欄才會顯示，如果不是活動頁簽，它所屬的工具欄就會隱藏。

?

?

?

?

總結

以上是生活随笔為你收集整理的Openbravo3.0 客户端代码开发与API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。