[JS]Vista Sidebar gadget - Softwareontwikkeling

dinsdag 9 december 2008 20:50

Acties:

0 Henk 'm!

Dima_2005

T.net-verslaafde

Topicstarter

Hallo iedereen,
Ik ben nu bezig aan een gadget voor Vista Sidebar. Ik ben normaalgezien redelijk goed in JS, maar het probleem ligt meer bij de specifieke dingen van VS, daarom vraag ik hier een beetje hulp, aangezien ik er niks over kan vinden.

Ten eerste heb ik een HTML (met verwijzing naar CSS), maar ik heb het probleem dat ik mijn achtergrond niet werkend krijg.
Ten eerste, ik heb mijn achtergrond in CSS geplaatst (werkt niet, dan wordt de gadget 2x2 px en zie je enkel een lettertje), dan heb ik dat volgens de Microsoft-weg gedaan met <g:background>, dit werkt niet indien het aangepast moet worden vanuit JS. dan krijg ik gewoon een doorzichtige achtergrond met alle letter in het roos.

Dan als ik de src in html vaststel, dan verandert het wel, maar het verandert nog steeds niet met JS. Wat zou hier de oorzaak van zijn? En waarom moet alles manueel en kan ik bijna niks belangrijks aanpassen (zoals breedte en hoogte) via CSS en moet alles via de JS?

Mijn codes:
main.html

code:

<body onload="StartGadget();">
<g:background id="background" src="img/gadget1.png" 
style="position:absolute;top:0;left:0;z-index:-999;no=repeat;"></g:background>
    <div id="content">
        <div id="date"></div>
        <div id="time"></div>
        <div id="countdown"></div>
        <div id="pic"><img src="img/icon.png" alt="Niet beschikbaar" /></div>
        <div id="subj">Wacht op verbinding...</div>
        <div id="price"></div>
        <div id="extra"></div>
    </div>
</body>

JS:

code:

function StartGadget(){
    System.Gadget.document.body.style.width = "130px";
        .....
    SelectCSS();
}
function SetStyleSheet(title){
    //CSS switcher
    gHeight = 315;
    System.Gadget.document.body.style.height = gHeight +"px";
    var oBackground = document.getElementById("background").innerHTML;
    oBackground.src = "url(img/themes/" + title + "_" + gHeight +".png)";
}

[ Voor 41% gewijzigd door Dima_2005 op 09-12-2008 20:53 ]

Een tweaker zoekt altijd op Google, ik zou dat ook beter moeten doen :)

woensdag 10 december 2008 11:30

Acties:

0 Henk 'm!

tonyisgaaf

Deze pagina lijkt een goede tutorial voor een Vista Sidebar Gadget.

Daarnaast klopt er niets van je javascript

Dima_2005 schreef op dinsdag 09 december 2008 @ 20:50:
[...]

JavaScript:

function StartGadget(){
    System.Gadget.document.body.style.width = "130px";
        .....
    SelectCSS();
}
function SetStyleSheet(title){
    //CSS switcher
    gHeight = 315;
    System.Gadget.document.body.style.height = gHeight +"px";
    var oBackground = document.getElementById("background").innerHTML;
    oBackground.src = "url(img/themes/" + title + "_" + gHeight +".png)";
}

Wat je op regel 10 & 11 doet is echt onzin. Verdiep je even in de materie.

Waarom gebruik je innerHTML?
Waarom gebruik je een CSS property "url(...)" voor een HTML attribute (src)?

Zie ook deze pagina op MSDN voor documentatie over gbackground.

[ Voor 7% gewijzigd door tonyisgaaf op 10-12-2008 11:32 ]

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

woensdag 10 december 2008 11:34

Acties:

0 Henk 'm!

Dima_2005

T.net-verslaafde

Topicstarter

tonyisgaaf schreef op woensdag 10 december 2008 @ 11:30:
Deze pagina lijkt een goede tutorial voor een Vista Sidebar Gadget.

Daarnaast klopt er niets van je javascript

[...]

Wat je op regel 10 & 11 doet is echt onzin. Verdiep je even in de materie.

Waarom gebruik je innerHTML?
Waarom gebruik je een CSS property "url(...)" voor een HTML attribute (src)?

Ik gebruik url omdat dit zo staat op de site van Microsoft.
en die title en gHeight, die klopt wel.... (als je daar aan dacht).

En nu je het zegt over de site van MSDN... OP de link waar jij van zegt, daar klopt het wel zoals het zou moeten, maar op de andere link http://msdn.microsoft.com...b676240(en-us,VS.85).aspx daar staat het dan toch verkeerd????

Ik zal eens serieus debuggen en stoppen met kijken naar die stomme tutorial van MSDN.

Toch bedankt!

[ Voor 20% gewijzigd door Dima_2005 op 10-12-2008 11:36 ]

Een tweaker zoekt altijd op Google, ik zou dat ook beter moeten doen :)

woensdag 10 december 2008 11:37

Acties:

0 Henk 'm!

reddevil

Makkelijkst is om gewoon een gadget als gehele webpagina te ontwikkelen en pas aan't eind even de System.Gadget dingen erin te zetten.... zo kan je hem eenvoudig testen in bv IE.

