feat #276 custom image for Iconbutton

src/aria/widgets/CfgBeans.js

@@ -946,6 +946,27 @@ Aria.beanDefinitions({
                     $type : "json:String",
                     $description : "The name of the sprite and the icon that is to be used in the form sprite:icon",
                     $default : null
+                },
+                "sourceImage" : {
+                    $type : "json:Object",
+                    $description : "Configuration for custom image",
+                    $properties : {
+                        "path" : {
+                            $type : "json:String",
+                            $description : "Path of the image",
+                            $default : null
+                        },
+                        "width" : {
+                            $type : "json:Integer",
+                            $description : "Width of the image",
+                            $default : 16
+                        },
+                        "height" : {
+                            $type : "json:Integer",
+                            $description : "Height of the image",
+                            $default : 16
+                        }
+                    }
                 }
             }
         },
@@ -1031,6 +1052,27 @@ Aria.beanDefinitions({
                     $type : "json:String",
                     $description : "The name of the sprite and the icon that is to be used in the form sprite:icon",
                     $default : null
+                },
+                "sourceImage" : {
+                    $type : "json:Object",
+                    $description : "Configuration for custom image",
+                    $properties : {
+                        "path" : {
+                            $type : "json:String",
+                            $description : "Path of the image",
+                            $default : null
+                        },
+                        "width" : {
+                            $type : "json:Integer",
+                            $description : "Width of the image",
+                            $default : 16
+                        },
+                        "height" : {
+                            $type : "json:Integer",
+                            $description : "Height of the image",
+                            $default : 16
+                        }
+                    }
                 }
             }
         },

src/aria/widgets/Icon.js

@@ -63,8 +63,16 @@ Aria.classDefinition({
          * @param {aria.templates.MarkupWriter} out the html output writer
          */
         writeMarkup : function (out) {
-            var cfg = this._cfg, id = this._domId, tooltip = cfg.tooltip, iconInfo;
-            iconInfo = this._getIconInfo(cfg.icon);
+            var cfg = this._cfg;
+            var id = this._domId;
+            var tooltip = cfg.tooltip;
+            var sourceImage = cfg.sourceImage;
+            var iconInfo = sourceImage ? {
+                "imageURL" : sourceImage.path,
+                "width" : sourceImage.width,
+                "height" : sourceImage.height
+            } : this._getIconInfo(cfg.icon);
+
             if (!iconInfo) {
                 tooltip = this.ERROR_ICON_TITLE.replace('%', cfg.icon);
                 iconInfo = this._getErrIcon();
@@ -156,10 +164,13 @@ Aria.classDefinition({
             } else if (iconInfo.margins != null) {
                 margins = iconInfo.margins;
             }
-
-            return [margins, ';padding:0;background-position:-', iconInfo.iconLeft, 'px -', iconInfo.iconTop,
-                    'px;width:', iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
-
+            if (cfg.sourceImage) {
+                return [margins, ';padding:0;background:url(', iconInfo.imageURL, ') no-repeat; width:',
+                        iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
+            } else {
+                return [margins, ';padding:0;background-position:-', iconInfo.iconLeft, 'px -', iconInfo.iconTop,
+                        'px;width:', iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
+            }
         },
 
         /**

src/aria/widgets/action/IconButton.js

@@ -34,7 +34,8 @@ Aria.classDefinition({
          * @protected
          */
         this._icon = new aria.widgets.Icon({
-            icon : cfg.icon
+            icon : cfg.icon,
+            sourceImage : cfg.sourceImage
         }, ctxt, lineNumber);
     },
     $destructor : function () {

test/aria/templates/TemplatesTestSuite.js

@@ -51,6 +51,9 @@ Aria.classDefinition({
         this.addTests("test.aria.templates.issue142.HtmlStyleTemplateTestCase");
         this.addTests("test.aria.templates.issue279.ButtonSpacingTestCase");
 
+        this.addTests("test.aria.templates.issue276.IconButtonTestCase");
+
+
         this.addTests("test.aria.templates.statements.StatementsTestSuite");
 
     }

test/aria/templates/issue276/IconButtonTestCase.js

@@ -0,0 +1,38 @@
+Aria.classDefinition({
+    $classpath : "test.aria.templates.issue276.IconButtonTestCase",
+    $extends : "aria.jsunit.TemplateTestCase",
+    $constructor : function () {
+        this.$TemplateTestCase.constructor.call(this);
+
+        this.setTestEnv({
+            template : "test.aria.templates.issue276.TemplateIconBtn"
+        });
+
+    },
+
+    $prototype : {
+        runTemplateTest : function () {
+            this.__checkIconButtonProperties();
+            this.__finishTest();
+        },
+        __checkIconButtonProperties : function () {
+            var iconBtnId = this.getWidgetInstance("myid")._domId;
+            var domUtil = aria.utils.Dom;
+            // for getting iconbutton image style
+            var iconBtnElement = domUtil.getDomElementsChildByTagName(domUtil.getElementById(iconBtnId), 'span')[4];
+            var width = domUtil.getStyle(iconBtnElement, "width");
+            var height = domUtil.getStyle(iconBtnElement, "height");
+            // Background url is different for different browsers, so just checking image name
+            var imageURL = domUtil.getStyle(iconBtnElement, "background").split(' ')[0].replace(/("|')/g, "");
+            var imagename = imageURL.substring(imageURL.lastIndexOf('/') + 1, imageURL.lastIndexOf(')'));;
+
+            this.assertEquals(width, "42px", "Width is not proper");
+            this.assertEquals(height, "16px", "Height is not proper");
+            this.assertEquals(imagename, "icon-check.png", "Image is not proper");
+
+        },
+        __finishTest : function () {
+            this.notifyTemplateTestEnd();
+        }
+    }
+});

test/aria/templates/issue276/TemplateIconBtn.tpl

@@ -0,0 +1,19 @@
+{Template {
+	$classpath:'test.aria.templates.issue276.TemplateIconBtn',
+	$hasScript:false
+}}
+
+	{macro main()}
+
+		{@aria:IconButton {
+			id:"myid",
+			sourceImage:{ path:aria.core.DownloadMgr.resolveURL("test/aria/templates/issue276/icon-check.png"), width:42},
+			label:"mybutton"
+		} /}
+		<br/>
+		<br/>
+
+
+	{/macro}
+
+{/Template}