XUI styling mapping

About this task

For different widget, it may have different css selectors to define styling. Extension developer can extend the styling mapping for their widget or override product supported styling mapping.

Procedure

  1. Create a style mapping file “alpha_style_mapping.xml” in the path<pluginProject/configure>.
    <?xml version="1.0" encoding="utf-8"?>
    <maps xmlns="http://btt.ibm.com/StyleMappingSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xsi:schemaLocation="http://btt.ibm.com/StyleMappingSchema StyleMappingSchema.xsd ">	
    	<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"/>
    		</selector>
    		<selector name=".dijitButtonDisabled .dijitButtonNode">
    			<!-- styles for disabled button -->
    			<style name="BTTDisabled-background-color" realName="background-color"/>
    			<style name="BTTDisabled-color" realName="color"/>
    		</selector>
    		<<-- root -->
    		<selector name="">
    			<!-- font can be assigned on root also -->
    			<style name="font-family;font-size;font-weight;font-style;color"/>
    		</selector>
    	</widget>	
    </maps>
  2. 2) Developer need to add com.ibm.btt.tools.xui.editor2.styling in extension point, and then create a new mapping configuration:
  3. Click “Browse” button to select “configure/alpha_style_mapping.xml” as “config” value.