Radio Button Reference for Openbravo

Last month I happened to see this issue, https://forge.openbravo.com/plugins/espforum/view.php?group_id=100&forumid=549512&topicid=7022038 accidentally, and I was more inclined about the solution model. Radio buttons are very common and are quite useful, but its surprising to note that it has not found its place in Openbravo. I felt Radio Button can be used in many places and that it should be part of the standard Reference Types. I could not get more in to it at that time, but couple of days ago got some time out of work and got a chance to give it a shot. I took the Yes/No Reference type as the base and remodelled the html file (WADYesNo.html) alone and then I was able to create a radio buttons out of it. I thought to contribute it to the community as a small dedication to the great work that is being in progress.

Feel free to buzz me at shankar@fugoconsulting.com. I would be glad to help the community and contribute in a small way that I can. I have also been trying to write some blogs about the basic issues that we face in Openbravo ERP. You can look at those at https://fugoconsulting.wordpress.com/category/openbravo/.

Solution Model:

The following are the sequence of files that I changed for the solution. All these are not needed to bring out a basic Radio Button especially  the skin images. But I have provided it as reference to the sequence of files to be added for a new reference type.

In src-wad/src/org/openbravo/wad/controls add the following files:

  • WADRadioButton.java
/*
 @author: Shankar Balachandran
*/
package org.openbravo.wad.controls;

import java.util.Properties;

import org.openbravo.xmlEngine.XmlDocument;

public class WADRadioButton extends WADControl {

 public WADRadioButton() {
 }

 public WADRadioButton(Properties prop) {
 setInfo(prop);
 initialize();
 }

 public void initialize() {
 generateJSCode();
 }

 private void generateJSCode() {
 setValidation("");
 setCalloutJS();
 }

 public String getType() {
 return "Radio_Check";
 }

 public String editMode() {
 XmlDocument xmlDocument = getReportEngine().readXmlTemplate(
 "org/openbravo/wad/controls/WADRadioButton").createXmlDocument();

 xmlDocument.setParameter("columnName", getData("ColumnName"));
 xmlDocument.setParameter("columnNameInp", getData("ColumnNameInp"));

 if (getData("IsReadOnly").equals("Y") || getData("IsReadOnlyTab").equals("Y")
 || getData("IsUpdateable").equals("N")) {
 xmlDocument.setParameter("disabled", "Y");
 xmlDocument.setParameter("logChanges", "");
 xmlDocument.setParameter("disabledFalse", "return false;");
 } else {
 xmlDocument.setParameter("disabled", "N");
 xmlDocument.setParameter("callout", getOnChangeCode());
 }
 if (getData("IsMandatory").equals("Y"))
 xmlDocument.setParameter("required", "true");
 else
 xmlDocument.setParameter("required", "false");

 return replaceHTML(xmlDocument.print());
 }

 public String newMode() {
 XmlDocument xmlDocument = getReportEngine().readXmlTemplate(
 "org/openbravo/wad/controls/WADRadioButton").createXmlDocument();

 xmlDocument.setParameter("columnName", getData("ColumnName"));
 xmlDocument.setParameter("columnNameInp", getData("ColumnNameInp"));

 if (getData("IsReadOnly").equals("Y") || getData("IsReadOnlyTab").equals("Y")) {
 xmlDocument.setParameter("disabled", "Y");
 xmlDocument.setParameter("logChanges", "");
 xmlDocument.setParameter("disabledFalse", "return false;");
 } else {
 xmlDocument.setParameter("disabled", "N");
 xmlDocument.setParameter("callout", getOnChangeCode());
 }
 if (getData("IsMandatory").equals("Y"))
 xmlDocument.setParameter("required", "true");
 else
 xmlDocument.setParameter("required", "false");

 return replaceHTML(xmlDocument.print());
 }

