?

? ? ? ?一. 客戶端代碼開發(fā)工具

?

? ? ? Openbravo3.0客戶端代碼開發(fā)是大量的javascript代碼，CSS代碼和極少量的html代碼開發(fā)。我們是通過瀏覽器加載來查看客戶端主要的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代碼，為了減輕客戶端的加載壓力。但是，這回讓客戶端調(diào)試代碼更加困難，那么如何獲取沒有壓縮的javascript代碼。

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

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

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

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

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

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

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

?

?

? ? ? 四. 添加javascript到openbravo系統(tǒng)

?

? ? ? javascript加入到openbravo系統(tǒng)可以通過如下方式：

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

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

?

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

?

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

?

? ? ? ?當(dāng)添加新的實例或者類的時候，需要遵守如下協(xié)議：

? ? ? ?1. 所有的全局?jǐn)?shù)據(jù)必須加載全局對象OB里面。

? ? ? ?2. 所有CSS樣式命名必須以O(shè)B打頭。

? ? ? ?3. 所有的smartclient類命名必須以O(shè)B打頭。?

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

?

? ? ? ?1. OB.Application

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

? ? ??

?

? ? ? 2. OB.User

? ? ? 包含當(dāng)前登錄用戶的相關(guān)信息

? ? ??

?

? ? ? 3. OB.Constants

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

?

? ? ? 4. OB.Datasource

? ? ? 提供標(biāo)準(zhǔn)和定制的數(shù)據(jù)源，它提供2個方法，create和get。

? ? ? get方法在獲取數(shù)據(jù)源的時候，會先判斷在客戶端是否已經(jīng)緩存了，如果緩存了直接返回。如果沒有，則發(fā)生一個請求到服務(wù)端，要求服務(wù)端生成一個數(shù)據(jù)源返回。需要注意的是，這個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方法不會調(diào)動服務(wù)器端來生成數(shù)據(jù)源，而是在客戶端自己生成，利用傳過來的參數(shù)

?

// ** {{{ 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來創(chuàng)建數(shù)據(jù)源，isc.OBRestDataSource繼承自SmartClient RestDatasource方法。

?

? ? ?5. OB.Format

? ? ?負(fù)責(zé)當(dāng)前用戶全局日期，數(shù)字的格式設(shè)置， 特殊字段的設(shè)置在format.xml里面設(shè)置，

? ? ?

?

? ? ? 6. OB.I18N

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

?

? ? ? 7. OB.PropertyStore

? ? ? 負(fù)責(zé)獲取和設(shè)置一些屬性值。

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

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

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

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

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

?

? ? ? 8. OB.RemoteCallManager

? ? ? 負(fù)責(zé)調(diào)用服務(wù)端的方法，提供一個Call方法，有如下參數(shù)：

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

? ? ? data：請求的表體數(shù)據(jù)

? ? ? requestParams：請求的參數(shù)

? ? ? callback：請求返回時，調(diào)用的方法

? ? ? callContext

?

? ? ? 9. OB.ViewManager

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

?

? ? ? 10.OB.Utilities.Action

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

?

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

?

? ? 執(zhí)行方法如下：

?

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

?

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

?

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

?

? ? ? 當(dāng)調(diào)用executeJSON方法的時候，會生成一個線程，全程監(jiān)控執(zhí)行過程。這個線程可以中止執(zhí)行，暫停執(zhí)行和繼續(xù)執(zhí)行。比如：

?

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

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

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

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

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

?

? ? ? ?12. OB.Utilities.Date

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

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

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

?

? ? ? ?13. OBGrid

? ? ? ?OBGrid是openbravo中的表格定義類，如果你要實現(xiàn)自己的表格類，必須繼承它，以保證你的表格跟系統(tǒng)中的表格風(fēng)格一樣。

?

? ? ? 14. Openbravo Window Components?

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

?

? ? ? OBStandardWindow：窗口對象

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

? ? ? 1. WindowId：窗口存儲在數(shù)據(jù)庫中對應(yīng)的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：頁簽的標(biāo)題

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

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

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

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

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

? ? ? messageBar：消息框

? ? ? viewForm：編輯頁面

? ? ? viewGrid：列表頁面

? ? ? dataSource：為編輯頁面和列表頁面提供數(shù)據(jù)

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

?

? ? ? OBViewGrid：表格頁面

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

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

? ? ? getSelectedRecord：得到當(dāng)前選中行

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

? ? ? getEditRow：得到當(dāng)前編輯的行

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

?

? ? ? OBViewForm：編輯頁面

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

? ? ? view：指向所屬頁簽

? ? ? gird：

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

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

?

? ? ? OBMessageBar：提示信息框

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

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

? ? ? setText(title,text)：設(shè)置提示信息框的內(nèi)容，和標(biāo)題，如果標(biāo)題為空，則設(shè)置為默認(rèn)的

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

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

?

? ? ? OBToolBar：工具欄

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

?

?

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。