Windows Vista Sidebar Gadgets på 30 minuter #4
För att se alla postningar om Windows Sidebar Gadgets så klickar du här.
Docked/Undocked
Hittills har jag skrivit att en Gadget körs och tillhör Sidebar. Detta är sant med en viss modifikation, alla Gadgets körs i Sibebars runtime, men de måste inte visas och befinna sig i Sidebar. Alla Gadgets kan frikopplas från Sidebar genom att man håller ner vänster musknapp på sin Gadget och drar ut den från sin Sidebar. Nu kan man positionera den var man vill på Skrivbordet.
En finess med detta är att dels kan användaren lägga sin Gadget var man vill, men framförallt så kan utvecklaren utnyttja funktionaliteten att en Gadget som är frikopplad från Sidebar också kan ha en annan storlek än de 130 pixels i bredd som är maximalt när den är ihopkopplad med Sidebar.
En Gadget som är ihopkopplad med Sidebar kallas dockad/docked och en som är frikopplad kallas odockad/undocked.
Genom att i sin Gadget använda de inbyggda API:er som är åtkomliga för en Gadget via script så kan man kolla om en Gadget är docked/undocked och därefter ändra storleken på sin Gadget via klassisk DHTML. Namnrymden man använder är ”System.Gadget”.
Följande rad JavaScript returnerar sant/falskt för huruvida Gadget:en är docked/undocked:
System.Gadget.docked
Genom att binda en funktion till de händelsehanterare/event handlers som finns så kan man enkelt justera storleken på sin Gadget efter hur användaren flyttar sin Gadget. Händelsehanterarna är följande vilka jag valt att få min JavaScript-funktion ”checkState” att trigga på:
System.Gadget.onDock = checkState;
System.Gadget.onUndock = checkState;
Genom att byta ut koden i sin fil "test.html" från föregående postning till nedanstående så får man en Gadget som kommer att se ut som på bilden i docked/undocked tillstånd.
<!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;
}
</style>
<script type="text/javascript" language="javascript">
function initGadget(){
checkState();
System.Gadget.onDock = checkState;
System.Gadget.onUndock = checkState;
}
function checkState()
{
if(!System.Gadget.docked)
{
undockedState();
}
else if (System.Gadget.docked)
{
dockedState();
}
}
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">Test<br />av<br />André</p>
</div>
</body>
</html>