 public String toXml() {
 StringBuffer text = new StringBuffer();
 if (getData("IsParameter").equals("Y")) {
 if (getData("IsDisplayed").equals("N")) {
 text.append("<PARAMETER id=\"").append(getData("ColumnName")).append("\" name=\"").append(
 getData("ColumnName")).append("\" attribute=\"value\"/>");
 } else {
 text.append("<PARAMETER id=\"").append(getData("ColumnName")).append("\" name=\"").append(
 getData("ColumnName")).append("\" boolean=\"checked\" withId=\"paramCheck\"/>");
 }
 } else {
 if (getData("IsDisplayed").equals("N")) {
 text.append("<FIELD id=\"").append(getData("ColumnName")).append("\" attribute=\"value\">");
 text.append(getData("ColumnName")).append("</FIELD>");
 } else {
 text.append("<FIELD id=\"").append(getData("ColumnName")).append(
 "\" boolean=\"checked\" withId=\"paramCheck\">");
 text.append(getData("ColumnName")).append("</FIELD>");
 }
 }
 return text.toString();
 }

 public String toJava() {
 return "";
 }

 public String getDefaultValue() {
 return "N";
 }

 public boolean isText() {
 return true;
 }
}
  • WADRadioButton.html

<?xml version="1.0" encoding="UTF-8" ?>

<FIELD_TMP>
 <div id="xx_inp">
 <span><input type="radio" name="inpxx" id="xx" value="Y" onchange="return true;" onclick="changeToEditingMode('force');logChanges(this);xx();return true;" required="false"/></span>
 </div>
</FIELD_TMP>

  • WADRadioButton.xml

<?xml version="1.0" encoding="UTF-8"?>

<REPORT>
 <template file="WADRadioButton.html"/>
 <PARAMETER id="paramChecked" name="checked" default="Y"/>

 <PARAMETER id="xx_inp" name="columnName" attribute="id" replace="xx"/>
 <PARAMETER id="xx" name="columnName" attribute="id" replace="xx"/>
 <PARAMETER id="xx" name="columnNameInp" attribute="name" replace="xx"/>
 <PARAMETER id="xx" name="callout" attribute="onclick" replace="xx();" default=""/>
 <PARAMETER id="xx" name="required" attribute="required"/>
 <PARAMETER id="xx" name="disabled" boolean=" onclick='return false;' readonly=true" withId="paramChecked"/>
 <PARAMETER id="xx" name="logChanges" attribute="onclick" replace="logChanges(this);" default="logChanges(this);"/>
 <PARAMETER id="xx" name="disabledFalse" attribute="onclick" replace="return true;" default="return true;"/>

 <DISCARD id="discard"/>
</REPORT>

In src/org/openbravo/reference/ui add the following files

  • UIRadioButton.java

/*
 @author: Shankar Balachandran
*/
package org.openbravo.reference.ui;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Vector;

import javax.servlet.ServletException;

import org.openbravo.base.secureApp.VariablesSecureApp;
import org.openbravo.erpCommon.businessUtility.BuscadorData;

public class UIRadioButton extends UIReference {
 public UIRadioButton(String reference, String subreference) {
 super(reference, subreference);
 }

 public void generateFilterHtml(StringBuffer strHtml, VariablesSecureApp vars,
 BuscadorData fields, String strTab, String strWindow, ArrayList<String> vecScript, Vector<Object> vecKeys) throws IOException, ServletException {
 UIList list = new UIList("17", "47209D76F3EE4B6D84222C5BDF170AA2");
 list.generateFilterHtml(strHtml, vars, fields, strTab, strWindow, vecScript, null);
 }

 public void generateFilterAcceptScript(BuscadorData field, StringBuffer params,
 StringBuffer paramsData) {
 UITableDir tableDir = new UITableDir(reference, subReference);
 tableDir.generateFilterAcceptScript(field, params, paramsData);
 }
}

In web/skins/Default/Common

  • Add the Radio Button Folder with images

In web/skins/Default, in Openbravo_ERP_250.css add the following Code.

 


