flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: SVG button with skin states and JS
Date Wed, 10 Apr 2013 05:18:02 GMT
Good progress.  I didn't look at your implementation, but some comments

On 4/9/13 7:40 PM, "OmPrakash Muppirala" <bigosmallm@gmail.com> wrote:

> 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.
If you don't need runtime scriptability, is separate svg files a better
solution?  Maybe we need to support both?  Especially because a quick search
of "how-to" seemed to find the separate svg file approach.
> * 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
Do the states get tied to CSS pseudo-states or something else.  If we do
have to support two mechanisms (embedded js states and separate svg files
with css, is there a higher level abstraction that can encapsulate both?
> * The button's label and click callback function is injected into the SVG
> file via the embed tag's attributes.
Why is the callback for click part of the "view"?
> * 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.
Try launching chrome with these additional command-line parameters:
 --allow-file-access-from-files  --disable-web-security
> * Communication from SVG to the parent HTML is done via calling
> top[injectedCallbackFunctionName]();
What kind of communication is required?  I would hope that most "skins"
don't have events or other output.

Alex Harui
Flex SDK Team
Adobe Systems, Inc.

View raw message