Hi, Here is some more experimental work based on FXG to SVG transformation.
http://people.apache.org/~bigosmallm/fxg2svg/buttonskinjs/embedButtons.html This time, all the skin states are in one .svg file along with the JS: http://people.apache.org/~bigosmallm/fxg2svg/buttonskinjs/buttonSkin.svg Notes: * My earlier approach of using each .svg file as a background of each button state has a major problem - it is not runtime scriptable because of security restrictions. * In this version, I am using the <embed> tag with the src attribute pointing to the .svg skin. * Inside the SVG, the states are being managed using JavaScript * The button's label and click callback function is injected into the SVG file via the embed tag's attributes. * Inside the SVG, the onInit() function reads the window.frameElement.attributes properties to read and set the required variables * Chrome and Firefox restrict accessing window.frameElement when working on the filesystem (cross domain scripting security precaution) But it works fine when running from a server. I will figure out a way around this for development ease soon. * Communication from SVG to the parent HTML is done via calling top[injectedCallbackFunctionName](); * In this function call, we can send any parameters we choose. For now, I am sending the the original MouseEvent and the this (SVG window) object. * In the HTML page, the embed objects are styled via CSS as usual. * Tested to work fine with Firefox, Chrome and Android Browser. I will test with IE9 and iOS in a bit. If someone can test it in the meantime, that would be great. * I need to play with the "pointer-events" property of the SVG objects to improve the hit area of the button. In Chrome, clicking on the text seems to work, but not on the button background. Please let me know your feedback on this approach. Thanks, Om
