Maak je eigen widget: 6 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:19

Deze Instructable leert je hoe je een basis Yahoo! Widget. Aan het einde van deze tutorial heb je wat JavaScript en XML geleerd.

Stap 1: Aan de slag

Sommige tools die je nodig hebt om een widget te maken zijn: - Een computer met Mac OS X of Windows Xp/Vista - Een tekstbewerkingsprogramma. (Kladblok is perfect.) - Een beeldbewerkingsprogramma. (Microsoft Paint is prima.) - Geduld en tijd. - Yahoo Widgets - Widget Converter Widget Zodra je deze programma's en widgets hebt, ben je klaar om door te gaan naar stap twee.

Stap 2: Mapstructuur maken

Nu moet je de mappenstructuur maken om alle bestanden die deel uitmaken van een widget te huisvesten. De structuur ziet er als volgt uit: -Widgetnaam | Inhoud | Widget.kon Main.js-bronnen | Alle afbeeldingen die de widget zal gebruiken U kunt deze widget downloaden om automatisch de mappenstructuur aan te maken Structuur - Reinier KaperStel de voorkeuren van een widget in door met de rechtermuisknop op een willekeurig deel ervan te klikken en op voorkeuren te klikken. Wijzig de voorkeuren van Structuur in het volgende: root: Navigeer naar uw widgetmap. (Bevindt zich in 'Mijn documenten' op Windows) Nu kunt u op de widget klikken en er verschijnt een dialoogvenster waarin u om de naam van de widget wordt gevraagd.

Stap 3: Alle benodigde bestanden maken

We beginnen met het maken van het widget.xml-bestand, dat de widget-engine informatie geeft over uw widget. Download een sjabloon dat u heeft gemaakt om te gebruiken. Downloadlink hieronder. Plaats het bestand in de map 'Inhoud' in de map met de naam die u eerder hebt gekozen. Open het bestand met de teksteditor van uw keuze en vervang UwNaamHier door uw naam. Opslaan en sluiten. Vervolgens zullen we het.kon-bestand maken, het hoofdbestand dat de widget vertelt wat hij moet doen. Het.kon-bestand is slechts een XML-bestand met een hernoemde extensie. Download dit basisbestand widget.kon en plaats het ook in de map 'Contents'. Open het bestand opnieuw met een teksteditor. De eerste regel geeft aan dat het bestand een XML-bestand is dat is gemaakt met de UTF-8-codering. De volgende tag die moet worden toegevoegd, is de widgettag; Vervolgens declareer je je instellingen, zoals debug;. Nu ben je klaar om je raamelementen toe te voegen;. Widgets hebben meerdere objecten die bepaalde dingen doen en bepaalde eigenschappen hebben. Het tekstobject, maakt bijvoorbeeld tekst. Hier is een lijst van enkele eigenschappen van het tekstobject: -name (zelfverklarend) -window (afgeschreven) -data (weer te geven tekst) -color (zelfverklarend) -size -font -hOffset (ook bekend als x) -vOffset (ook bekend als y) -width -height Dat gezegd hebbende, laten we beginnen met coderen. Voeg de volgende code toe aan het kon-bestand, in de tags:myTextHello World!blueArial18left252In het Engels wordt hiermee een tekstobject ingesteld met de naam myText, dat "Hello World!" weergeeft. in lettertype Arial, kleur blauw en grootte 12. Sla je kon-bestand op en ga verder met stap vier.

Stap 4: Geniet

Dubbelklik op het kon-bestand en uw widget wordt geladen. Gefeliciteerd! Je hebt je eerste widget gemaakt. Maar we zijn nog niet klaar met coderen. Je denkt waarschijnlijk: "Dat is alles?", toch? Ga verder met stap 5 om een functie aan uw widget toe te voegen.

Stap 5: Functie toevoegen

Nu gaan we de widget de huidige tijd laten weergeven. Dit vereist een timer die elke minuut wordt bijgewerkt, en een ander bestand. Het volgende bestand is een JavaScript-bestand, dat in de map 'Contents' komt. Open uw teksteditor en maak een bestand met de naam main.js. Om de tijd toe te voegen, gebruiken we "het object Datum". Om het datumobject in te stellen, maakt u een functie aan. Voeg deze functie toe aan het js-bestand:function updateText()'{ theTime = new Date(); theHour = String (theTime.getHours()); theMinutes = String (theTime.getMinutes()); myText.data = "De tijd is: "+ theHour+":"+theMinutes; print('update');}Je widget zal de tijd nog niet tonen, omdat hij niet weet wat hij met het js-bestand moet doen. Om dit te regelen, voegen we deze gebeurtenishandler toe aan het Kon-bestand, in de tags maar niet in de tags: include('main.js');Om de tijd bij te werken, moeten we een timer maken, die in het Kon-bestand, in de tags maar niet in de tags: Sla de bestanden op en laad de widget. Het moet de tijd aangeven. Als het niet werkt, download dan zowel de kon als js van onderaf en vervang deze door de oude.

Stap 6: Alles samenvatten

Gebruik de widgetconversiewidget om de widget naar een.widget-bestand te converteren. OPMERKING: Sleep de map met de naam van uw widget naar de converter, niet naar het kon-bestand. Als je nog verder wilt gaan met je widget, kun je hier wat bronnen vinden. Hier is een lijst met dingen die je kunt proberen te bereiken met je widget: -Voeg voorkeuren toe om het lettertype te beheren met behulp van de tag en de subtag van het lettertype- Voeg enkele gebeurtenishandlers toe, zoals onClick met behulp van de of tags.-Geef een afbeelding van een lokaal bestand weer met behulp van het afbeeldingsobject. Ik hoop dat je deze tutorial nuttig vond en dat je zult genieten van de eindeloze mogelijkheden van widgets, Hunter