Ik snap ook niet waarom je:

code:

1	System.Gadget.document.body.style.width = "130px";

doet. Gewoon de grootte van je gadget in css knallen en niet moeilijk doen met JS?

woensdag 10 december 2008 11:39

Acties:

0 Henk 'm!

tonyisgaaf

Dima_2005 schreef op woensdag 10 december 2008 @ 11:34:
[...]

Ik gebruik url omdat dit zo staat op de site van Microsoft.
en die title en gHeight, die klopt wel.... (als je daar aan dacht).

Ik zal dit eens nalezen, want ik denk dat de tutorial van Microsoft op niks trekt.

title en gHeight zijn zelf toegewezen variabelen, of die kloppen kan ik niet beoordelen.

Als je de hierboven genoemde MSDN pagina checkt zie je dat MS juist afraadt het op die wijze (met "url()") te doen. Daarnaast doe je het ook niet goed.

Ik betwijfel of MS' tutorial "op niks trekt".

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

woensdag 10 december 2008 12:09

Acties:

0 Henk 'm!

Dima_2005

T.net-verslaafde

Topicstarter

reddevil schreef op woensdag 10 december 2008 @ 11:37:
Makkelijkst is om gewoon een gadget als gehele webpagina te ontwikkelen en pas aan't eind even de System.Gadget dingen erin te zetten.... zo kan je hem eenvoudig testen in bv IE.

Ik snap ook niet waarom je:
code:
1
System.Gadget.document.body.style.width = "130px";
doet. Gewoon de grootte van je gadget in css knallen en niet moeilijk doen met JS?

Dit doe ik anders wordt de breedte niet ingesteld, om een of andere reden leest die de CSS niet uit... Maar goed, maakt niet zo veel uit.

Maar goed, ik zal mijn plan wel verder trekken, ondertussen heb ik al veel geprutst en heb ik nu dingen die wel niet echt effcient zijn, maar het resultaat is er... Vind het bijzonder lomp, maar het werkt wel! (gedeeltelijk)

[ Voor 14% gewijzigd door Dima_2005 op 10-12-2008 12:11 ]

Een tweaker zoekt altijd op Google, ik zou dat ook beter moeten doen :)

woensdag 10 december 2008 13:14

Acties:

0 Henk 'm!

tonyisgaaf

Dima_2005 schreef op woensdag 10 december 2008 @ 11:34:
[...]
En nu je het zegt over de site van MSDN... OP de link waar jij van zegt, daar klopt het wel zoals het zou moeten, maar op de andere link http://msdn.microsoft.com...b676240(en-us,VS.85).aspx daar staat het dan toch verkeerd????

Je hebt gelijk, daar staat het verkeerd.

Hoe roep je het (externe?) CSS bestand aan? In de header van het (X)HTML bestand?

Ik raad je aan iets beter na te denken over de relevantie van de code die je plaatst, er zit nu veel ruis tussen, terwijl hetgeen je een vraag over stelt (waarom je externe CSS niet werkt) niet plaatst.

Nog wat random dingen:
- Is "gHeight" een globale variabele? Zo niet, dan zet je er beter "var" voor.
- Ik raad je aan functies en variabelen te beginnen met een kleine letter en objecten met een hoofdletter. Dit ivm eenvoud van teruglezen van de code, belangrijk bij debuggen.
- Commentaar van reddevil snijdt hout, een gadget is niets anders dan een webpagina. Eerst de HTML en CSS goed, vervolgens JS toevoegen en uiteindelijk System.gadget specifieke code.

En bedenk wel: je ontwikkelt nu maar voor één platform, voor één rendering engine. Makkelijker dan dit krijg je het niet.

Misschien nog een tip: twijfel eerst aan jezelf en pas daarna aan de rest van de wereld

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

woensdag 10 december 2008 16:14

Acties:

0 Henk 'm!

reddevil

Dima_2005 schreef op woensdag 10 december 2008 @ 12:09:
[...]

Dit doe ik anders wordt de breedte niet ingesteld, om een of andere reden leest die de CSS niet uit... Maar goed, maakt niet zo veel uit.

Maar goed, ik zal mijn plan wel verder trekken, ondertussen heb ik al veel geprutst en heb ik nu dingen die wel niet echt effcient zijn, maar het resultaat is er... Vind het bijzonder lomp, maar het werkt wel! (gedeeltelijk)

HTML:

<html>
<head>
<link media="screen" href="gadget.css" type="text/css" rel="stylesheet" />
</head>
<body>
</body>
</html>

Cascading Stylesheet:

body {
    width: 130px;
    height: 200px;
}

Ik zie het probleem niet.

...
Commentaar van reddevil snijdt hout, ...

Ik zaag altijd hout

En bedenk wel: je ontwikkelt nu maar voor één platform, voor één rendering engine. Makkelijker dan dit krijg je het niet.

Puur voor IE ontwikkelen... heerlijk :D:D:D

[ Voor 16% gewijzigd door reddevil op 10-12-2008 16:15 ]