You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2013/04/10 02:28:05 UTC
git commit: An FXG based SVG button with internal javascript that
supports mouseevents, interactivity, etc.
Updated Branches:
refs/heads/develop 104d36f0c -> 5fdc9d859
An FXG based SVG button with internal javascript that supports mouseevents, interactivity, etc.
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/5fdc9d85
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/5fdc9d85
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/5fdc9d85
Branch: refs/heads/develop
Commit: 5fdc9d8592d54cff2c0494ba529ba63935d580da
Parents: 104d36f
Author: Om <bi...@gmail.com>
Authored: Tue Apr 9 17:24:29 2013 -0700
Committer: Om <bi...@gmail.com>
Committed: Tue Apr 9 17:24:29 2013 -0700
----------------------------------------------------------------------
fxg2svg/TODO.txt | 3 +-
fxg2svg/tests/button/button_skin_down.svg | 2 +-
fxg2svg/tests/button/button_skin_over.svg | 2 +-
fxg2svg/tests/button/button_skin_up.svg | 2 +-
fxg2svg/tests/button/flexVhtml5.html | 14 +-
fxg2svg/tests/buttonwithjs/buttonSkin.svg | 261 +++++++++++++++++++++
fxg2svg/tests/buttonwithjs/embedButtons.html | 63 +++++
fxg2svg/transform/transform.xslt | 4 +-
8 files changed, 343 insertions(+), 8 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5fdc9d85/fxg2svg/TODO.txt
----------------------------------------------------------------------
diff --git a/fxg2svg/TODO.txt b/fxg2svg/TODO.txt
index a7653c0..1991db7 100644
--- a/fxg2svg/TODO.txt
+++ b/fxg2svg/TODO.txt
@@ -2,4 +2,5 @@
2. GradientTransform: rotation(270) must be set in the format: x1="0%" y1="100%" x2="0%" y2="0%" (Right now doing it by hand)
3. Text does not seem to be vertially centered in SVG. (done)
4. Handle multiple states (via Ant, I guess)
-5. Make sure empty namespace is not created for linearGradient (done)
\ No newline at end of file
+5. Make sure empty namespace is not created for linearGradient (done)
+6. Change transform so that the element ids are not repeated for the various skin states.
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5fdc9d85/fxg2svg/tests/button/button_skin_down.svg
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/button_skin_down.svg b/fxg2svg/tests/button/button_skin_down.svg
index 7f0ba72..f380323 100644
--- a/fxg2svg/tests/button/button_skin_down.svg
+++ b/fxg2svg/tests/button/button_skin_down.svg
@@ -59,7 +59,7 @@
</defs>
<rect id="hldownstroke2" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x182)" />
</svg>
- <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+ <svg id="borderSVG" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
<defs>
<linearGradient id="idLinearGradientStrokex63x205" gradientTransform="rotate(90)">
<stop offset="0" stop-color="#000000" stop-opacity="0.6375" />
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5fdc9d85/fxg2svg/tests/button/button_skin_over.svg
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/button_skin_over.svg b/fxg2svg/tests/button/button_skin_over.svg
index b97415f..9bb3e23 100644
--- a/fxg2svg/tests/button/button_skin_over.svg
+++ b/fxg2svg/tests/button/button_skin_over.svg
@@ -47,7 +47,7 @@
</defs>
<rect id="highlightStroke" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x129)" />
</svg>
- <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+ <svg id="borderSVG" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
<defs>
<linearGradient id="idLinearGradientStrokex63x205" gradientTransform="rotate(90)">
<stop offset="0" stop-color="#000000" stop-opacity="0.5625" />
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5fdc9d85/fxg2svg/tests/button/button_skin_up.svg
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/button_skin_up.svg b/fxg2svg/tests/button/button_skin_up.svg
index e9abe62..2760825 100644
--- a/fxg2svg/tests/button/button_skin_up.svg
+++ b/fxg2svg/tests/button/button_skin_up.svg
@@ -47,7 +47,7 @@
</defs>
<rect id="highlightStroke" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#idLinearGradientStrokex63x129)" />
</svg>
- <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+ <svg id="borderSVG" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
<defs>
<linearGradient id="idLinearGradientStrokex63x205" gradientTransform="rotate(90)">
<stop offset="0" stop-color="#000000" stop-opacity="0.5625" />
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5fdc9d85/fxg2svg/tests/button/flexVhtml5.html
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/button/flexVhtml5.html b/fxg2svg/tests/button/flexVhtml5.html
index 8f5149a..923721d 100644
--- a/fxg2svg/tests/button/flexVhtml5.html
+++ b/fxg2svg/tests/button/flexVhtml5.html
@@ -79,6 +79,16 @@
}
</style>
+
+ <script>
+ function editOKBtn()
+ {
+ var startTimerBtn = document.getElementById("startTimerBtn");
+ var svg = startTimerBtn.style.background;
+ svg.borderSVG.border.rx = 25;
+ svg.borderSVG.border.ry = 25;
+ }
+ </script>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="500" id="SeeFXG" top="0" left="0">
@@ -108,8 +118,8 @@
<!--<![endif]-->
</object>
<div id="html5">
- <button type="button" class="button ok">OK</button>
- <button type="button" class="button timer start">Start Timer</button>
+ <button id="okBtn" type="button" class="button ok" onclick="editOKBtn()">OK</button>
+ <button id="startTimerBtn" type="button" style="background: url(button_skin_up.svg)">Start Timer</button>
<button type="button" class="button timer stop">Stop Timer</button>
<button type="button" class="button big">Big Button</button>
</div>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5fdc9d85/fxg2svg/tests/buttonwithjs/buttonSkin.svg
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/buttonwithjs/buttonSkin.svg b/fxg2svg/tests/buttonwithjs/buttonSkin.svg
new file mode 100644
index 0000000..3d74064
--- /dev/null
+++ b/fxg2svg/tests/buttonwithjs/buttonSkin.svg
@@ -0,0 +1,261 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="button" width="100%" height="100%"
+ onload="return init(evt)"
+ onmouseover="return handleMouseOver(evt)"
+ onmousedown="return handleMouseDown(evt)"
+ onmouseup="return handleMouseUp(evt)"
+ onmouseout="return handleMouseOut(evt)"
+ onclick="handleOnClick(evt)"
+ >
+ <style type="text/css">
+ .button {cursor: pointer;}
+ </style>
+
+ <script type="text/ecmascript">
+ <![CDATA[
+
+ var labelStr = "";
+ var clickHandler;
+
+ function init(event)
+ {
+ //Set Initial button state
+ document.getElementById("button_up").style.display="inline";
+ document.getElementById("button_over").style.display="none";
+ document.getElementById("button_down").style.display="none";
+
+ //Set label from the embed's frameElement.attributes values
+ labelStr = window.frameElement.attributes["label"].value;
+ var labelElement = document.getElementById("labelDisplay");
+ labelElement.firstChild.nodeValue = labelStr;
+
+ //Store callbacks
+ clickHandler = window.frameElement.attributes["onclick"].value;
+ }
+
+ function handleMouseOver(event)
+ {
+ document.getElementById("button_up").style.display="none";
+ document.getElementById("button_over").style.display="inline";
+ document.getElementById("button_down").style.display="none";
+ }
+
+ function handleMouseDown(event)
+ {
+ document.getElementById("button_up").style.display="none";
+ document.getElementById("button_over").style.display="none";
+ document.getElementById("button_down").style.display="inline";
+ }
+
+ function handleMouseUp(event)
+ {
+ document.getElementById("button_up").style.display="none";
+ document.getElementById("button_over").style.display="inline";
+ document.getElementById("button_down").style.display="none";
+ }
+
+ function handleMouseOut(event)
+ {
+ document.getElementById("button_up").style.display="inline";
+ document.getElementById("button_over").style.display="none";
+ document.getElementById("button_down").style.display="none";
+ }
+
+ function handleOnClick(evt)
+ {
+ top[clickHandler](evt,this);
+ }
+
+ ]]></script>
+ <svg xmlns="http://www.w3.org/2000/svg" id="button_up" width="100%" height="100%" version="1.1" >
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="-1" right="-1" top="-1" bottom="-1">
+ <defs>
+ <linearGradient id="button_up_idLinearGradientx63x32" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#000000" stop-opacity="0.01" />
+ <stop offset="1" stop-color="#000000" stop-opacity="0.07" />
+ </linearGradient>
+ </defs>
+ <rect id="button_up_shadow" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_up_idLinearGradientx63x32)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_up_idLinearGradientx63x54" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85" />
+ <stop offset="1" stop-color="#D8D8D8" stop-opacity="0.85" />
+ </linearGradient>
+ </defs>
+ <rect id="button_up_fill" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_up_idLinearGradientx63x54)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_up_idLinearGradientx63x76" x1="0%" y1="100%" x2="0%" y2="0%">
+ <stop offset="0.0" stop-color="#000000" stop-opacity="0.0627" />
+ <stop offset="0.48" stop-color="#000000" stop-opacity="0.0099" />
+ <stop offset="0.48001" stop-color="#000000" stop-opacity="0" />
+ </linearGradient>
+ </defs>
+ <rect id="button_up_lowlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_up_idLinearGradientx63x76)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_up_idLinearGradientx63x100" gradientTransform="rotate(90)">
+ <stop offset="0.0" stop-color="#FFFFFF" stop-opacity="0.33" />
+ <stop offset="0.48" stop-color="#FFFFFF" stop-opacity="0.33" />
+ <stop offset="0.48001" stop-color="#FFFFFF" stop-opacity="0" />
+ </linearGradient>
+ </defs>
+ <rect id="button_up_highlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_up_idLinearGradientx63x100)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_up_idLinearGradientStrokex63x129" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#FFFFFF" />
+ <stop offset="1" stop-color="#D8D8D8" />
+ </linearGradient>
+ </defs>
+ <rect id="button_up_highlightStroke" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#button_up_idLinearGradientStrokex63x129)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+ <defs>
+ <linearGradient id="button_up_idLinearGradientStrokex63x205" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#000000" stop-opacity="0.5625" />
+ <stop offset="1" stop-color="#000000" stop-opacity="0.75" />
+ </linearGradient>
+ </defs>
+ <rect id="button_up_border" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#button_up_idLinearGradientStrokex63x205)" />
+ </svg>
+ </svg>
+
+ <svg xmlns="http://www.w3.org/2000/svg" id="button_over" width="100%" height="100%" version="1.1" >
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="-1" right="-1" top="-1" bottom="-1">
+ <defs>
+ <linearGradient id="button_over_idLinearGradientx63x32" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#000000" stop-opacity="0.01" />
+ <stop offset="1" stop-color="#000000" stop-opacity="0.07" />
+ </linearGradient>
+ </defs>
+ <rect id="button_over_shadow" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_over_idLinearGradientx63x32)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_over_idLinearGradientx63x54" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#BBBDBD" stop-opacity="0.85" />
+ <stop offset="1" stop-color="#9FA0A1" stop-opacity="0.85" />
+ </linearGradient>
+ </defs>
+ <rect id="button_over_fill" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_over_idLinearGradientx63x54)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_over_idLinearGradientx63x76" x1="0%" y1="100%" x2="0%" y2="0%">
+ <stop offset="0.0" stop-color="#000000" stop-opacity="0.0627" />
+ <stop offset="0.48" stop-color="#000000" stop-opacity="0.0099" />
+ <stop offset="0.48001" stop-color="#000000" stop-opacity="0" />
+ </linearGradient>
+ </defs>
+ <rect id="button_over_lowlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_over_idLinearGradientx63x76)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_over_idLinearGradientx63x100" gradientTransform="rotate(90)">
+ <stop offset="0.0" stop-color="#FFFFFF" stop-opacity="0.22" />
+ <stop offset="0.48" stop-color="#FFFFFF" stop-opacity="0.22" />
+ <stop offset="0.48001" stop-color="#FFFFFF" stop-opacity="0" />
+ </linearGradient>
+ </defs>
+ <rect id="button_over_highlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_over_idLinearGradientx63x100)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_over_idLinearGradientStrokex63x129" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.22" />
+ <stop offset="1" stop-color="#D8D8D8" stop-opacity="0.22" />
+ </linearGradient>
+ </defs>
+ <rect id="button_over_highlightStroke" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#button_over_idLinearGradientStrokex63x129)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+ <defs>
+ <linearGradient id="button_over_idLinearGradientStrokex63x205" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#000000" stop-opacity="0.5625" />
+ <stop offset="1" stop-color="#000000" stop-opacity="0.75" />
+ </linearGradient>
+ </defs>
+ <rect id="button_over_border" width="100%" height="100%" rx="2" ry="2" fill="none" style="stroke-width:2;stroke:url(#button_over_idLinearGradientStrokex63x205)" />
+ </svg>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" id="button_down" width="100%" height="100%" version="1.1" >
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="-1" right="-1" top="-1" bottom="-1">
+ <defs>
+ <linearGradient id="button_down_idLinearGradientx63x32" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#FFFFFF" stop-opacity="0" />
+ <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.5" />
+ </linearGradient>
+ </defs>
+ <rect id="button_down_shadow" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_down_idLinearGradientx63x32)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_down_idLinearGradientx63x54" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#AAAAAA" stop-opacity="0.85" />
+ <stop offset="1" stop-color="#929496" stop-opacity="0.85" />
+ </linearGradient>
+ </defs>
+ <rect id="button_down_fill" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_down_idLinearGradientx63x54)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_down_idLinearGradientx63x76" x1="0%" y1="100%" x2="0%" y2="0%">
+ <stop offset="0.0" stop-color="#000000" stop-opacity="0.0627" />
+ <stop offset="0.48" stop-color="#000000" stop-opacity="0.0099" />
+ <stop offset="0.48001" stop-color="#000000" stop-opacity="0" />
+ </linearGradient>
+ </defs>
+ <rect id="button_down_lowlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_down_idLinearGradientx63x76)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_down_idLinearGradientx63x100" gradientTransform="rotate(90)">
+ <stop offset="0.0" stop-color="#FFFFFF" stop-opacity="0.12" />
+ <stop offset="0.48" stop-color="#FFFFFF" stop-opacity="0.12" />
+ <stop offset="0.48001" stop-color="#FFFFFF" stop-opacity="0" />
+ </linearGradient>
+ </defs>
+ <rect id="button_down_highlight" rx="2" ry="2" width="100%" height="100%" style="fill:url(#button_down_idLinearGradientx63x100)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="1" right="1" top="1" bottom="1">
+ <defs>
+ <linearGradient id="button_down_idLinearGradientStrokex63x149" gradientTransform="rotate(90)">
+ <stop offset="0.0" stop-color="#000000" stop-opacity="0.25" />
+ <stop offset="0.001" stop-color="#000000" stop-opacity="0.25" />
+ <stop offset="0.0011" stop-color="#000000" stop-opacity="0.07" />
+ <stop offset="0.965" stop-color="#000000" stop-opacity="0.07" />
+ <stop offset="0.9651" stop-color="#000000" stop-opacity="0.00" />
+ </linearGradient>
+ </defs>
+ <rect id="button_down_hldownstroke1" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#button_down_idLinearGradientStrokex63x149)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="2" right="2" top="2" bottom="2">
+ <defs>
+ <linearGradient id="button_down_idLinearGradientStrokex63x182" gradientTransform="rotate(90)">
+ <stop offset="0.0" stop-color="#000000" stop-opacity="0.09" />
+ <stop offset="0.0001" stop-color="#000000" stop-opacity="0.00" />
+ </linearGradient>
+ </defs>
+ <rect id="button_down_hldownstroke2" rx="2" ry="2" width="100%" height="100%" fill="none" style="stroke-width:2;stroke:url(#button_down_idLinearGradientStrokex63x182)" />
+ </svg>
+ <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" left="0" right="0" top="0" bottom="0">
+ <defs>
+ <linearGradient id="button_down_idLinearGradientStrokex63x205" gradientTransform="rotate(90)">
+ <stop offset="0" stop-color="#000000" stop-opacity="0.6375" />
+ <stop offset="1" stop-color="#000000" stop-opacity="0.85" />
+ </linearGradient>
+ </defs>
+ <rect id="button_down_border" width="100%" height="100%" rx="2" ry="2" fill="none" style="stroke-width:2;stroke:url(#button_down_idLinearGradientStrokex63x205)" />
+ </svg>
+ </svg>
+ <svg id="labelDisplaySVG" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1" >
+ <text id="labelDisplay" text-anchor="middle" font-family="verdana" font-size="12" dy=".3em" x="50%" y="50%" > </text>
+ </svg>
+
+</svg>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5fdc9d85/fxg2svg/tests/buttonwithjs/embedButtons.html
----------------------------------------------------------------------
diff --git a/fxg2svg/tests/buttonwithjs/embedButtons.html b/fxg2svg/tests/buttonwithjs/embedButtons.html
new file mode 100644
index 0000000..4e99dbb
--- /dev/null
+++ b/fxg2svg/tests/buttonwithjs/embedButtons.html
@@ -0,0 +1,63 @@
+<html>
+ <head>
+ <style>
+ .button {
+ position: absolute;
+ }
+
+ #html5{
+ position:absolute;
+ left:600px;
+ top:10px;
+ }
+
+ .ok{
+ width: 50px;
+ height: 30px;
+ left:0px;
+ top:50px;
+ }
+
+ .timer{
+ width: 100px;
+ height: 30px;
+ }
+
+ .start{
+ left:0px;
+ top:100px;
+ }
+
+ .stop{
+ left:0px;
+ top:150px;
+ }
+
+ .big{
+ width: 100px;
+ height: 100px;
+ left:0px;
+ top:200px;
+ }
+
+ </style>
+ <script>
+ function okBtnClicked(evt,target)
+ {
+ alert("OKBtn clicked");
+ }
+
+ function clicked(evt,target)
+ {
+ document.getElementById("console").innerHTML = "Clicked " + target.frameElement.id;
+ }
+ </script>
+ </head>
+ <body >
+ <p id="console">Console:</p>
+ <embed id="okBtn" src="buttonSkin.svg" class="button ok" label="OK" onclick="okBtnClicked" />
+ <embed id="startTimerBtn" src="buttonSkin.svg" class="button timer start" label="Start Timer" onclick="clicked" />
+ <embed id="stopTimerBtn" src="buttonSkin.svg" class="button timer stop" label="End Timer" onclick="clicked" />
+ <embed id="bigButton" src="buttonSkin.svg" class="button big" label="Big Button" onclick="clicked" />
+ </body>
+</html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5fdc9d85/fxg2svg/transform/transform.xslt
----------------------------------------------------------------------
diff --git a/fxg2svg/transform/transform.xslt b/fxg2svg/transform/transform.xslt
index 0d6599f..2c38e48 100644
--- a/fxg2svg/transform/transform.xslt
+++ b/fxg2svg/transform/transform.xslt
@@ -196,7 +196,7 @@
</stop>
</xsl:template>
-<!-- Text
+<!-- Text -->
<xsl:template match="s:Label" mode="text" >
<svg>
@@ -214,5 +214,5 @@
</svg>
</xsl:template>
- -->
+
</xsl:stylesheet>