Koda din egen Sidebar Gadget

arnada · Januari 19, 2009

Tänkte här visa hur du kodar en enkel "Min första gadget" gadget. Det är bra om du har lite basic html kunskap när du skriver gadgets. Tanken med denna guiden är att ni som läser denna guiden ska få upp ögonen och koda egna avancerade gadgets.

Vi ska jobba med tre olika format i denna guiden och de formaten är HTML, CSS och XML.

gadget.html

Vi ska helt enkelt koda ett program som visar texten "Min första gadget" till detta behöver vi bara använda väldigt basic html kunskap.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Min första gadget</title>
<link rel="stylesheet" type="text/css" href="mall.css" />
</head>

<body>

<b>Min Första Gadget</b>

</body>
</html>

Då ska vi kolla på koden lite...

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Denna biten säger vilken teckenuppsättning vi använder, jag kodar alltid med utf-8... Vill du köra annan så ändra bara utf-8.

<title>Min första gadget</title>

Titel på ditt program, bestäms egentligen i XML filen senare men kan vara bra att ha här också.

<link rel="stylesheet" type="text/css" href="mall.css" />

Denna kod snutten säger att vi använder en extern stilmall och att den heter mall.css

<b>Min Första Gadget</b>

Fet text "Min Första Gadget" (b = bold = fet)

mall.css

body {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 25px;
background-color:#0F0;
}

Css biten är ganska lätt att förstå men jag förklarar ändå vad allt gör, body { betyder att vi ändrar på grejer mellan body taggen.

margin-left: 0px;
margin-top: 0px;

marginal från vänster kant och toppen av sidan, jag körde 0 pixlar här så det låg kant i kant.

width: 100px;
height: 25px;

bredden och höjden på din gadget, du kommer märka att detta är något man får ändra mer än en gång för de ska bli perfekt.

background-color:#0F0;

bakgrunds färg, anges med # och 6st siffror alternativt bokstäver, vissa färger kan anges med bara tre tecken.

Gadget.XML

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Min första gadget</name>
<namespace></namespace>
<version>1.0</version>
<author name="arnada">
	<info url="http://www.hackerunit.se" />
</author>
<icons>
   <icon height="48" width="48" src="icon.png"/>
 </icons>
<copyright>2009</copyright>
<description>test program</description>
<hosts>
	<host name="sidebar">
		<base type="HTML" apiVersion="1.0.0" src="index.html" />
		<permissions>full</permissions>
		<platform minPlatformVersion="0.3" />
	</host>
</hosts>
</gadget>

<name>Min första gadget</name>

Namnet på din gadget

<version>1.0</version>

Version nummer på din gadget

<info url="http://www.hackerunit.se" /></author>

Eventuell hemsida

    <icon height="48" width="48" src="icon.png"/>
 </icons>

Ikon till din gadget (gör en transparent png bild, 48x48pixlar, dock inget krav på ikon)

<copyright>2009</copyright>

Copyright...

<description>test program</description>

Kort beskrivning

<base type="HTML" apiVersion="1.0.0" src="gadget.html" />

Vilket filformat samt startfilen (i vårat fall är gadget.html startfilen)

Fortsättning...

Gå till C:\Users\ANVÄNDARE\AppData\Local\Microsoft\Windows Sidebar\Gadgets\

Skapa en ny mapp och döp den till MinFörstaGadget.gadget (valfritt namn bara du skriver .gadget)

Kopiera nu index.html, mall.css och gadget.xml till din nya mapp

Högerklicka nu på skrivbordet och välj gadgets, nu bör du se din helt egna gadget i listan. Dra ut den på sidebaren och se om den fungerar...

OBS! Jag använde sökvägen i Windows 7, är det samma sökväg i Vista? Någon snäll kanske kan bekräfta det

Venoms · Januari 19, 2009

Sökvägen i W7 är som följer...

C:\Program Files\Windows Sidebar\Gadgets

arnada · Januari 19, 2009

Tackar Venoms dock så använder jag C:\Users\ANVÄNDARE\AppData\Local\Microsoft\Windows Sidebar\Gadgets\ dock är den sökvägen du skrev mycket bättre så slipper man lägga in gadgets för alla användare...

Venoms · Januari 20, 2009

I den sökväg du angav för W7, finns det inga gadgets, men det finns det i den andra.

En annan sak, jag testade din gadgetradio, fast den funkade inte, kan det bero på sökvägen tror du eller beror det på något annat?

tub · Januari 20, 2009

I den sökväg du angav för W7, finns det inga gadgets, men det finns det i den andra.
En annan sak, jag testade din gadgetradio, fast den funkade inte, kan det bero på sökvägen tror du eller beror det på något annat?

jag kunde spela en del kanaler men inte segmentet med rix och nrj

tub

Logga in

Koda din egen Sidebar Gadget

Recommended Posts

arnada

Länk till kommentar

Dela på andra webbplatser

Venoms

Länk till kommentar

Dela på andra webbplatser

arnada

Länk till kommentar

Dela på andra webbplatser

Venoms

Länk till kommentar

Dela på andra webbplatser

tub

Länk till kommentar

Dela på andra webbplatser

Delta i dialogen

Bläddra

Aktivitet