Openbravo如何实现一个视图

     一. 概述

           在openbravo里面什么叫一个视图，显示在一个页签里面的内容叫做视图，也就是主要用来展示内容的一个控件。如下图所示

页签 unit of measure和translation里面包含的内容叫做视图。本文只是简单介绍一下视图怎么创建。

二. 样例步骤

有2中方式创建视图的定义，一种是静态js，一种是动态js。只说静态js的步骤：

1. 创建一个静态js文件，创建视图的定义，名称为：example-grid-view.js

isc.defineClass('CAPPBAR_TestGrid', isc.OBGrid);

isc.CAPPBAR_TestGrid.addProperties({
  dataSource: null,
  showFilterEditor: true,

  dataProperties: {
    useClientFiltering: false
  },

  gridFields: [{
    name: 'name',
    // allow filtering on name
    canFilter: true,
    // filter automatically when the user types
    filterOnKeypress: true
  },

  {
    // description is a property of the product
    name: 'description',
    // allow filtering on description
    canFilter: true,
    // filter automatically when the user types
    filterOnKeypress: true
  }],

  setDataSource: function (ds) {
    // is called when the datasource is retrieved from the server
    this.Super('setDataSource', [ds, this.gridFields]);
    this.refreshFields();
    this.sort('name');
    this.fetchData();
  },

  initWidget: function () {
    // get the datasource, if it is not yet defined
    // it is retrieved from the server and returned
    // Datasources refer to tables using the entity name
    OB.Datasource.get('Product', this, null, true);
    this.Super('initWidget', arguments);
  }
});

isc.defineClass('CAPPBAR_SimpleView', isc.VLayout);

isc.CAPPBAR_SimpleView.addProperties({
  // do some margins between the members
  membersMargin: 10,
  defaultLayoutAlign: 'center',

  initWidget: function () {
    // create a button which is enabled 
    var grid, btn;

    // create an instance of the grid
    grid = isc.CAPPBAR_TestGrid.create({
      // add logic to enable/disable the button when
      // the selected records changes
      selectionUpdated: function (record, recordList) {
        if (recordList && recordList.length > 0) {
          btn.setDisabled(false);
        } else {
          btn.setDisabled(true);
        }
      }
    });

    // and create a button which refers to the grid
    btn = isc.OBFormButton.create({
      title: 'click me',
      // let it be enabled when more than one 
      disabled: true,
      action: function () {
        // show the number of selected records
        // illustrates the usage of a parameterized message
        isc.say("被选中的行总共是： " + [grid.getSelectedRecords().length]);
      }
    });

    // add the grid
    this.addMember(btn);
    this.addMember(grid);
    this.Super('initWidget', arguments);
  },

  // the following three methods are related to the view handling
  // api of Openbravo
  isSameTab: function (viewId, params) {
    // return false, allows this view to be opened many times
    return false;
  },

  // just return the classname and nothing else to be bookmarked
  getBookMarkParams: function () {
    var result = {};
    result.viewId = this.getClassName();
    return result;
  },

  // this view does not have a help view
  getHelpView: function () {
    return;
  }
});

2. 通过一个ComponentProvider来加载这个静态js文件，如下所示：

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

3. 在系统注册该视图

Application Dictionary > User Interface > View Implementation，点击新建如下图所示：

注意name字段跟静态js里面的名称对应起来，这样系统才能找到对应的js文件。

4. 新建一个菜单项，对应这个视图

注意view implementation字段对应上面定义的那个视图。这样点击这个菜单项的时候就会找到那个视图，视图会找到对应的静态js文件，从而创建一个视图。

最终点击LWS_View_Test菜单项结果如下：