How To Use Smartclient VLayout In Openbravo

Smartclient VLayout In Openbravo

VLayout:

V layout represents as layout, in which is members such as form, buttons, grid and etc., are appear as vertically as shown below...

Now we will look in openbravo application, How VLayout reflects in it.

Lets take a look into example code below.

Now we will look in openbravo application, How VLayout reflects in it.

Lets take a look into example code below.

//define class of form prefix with your module prefix like XYZ_ , HGN_ and etc.,
//i used MRP as my prefix..
isc.defineClass('MRP_TimeTable', isc.VLayout);
//here i am adding properties for that class as follows..
isc.MRP_TimeTable.addProperties({
//here isSameTab function is used to open single window. If you try to open one //more time same window it will redirect to same window.
   isSameTab: function (viewId, params) {
       return viewId === 'MRP_TimeTable';
   },
   getBookMarkParams: function () {
       var result = {};
       result.viewId = 'MRP_TimeTable';
       return result;
   },
//here initWidget function having required information for a form.
//We can also use createWindowContents function instead of this.
   initWidget: function () {
//here we are creating a form item which represents as start date input.
       this.startdate = isc.DynamicForm.create({
           ID: "startdateid",
           titleOrientation: 'left',
           width: 250,
           autoDraw: true,
           fields: [{
               name: "classDate",
               title: "From Date",
               hasDefaultValue: true,
               type: '_id_15',
               required: true
           }],
           click: function () {
               this.Super('click', arguments);
           }
       });
//here we are creating a form item which represents as end date input.
       this.enddater = isc.DynamicForm.create({
           ID: "enddaterid",
           titleOrientation: 'left',
           width: 250,
           autoDraw: true,
           fields: [{
               name: "toclassDate",
               title: "To Date",
               hasDefaultValue: true,
               type: '_id_15',
               required: true
           }],
           click: function () {
               this.Super('click', arguments);
           }
       });
//here we are taking Vlayout so that we can add our components to that layout vertically.
       this.TotalLayout = isc.VLayout.create({
           dragAppearance: "target",
           overflow: "hidden",
           canDragResize: true,
           resizeFrom: ["L", "R"],
           layoutMargin: 20,
           membersMargin: 30,
           minWidth: 100,
           minHeight: 50,
           members: [
               this.startdate,
               this.enddater
           ]
       });
//here we are adding layout to form as whole...
       this.addMember(this.TotalLayout);
       this.Super('initWidget', arguments);
   },
   // this view does not have a help view
   getHelpView: function () {
       return;
   }
});

Here we need to create few folders such as below..

Create "web" folder in your module add one more folder with your package name like "com.yoursite.com" and then "js" folder then copy the  "Example.js" file into it. the path must be look like this   "web/com.yoursite.com/js/Example.js".

After developing this script lets give a name such as "Example.js" add this in openbravo.

Go to System admin and navigate to Application dictionary find View Implementation window, then add your script using defined class name in our case MRP_TimeTable, it may differ in your case be careful..
Then navigate Menu and add it to menu so that you can view your designed form.
Now we need to develop one more java file so that we can interact with our form.

Here we are going to assign our script to application so that it will recognize our smartclient form. Code as shown below.

package com.yoursite.com;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Collections;
import javax.enterprise.context.ApplicationScoped;
import org.openbravo.client.kernel.BaseComponentProvider;
import org.openbravo.client.kernel.Component;
import org.openbravo.client.kernel.ComponentProvider;
import org.openbravo.client.kernel.KernelConstants;
import org.openbravo.client.myob.MyOpenbravoWidgetComponent;
import org.openbravo.client.myob.MyOpenbravoComponent;
@ApplicationScoped
@ComponentProvider.Qualifier(MyExampleComponentProvider.COMPONENT_TYPE)
public class MyExampleComponentProvider extends BaseComponentProvider {
  public static final String COMPONENT_TYPE = "MRP_EXAMPLE";
  @Override
  public Component getComponent(String componentId, Map<String, Object> parameters) {
    throw new IllegalArgumentException("Component id " + componentId + " not supported.");
  }
  @Override
  public List<ComponentResource> getGlobalComponentResources() {
    final List<ComponentResource> globalResources = new ArrayList<ComponentResource>();

globalResources.add(createStaticResource(
        "web/com.yoursite.com/js/Example.js", false));
    return globalResources;
  }
  @Override
  public List<String> getTestResources() {
    return Collections.emptyList();
  }
}

Please comment for more explanation for above code only.. :)