Hvordan lage en widget

Hvordan lage en widget


Widgets er frittstående programmer som kan vanligvis finnes innebygd på tredjeparts nettsteder som klokker, auksjon-tickere, event nedtellinger etc. Widgets er dermed miniprogrammer som er enkle å ta i bruk, rask til å utvikle og brukes til å utnytte avansert teknologi ved å legge funksjonalitet til eksisterende applikasjoner. Hvis du kan lage en webside, så vet du hvordan du skal opprette og distribuere en widget siden de bruker den samme teknologien for Javascript, DHTML og CSS. Widgets kan enten være tilbehør, program eller informasjons widgets. Tilbehørs widgets er selvstendige som kjører uavhengig av Internett eller et program. Søknad widgets er assosiert fullverdig med et program mens informasjons widgets arbeide med Internett-data.

Bruksanvisning

The Architecture

1 Fyr opp en teksteditor og lage en HTML-fil. HTML-filen bør forholde seg til XHTML 1.0-standarden og oppover for å overholde gjeldende Web Standard beste praksis. En enkel XHTML-kode vil se slik ut:

<Html xmlns = "http://www.w3.org/1999/xhtml”>
<Head>
<Title> Widgets </ title>
</ Head>
<Body bakgrunn = "picture.png">
<H1> Velkommen til Widget Verden </ h1>
</ Body>
</ Html>

2 Bruk <canvas> tag utføre en fullstendig 2D gjengivelse for widgeten hvis nødvendig. Den "sammensatte" attributt er et tillegg til den <img> -taggen som lar man spesifisere hvordan bildet ( "picture.png") er gjengitt.

3 Bruk Cascading Style Sheets (CSS) til å style widgeten slik at den viser jevnt på alle nettlesere. En del av CSS-filen vil inneholde følgende styling:

<Style>
.widgetText {

font: 20px "Comic Sans"

font-weight: bold

Farge: hvit

position: absolute

top: 30px
venstre: 30px;
}

</ Style>

4 Sett over filen i en egen fil. I dette eksempelet har vi lagret filen som referanse filen ved hjelp av "import" statement på hoved html-fil som vist "widget.css.":
<Head>
<Style>
@import "widget.css"

</ Style>

Legge Dynamikk

5 Bruk "widget" objekt for å gi ekstra evne. For eksempel, for å få tilgang til brukerinnstillingene, kan du bruke følgende kode:

widget.setPreferenceForKey (preferanse, tast)

widget.preferenceForKey (nøkkel);

6 Bruk aktiverings hendelser for å unngå overdreven bruk av CPU tid eller nettverksressurser av widgeten. Koden nedenfor viser hvordan dette gjøres:

Hvis (window.widget) {
widget.hide = skjul

widget.show = showet

funksjon hide () {
if (tidsintervall == null) {
tidsintervall = setInterval (updateTime (true); ", 500)

}
}

Legg til andre funksjoner i koden som du foretrekker.

7 Lag "Info.plist" filen for å identifisere en widget og IT-ressurser. Denne filen varierer på hva som bør inneholde, avhengig av type widget.

Hint

  • I tråd med Web-teknologi bruker, er widget dynamikk gitt ved hjelp av Javascript. Dette gjør at widgeten for å få tilgang til brukerinnstillingene på systemet, vende widgets å få tilgang til innstillinger, åpne andre programmer, svare på webside hendelser og utføre system kommandoer som kommandolinjeverktøy og skallskript.