IDEMPIERE-800 Zk: Add API to ease implementation of consistent button style across the whole application.

migration/i1.0a-release/oracle/201303261217_IDEMPIERE-800.sql

@@ -0,0 +1,8 @@
+-- Mar 26, 2013 8:15:58 PM MYT
+-- IDEMPIERE-800 Zk: Add API for consistent button style
+INSERT INTO AD_SysConfig (AD_SysConfig_ID,EntityType,ConfigurationLevel,Value,Description,AD_SysConfig_UU,Created,Updated,AD_Client_ID,AD_Org_ID,CreatedBy,IsActive,UpdatedBy,Name) VALUES (200029,'D','S','I','T-Text, I-Image, IT-Image and Text','c86d55be-3ae7-425e-a828-8f6cb1a6977c',TO_DATE('2013-03-26 20:15:56','YYYY-MM-DD HH24:MI:SS'),TO_DATE('2013-03-26 20:15:56','YYYY-MM-DD HH24:MI:SS'),0,0,100,'Y',100,'ZK_BUTTON_STYLE')
+;
+
+SELECT register_migration_script('201303261217_IDEMPIERE-800.sql') FROM dual
+;
+

migration/i1.0a-release/postgresql/201303261217_IDEMPIERE-800.sql

@@ -0,0 +1,8 @@
+-- Mar 26, 2013 8:15:58 PM MYT
+-- IDEMPIERE-800 Zk: Add API for consistent button style
+INSERT INTO AD_SysConfig (AD_SysConfig_ID,EntityType,ConfigurationLevel,Value,Description,AD_SysConfig_UU,Created,Updated,AD_Client_ID,AD_Org_ID,CreatedBy,IsActive,UpdatedBy,Name) VALUES (200029,'D','S','I','T-Text, I-Image, IT-Image and Text','c86d55be-3ae7-425e-a828-8f6cb1a6977c',TO_TIMESTAMP('2013-03-26 20:15:56','YYYY-MM-DD HH24:MI:SS'),TO_TIMESTAMP('2013-03-26 20:15:56','YYYY-MM-DD HH24:MI:SS'),0,0,100,'Y',100,'ZK_BUTTON_STYLE')
+;
+
+SELECT register_migration_script('201303261217_IDEMPIERE-800.sql') FROM dual
+;
+

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/apps/ProcessDialog.java

@@ -23,9 +23,11 @@ import org.adempiere.util.ServerContext;
 import org.adempiere.webui.AdempiereWebUI;
 import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.Button;
+import org.adempiere.webui.component.ConfirmPanel;
 import org.adempiere.webui.component.Panel;
 import org.adempiere.webui.component.Window;
 import org.adempiere.webui.desktop.IDesktop;
+import org.adempiere.webui.factory.ButtonFactory;
 import org.adempiere.webui.part.WindowContainer;
 import org.adempiere.webui.process.WProcessInfo;
 import org.adempiere.webui.session.SessionManager;
@@ -175,20 +177,14 @@ public class ProcessDialog extends Window implements EventListener<Event>, IProc
 		@SuppressWarnings("unused")
 		String label = Msg.getMsg(Env.getCtx(), "Start");
 		// Invert - Unify  OK/Cancel IDEMPIERE-77
-		//bOK = new Button(label.replaceAll("&", ""));
+		bOK = ButtonFactory.createNamedButton(ConfirmPanel.A_OK);
-		bOK = new Button();
-		bOK.setImage(ThemeManager.getThemeResource("images/Ok16.png"));
 		bOK.setId("Ok");
 		bOK.addEventListener(Events.ON_CLICK, this);
-		bOK.setSclass("action-image-text-button");
 		hbox.appendChild(bOK);
 		
-		//label = Msg.getMsg(Env.getCtx(), "Cancel");
+		Button btn = ButtonFactory.createNamedButton(ConfirmPanel.A_CANCEL);
-		Button btn = new Button();
-		btn.setImage(ThemeManager.getThemeResource("images/Cancel16.png"));
 		btn.setId("Cancel");
 		btn.addEventListener(Events.ON_CLICK, this);
-		btn.setSclass("action-image-text-button");
 		hbox.appendChild(btn);		
 		div.appendChild(hbox);
 		div.setStyle("padding: 10px; text-align: center; text-align: -webkit-center; text-align: -moz-center; ");

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/apps/ProcessModalDialog.java

@@ -33,11 +33,12 @@ import org.adempiere.util.ServerContext;
 import org.adempiere.webui.AdempiereWebUI;
 import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.Button;
+import org.adempiere.webui.component.ConfirmPanel;
 import org.adempiere.webui.component.Panel;
 import org.adempiere.webui.component.VerticalBox;
 import org.adempiere.webui.component.Window;
 import org.adempiere.webui.event.DialogEvents;
-import org.adempiere.webui.theme.ThemeManager;
+import org.adempiere.webui.factory.ButtonFactory;
 import org.adempiere.webui.window.FDialog;
 import org.adempiere.webui.window.MultiFileDownloadDialog;
 import org.compiere.Adempiere;
@@ -176,17 +177,13 @@ public class ProcessModalDialog extends Window implements EventListener<Event>,
 		Hbox hbox = new Hbox();
 		hbox.setWidth("100%");
 		hbox.setStyle("margin-top: 10px");
