XUI styling interpreter

Extending : CSS Support for XUI Editor Extension : Extending customized XUI styling : XUI styling interpreter

UNICOM^® Digital Transformation Toolkit (UDTT™) supports these css style in XUI Editor by default: Supported styling types. If extension developer want to add new css element for XUI widgets, for example : "background-image", then developer need to write a corresponding interpreter to implement it. Following are the steps:

1 Draft an interpreter class “com.ibm.btt.extension.styling.interpreter.BackgroudImageInterpreter” to parse the css element, for example:

public class BackgroudImageInterpreter implements IStylingInterpreter {
>Override
public void applyStyling(EnumSupportedStylingType type, String stylingName,
Object styleValue, Map<?, ?> valueContext, WidgetEditPart widget, IFigure elementFigure) {
// TODO Auto-generated method stub
if ( styleValue instanceof Image && elementFigure instanceof DojoButton ) {
((DojoButton)elementFigure).setBackgroundImage((Image)styleValue);
}
}
}

2 Create a new interpreter configuration in plugin extension, select “com.ibm.btt.extension.styling.interpreter.BackgroudImageInterpreter” as “class” value. Add a “for” sub-item for the interpreter as the styling element name “background-image”.

This graphic is described in the surrounding text.

3 Create a converter class to convert css styling to swt standard graphic element. For example, create a class “com.ibm.btt.extension.converter.ImageConverter”:

public class ImageConverter implements IValueConverter {
private final static CssParser cssParser = new CssParser();
public Image convertValue(IWidgetModel a_widget_model, Map styleValues, String as_style_name) {
// TODO Auto-generated method stub
if (styleValues != null && styleValues.containsKey(as_style_name) ) {
//converter first value only
Object l_first_value = styleValues.get(as_style_name);
if ( l_first_value instanceof CssStyle ) {
LexicalUnit l_css = ((CssStyle)l_first_value).getValue();
if( l_css.getLexicalUnitType() == LexicalUnit.SAC_URI ) {
String ls_uri = l_css.getStringValue();
//URI l_image_uri= URI.create(ls_uri);
try {
BufferedInputStream in = new BufferedInputStream(new FileInputStream(ls_uri));
Image imageRec = new Image(Display.getCurrent(), in);
in.close();
return imageRec;
} catch (Exception e) {}
}
}
} return null;
}
}

4 Add a converter “BgImageConverter” with implement class “com.ibm.btt.extension.converter.ImageConverter”:

5 Add a style mapping “<style name="background-image/>"” in “alpha_style_mapping.xml” as following:

<widget name=”MyButton">

<selector name=".dijitButton .dijitButtonNode">

<style name="background-color;color"/>
<style name="margin;margin-top;margin-right;margin-bottom;margin-left"/>
<style name="padding;padding-top;padding-right;padding-bottom;padding-left"/>
<style name="border;border-style;border-color;border-width;border-top;border-right;border-bottom;border-left;border-top-color;border-top-width;border-top-style;border-right-color;border-right-style;border-right-width;border-bottom-style;border-bottom-width;border-bottom-color;border-left-style;border-left-width;border-left-color"/>
<style name="font-family;font-size;font-weight;font-style"/>
<style name="width;height"/>
<style name="background-image"/>
</selector>
<selector name=…

6 Add styling configuration in the related widget configuration file:

<supportedStyling>
background-image method="setImage" converter="BgImageConverter"/>

</supportedStyling>