Jump to content

Koda din egen Sidebar Gadget


arnada

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...