Kreiranje widgeta za radnu površinu. Pisanje Windows gadgeta bočne trake od nule Kreirajte widgete

Danas ćemo shvatiti kako kreirati vlastiti widget (Widget) na Android uređaju. Widget je poznati element radne površine, pomoću kojeg možete pristupiti nekim od funkcija aplikacije: pregledati vijesti u prozoru widgeta, vremensku prognozu, ažurirati vijesti o raznim servisima, upravljati raznim funkcijama uređaja (zaključavanje ekrana, uključite radio, internet i mnoge mnoge druge). Ovog puta nećemo kreirati nešto grandiozno i vrlo korisno, poput baterijske lampe :), već ćemo napraviti jednostavan widget koji će biti implementiran kao dugme, kada kliknete na njega, koristeći standardni pretraživač, dolazimo do svima omiljenog Naravno, možete prilagoditi bilo koju stranicu koju želite.

Kreiramo novi projekat, biramo Blank Activity, minimalnu verziju Androida 2.2+. Kada kreirate widget, prva stvar koju treba učiniti je kreirati objekat AppWidgetProviderInfo, u kojem specificiramo xml datoteku iz koje će se popuniti prikaz samog widgeta. Da biste to učinili, kreirajte mapu u projektu res/xml i u njemu kreiramo novi xml fajl pod nazivom widget.xml sa sljedećim sadržajem:

< appwidget- provider xmlns: android= android: minWidth= "146dp" android: updatePeriodMillis= "0" android: minHeight= "146dp" android: initialLayout= "@layout/activity_main" > < / appwidget- provider>

Sada idemo na fajl activity_main.xml i kreirajte interfejs našeg widgeta, on će se sastojati od dugmeta dugme:

< LinearLayout xmlns: android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/tools" android: layout_width= "match_parent" android: layout_height= "match_parent" android: gravity= "top" tools: context= ".MainActivity" >< Button android: id= "@+id/button" android: layout_width= "wrap_content" android: layout_height= "wrap_content" android: layout_marginLeft= "5dp" android: text= "@string/app_name" / > < / LinearLayout >

Kao što vidite, napravili smo obično dugme, tako da će to biti naš widget:

To jest, tada možete raditi šta god želite umjesto ovog dugmeta.

Pređimo na rad sa kodom u datoteci MainActivity.java. Mora biti naslijeđena od klase AppWidgetProvider, za koji postoji njegova glavna metoda onUpdate(). U ovoj metodi moramo definirati dva objekta: PendingIntent I remoteviews. Na kraju njihove upotrebe, morate pozvati metodu updateAppWidget(). Šifra datoteke MainActivity.java:

import android.net.Uri ; import android.app.PendingIntent ; uvoz android.appwidget.AppWidgetManager; uvoz android.appwidget.AppWidgetProvider; import android.content.Context ; import android.content.Intent ; import android.widget.RemoteViews ; import android.widget.Toast ; import com.example.widget.R ; javna klasa MainActivity proširuje AppWidgetProvider( @Override public void onUpdate (kontekst konteksta, AppWidgetManager appWidgetManager, int appWidgetIds) (za (int i= 0; i< appWidgetIds. length; i++ ){ int currentWidgetId = appWidgetIds[i]; //Napravite jednostavan http zahtjev do navedenog linka i slijedite ga: String url = "http://site" ; Namjera namjera = nova namjera(namjera . ACTION_VIEW); namjera. addFlags(Namjera . FLAG_ACTIVITY_NEW_TASK); namjera. setData(Uri .parse(url)); //Definirajte dva potrebna objekta klase PendingIntent i RemoteViews: PendingIntent na čekanju = PendingIntent . getActivity(kontekst, 0, namjera, 0); RemoteViews pogledi = novi RemoteViews(context.getPackageName(),R.layout.activity_main); //Postavite obradu klikova za dodavanje widgeta: pregledi. setOnClickPendingIntent(R . id. dugme, na čekanju); appWidgetManager. updateAppWidget(currentWidgetId,pregledi); Tost. makeText(kontekst, "Widget dodan", Tost . LENGTH_SHORT). show(); ) ) )

Da bi naš widget radio uspješno, potrebna nam je magija u datoteci manifesta AndroidManifest.xml. Trebalo bi izgledati ovako:

< manifest xmlns: android= "http://schemas.android.com/apk/res/android" package="com.example.widget" android:versionCode="1" android:versionName="1.0">< uses- permission android: name= "android.permission.INTERNET" / > < application android: allowBackup= "true" android: icon= "@drawable/ic_launcher" android: label= "@string/app_name" android: theme= "@style/AppTheme" > < receiver android: name= "home.study.MainActivity" > < intent- filter> < action android: name= "android.appwidget.action.APPWIDGET_UPDATE" / > < / intent- filter> < meta- data android: name= "android.appwidget.provider" android: resource= "@xml/widget" / > < / receiver> < / application> < / manifest>

Kao što ste pretpostavili, widget je definisan u tag-u<prijemnik> .

Jedina stvar koju treba ispraviti je da uredite fajl strings.xml, dodajući tamo linije koje smo koristili:

< ? xml version= "1.0" encoding= "utf-8" ? > < resources> < string name= "app_name" >LEARN. ANDROID < string name= "action_settings" >Postavke < string name= "hello_world" >Zdravo svijete!< / string> < / resources>

Pažnja! Android Studio vas može izgrditi kada pokrenete program, zahtijevam da odredite zadanu aktivnost. Odaberite redak "Ne pokreni aktivnost" (Ne pokreni aktivnost):

Sada instalirajte aplikaciju na emulator ili uređaj, dodajte widget na radnu površinu:

I kliknite na njega:

Kao što vidite, sve radi odlično.

Dakle, u ovom tutorijalu smo kreirali jednostavan Android Widget koji se sastoji od dugmeta Button, kada kliknemo na naš widget, kreiramo jednostavan http zahtjev i slijedimo datu URL vezu. Možete vježbati s nekim drugim elementima, a ne s gumbom, i smisliti zanimljivu funkcionalnost za njih. Sretno!

Da bi napravi widget u androidu Ne morate čak ni znati programirati. Postoji nekoliko dizajnerskih aplikacija koje olakšavaju crtanje widgeta i daju mu željenu funkcionalnost.

Minimalni tekst

Aplikacija vam omogućava da kreirate minimalističke widgete koji se sastoje od teksta i brojeva. Uprkos nazivu, ovi widgeti imaju veoma široke mogućnosti.

Jednom instaliran, dodajte Minimalistic Text widget na radnu površinu u veličini koju želite. Otvoriće se prozor postavki vidžeta.

U postavkama možete odabrati pozadinu, orijentaciju, font, akciju klika itd. Takođe u postavkama postoje unapred definisani izgledi za popunjavanje:

Vrijeme.
Datum.
Nivo napunjenosti.
Temperatura.

Dodatne funkcije za popunjavanje widgeta dostupne su kada kreirate vlastiti izgled widgeta:

Tekst.
Slobodan/iskorišćen prostor na SD kartici.
Vrijeme rada sistema.
Količina podataka prenesenih preko mobilne mreže i ne samo.
Naziv Wi-Fi mreže, IP adresa u Wi-Fi mreži.
Količina zauzete RAM memorije.

Sve vrijednosti se mogu prikazati u tekstu i brojevima.

Ultimate custom widget (UCCW)

Ova aplikacija vam omogućava da napravite widgete ne samo od teksta, već i od grafičkog sadržaja.

Kada se pokrene, otvara se prozor za kreiranje vidžeta. Da dodate objekat u widget, pritisnite dugme +/- na vrhu. Da biste ga premjestili i uredili na bilo koji način, kliknite na dugme "Odaberi objekt" na vrhu i odaberite dodani objekt.

Widgeti mogu sadržavati sljedeće objekte:

Vrijeme, datum i dan u sedmici.
Analogni sat.
Prilagođeni tekst.
Nivo napunjenosti u brojevima ili njegov grafički prikaz.
Sve informacije o vremenu - temperatura, vlažnost, brzina vjetra itd.
Geometrijske figure.
Slike.
Broj nepročitanih Gmail e-poruka, sms-ova i propuštenih poziva.
Vrijeme kada alarm zvoni.

Svaki element se može rotirati, rastezati, savijati i mijenjati mu boju. Naravno, možete prilagoditi akciju klika (Select Object->Hotspots). Podržava uvoz i izvoz kreiranih widgeta.

Android operativni sistem ima mnogo funkcija i mogućnosti. Jedan od njih su widgeti – prozori koji vam omogućavaju da koristite dio funkcionalnosti aplikacije bez pokretanja.

U osnovi, widgeti dolaze s aplikacijom. Međutim, postoje programi koji nemaju ovu opciju. Dakle, morate uzeti stvari u svoje ruke!

Pomoću Play Market-a preuzimamo besplatnu aplikaciju “KWGT Kustom Widget Maker”, koju možete kupiti besplatno, ali će neke od funkcija biti dostupne tek nakon kupovine dodatka.

Program djeluje kao platforma za pokretanje widgeta trećih strana od različitih programera. Osim toga, možete promijeniti izgled widgeta, dati im dodatnu funkcionalnost.

U početku biste mogli pomisliti da je “KWGT Kustom Widget Maker” složena aplikacija koja liči na programe za razvoj softvera. Da i ne: sučelje je slično, ali ovdje nema ništa komplicirano.

Da počnete uređivati widgete:

idite na radnu površinu i pozovite meni za uređivanje radne površine držeći dugme menija ili dugim dodirom na ekran;
pronađite okvir widgeta “KWGT” i postavite potrebnu veličinu, na primjer - 4x2. Nakon toga, na radnoj površini se formira prozor;

Kliknemo na prozor i time otvorimo izbornik za odabir widgeta;
Odaberite izgled koji vam se sviđa i kliknite na njega (Dodatni izgledi se mogu preuzeti iz Play Store-a. Da biste to učinili, u traci za pretraživanje aplikacije navedite “KWGT widgeti”);

Nakon što odaberete izgled koji vam se sviđa, aplikacija će nastaviti sa njegovim uređivanjem. Sljedeće postavke će biti dostupne:

Elementi odgovorni za postavljanje geometrijskih parametara widgeta;
Pozadina, odgovorna za pozadinsku sliku na widgetu;
Dodir, koji određuje radnje koje će se izvršiti kada se vidžet aktivira;
Sloj odgovoran za skalu widgeta;

Kao rezultat toga, dobićemo jedinstveni widget sa potrebnom funkcionalnošću.

Nedavno sam morao da napravim gadžet za Windows bočnu traku. Nisam imao nikakvih vještina u tome, stoga, nakon malo guglanja i čitanja dokumentacije, krenimo.

Pokazaću ti šta sam završio

Gadget će primati informacije sa stranice u obliku xml-a, analizirati ih i, zapravo, prikazati ih. Također, gadget će provjeriti da li postoje nove verzije, a ako su prisutne, odbiti će raditi :)
U početku sam, radi sticanja iskustva, želeo da napišem gadžet u potpunosti u VBScript-u (pošto se još nisam bavio time), ali na kraju sam morao da uradim umetanje u JavaScript-u.
Idemo direktno na kod. Ovdje neću razmatrati sav kod, pokazaću samo glavne tačke. Veza do gotovog gadgeta nalazi se na kraju članka.
Glavna datoteka gadžeta je njegov manifest, datoteka Gadget.xml. Trebalo bi da se zove tako i da se nalazi u korenu naše arhive (gadžet nije ništa drugo do ZIP arhiva sa ekstenzijom .gadget).

Vrijeme iz Info.Denms.Ru 1.0.1232 Full Weather Widget (Info.Denms.Ru)

Razmotrimo to detaljnije.
Element treba da sadrži apiVerziju jednaku 1.0.0 (trenutno), kao i atribut src, koji specificira glavni fajl našeg gadžeta;
Dozvole za gadžet. Postavite jednako punom;
Minimalna verzija Windows bočne trake. Trenutno - 1,0;
Opcije - naziv gadžeta, - verzija, - podatke o autoru, - link na stranicu sa gadgetom, - ikona gadžeta i će biti prikazan na panelu instaliranih gadžeta.

Datoteka main.html je obična html datoteka, neću je dati u potpunosti, zadržaću se samo na nekim tačkama.
Element g:background specificira pozadinu gadžeta. Učinimo to transparentnim.

Gadget može biti u dva stanja - usidren (na lijevoj strani na slici iznad) i nepovezan (desno). Mi ćemo pohraniti trenutno stanje gadžeta u JavaScript usidrenu varijablu.

U budućnosti će nam trebati isDocked wrapper funkcija kako bismo saznali trenutno stanje gadžeta iz VBScript-a (jer nisam pokušao, ali nisam mogao da ga implementiram u čistom VBScript-u). Još jedna napomena - skripte rade ispravno ovim redoslijedom, tj. prvo opisujemo VBScript skripte, zatim JavaScript.

Ostali elementi u main.html su predstavljeni apsolutno pozicioniranim DIV elementima. Nakon toga, iz skripti ćemo ih pozvati po njihovom id-u.

Koristeći JavaScript, postavite usidreno i nepovezano stanje za gadget, kao i navedite datoteku postavki (main.js)

System.Gadget.onDock = promjena veličine; System.Gadget.onUndock = promjena veličine; System.Gadget.settingsUI = "settings.html"; System.Gadget.onSettingsClosed = Postavke zatvorene; docked=0; //početno stanje gadgeta resize(); //inicijalizacija

Kao što možete vidjeti iz gornjeg popisa, kada se stanje gadžeta promijeni, funkcija resize() će biti pozvana.

Funkcija resize() ( bd = document.body.style; System.Gadget.beginTransition(); if (System.Gadget.docked) ( // malo stanje bd.width=148; //postavite dimenzije gadgeta bd.height=201 ; docked = 1; bd.background="url(images/gadget.png) no-repeat"; //postavite pozadinu //prenesite vrijednosti iz nepovezanog stanja u usidreno stanje i nulirajte elemente za nepovezano stanje state document.getElementById("small_needupdate ").innerHTML = document.getElementById("big_needupdate").innerHTML; document.getElementById("big_needupdate").innerHTML = ""; //... ) else ( // veliko stanje bd .width=230; bd. visina=160; bd.background="url(images/gadgeth.png) no-repeat"; docked=0; //prenos vrijednosti iz usidiranog u nepovezano stanje i resetiranje elemenata za usidirano stanje document.getElementById("big_needupdate"). innerHTML = document.getElementById("small_needupdate").innerHTML; document.getElementById("small_needupdate").innerHTML = ""; //... ) System.Gadget.endysteransition. Gadget.Transiti onType.morph,1); )

Također možete opisati funkciju spremanja postavki. Nema ih u mom gadgetu, ali ću za primjer pokazati kako se to radi

Funkcija SettingsClosed(event) ( if (event.closeAction == event.Action.commit) ( //alert System.Gadget.Settings.readString("test"); ) )

ReadString - čita prethodno sačuvani niz, writeString, odnosno piše.
Metode System.Gadget.beginTransition(); i System.Gadget.endTransition(); potrebno za "glatku" promjenu veličine gadžeta. Ignorišu se na Windows Seven, ali sam ih ipak ostavio radi kompatibilnosti unatrag.

Kao što je gore spomenuto, server nam pruža informacije o vremenu u xml formatu.

1.7 41 oblačan snijeg 87 SW 5 -3 -1 -1 26 1 -9 41 0 …

Mi ćemo preuzeti i analizirati xml koristeći VBScript.

Sub DownloadXML2 Set objXML = CreateObject("Microsoft.XmlHttp") objXML.Otvorite "GET", "http://info.kovonet.ru/weather.xml", True objXML.OnReadyStateChange = GetRef("objXML_onreadystatechange.") objHeader. "If-Modified-Since", "Sub, 1 Jan 2000 00:00:00 GMT" objXML.Send iTimeoutID = window.SetTimeout("mySleep", 1000) End Sub

Funkcija mySleep će provjeriti da li je naša veza istekla.

Sub mySleep if bRespReceived = "false" zatim "nije primljen odgovor još iTimeout = iTimeout + 1 if (iTimeout > 30) zatim "timeout timerFirstRun = window.SetTimeout("Update", 60000) "pokušaj ponovnog ažuriranja za minutu dalje "timeout još nije dostignut, nastavi odbrojavati sekunde iTimeoutID = window.SetTimeout("mySleep", 1000) end if end if End Sub

Ako je preuzimanje uspješno, objXML.readyState će biti jednak četiri, a status (objXML.status) će vratiti vrijednost 200.

Funkcija objXML_onreadystatechange() If (objXML.readyState = 4) Zatim "msgbox objXML.statusText If (objXML.status = 200) Tada bRespReceived=true SaveFile(objXML.responseText) else 0 window"FirstUpRun" pokušajte ponovo ažurirati za minutu End If End If End Funkcija

U tom slučaju, sačuvajte datoteku u privremenu Windows fasciklu

Funkcija SaveFile(what) Postavite fso = CreateObject("Scripting.FileSystemObject") tempFolder = fso.GetSpecialFolder(2) filepath = tempFolder+"\weather.xml" Dim fso1, tf Postavite fso1 = CreateObject("ScriptemObject)" = fso1.CreateTextFile(filepath, True, True) "rewrite, unicode tf.Write(what) tf.Close ParseXML End Funkcija

I počinjemo raščlanjivati fajl.

Sub ParseXML Set fso = CreateObject("Scripting.FileSystemObject") tempFolder = fso.GetSpecialFolder(2) filepath = tempFolder+"\weather.xml" Set xmlDoc = CreateObject("Msxml2.DOMDocument") xsyncDocument=") xmlcDocument=") xmlcDocument. load(filepath) "glavni čvor - u našem slučaju Postavite currNode = xmlDoc.documentElement "dani u sedmici - Postavi dayNode = currNode.firstChild dok nije dayNode nije ništa Postavi currNode = dayNode.firstChild iako nije currNode nije ništa ako currNode.parentNode.getAttribute("id") = "danas" zatim "danas ako currNode.nodeName = "temp" onda dokument .getElementById(prefix+"maintemp").innerHTML = currNode.childNodes(0).text+Chr(176) "prikaži ostale elemente Inače "ne danas, prikaži manje"... kraj Ako Set currNode = currNode.nextSibling Wend Postavi danČvor = dayNode.nextSibling Wend End Sub

Provjera novih verzija se vrši na potpuno isti način.
Ne zaboravite kreirati datoteku postavki - settings.html, čije postojanje smo najavili gore.

Postavke

To je, u stvari, sve. Bit će mi drago ako se moj (prvi :)) članak pokaže nekome od koristi.

Korišteni izvori.

Stvoriti WordPress widget- otprilike ovako se pravi dodatak, ali mnogo jednostavnije i jasnije. Sve što vam treba je jedan fajl sa svime PHP kod koji je mnogo lakše napisati nego dodatak koji ima više datoteka. Postoje tri glavne funkcije widgeta: to su widget, ažurirati I formu.

funkcija widget()
ažuriranje funkcije()
funkcija form()

| Preuzmite izvore |

Osnovna struktura

Osnovni izgled našeg widgeta je vrlo jednostavan, postoje korisne funkcije koje trebate znati. Okosnica naše strukture widgeta bit će otprilike ovako:

Add_action("widgets_init", "register_my_widget"); // funkcija za učitavanje moje funkcije widgeta register_my_widget() () // funkcija za registraciju moje klase widgeta My_Widget proširuje WP_Widget () () // Primjer funkcije widget klase My_Widget() () // Postavke funkcije widgeta widget() () // prikaz funkcije widgeta update() () // ažuriranje funkcije widgeta form() () // i naravno obrazac za opcije widgeta

Korak 1. widget_init

Prije nego što učinimo sve ovo, moramo učitati naš widget sa funkcijom widget_init. Ovo je trag akcija, o čemu više informacija možete pronaći u WordPress kodeksu.

Add_action("widgets_init", "register_my_widget");

Sljedeće što ćemo uraditi je registar naš widget u WordPress-u tako da je dostupan u odjeljku widgeti.

Funkcija register_my_widget() (registr_widget("My_Widget"); )

Korak 2 Klasa

Priložit ćemo naš widget Klasa. Ime razreda je bitno! Ono što trebamo imati na umu je da naziv klase i funkcije treba biti isto.

Klasa My_Widget proširuje WP_Widget()

Sada ćemo malo preći na razred opcije postavke. Na primjer, možemo proći širina I visina. Možemo dati i mali opis naš widget ako želimo. Ovo će biti korisno ako widget povezujete sa svojom komercijalnom temom.

Funkcija My_Widget() ( funkcija My_Widget() ( $widget_ops = array("classname" => "example", "description" => __("Widget koji prikazuje ime autora ", "example")); $control_ops = array("width" => 300, "height" => 350, "id_base" => "example-widget"); $this->WP_Widget("example-widget", __("Primjer vidžeta", "example" ), $widget_ops, $control_ops); )

Sada kada smo završili sa osnovnim zahtevima za naš widget, skrenućemo pažnju na njih tri funkcije, o kojima smo ranije govorili, a koje su važne funkcije ili osnovni gradivni blokovi za izgradnju našeg widgeta!

Korak 3. functionwidget()

Prva funkcija se odnosi na displej naš widget. Poslat ćemo nekoliko argumentima na našu funkciju. Prenijet ćemo argumente iz teme, to može biti naslov ili neki drugi parametri. Sada prenosimo varijablu instance, koji je pridružen našoj funkcijskoj klasi.

Widget funkcije ($args, $instance)

Nakon toga ekstrahiramo opcije iz argumenata jer nam trebaju opcije da budu dostupne lokalno. Ako ne znate što je lokalna varijabla, ne brinite o tome sada i samo dodajte ovaj korak.

Ekstrakt($args);

Sljedeće ćemo postaviti header I druge opcije za naš widget, koji korisnik može promijeniti u meniju widgeta. Također dodajemo posebne varijable kao što su $before_widget, $after_widget. Ovim opcijama upravlja tema.

$title = apply_filters("widget_title", $instance["title"]); $name = $instance["name"]; $show_info = isset($instance["show_info"]) ? $instance["show_info"] : netačno; echo $before_widget; // Prikaz naslova widgeta if ($title) echo $before_title . $title. $after_title; //Prikaži ime if ($name) printf("

" . __("Hej njihov mornar! Moje ime je %1$s.", "primjer") ."

", $name); if ($show_info) printf($name); echo $after_widget;

Korak 4. ažuriranje funkcije()

Ažuriranje funkcije($new_instance, $old_instance) ( $instance = $old_instance; //Uklonite oznake iz naslova i imena da biste uklonili HTML $instance["title"] = strip_tags($new_instance["title"]); $instance[" name"] = strip_tags($new_instance["name"]); $instance["show_info"] = $new_instance["show_info"]; vrati $instance; )

Jedna stvar koju treba napomenuti je da ovdje koristimo strip_tags da uklonite sav tekst XHTML, što može pokvariti naš vidžet.

Korak 5. funkcija form()

U sljedećem koraku ćemo kreirati formu, koji će služiti ulazni blok. Prihvatit će korisnički definirane postavke i vrijednosti. Funkcija formu može uključivati potvrdne okvire, polja za unos teksta itd.

Prije nego što kreiramo ova polja za unos, moramo odlučiti šta ćemo prikazati kada korisnik ne izabere ništa iz widgeta. Da bismo to učinili, proslijedit ćemo zadane vrijednosti za parametre, kao što su naslov, opis i tako dalje.

//Podesite neke zadane postavke widgeta. $defaults = array("title" => __("Primjer", "primjer"), "name" => __("Bilal Shaheen", "example"), "show_info" => true); $instance = wp_parse_args((niz) $instanca, $defaults); ?>

Sada ćemo kreirati polje za unos teksta. Ove vrijednosti ćemo priložiti u oznaku paragrafa.

// Naziv vidžeta: Unos teksta

"> "name="get_field_name("naslov"); ?>"value=""style="width:100%;" />

//unos teksta

"> "name="get_field_name("name"); ?>"value=""style="width:100%;" />

// potvrdni okvir

id="get_field_id("show_info"); ?>"name="get_field_name("show_info"); ?>" /> ">

Zaključak

OK, sve je gotovo. Upravo ste napravili svoj lijep i jednostavan widget koji prikazuje ime autora bloga. Osim toga, omogućava korisniku da odabere hoće li informacije pokazati publici ili ne. Sačuvajte kod na PHP fajl i otpremite u svoju fasciklu sa temama. Nazovite to u svom functions.php. Nakon toga idite na konzolu Izgled → Widgeti i vidjet ćete svoj widget.

Sav ovaj kod je uključen u datoteku priloženu uz članak, tako da je još lakše kopirati i zalijepiti. Enjoy!

Kategorije

Izbor urednika