/*Custom Code Developed by Shankar 	Balachandran*/
/*
*************************
* Radio Button
*************************
*/
.dojoHtmlRadioButton {
border: 0px;
width: 16px;
height: 16px;
margin: 2px;
vertical-align: middle;
}
.dojoHtmlRadioButtonOn {
background-image: 	url(Common/RadioButton/Enabled.png) ;
}
.dojoHtmlRadioButtonOff {
background-image: 	url(Common/RadioButton/Simple.png) ;
}
.dojoHtmlRadioButtonDisabledOn {
background-image: 	url(Common/RadioButton/Disabled.png) ;
}
.dojoHtmlRadioButtonDisabledOff {
background-image: 	url(Common/RadioButton/Enabled.png) ;
}
.dojoHtmlRadioButtonOnHover {
background-image: 	url(Common/RadioButton/Simple.png) ;
}
.dojoHtmlRadioButtonOffHover {
background-image: 	url(Common/RadioButton/Simple.png) ;
}
.RadioButton_NOT_focused, 	.Radio_NOT_focused {
}
.RadioButton_container_NOT_focused, 	.Radio_container_NOT_focused {
padding: 0px;
margin: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 2px;
border-color: transparent;
}
.RadioButton_focused, 	.Radio_focused {
border: 2px solid #4D98CA;
outline-style: solid;
outline-width: 2px;
outline-color: #4D98CA;
}
.RadioButton_container_focused, 	.Radio_container_focused {
border-style: solid;
border-width: 2px;
border-color: transparent;
}

Then you have to create a base reference in the Application for the Radio Button. Below is a screen shot for reference.

You can assign the reference to any column that you want. I assigned it to the ”Default” field in the Module Window. Attached below is the screen shot of the field mapping.

Then you can “compile.complete.deploy” and then check the Module Window for the change. Attached below is the Screen shot with the Radio Button in Disabled and Enabled states.

Radio Button Disabled:

Radio Button Enabled:

Note:

 

  1. Option buttons are best utilised with the Button Group and they are least useful when used as individual items.
  2. I tried creating the same in RC4. And in the new UI, all I got was a text box with default value ‘False’. Not sure what piece I missed. But when I viewed it through the classic mode option, (URL/?mode=classic), I was able to view the Radio Button correctly.
For more external reference examples, refer here.
Advertisements

About Shankar Balachandran
Technical Manager, Openbravo operations, Kailao Consulting Private Limited

14 Responses to Radio Button Reference for Openbravo

  1. alostale says:

    Hi Shankar,

    Great work! Thank for sharing it.

    I have some comments I’d like t share with you:

    *As you mention, option buttons make more sense when used within a group. This might be implemented by allowing to select a list reference additionally to yours. In this way you could show an option per each of the possible values the list has and pack all of them in a group.
    *Openbravo 3 windows do not use WAD anymore (they still do when are displayed in 2.50 style). You can implement the WADControl equivalent by defining a User Interface Definition for the reference.
    *I strongly recommend to do this implementation within a module rather than directly in core sources. This has two major advantages:
    1) It makes the instance where it is installed much more maintainable. When updating to a newer core version sources are replaced, so you would have to manually maintain them if they are implemented directly within core, whereas if they are in a separate module, this is done automatically.
    2) It would allow you to share it easily by publishing it in Central Repository, or even make money if you prefer to publish it as a commercial module.
    *Finally, if you are interested in further contributions to Openbravo, please contact me and I will explain how it can be done.

    Regards

    Asier

    • Hi Asier,

      Thanks a bunch for you invaluable input. Being able to select a list reference to source options for radio buttons would be very slick!

      I will get in touch with you on further contributions to Openbravo.

      Regards,
      Shankar

  2. Pingback: Radio Button Reference for Openbravo | myErp

  3. Pingback: HTMLArea in Openbravo « Fugo Consulting

  4. Pingback: Reference Types in Openbravo « Fugo Consulting

  5. Pingback: Displaying Images in Openbravo « Fugo Consulting

  6. Pingback: HTMLArea in Openbravo | Openbravo blogs

  7. Pingback: HTMLArea in Openbravo « Shaan – Openbravo Developer, India, Fugo

  8. Pingback: Radio Button Reference for Openbravo « Shaan – Openbravo Developer, India, Fugo

  9. Pingback: HTMLArea in Openbravo « Openbravo Technical Development – Do's and Dont's

  10. Pingback: Radio Button Reference for Openbravo « Openbravo Technical Development – Do's and Dont's

  11. suryarao says:

    Dear Sir, In Openbravo html reports we need columns data will be filter on AutoComplete.
    Ex: Manual report has column country when we type au then countries those are having au in their countries name we need to display.
    how to implement this.
    thanks in advance.

  12. Pingback: HTMLArea in Openbravo – Shankar Balachandran

  13. Pingback: Radio Button Reference for Openbravo – Shankar Balachandran

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: