Hoe maak je een widget maken

widget Architectuur digitaal beeld door peter Hires Beelden van Fotolia.com

Widgets zijn stand-alone applicaties die meestal gevonden kan worden ingebed op sites van derden als klokken, veiling-tickers, event countdowns etc. Widgets zijndus mini applicaties die gemakkelijk te implementeren, snel te ontwikkelen en te gebruiken om geavanceerde technologie├źn te benutten door het toevoegen van functionaliteit aan bestaande toepassingen.Als u een webpagina kunt maken, dan weet je hoe te maken en implementeren van een widget, omdat ze gebruik maken van dezelfde technologie van JavaScript, DHTML en CSS.Widgets kunnen zowel accessoire, applicatie of informatie widgets zijn.Accessoire widgets zijn zelfstandige die onafhankelijk zijn van het internet of een toepassing uit te voeren.Toepassing widgets zijn volwaardige geassocieerd met een applicatie, terwijl informatie widgets werken met Internet data.

The Architecture

  1. Fire-up van uw tekstverwerker en maak een HTML-bestand.Het HTML-bestand

    moet zich houden aan de XHTML 1.0 standaard en vooral om te voldoen aan de huidige Web standaard best practices.Een eenvoudige XHTML-code ziet er als volgt uit:

    & lt; html xmlns = "http://www.w3.org/1999/xhtml”>
    & lt; head & gt;
    & lt; title & gt; Widgets & lt; / title & gt;
    & lt; / head & gt;
    & lt; body achtergrond = "picture.png" & gt;
    & lt; h1 & gt;Welkom op Widget World & lt; / h1 & gt;
    & lt; / body & gt;
    & lt; / html & gt;

  2. Gebruik de & lt; canvas & gt;tag volledig 2D-weergave uit te voeren voor de widget, indien nodig.De "composiet" attribuut is een aanvulling op de & lt; img & gt;tag waarmee men aangeven hoe de afbeelding ("picture.png") wordt weergegeven.

  3. Met Cascading Style Sheets (CSS) om de widget stijl, zodat het toont uniform op alle browsers.Een deel van de CSS-bestand zou de volgende styling bevatten:

    & lt; stijl & gt;
    .widgetText {

    font: 20px "Comic Sans"
    GO
    font-weight: bold
    GO
    kleur: wit
    GO
    position: absolute
    GO
    top: 30px
    links: 30px;
    }

    & lt; / style & gt;

  4. Plaats het bovenstaande bestand in een apart bestand.In dit voorbeeld hebben we het bestand opgeslagen Referentie het bestand met de "import" verklaring over de belangrijkste html-bestand zoals weergegeven "widget.css.":
    & lt; head & gt;
    & lt; stijl & gt;
    import "widget.css"
    GO
    & lt; / style & gt;

toevoegen Dynamiek

  1. Gebruik de "widget" object om extra mogelijkheid bieden.Bijvoorbeeld, om toegang te krijgen tot voorkeuren van de gebruiker, gebruikt u de volgende regel code:

    widget.setPreferenceForKey (voorkeur, key)
    GO
    widget.preferenceForKey (key);

  2. Gebruik activering evenementen om overmatig gebruik van CPU-tijd of netwerkbronnen door de widget te voorkomen.De onderstaande code laat zien hoe dit wordt gedaan:

    Als (window.widget) {
    widget.hide = verbergen
    GO
    widget.show = tonen
    GO

    functie te verbergen () {
    if (TimeInterval == null) {
    TimeInterval = setInterval (updateTime (true); ", 500)
    GO
    }}


    toevoegen andere functies om de code zoals u verkiest.

  3. Maak de "Info.plist" bestand naar een widget en middelen te identificeren.Dit bestand varieert wat zou bevatten, afhankelijk van het type widget.

Tips & amp;Waarschuwingen

  • In overeenstemming met Web-technologie gebruikt, is widget dynamiek geleverd met behulp van JavaScript.Hierdoor kan de widget om voorkeuren van de gebruiker op het systeem, flip widgets toegang voorkeuren, geopend andere toepassingen reageren op webpagina evenementen en uitvoeren van het systeem commando's als command-line tools en shell scripts.

Resources

  • Widgetbox: Maak een Widget vanaf uw eigen Content
785
0
2
Computer Programmeertalen