flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject Re: SVG button with skin states and JS
Date Wed, 10 Apr 2013 03:30:15 GMT
On Apr 9, 2013 7:40 PM, "OmPrakash Muppirala" <bigosmallm@gmail.com> wrote:
> Hi,
> Here is some more experimental work based on FXG to SVG transformation.
> 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
> * 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
> * 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.

A simple rect with no fill and pointer-events set to 'all' did the trick.

And testing on iOS worked fine as well.


> Please let me know your feedback on this approach.
> Thanks,
> Om

  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message