XUI styling interpreter

About this task

BTT support 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:

Procedure

  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”.
  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">
    		<!-- this definition is used for Button widget -->
    		<selector name=".dijitButton .dijitButtonNode">
    			<!-- background-color attribute must defined under the .<yourSelectorID> .djitButton .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>