Windows Vista Sidebar Gadgets på 30 minuter #5

  • Article

För att se alla postningar om Windows Sidebar Gadgets så klickar du här.

Fly-outs

I och med att en Gadget maximalt kan utnyttja 130 pixels bredd och antagligen inte bör ta upp hela Sidebar så är det svårt att få plats med all information som man skulle vilja ge användaren.

Ett alternativ är naturligtvis att bara länka informationen till en vanlig webbsida där man kan få mer information. Men om det är så att man hämtar sin information från ett system som inte är webbaserat så är det lite problem med länkningen.

Att få informationen till sin Gadget är ofta ganska enkelt, men att visa den på 130x200 pixels är svårare. Lösningen på detta är något som kallas Fly-outs.

Fly-outs är återigen en HTML-sida i sin enklaste form men med skillnaden att denna kan anta vilket format som helst. Behöver du 800x600 pixels så går det bra så länge skärmen har en upplösning som stödjer detta. Ett exempel på hur det ser ut när man visar en Fly-out ser du på bilden bredvid.

Observera att Fly-outen visas oavsett om en Gadget är i docked/undocked läge.

För att göra det möjligt att visa en Fly-out så lägger man till denna rad kod i sin Gadget-fil, har du skapat en själv baserad på mina tidigare postningar så är det filen test.html:

System.Gadget.Flyout.file = "flyout.html";

Naturligtvis så är filnamnet ”flyout.html” valbart men en rekommendation är att använda det filnamnet. Ett exempel på hur denna flyout.html kan se ut är följande:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" >

<head>

<title>Flyout</title>

<style type="text/css">

body{

width: 300px;

height: 200px;

margin-top:0;

margin-left:0;

margin-right: 0;

margin-bottom: 0;

}

div.myContent{

width: 290px;

height: 190px;

background-color: #ff0000;

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#666666', EndColorStr='#000000');

border: double 5px #ffffff;

}

#myDiv{

font-family: verdana;

font-size: 24px;

font-weight: bold;

color: #ffffff;

text-align: center;

padding: 3px;

}

</style>

</head>

<body>

<div id="content" class="myContent">

<div id="myDiv"></div>

</div>

</body>

</html>

Nu vill man ju sällan att den information som visas i en Fly-out ska vara statisk utan dynamisk beroende på vad man klickar på i sin Gadget. Lösningen på detta är att specificera element med ID:n i sin Fly-out. Jag har i koden ovan lagt in en DIV-tag som heter ”myDiv”.

För att uppdatera informationen på denna DIV behöver vi två saker. Först vill vi trigga på event:et när en Fly-out öppnat sig och då uppdatera informationen, det gör vi genom att lägga till följande:

System.Gadget.Flyout.onShow = fillFlyout;

”fillFlyout” är här en JavaScript-metod som ser ut som följer:

function fillFlyout(){

var flyoutDiv = System.Gadget.Flyout.document;

flyoutDiv.getElementById("myDiv").innerHTML = "Text från Gadget";

}

Som vi ser här så kommer vi åt Fly-outdokumentet via inbyggda API:er på ett enkelt sätt och sedan är det klassisk JavaScript-kodning.

Det som nu återstår är att trigga event:et för att visa sin Fly-out som görs med följande rad kod:

System.Gadget.Flyout.show = true;

Tillsammans med koden ovan för flyout.html och att du ersätter koden i test.html med nedanstående gör att du får en Gadget med fungerande Flyout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
<head>
<title>Test Gadget</title>
<style type="text/css">
body{
width: 130px;
height: 110px;
margin-top:0;
margin-left:0;
margin-right: 0;
margin-bottom: 0;
}
div.myContent{
width: 120px;
height: 100px;
background-color: #ff0000;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#666666', EndColorStr='#000000');
border: double 5px #ffffff;
}
p.myText{
font-family: verdana;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-align: center;
padding: 3px;
}
p.myText a{
color: #ffffff;
}
</style>
<script type="text/javascript" language="javascript">

function initGadget(){
checkState();

System.Gadget.onDock = checkState;
System.Gadget.onUndock = checkState;
System.Gadget.Flyout.file = "flyout.html"
System.Gadget.Flyout.onShow = fillFlyout;
}

function checkState()
{
if(!System.Gadget.docked)
{
undockedState();
}
else if (System.Gadget.docked)
{
dockedState();
}
}

function showFlyout(){
if(! System.Gadget.Flyout.show){
System.Gadget.Flyout.show = true;
}
else
fillFlyout();
}

function fillFlyout(){
var flyoutDiv = System.Gadget.Flyout.document;
flyoutDiv.getElementById("myDiv").innerHTML = "Text från Gadget"
}

function undockedState()
{
document.body.style.width=300;
document.body.style.height=200;
document.getElementById("content").style.width=290;
document.getElementById("content").style.height=190;
}

function dockedState()
{
document.body.style.width=130;
document.body.style.height=100;
document.getElementById("content").style.width=120;
document.getElementById("content").style.height=90;
}

</script>
</head>
<body onload="initGadget()">
<div id="content" class="myContent">
<p class="myText"><a href="javascript:showFlyout()" mce_href="javascript:showFlyout()">Test<br />av<br />André</a></p>
</div>
</body>
</html>