WebKit with the SquirrelFish Extreme AIR 2.0
Problem
WebKit engine renders HTML and executes JavaScript. Webkit is the engine that drives Safari, claimed by Apple and others to be the fastest browser. Adobe AIR 2.0 uses the same branch of WebKit as the Safari 4 beta, there is a need to test all these new capabilities.
Solution
Using the same HTML component, take a look at the following example which allows you to test some of the new WebKit functionality:
Detailed explanation
CSS Transitions - Webkit added
built-in animations
using CSS. By describing how to animate from an old value to
a new
value over time you can create animations.
CSS Transformations - transformations, via the
-webkit-transform property, allows you to scale, rotate, and
skew
blocks of elements.
CSS Animations - animation that uses the
-webkit-transition tag and lets you set timings for fades,
rotation, expansion, collapses, and others.
CSS Gradients - You can create gradients in CSS. There
are two types of gradients: linear gradients and radial
gradients.
The syntax is as follows: -webkit-gradient(<type>,
<point> [, <radius>]?, <point> [,
<radius>]? [, <stop>]*)
Webkit CSS selectors - You can access the DOM faster and easier
using the Selectors API. It allows you to select
elements within a
document using CSS.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="800" height="600"
initialize="initializeHandler(event)">
<fx:Script>
<![CDATA[
import flash.utils.Timer;
import mx.core.UIComponent;
import flash.events.Event;
import mx.controls.HTML;
import mx.events.FlexEvent;
private var htmlTransitions:XML =
<html>
<div onmouseover="this.style.opacity = 0;"
onmouseout="this.style.opacity=1"
style="-webkit-transition: opacity 1s
linear; background-color: #efefef; border:5px solid black;">
CSS Transitions Example
</div>
</html>;
private var html:HTML;
private var timer:Timer = new Timer(1, 10000);
protected function
initializeHandler(event:FlexEvent):void
{
html = new HTML();
html.width = 400;
html.height = 400;
html.addEventListener( Event.COMPLETE, onComplete
);
component.addChild( html );
}
private function loadHTMLCode(htmlText:XML):void
{
timer.start();
html.htmlText = htmlText;
}
private function loadHTMLPage(location:String):void
{
timer.start();
html.location = location;
}
private function onComplete(event:Event):void
{
trace("page loaded after: ");
label.text = "HTML code executed in " +
this.timer.currentCount + " seconds";
timer = new Timer(1, 10000);
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="radiogroup"/>
</fx:Declarations>
<mx:UIComponent id="component" width="400" height="400"
x="10" y="42"/>
<s:RadioButton x="10" y="10" label="Transitions"
groupName="radiogroup" click="loadHTMLCode(htmlTransitions);"/>
<s:RadioButton x="103" y="10" label="Animations"
groupName="radiogroup"
click="loadHTMLPage('asset/Animation.html')"/>
<s:RadioButton x="275" y="10" label="Gradient"
groupName="radiogroup"
click="loadHTMLPage('asset/Gradient.html')"/>
<s:RadioButton x="193" y="10" label="Transform"
groupName="radiogroup"
click="loadHTMLPage('asset/Transform.html')"/>
<s:RadioButton x="353" y="10" label="Selectors"
groupName="radiogroup"
click="loadHTMLPage('asset/Selectors.html')"/>
<mx:Label id="label" x="9" y="450" width="374"/>
</s:WindowedApplication>
Webkit transitions
Since there is not much HTML code for the transition example
we are embedding inline HTML using the HTML component.
WebKit Animation
For the HTML implementation we have used mostly open source
HTML code that we have modified to better fit the
presentation. Since the animations are nested inside an
object in the Flash VM, the experience of the animation is a bit
choppy. We are not sure how much you are really going to use these
types of animation, especially when Flash provides much better APIs
to handle animations. Listed below is the code for the
Animation.html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
<style type="text/css" media="screen">
@-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
div {
background-color: red;
width: 40%;
padding: 0.2em 1em;
margin: 6em;
}
</style>
</head>
<body>
<div class="pulsedbox">
<p>
WebKit Animation example
</p>
</div>
</body>
</html>
WebKit Gradients
AIR's WebKit version supports gradient in CSS. Just as
there are in many other design programs, there are two types of
gradients: linear and radial. See syntax:
-webkit-gradient(<type>, <point> [,
<radius>]?, <point> [, <radius>]? [,
<stop>]*)
The code for the Gradient.html page is listed below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div { }
.radial::after { width:150px; height:150px; border:2px solid black;
content: -webkit-gradient(radial, 45 45, 10, 52 50, 30,
from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98),
to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff),
to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201),
to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
display: block;
}
.linear::after { width:130px; height:130px; border:2px solid black;
content: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5,
#66cc00));
display: block;
}
}
</style>
</head>
<body>
<div
class="radial">WebKit CSS Gradient Radial Example</div>
<br/>
<div
class="linear">WebKit CSS Gradient Linear Example</div>
</body>
</html>
WebKit selectors
The new version of the WebKit provides an addition to the traditional DOM. The new API comes in handy when you need to retrieve certain elements or collections of elements. The selectors provide more functionality and the ability to retrieve a list of functions as well as other features. See the Selectors.html. See Figure 8-14 for a screen shot.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="text1" />
<p class="text2" />
<script>
document.querySelector("p#text1").innerHTML =
"Selectors example using Id";
document.querySelector("p.text2").innerHTML =
"Selectors example using class";
</script>
</body>
</html>
WebKit Transform
WebKit supports CSS transforms. The syntax is as follow:
-webkit-transform. Using the WebKit transform you can set boxes to
be scaled, rotated, skewed or translated. See the
Transform.html content below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.showbox {
float: left;
margin: 4em 1em;
width: 40px;
height: 20px;
border: 2px solid green;
background-color: #fff;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="showbox" style="-webkit-transform:
translate(2em,0);">1</div>
<div class="showbox" style="border-color: red;
-webkit-transform: rotate(50deg);">2</div>
<div class="showbox" style="-webkit-transform:
translate(-3em,1em);">3</div>
<div class="showbox" style="-webkit-transform:
scale(2);">4</div>
</body>
</html>
To learn more about this feature and more order
AdvancED
Flex 4
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