-		Button btn = new Button("");
+		Button btn = ButtonFactory.createNamedButton(ConfirmPanel.A_OK);
-		btn.setImage(ThemeManager.getThemeResource("images/Ok24.png"));
-		LayoutUtils.addSclass("action-button", btn);
 		btn.setId("Ok");
 		btn.addEventListener(Events.ON_CLICK, this);
 		hbox.appendChild(btn);
 
-		btn = new Button("");
+		btn = ButtonFactory.createNamedButton(ConfirmPanel.A_CANCEL);
-		btn.setImage(ThemeManager.getThemeResource("images/Cancel24.png"));
 		btn.setId("Cancel");
-		LayoutUtils.addSclass("action-button", btn);
 		btn.addEventListener(Events.ON_CLICK, this);
 
 		hbox.appendChild(btn);

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/apps/form/WPaymentFormCheck.java

@@ -92,7 +92,7 @@ public class WPaymentFormCheck extends PaymentFormCheck implements EventListener
 		sNumberField.setWidth("100pt");
 		sRoutingField.setWidth("70pt");
 		sOnline.setLabel(Msg.getMsg(Env.getCtx(), "Online"));
-		LayoutUtils.addSclass("action-text-button", sOnline);
+		LayoutUtils.addSclass("txt-btn", sOnline);
 		sOnline.addActionListener(this);
 		window.getPanel().setId("sPanel");
 		

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/apps/form/WPaymentFormCreditCard.java

@@ -16,7 +16,6 @@ package org.adempiere.webui.apps.form;
 import java.math.BigDecimal;
 
 import org.adempiere.util.PaymentUtil;
-import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.Button;
 import org.adempiere.webui.component.Column;
 import org.adempiere.webui.component.Columns;
@@ -30,6 +29,7 @@ import org.adempiere.webui.component.Row;
 import org.adempiere.webui.component.Rows;
 import org.adempiere.webui.component.Textbox;
 import org.adempiere.webui.editor.WNumberEditor;
+import org.adempiere.webui.factory.ButtonFactory;
 import org.adempiere.webui.window.FDialog;
 import org.compiere.grid.PaymentFormCreditCard;
 import org.compiere.model.GridTab;
@@ -64,7 +64,7 @@ public class WPaymentFormCreditCard extends PaymentFormCreditCard implements Eve
 	private WNumberEditor kAmountField = new WNumberEditor();
 	private Label kApprovalLabel = new Label();
 	private Textbox kApprovalField = new Textbox();
