Adding new attribute to existing widget

Ashera provides attribute extension using factory registration.

Introduction

Let us take an example on how to build a plugin which extends a View to add gradient background support. You need to build a cross platform plugin which is is required to work on iOS, Android, Desktop app (SWT) and browser You find out in the internet on how to draw gradient in each of the platform. You come up with the following snippets:

int[] colors = {Color.parseColor("#008000"),Color.parseColor("#ADFF2F")};

//create a new gradient color
GradientDrawable gd = new GradientDrawable(
GradientDrawable.Orientation.TOP_BOTTOM, colors);

gd.setCornerRadius(0f);
//apply the button background to newly created drawable gradient
btn.setBackground(gd);

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor blackColor].CGColor];

[view.layer insertSublayer:gradient atIndex:0];

gc.setBackgrouind(display,getSystemColor(SWT.COLOR_BLUE));
gc.fillGradientRectangle(5,5,90,45,false);

#grad {
  background-image: linear-gradient(red, yellow);
}

For us to develop a very simple gradient plugin, we require 2 colors to to passed onto the view. i.e gradientStart and gradientEnd. This plugin we are going to develop adds an attribute linearGradientBackground to widget which needs to have comma separated color.

linearGradientBackground="#000,#fff"

The following are the steps required to create the plugin:

Download a copy of https://github.com/AsheraCordova/CustomWidgetExtension.git into the project folder. This project acts as a template for adding custom cross platform functionality related to adding new widget/ widget extension.
Install the plugin onto the project using command cordova plugin add CustomWidgetExtension.
Import the project into your favorite ide. e.g. eclipse
Create the extension for each platform by implementing the IAttributable interface
After you create your new attribute extension, you need to register it as follows WidgetFactory.registerAttributableFor("View", new CustomWidgetExtensionViewImpl());
Sample linear Gradient extension can be found at the following location:
Android
iOS
SWT
Browser

Preview - Linear Gradient in action

The following example shows the Linear Gradient attribute in action:

Add new filter

Add new native formatter