Pages

Wednesday, June 19, 2013

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.. :)

How To Use Smartclient HLayout In Openbravo

Smartclient HLayout In Openbravo

HLayout:

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


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

Lets take a look into example code below.

Now we will look in openbravo application, How HLayout 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.HLayout);
//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 Hlayout so that we can add our components to that layout horizontally.
       this.TotalLayout = isc.HLayout.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.. :)

How To Use Smartclient Layouts In Openbravo

Smart Client Layouts In Openbravo

Layouts: 

Layout is represent web page structure style. Layouts are of two kind VLayout and HLayout in smart client.
VLayout is represent vertical layout where members are arranged vertically(side by side).
HLayout is represent horizontal layout where members are arranged horizontally.

Layout  Class (in Smartclient):

Layout class is a subclass of Canvas that automatically arranges other Canvases according to a layout policy.

A Layout manages a set of "member" Canvases initialized via the "members" property. Layouts can have both "members", which are managed by the Layout, and normal Canvas children, which are not managed. 

Rather than using the Layout class directly, use the HLayout, VLayout, HStack and VStack classes, which are subclasses of Layout preconfigured for horizontal or vertical stacking, with the "fill" (VLayout) or "none" (VStack) policies already set. 

In Openbravo there is no difference in usage, we can use every method of layout class in it.

From above we have an idea about Layouts. For more information about layouts please look into HLayout and VLayout articles in this blog.

Example Code for Layout:

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

isc.Ob_exmplelayout.addProperties({
    ID: 'ifvw',
    initWidget: function () {
        this.hegly = isc.HLayout.create({
            width: "100%",
            height: "100%",
            members: [
                isc.Label.create({
                    contents: "Navigation Content",
                    align: "center",
                    overflow: "hidden",
                    width: "30%",
                    showResizeBar: true,
                    border: "1px solid blue"
                }),
                isc.VLayout.create({
                    width: "70%",
                    members: [
                        isc.Label.create({
                            contents: "Header Listing",
                            align: "center",
                            overflow: "hidden",
                            height: "30%",
                            showResizeBar: true,
                            border: "1px solid blue"
                        }),
                        isc.Label.create({
                            contents: "Body Details",
                            align: "center",
                            overflow: "hidden",
                            height: "70%",
                            border: "1px solid blue"
                        })
                    ]
                })
            ]
        });

        this.addMember(this.hegly);
        this.Super('initWidget', arguments);
    }
});

Example View for Layout:



Any issues related to this please comment it.