-	private Button kOnline = new Button();
+	private Button kOnline = ButtonFactory.createNamedButton("Online");
 	private Label kStatus = new Label();
 	
 	public WPaymentFormCreditCard(int windowNo, GridTab mTab) {
@@ -85,8 +85,6 @@ public class WPaymentFormCreditCard extends PaymentFormCreditCard implements Eve
 		kExpLabel.setText(Msg.getMsg(Env.getCtx(), "Expires"));
 		kApprovalLabel.setText(Msg.translate(Env.getCtx(), "VoiceAuthCode"));
 		kAmountLabel.setText(Msg.getMsg(Env.getCtx(), "Amount"));
-		kOnline.setLabel(Msg.getMsg(Env.getCtx(), "Online"));
-		LayoutUtils.addSclass("action-text-button", kOnline);
 		kOnline.addActionListener(this);
 		window.getPanel().setId("kPanel");
 		

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/apps/form/WPaymentFormDirect.java

@@ -75,7 +75,7 @@ public abstract class WPaymentFormDirect extends PaymentFormDirect implements Ev
 		tRoutingText.setText(Msg.translate(Env.getCtx(), "RoutingNo"));
 		tNumberText.setText(Msg.translate(Env.getCtx(), "AccountNo"));
 		tOnline.setLabel(Msg.getMsg(Env.getCtx(), "Online"));
-		LayoutUtils.addSclass("action-text-button", tOnline);
+		LayoutUtils.addSclass("txt-btn", tOnline);
 		tOnline.addActionListener(this);
 		window.getPanel().setId("tPanel");
 		

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/ConfirmPanel.java

@@ -22,10 +22,7 @@ import java.util.Iterator;
 import java.util.List;
 import java.util.Map;
 
-import org.adempiere.webui.LayoutUtils;
+import org.adempiere.webui.factory.ButtonFactory;
-import org.adempiere.webui.theme.ThemeManager;
-import org.compiere.util.Env;
-import org.compiere.util.Msg;
 import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zul.Hbox;
@@ -75,6 +72,7 @@ public final class ConfirmPanel extends Hbox
     private boolean  m_withText = false;
 
     private Map<String, Button> buttonMap = new HashMap<String, Button>();
+	private boolean m_withImage = true;
 
     /**
      * Creates a button of the specified id
@@ -101,34 +99,31 @@ public final class ConfirmPanel extends Hbox
      */
     public Button createButton(String name)
     {
-        Button button = new Button();
+        Button button = ButtonFactory.createNamedButton(name, m_withText, m_withImage);        
-        button.setName("btn"+name);
         button.setId(name);
-        
-        String text = Msg.translate(Env.getCtx(), name);
-        if (!name.equals(text))
-        	text = text.replaceAll("[&]", "");
-        else
-        	text = null;
-
-        if (m_withText && text != null)
-        {
-        	button.setImage(ThemeManager.getThemeResource("images/"+name+"16.png"));
-        	button.setLabel(text);
-        	LayoutUtils.addSclass("action-text-button", button);
-        }
-        else
-        {
-        	button.setImage(ThemeManager.getThemeResource("images/"+name+"24.png"));
-        	if (text != null)
-        		button.setTooltiptext(text);
-        	LayoutUtils.addSclass("action-button", button);
-        }
-
         buttonMap.put(name, button);
 
         return button;
     }
+    
+    /**
+     * create confirm panel with multiple options
+     * @param withCancelButton       with cancel
+     * @param withRefreshButton      with refresh
+     * @param withResetButton        with reset
+     * @param withCustomizeButton    with customize
+     * @param withHistoryButton      with history
+     * @param withZoomButton         with zoom
+     */
+    public ConfirmPanel(boolean withCancelButton,
+             boolean withRefreshButton,
+             boolean withResetButton,
+             boolean withCustomizeButton,
+             boolean withHistoryButton,
+             boolean withZoomButton)
+    {
+    	this(withCancelButton, withRefreshButton, withResetButton, withCustomizeButton, withHistoryButton, withZoomButton, ButtonFactory.isWithText());
+    }
 
     /**
      * create confirm panel with multiple options
@@ -138,26 +133,8 @@ public final class ConfirmPanel extends Hbox
      * @param withCustomizeButton    with customize
      * @param withHistoryButton      with history
      * @param withZoomButton         with zoom
+     * @param withText
      */
-     public ConfirmPanel(boolean withCancelButton,
-             boolean withRefreshButton,
-             boolean withResetButton,
-             boolean withCustomizeButton,
-             boolean withHistoryButton,
-             boolean withZoomButton)
-     {
-    	 this(withCancelButton, withRefreshButton, withResetButton, withCustomizeButton, withHistoryButton, withZoomButton, false);
-     }
-
-   /**
-    * create confirm panel with multiple options
-    * @param withCancelButton       with cancel
-    * @param withRefreshButton      with refresh
-    * @param withResetButton        with reset
-    * @param withCustomizeButton    with customize
-    * @param withHistoryButton      with history
-    * @param withZoomButton         with zoom
-    */
     public ConfirmPanel(boolean withCancelButton,
             boolean withRefreshButton,
             boolean withResetButton,
@@ -165,8 +142,32 @@ public final class ConfirmPanel extends Hbox
             boolean withHistoryButton,
             boolean withZoomButton,
             boolean withText)
+    {
+    	this(withCancelButton, withRefreshButton, withResetButton, withCustomizeButton, withHistoryButton, withZoomButton, withText, !withText ? true : ButtonFactory.isWithImage());
+    }
+    
+    /**
+     * create confirm panel with multiple options
+     * @param withCancelButton       with cancel
+     * @param withRefreshButton      with refresh
+     * @param withResetButton        with reset
+     * @param withCustomizeButton    with customize
+     * @param withHistoryButton      with history
+     * @param withZoomButton         with zoom
+     * @param withText
+     * @param withImage Incude image for button. Note that image always included if withText is false
+     */
+    public ConfirmPanel(boolean withCancelButton,
+            boolean withRefreshButton,
+            boolean withResetButton,
+            boolean withCustomizeButton,
+            boolean withHistoryButton,
+            boolean withZoomButton,
+            boolean withText,
+            boolean withImage)
     {
     	m_withText = withText;
+    	m_withImage  = withImage;
 
         init();
 

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/Messagebox.java

@@ -21,8 +21,8 @@ import java.util.Properties;
 
 import org.adempiere.util.Callback;
 import org.adempiere.webui.AdempiereIdGenerator;
-import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.apps.AEnv;
+import org.adempiere.webui.factory.ButtonFactory;
 import org.adempiere.webui.theme.ThemeManager;
 import org.compiere.util.Env;
 import org.compiere.util.Msg;
@@ -55,13 +55,13 @@ public class Messagebox extends Window implements EventListener<Event>
 
 	private Text lblMsg = new Text();
 
-	private Button btnOk = new Button();
+	private Button btnOk;
-	private Button btnCancel = new Button();
+	private Button btnCancel;
-	private Button btnYes = new Button();
+	private Button btnYes;
-	private Button btnNo = new Button();
+	private Button btnNo;
-	private Button btnAbort = new Button();
+	private Button btnAbort;
-	private Button btnRetry = new Button();
+	private Button btnRetry;
-	private Button btnIgnore = new Button();
+	private Button btnIgnore;
 
 	private Image img = new Image();
 
@@ -115,45 +115,39 @@ public class Messagebox extends Window implements EventListener<Event>
 		lblMsg.setEncode(false);
 		lblMsg.setValue(msg);
 		// Invert - Unify  OK/Cancel IDEMPIERE-77
-		//btnOk.setLabel(Util.cleanAmp(Msg.getMsg(ctx, "OK")));
+		btnOk = ButtonFactory.createNamedButton(ConfirmPanel.A_OK);
-		btnOk.setImage(ThemeManager.getThemeResource("images/Ok16.png"));
 		btnOk.setId("btnOk");
 		btnOk.addEventListener(Events.ON_CLICK, this);
-		LayoutUtils.addSclass("action-text-button", btnOk);
 
-		//btnCancel.setLabel(Util.cleanAmp(Msg.getMsg(ctx, "Cancel")));
+		btnCancel = ButtonFactory.createNamedButton(ConfirmPanel.A_CANCEL);
-		btnCancel.setImage(ThemeManager.getThemeResource("images/Cancel16.png"));
 		btnCancel.addEventListener(Events.ON_CLICK, this);
 		btnCancel.setId("btnCancel");
-		LayoutUtils.addSclass("action-text-button", btnCancel);
 
-		btnYes.setLabel(Util.cleanAmp(Msg.getMsg(ctx, "Yes")));
+		String yesLabel = Util.cleanAmp(Msg.getMsg(ctx, "Yes"));
-		btnYes.setImage(ThemeManager.getThemeResource("images/Ok16.png"));
+		btnYes = ButtonFactory.createButton(ButtonFactory.isWithText() ? yesLabel : null, 
+				ButtonFactory.isWithImage() ? (ButtonFactory.isWithText() ? ThemeManager.getThemeResource("images/Ok16.png") : ThemeManager.getThemeResource("images/Ok24.png")) : null, 
+				ButtonFactory.isWithText() ? null : yesLabel);
 		btnYes.addEventListener(Events.ON_CLICK, this);
 		btnYes.setId("btnYes");
-		LayoutUtils.addSclass("action-text-button", btnYes);
 
-		btnNo.setLabel(Util.cleanAmp(Msg.getMsg(ctx, "No")));
+		String noLabel = Util.cleanAmp(Msg.getMsg(ctx, "No"));
-		btnNo.setImage(ThemeManager.getThemeResource("images/Cancel16.png"));
+		btnNo = ButtonFactory.createButton(ButtonFactory.isWithText() ? noLabel : null, 
+				ButtonFactory.isWithImage() ? ( ButtonFactory.isWithText() ? ThemeManager.getThemeResource("images/Cancel16.png") : ThemeManager.getThemeResource("images/Cancel24.png")) : null, 
+				ButtonFactory.isWithText() ? null : noLabel);
 		btnNo.addEventListener(Events.ON_CLICK, this);
 		btnNo.setId("btnNo");
-		LayoutUtils.addSclass("action-text-button", btnNo);
+		
-
+		btnAbort = ButtonFactory.createButton("Abort", null, null);
-		btnAbort.setLabel("Abort");
 		btnAbort.addEventListener(Events.ON_CLICK, this);
 		btnAbort.setId("btnAbort");
-		LayoutUtils.addSclass("action-text-button", btnAbort);
 
-		btnRetry.setLabel("Retry");
+		btnRetry = ButtonFactory.createButton("Retry", null, null);
 		btnRetry.addEventListener(Events.ON_CLICK, this);
 		btnRetry.setId("btnRetry");
-		LayoutUtils.addSclass("action-text-button", btnRetry);
 
-		btnIgnore.setLabel("Ignore");
+		btnIgnore = ButtonFactory.createNamedButton("Ignore");
-		btnIgnore.setImage(ThemeManager.getThemeResource("images/Ignore16.png"));
 		btnIgnore.addEventListener(Events.ON_CLICK, this);
 		btnIgnore.setId("btnIgnore");
-		LayoutUtils.addSclass("action-text-button", btnIgnore);
 
 		Panel pnlMessage = new Panel();
 		pnlMessage.setStyle(MESSAGE_PANEL_STYLE);
@@ -219,6 +213,8 @@ public class Messagebox extends Window implements EventListener<Event>
 		this.imgSrc = icon;
 		this.callback = callback;
 
+		init();
+		
 		btnOk.setVisible(false);
 		btnCancel.setVisible(false);
 		btnYes.setVisible(false);
@@ -248,8 +244,6 @@ public class Messagebox extends Window implements EventListener<Event>
 		if ((buttons & IGNORE) != 0)
 			btnIgnore.setVisible(true);
 
-		init();
-
 		this.setTitle(title);
 		this.setPosition("center");
 		this.setClosable(true);

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/ProcessInfoDialog.java

@@ -16,9 +16,8 @@ package org.adempiere.webui.component;
 
 import java.text.SimpleDateFormat;
 
-import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.apps.AEnv;
-import org.adempiere.webui.theme.ThemeManager;
+import org.adempiere.webui.factory.ButtonFactory;
 import org.compiere.process.ProcessInfoLog;
 import org.compiere.util.DisplayType;
 import org.compiere.util.Env;
@@ -42,7 +41,7 @@ public class ProcessInfoDialog extends Window implements EventListener<Event> {
 	private static final String MESSAGE_PANEL_STYLE = "text-align:left; word-break: break-all; overflow: auto; max-height: 250pt; min-width: 230pt; max-width: 450pt;";
 
 	private Text lblMsg = new Text();
-	private Button btnOk = new Button();
+	private Button btnOk = ButtonFactory.createNamedButton(ConfirmPanel.A_OK);
 	private Image img = new Image();
 	public static final String INFORMATION = "~./zul/img/msgbox/info-btn.png";
 
@@ -64,9 +63,7 @@ public class ProcessInfoDialog extends Window implements EventListener<Event> {
 		lblMsg.setEncode(false);
 		lblMsg.setValue(header);
 
-		btnOk.setImage(ThemeManager.getThemeResource("images/Ok16.png"));
 		btnOk.addEventListener(Events.ON_CLICK, this);
-		LayoutUtils.addSclass("action-text-button", btnOk);
 
 		Panel pnlMessage = new Panel();
 		pnlMessage.setStyle(MESSAGE_PANEL_STYLE);

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/WAppsAction.java

@@ -107,7 +107,7 @@ public class WAppsAction
        {
     	   m_button.setLabel(newToolTipText);
        }
-       LayoutUtils.addSclass("action-button", m_button);
+       LayoutUtils.addSclass("img-btn", m_button);
    }   //  Action
    
    private Button  m_button;

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/factory/ButtonFactory.java

@@ -0,0 +1,138 @@
+/******************************************************************************
+ * Copyright (C) 2013 Heng Sin Low                                            *
+ * Copyright (C) 2013 Trek Global                 							  *
+ * This program is free software; you can redistribute it and/or modify it    *
+ * under the terms version 2 of the GNU General Public License as published   *
+ * by the Free Software Foundation. This program is distributed in the hope   *
+ * that it will be useful, but WITHOUT ANY WARRANTY; without even the implied *
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.           *
+ * See the GNU General Public License for more details.                       *
+ * You should have received a copy of the GNU General Public License along    *
+ * with this program; if not, write to the Free Software Foundation, Inc.,    *
+ * 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.                     *
+ *****************************************************************************/
+package org.adempiere.webui.factory;
+
+import org.adempiere.webui.LayoutUtils;
+import org.adempiere.webui.component.Button;
+import org.adempiere.webui.theme.ThemeManager;
+import org.compiere.model.MSysConfig;
+import org.compiere.util.Env;
+import org.compiere.util.Msg;
+import org.compiere.util.Util;
+
+/**
+ * Factory class to create button with consistent look and feel
+ * @author hengsin
+ *
+ */
+public class ButtonFactory {
+
+	private static final String ZK_BUTTON_STYLE = "ZK_BUTTON_STYLE";
+	
+	/**
+	 * @return true if button should have text label
+	 */
+	public static final boolean isWithText() {
+		String type = MSysConfig.getValue(ZK_BUTTON_STYLE, "I");
+		return type.indexOf("T") >= 0;
+	}
+	
+	/**
+	 * @return true if button should include an image icon
+	 */
+	public static final boolean isWithImage() {
+		String type = MSysConfig.getValue(ZK_BUTTON_STYLE, "I");
+		return type.indexOf("I") >= 0;
+	}
+	
+	/**
+	 * Create named button with default style
+	 * @param name
+	 * @return new button instance
+	 */
+	public static Button createNamedButton(String name)
+	{
+		return createNamedButton(name, isWithText(), isWithImage());
+	}
+	
+	/**
+	 * 
+	 * @param name button name. If withText is true, the name will be used to 
+	 * lookup the button label from ad_message
+	 * @param withText text button
+	 * @param withImage image button 
+	 * @return new button instance
+	 */
+	public static Button createNamedButton(String name, boolean withText, boolean withImage)
+    {
+        Button button = new Button();
+        button.setName("btn"+name);
+        
+        String text = Msg.translate(Env.getCtx(), name);
+        if (!name.equals(text))
+        	text = text.replaceAll("[&]", "");
+        else
+        	text = null;
+
+        if (withText && text != null)
+        {
+        	button.setLabel(text);
+        	if (withImage) 
+        	{
+        		button.setImage(ThemeManager.getThemeResource("images/"+name+"16.png"));        	
+        	}
+        	LayoutUtils.addSclass("txt-btn", button);
+        }
+        else
+        {
+        	button.setImage(ThemeManager.getThemeResource("images/"+name+"24.png"));
+        	if (text != null)
+        		button.setTooltiptext(text);
+        	LayoutUtils.addSclass("img-btn", button);
+        }
+        
+        //add named class for further customization option 
+        String className = "btn-" + name.toLowerCase();
+        LayoutUtils.addSclass(className, button);
+
+        return button;
+    }
+	
+	/**
+	 * @param label
+	 * @param image
+	 * @param tooltiptext
+	 * @return new button instance
+	 */
+	public static Button createButton(String label, String image, String tooltiptext)
+    {
+        Button button = new Button();
+        
+        if (!Util.isEmpty(label))
+        {
+        	button.setLabel(label);
+        	if (!Util.isEmpty(image)) 
+        	{
+        		button.setImage(image);        	
+        		LayoutUtils.addSclass("img-txt-btn", button);
+        	}
+        	else
+        	{
+        		LayoutUtils.addSclass("txt-btn", button);
+        	}
+        }
+        else if (!Util.isEmpty(image))
+        {
+        	button.setImage(image);
+        	LayoutUtils.addSclass("img-btn", button);
+        }
+        
+        if (!Util.isEmpty(tooltiptext))
+        {
+        	button.setTooltiptext(tooltiptext);
+        }
+        
+        return button;
+    }
+}

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/panel/CustomizeGridViewPanel.java

@@ -31,6 +31,7 @@ import org.adempiere.model.MTabCustomization;
 import org.adempiere.webui.adwindow.GridView;
 import org.adempiere.webui.component.Button;
 import org.adempiere.webui.component.Checkbox;
+import org.adempiere.webui.component.ConfirmPanel;
 import org.adempiere.webui.component.Label;
 import org.adempiere.webui.component.ListHead;
 import org.adempiere.webui.component.ListHeader;
@@ -38,6 +39,7 @@ import org.adempiere.webui.component.ListItem;
 import org.adempiere.webui.component.Listbox;
 import org.adempiere.webui.component.Panel;
 import org.adempiere.webui.component.SimpleListModel;
+import org.adempiere.webui.factory.ButtonFactory;
 import org.adempiere.webui.theme.ThemeManager;
 import org.adempiere.webui.window.FDialog;
 import org.compiere.model.GridTab;
@@ -245,8 +247,7 @@ public class CustomizeGridViewPanel extends Panel
 		southPanel.setStyle("margin-top: 2px; margin-right: 4px");
 		@SuppressWarnings("unused")
 		String label = Msg.getMsg(Env.getCtx(), "save");
-		Button bOK = new Button();
+		Button bOK = ButtonFactory.createNamedButton(ConfirmPanel.A_OK);
-		bOK.setImage(ThemeManager.getThemeResource("images/Ok16.png"));
 		bOK.setId("Ok");
 		EventListener<Event> onClickListener = new EventListener<Event>()
 		{
@@ -261,11 +262,9 @@ public class CustomizeGridViewPanel extends Panel
 		
 		};		
 		bOK.addActionListener(onClickListener);
-		bOK.setSclass("action-button");
 		southPanel.appendChild(bOK);
 		label = Msg.getMsg(Env.getCtx(), "Cancel");
-		Button btn = new Button();
+		Button btn = ButtonFactory.createNamedButton(ConfirmPanel.A_CANCEL);
-		btn.setImage(ThemeManager.getThemeResource("images/Cancel16.png"));
 		btn.setId("Cancel");
 		EventListener<Event> onClickCancelListener = new EventListener<Event>()
 		{
@@ -280,7 +279,6 @@ public class CustomizeGridViewPanel extends Panel
 		};
 		
 		btn.addActionListener(onClickCancelListener);
-		btn.setSclass("action-button");
 		
 		southPanel.appendChild(btn);
 		south.appendChild(southPanel);

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/panel/WAttachment.java

@@ -246,20 +246,20 @@ public class WAttachment extends Window implements EventListener<Event>
 		northPanel.appendChild(div);
 
 		bSave.setEnabled(false);
-		bSave.setSclass("action-button");
+		bSave.setSclass("img-btn");
 		bSave.setImage(ThemeManager.getThemeResource("images/Export24.png"));
 		bSave.setTooltiptext(Msg.getMsg(Env.getCtx(), "AttachmentSave"));
 		bSave.addEventListener(Events.ON_CLICK, this);
 
 		bLoad.setImage(ThemeManager.getThemeResource("images/Import24.png"));
-		bLoad.setSclass("action-button");
+		bLoad.setSclass("img-btn");
 		bLoad.setAttribute("org.zkoss.zul.image.preload", Boolean.TRUE);
 		bLoad.setTooltiptext(Msg.getMsg(Env.getCtx(), "Load"));
 		bLoad.setUpload(AdempiereWebUI.getUploadSetting());
 		bLoad.addEventListener(Events.ON_UPLOAD, this);
 
 		bDelete.setImage(ThemeManager.getThemeResource("images/Delete24.png"));
-		bDelete.setSclass("action-button");
+		bDelete.setSclass("img-btn");
 		bDelete.setTooltiptext(Msg.getMsg(Env.getCtx(), "Delete"));
 		bDelete.addEventListener(Events.ON_CLICK, this);
 
@@ -280,19 +280,19 @@ public class WAttachment extends Window implements EventListener<Event>
 		southPane.setHeight("30px");
 
 		bCancel.setImage(ThemeManager.getThemeResource("images/Cancel24.png"));
-		bCancel.setSclass("action-button");
+		bCancel.setSclass("img-btn");
 		bCancel.addEventListener(Events.ON_CLICK, this);
 
 		bOk.setImage(ThemeManager.getThemeResource("images/Ok24.png"));
-		bOk.setSclass("action-button");
+		bOk.setSclass("img-btn");
 		bOk.addEventListener(Events.ON_CLICK, this);
 
 		bDeleteAll.setImage(ThemeManager.getThemeResource("images/Delete24.png"));
-		bDeleteAll.setSclass("action-button");
+		bDeleteAll.setSclass("img-btn");
 		bDeleteAll.addEventListener(Events.ON_CLICK, this);
 
 		bRefresh.setImage(ThemeManager.getThemeResource("images/Refresh24.png"));
-		bRefresh.setSclass("action-button");
+		bRefresh.setSclass("img-btn");
 		bRefresh.addEventListener(Events.ON_CLICK, this);
 
 		confirmPanel.appendChild(bDeleteAll);

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/window/AboutWindow.java

@@ -21,6 +21,7 @@ import java.util.logging.Level;
 import org.adempiere.webui.apps.AEnv;
 import org.adempiere.webui.component.Button;
 import org.adempiere.webui.component.Checkbox;
+import org.adempiere.webui.component.ConfirmPanel;
 import org.adempiere.webui.component.FolderBrowser;
 import org.adempiere.webui.component.Label;
 import org.adempiere.webui.component.ListHead;
@@ -36,6 +37,7 @@ import org.adempiere.webui.component.Tabs;
 import org.adempiere.webui.component.ToolBarButton;
 import org.adempiere.webui.component.Window;
 import org.adempiere.webui.event.DialogEvents;
+import org.adempiere.webui.factory.ButtonFactory;
 import org.adempiere.webui.theme.ThemeManager;
 import org.adempiere.webui.util.FeedbackManager;
 import org.compiere.Adempiere;
@@ -152,9 +154,8 @@ public class AboutWindow extends Window implements EventListener<Event> {
 		hbox.setParent(layout);
 		hbox.setPack("end");
 		hbox.setWidth("100%");
-		hbox.setVflex("0");
+		hbox.setVflex("min");
-		Button btnOk = new Button();
+		Button btnOk = ButtonFactory.createNamedButton(ConfirmPanel.A_OK); 
-		btnOk.setImage(ThemeManager.getThemeResource("images/Ok24.png"));
 		btnOk.addEventListener(Events.ON_CLICK, this);
 		btnOk.setParent(hbox);
 

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/window/FindWindow.java

@@ -38,11 +38,11 @@ import java.util.logging.Level;
 import java.util.regex.Pattern;
 
 import org.adempiere.webui.AdempiereWebUI;
-import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.Button;
 import org.adempiere.webui.component.Column;
 import org.adempiere.webui.component.Columns;
 import org.adempiere.webui.component.Combobox;
+import org.adempiere.webui.component.ConfirmPanel;
 import org.adempiere.webui.component.Grid;
 import org.adempiere.webui.component.Label;
 import org.adempiere.webui.component.ListCell;
@@ -64,6 +64,7 @@ import org.adempiere.webui.editor.WebEditorFactory;
 import org.adempiere.webui.event.DialogEvents;
 import org.adempiere.webui.event.ValueChangeEvent;
 import org.adempiere.webui.event.ValueChangeListener;
+import org.adempiere.webui.factory.ButtonFactory;
 import org.adempiere.webui.part.MultiTabPart;
 import org.adempiere.webui.theme.ThemeManager;
 import org.compiere.model.GridField;
@@ -304,26 +305,18 @@ public class FindWindow extends Window implements EventListener<Event>, ValueCha
     **/
     private void initSimple()
     {
-        Button btnNew = new Button();
+        Button btnNew = ButtonFactory.createNamedButton(ConfirmPanel.A_NEW);
-        btnNew.setName("btnNew");
         btnNew.setId("btnNew");
-        btnNew.setImage(ThemeManager.getThemeResource("images/New24.png"));
         btnNew.addEventListener(Events.ON_CLICK,this);
-        LayoutUtils.addSclass("action-button", btnNew);
 
-        Button btnOk = new Button();
+        Button btnOk = ButtonFactory.createNamedButton(ConfirmPanel.A_OK);
         btnOk.setName("btnOkSimple");
         btnOk.setId("btnOk");
-        btnOk.setImage(ThemeManager.getThemeResource("images/Ok24.png"));
         btnOk.addEventListener(Events.ON_CLICK,this);
-        LayoutUtils.addSclass("action-button", btnOk);
 
-        Button btnCancel = new Button();
+        Button btnCancel = ButtonFactory.createNamedButton(ConfirmPanel.A_CANCEL);
-        btnCancel.setName("btnCancel");
         btnCancel.setId("btnCancel");
-        btnCancel.setImage(ThemeManager.getThemeResource("images/Cancel24.png"));
         btnCancel.addEventListener(Events.ON_CLICK,this);
-        LayoutUtils.addSclass("action-button", btnCancel);
 
         Panel pnlButtonRight = new Panel();
         pnlButtonRight.appendChild(btnOk);
@@ -405,17 +398,12 @@ public class FindWindow extends Window implements EventListener<Event>, ValueCha
         btnDelete.setImage(ThemeManager.getThemeResource("images/Delete24.png"));
         btnDelete.addEventListener(Events.ON_CLICK, this);
 
-        Button btnOk = new Button();
+        Button btnOk = ButtonFactory.createNamedButton(ConfirmPanel.A_OK);
         btnOk.setName("btnOkAdv");
-        btnOk.setImage(ThemeManager.getThemeResource("images/Ok24.png"));
         btnOk.addEventListener(Events.ON_CLICK, this);
-        LayoutUtils.addSclass("action-button", btnOk);
 
-        Button btnCancel = new Button();
+        Button btnCancel = ButtonFactory.createNamedButton(ConfirmPanel.A_CANCEL);
-        btnCancel.setName("btnCancel");
-        btnCancel.setImage(ThemeManager.getThemeResource("images/Cancel24.png"));
         btnCancel.addEventListener(Events.ON_CLICK, this);
-        LayoutUtils.addSclass("action-button", btnCancel);
 
         Panel pnlButtonRight = new Panel();
         pnlButtonRight.appendChild(btnOk);

org.adempiere.ui.zk/WEB-INF/zk.xml

@@ -70,15 +70,6 @@
 		<name>org.zkoss.zul.progressbox.position</name>
 		<value>center</value>
 	</library-property>
-	<library-property>
-  		<name>org.zkoss.zul.Button.mold</name>
-  		<value>trendy</value>
-	</library-property>
-	<library-property>
-  		<name>org.adempiere.webui.component.Button.mold</name>
-  		<value>trendy</value>
-	</library-property>
-
 	<library-property>
 		<name>org.zkoss.zul.theme.fontSizeM
 		</name>

org.adempiere.ui.zk/calendar_mini.zul

@@ -12,7 +12,7 @@
 				<divarrow id="divArrowLeft" type="arrow-left"/>
 				<divarrow id="divArrowRight" type="arrow-right"/>
 				<div>
-					<button id="btnCurrentDate" mold="os" label="today"/>
+					<button id="btnCurrentDate" label="today" sclass="btn-small"/>
 				    <separator orient="vertical" spacing="2px"/>
 					<label id="lblDate"/>
 					<toolbarbutton id="btnRefresh" label="Refresh" class="refresh"/>

org.adempiere.ui.zk/theme/default/css/theme.css.dsp

@@ -82,8 +82,7 @@ html,body {
 }
 
 .login-btn {
-	height: 36px;
+	padding: 4px 20px !important;
-	width: 72px;
 }
 
 .login-east-panel, .login-west-panel {
@@ -195,26 +194,103 @@ html,body {
 }
 
 <%-- button --%>
-.action-button {
+.z-button-os {
-	height: 30px;
+  display: inline-block;
-	width: 48px;
+  margin: 0px;
+  padding: 2px 10px;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  border: 1px solid #cccccc;
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-bottom-color: #b3b3b3;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-.action-text-button {
+.z-button-os:hover,
-	height: 30px;
+.z-button-os:focus,
-	min-width: 80px;
+.z-button-os:active,
+.z-button-os.active,
+.z-button-os.disabled,
+.z-button-os[disabled] {
+  color: #333333;
+  background-color: #e6e6e6;
 }
 
-.action-image-text-button {
+.z-button-os:active,
-	height: 30px;
+.z-button-os.active {
-	min-width: 80px;
+  background-color: #cccccc \9;
 }
 
-.action-button .z-button-cm img, 
+.z-button-os:hover,
-.action-text-button .z-button-cm img,
+.z-button-os:focus {
-.action-image-text-button .z-button-cm img {
+  color: #333333;
+  text-decoration: none;
+  background-position: 0 -15px;
+  -webkit-transition: background-position 0.1s linear;
+     -moz-transition: background-position 0.1s linear;
+       -o-transition: background-position 0.1s linear;
+          transition: background-position 0.1s linear;
+}
+
+.z-button-os:focus {
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.z-button-os.active,
+.z-button-os:active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.z-button-os.disabled,
+.z-button-os[disabled] {
+  cursor: default;
+  background-image: none;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.img-btn img {
 	height: 22px;
 	width: 22px;
+	background-color: transparent;
+}
+
+.txt-btn img {
+	height: 16px;
+	width: 16px;
+	background-color: transparent;
+	vertical-align: middle;
+	display: inline-block;
+}
+
+.z-button-os.btn-small {
+	padding: 1px 5px;
 }
 
 <%-- desktop --%>
@@ -503,7 +579,7 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
 	width: 100%;
 }
 
-.activities-box .z-button .z-button-cm {
+.activities-box .z-button-os {
 	text-align: left;
 }
 
@@ -826,20 +902,19 @@ span.z-tree-tee, span.z-tree-last, span.z-tree-firstspacer {
 	width: 99%;
 }
 
-.editor-box .editor-button {
+.editor-button {
-	width: 32px;
+	padding: 3px 8px;
-	padding: 0px;
+	margin: 0px;
 }
 
-.editor-box .editor-button img {
+.editor-button img {
 	vertical-align: middle;
 	text-align: center;
 	width: 10px;
 	height: 10px;
 }
 
-.editor-box .editor-button-column {
+.editor-button-column {
-	width: 28px !important;
 }
 
 .number-box {
@@ -1060,11 +1135,18 @@ tbody.z-grid-empty-body td {
 	padding: 3px !important;
 }
 
-<%-- toolbar popup dialog --%>
+<%-- toolbar popup dialog --%>	
 .toolbar-popup-window .z-window-popup-cnt {
 	margin-top: 6px;
 }
 
+.toolbar-popup-window.process-buttons-popup .z-button-os {
+	white-space: nowrap;
+	width: 95%;
+	text-align: left;
+	margin: auto;
+}
+
 .toolbar-popup-window-cnt {
 }
 
@@ -1314,4 +1396,4 @@ font-size: 0;
 <%-- workaround for http://jira.idempiere.com/browse/IDEMPIERE-692 --%>
 .z-combobox-pp {
 	max-height: 200px;
-}
+}

org.adempiere.ui.zk/theme/default/zul/desktop/header.zul

@@ -6,7 +6,7 @@
 				<hbox height="100%" pack="center" align="left">
 					<image id="logo"/>
 					<div id="menuLookup"/>
-					<button id="menuButton"/>
+					<button id="menuButton" sclass="btn-small"/>
 				</hbox>
 			</west>
 			<center sclass="desktop-header-right">