Crearea unui widget pentru desktop. Scrierea unui gadget din bara laterală Windows de la zero Creați widget-uri
Astăzi ne vom da seama cum să vă creați propriul widget (Widget) pe un dispozitiv Android. Un widget este un element familiar al desktopului, cu ajutorul căruia puteți accesa unele dintre funcțiile unei aplicații: vizualizați știri în fereastra widgetului, prognoza meteo, actualizați știrile despre diverse servicii, gestionați diverse funcții ale dispozitivului (blocarea ecranului, porniți radioul, internetul și multe altele). De data aceasta nu vom crea ceva grandios și foarte util, ca o lanternă acolo :), ci vom realiza un widget simplu care va fi implementat sub formă de buton, când dați clic pe el, folosind un browser standard, ajungem la preferatul tuturor. site. Desigur, puteți personaliza orice site doriți.
Creăm un nou proiect, selectăm Blank Activity, versiunea minimă de Android 2.2+. Când creați un widget, primul lucru de făcut este să creați un obiect AppWidgetProviderInfo, în care specificăm fișierul xml din care se va completa vizualizarea widget-ului în sine. Pentru a face acest lucru, creați un folder în proiect res/xmlși în el creăm un nou fișier xml numit widget.xml cu urmatorul continut:
< appwidget- provider xmlns: android= android: minWidth= "146dp" android: updatePeriodMillis= "0" android: minHeight= "146dp" android: initialLayout= "@layout/activity_main" > < / appwidget- provider>Acum să trecem la dosar activity_main.xmlși creați interfața widget-ului nostru, acesta va consta dintr-un buton buton:
< 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" instrumente: 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 >După cum puteți vedea, am creat un buton obișnuit, așa că va fi widget-ul nostru:
Adică, puteți face tot ce doriți în loc de acest buton.
Să trecem la lucrul cu codul din fișier MainActivity.java. Trebuie să fie moștenit de la clasă AppWidgetProvider, pentru care există metoda sa principală onUpdate(). În această metodă, trebuie să definim două obiecte: PendingIntentȘi vizualizări de la distanță. La sfârșitul utilizării lor, trebuie să apelați metoda updateAppWidget(). Cod fișier MainActivity.java:
import android.net.Uri ; import android.app.PendingIntent ; import android.appwidget.AppWidgetManager; import android.appwidget.AppWidgetProvider; import android.content.Context ; import android.content.Intent ; import android.widget.RemoteViews ; import android.widget.Toast ; import com.example.widget.R ; clasa publică MainActivity extinde AppWidgetProvider( @Override public void onUpdate (context context, AppWidgetManager appWidgetManager, int appWidgetIds) (pentru (int i= 0; i< appWidgetIds. length; i++ ){ int currentWidgetId = appWidgetIds[i]; //Efectuați o cerere http simplă către linkul specificat și urmați-o: String url = „http://site” ; Intenție de intenție = intenție nouă (Intenție . ACTION_VIEW); intentie. addFlags(Intenție . FLAG_ACTIVITY_NEW_TASK); intentie. setData(Uri .parse(url)); //Definește două obiecte de clasă necesare PendingIntent și RemoteViews: PendingIntent pending = PendingIntent . getActivity(context, 0 ,intent, 0 ); Vizualizări RemoteViews = noi RemoteViews(context.getPackageName(),R.layout.activity_main); //Configurați procesarea clicurilor pentru adăugarea unui widget: vederi. setOnClickPendingIntent (butonul R . id., în așteptare); appWidgetManager. updateAppWidget(currentWidgetId,views); Paine prajita. makeText(context, „Widget adăugat”, Paine prajita . LENGTH_SHORT). spectacol(); ) ) )Pentru ca widgetul nostru să funcționeze cu succes, avem nevoie de ceva magie în fișierul manifest AndroidManifest.xml. Ar trebui să arate așa:
< 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>După cum ați ghicit, widget-ul este definit în etichetă<receptor> .
Singurul lucru rămas de corectat este editarea fișierului strings.xml, adăugând acolo liniile pe care le-am folosit:
< ? xml version= "1.0" encoding= "utf-8" ? > < resources> < string name= "app_name" >ÎNVĂȚA. ANDROID < string name= "action_settings" >Setări < string name= "hello_world" >Salut Lume!< / string> < / resources>Atenţie! Android Studio s-ar putea să vă certați când porniți programul, vă cer să specificați o activitate implicită. Selectați linia „Nu lansați activitate” (Nu lansați Activitate):
Acum instalați aplicația pe emulator sau dispozitiv, adăugați widget-ul pe desktop:
Și faceți clic pe el:
După cum puteți vedea, totul funcționează excelent.
Deci, în acest tutorial, am creat un widget Android simplu, constând dintr-un buton Button, când facem clic pe widget-ul nostru, creăm o cerere http simplă și urmăm linkul URL dat. Puteți exersa cu alte elemente, nu cu butonul și să veniți cu funcționalități interesante pentru ele. Noroc!
Pentru a creați widget în Android Nici măcar nu trebuie să știi să programezi. Există mai multe aplicații de designer care facilitează desenarea unui widget și îi oferă funcționalitatea dorită.
Text minim
Aplicația vă permite să creați widget-uri minimaliste constând din text și numere. În ciuda numelui, aceste widget-uri au posibilități foarte largi.
Odată instalat, adăugați widgetul Text minimalist pe desktop la dimensiunea dorită. Se va deschide fereastra de setări widget.
În setări, puteți alege fundalul, orientarea, fontul, acțiunea de clic etc. De asemenea, în setări există aspecte predefinite pentru umplere:
- Timp.
- Data de.
- Nivel de încărcare.
- Temperatura.
Funcții suplimentare pentru completarea widget-ului sunt disponibile atunci când vă creați propriul aspect widget:
- Text.
- Spațiu liber/utilizat pe cardul SD.
- Timpul de funcționare a sistemului.
- Cantitatea de date transferate prin rețeaua mobilă și nu numai.
- Numele rețelei Wi-Fi, adresa IP în rețeaua Wi-Fi.
- Cantitatea de RAM ocupată.
Toate valorile pot fi afișate în text și numere.
Widget personalizat definitiv (UCCW)
Această aplicație vă permite să realizați widget-uri nu numai din text, ci și cu conținut grafic.
Când este lansat, se deschide fereastra de creare a widget-ului. Pentru a adăuga un obiect la widget, apăsați butonul +/- din partea de sus. Pentru a-l muta și edita în orice mod, faceți clic pe butonul „Selectați obiectul” din partea de sus și selectați obiectul adăugat.
Widgeturile pot conține următoarele obiecte:
- Ora, data și ziua săptămânii.
- Ceas analogic.
- Text personalizat.
- Nivelul de încărcare în numere sau o afișare grafică a acestuia.
- Toate informațiile despre vreme - temperatură, umiditate, viteza vântului etc.
- Figuri geometrice.
- Imagini.
- Numărul de e-mailuri Gmail necitite, sms-uri și apeluri nepreluate.
- Ora sună alarma.
Fiecare element poate fi rotit, întins, îndoit și culoarea acestuia poate fi schimbată. Desigur, puteți personaliza acțiunea de clic (Selectați obiect->Hotspots). Acceptă importul și exportul widget-urilor create.
Sistemul de operare Android are multe caracteristici și capabilități. Unul dintre ele este widget-urile - ferestre care vă permit să utilizați o parte din funcționalitatea aplicației fără a o lansa.
Practic, widget-urile vin împreună cu aplicația. Cu toate acestea, există programe care nu au această opțiune. Deci, trebuie să iei lucrurile în propriile mâini!
- Folosind Play Market, descarcăm aplicația gratuită „KWGT Kustom Widget Maker”, care poate fi achiziționată gratuit, dar unele dintre funcții vor fi disponibile numai după achiziționarea suplimentului.
Programul acționează ca o platformă pentru lansarea de widget-uri terță parte de la diferiți dezvoltatori. În plus, puteți schimba aspectul widget-urilor, oferindu-le funcționalități suplimentare.
La început, ați putea crede că „KWGT Kustom Widget Maker” este o aplicație complexă care seamănă cu programele de dezvoltare software. Da și nu: interfața este similară, dar nu este nimic complicat aici.
Pentru a începe editarea widget-urilor:
- mergeți la desktop și apelați meniul de editare desktop ținând apăsat butonul de meniu sau apăsând lung pe ecran;
- găsiți cadrul widgetului „KWGT” și setați dimensiunea necesară, de exemplu - 4x2. După aceea, se formează o fereastră pe desktop;
- Facem clic pe fereastră, deschizând astfel meniul de selecție widget;
- Selectați aspectul care vă place și faceți clic pe el (dispozitive suplimentare pot fi descărcate din Magazinul Play. Pentru a face acest lucru, în bara de căutare a aplicației, specificați „Widgeturi KWGT”);
- După ce ați ales aspectul care vă place, aplicația va trece la editarea acesteia. Următoarele setări vor fi disponibile:
- Elemente responsabile cu setarea parametrilor geometrici ai widget-ului;
- Fundal, responsabil pentru imaginea de fundal pe widget;
- Touch, care specifică acțiunile care trebuie efectuate atunci când widget-ul este activat;
- Stratul responsabil pentru scara widget-ului;
Ca urmare, vom obține un widget unic cu funcționalitatea necesară.
Recent, am avut nevoie să creez un gadget pentru bara laterală Windows. Nu aveam abilități în acest sens, așa că, după puțină căutare pe Google și citit documentația, să începem.
Îți voi arăta cu ce am ajuns
Gadgetul va primi informații de pe site sub formă de xml, analiza și, de fapt, le va afișa. De asemenea, gadgetul va verifica dacă există versiuni noi și, dacă sunt prezente, refuză să funcționeze :)
Inițial, de dragul de a câștiga experiență, am vrut să scriu un gadget în întregime în VBScript (pentru că nu mă ocupasem încă de el), dar până la urmă a trebuit să fac inserții în JavaScript.
Să mergem direct la cod. Nu voi lua în considerare tot codul aici, voi arăta doar punctele principale. Un link către gadgetul finit este la sfârșitul articolului.
Fișierul principal al unui gadget este manifestul său, fișierul Gadget.xml. Ar trebui să fie numit astfel și să fie localizat în rădăcina arhivei noastre (gadget-ul nu este altceva decât o arhivă ZIP cu extensia .gadget).
Vremea din Info.Denms.Ru 1.0.1232 Widget complet pentru vreme (Info.Denms.Ru)
Să o luăm în considerare mai detaliat.
Element
Opțiuni
Fișierul main.html este un fișier html obișnuit, nu îl voi da în întregime, mă voi opri doar asupra unor puncte.
Elementul g:background specifică fundalul gadgetului. Să-l facem transparent.
Gadgetul poate fi în două stări - andocat (în stânga în captura de ecran de mai sus) și dezactivat (în dreapta). Vom stoca starea curentă a gadgetului în variabila JavaScript andocat.
Vom avea nevoie de funcția de wrapper isDocked în viitor pentru a afla starea actuală a gadgetului din VBScript (pentru că nu am încercat, dar nu am putut-o implementa în VBScript pur). Încă o notă - scripturile funcționează corect în această ordine, adică. mai întâi descriem scripturi VBScript, apoi JavaScript.
Restul elementelor din main.html sunt reprezentate de elemente DIV poziționate absolut. Ulterior, din scripturi, ne vom referi la ele prin id-ul lor.
Folosind JavaScript, setați stările de andocare și dezactivat pentru gadget, precum și specificați fișierul de setări (main.js)
System.Gadget.onDock = redimensionare; System.Gadget.onUndock = redimensionare; System.Gadget.settingsUI = "settings.html"; System.Gadget.onSettingsClosed = SettingsClosed; andocat=0; //starea inițială a gadgetului resize(); //inițializare
După cum puteți vedea din lista de mai sus, atunci când stările gadgetului se schimbă, funcția resize() va fi apelată.
Funcția resize() ( bd = document.body.style; System.Gadget.beginTransition(); if (System.Gadget.docked) ( // stare mică bd.width=148; //setați dimensiunile gadgetului bd.height=201 ; andocat = 1; bd.background="url(images/gadget.png) no-repeat"; //setează fundalul //transferă valorile de la starea de andocat la starea de andocat și scoate la zero elementele pentru deconectat stare document.getElementById("small_needupdate ").innerHTML = document.getElementById("big_needupdate").innerHTML; document.getElementById("big_needupdate").innerHTML = ""; //... ) else ( // stare mare bd .width=230; bd. height=160; bd.background="url(images/gadgeth.png) no-repeat"; andocat=0; //transferă valorile din starea andocat în starea neancoată și resetează elementele pentru starea andocata document.getElementById("big_needupdate"). innerHTML = document.getElementById("small_needupdate").innerHTML; document.getElementById("small_needupdate").innerHTML = ""; //... ) System.Gadget.endTransition(System. Gadget.TransitionType.morph,1); )
De asemenea, puteți descrie funcția de salvare a setărilor. Nu sunt în gadgetul meu, dar, pentru un exemplu, voi arăta cum se face
Funcție SettingsClosed(eveniment) ( dacă (event.closeAction == event.Action.commit) ( //alertă System.Gadget.Settings.readString("test"); ) )
ReadString - citește un șir salvat anterior, writeString, respectiv scrie.
Metode System.Gadget.beginTransition(); și System.Gadget.endTransition(); necesare pentru a schimba „liniște” dimensiunea gadgetului. Sunt ignorate pe Windows Seven, dar le-am lăsat totuși pentru compatibilitate inversă.
După cum am menționat mai sus, serverul ne oferă informații despre vreme în format xml.
1,7 41 ninsoare acoperită 87 SW 5 -3 -1 -1 26 1 -9 41 0 …
Vom descărca și analiza xml folosind VBScript.
Sub DownloadXML2 Set objXML = CreateObject("Microsoft.XmlHttp") objXML.Open "GET", "http://info.kovonet.ru/weather.xml", True objXML.OnReadyStateChange = GetRef("objXML_onreadystatechange") objXML.setRequest „If-Modified-Since”, „Sam, 1 Jan 2000 00:00:00 GMT” objXML.Send iTimeoutID = window.SetTimeout(„mySleep”, 1000) End Sub
Funcția mySleep va verifica conexiunea noastră pentru un timeout.
Sub mySleep dacă bRespReceived = „fals”, apoi „niciun răspuns încă primit iTimeout = iTimeout + 1 dacă (iTimeout > 30) apoi „timeout timerFirstRun = window.SetTimeout(”Update”, 60000) „încercați să reactualizați într-un minut altfel "timeout încă nu a fost atins, continuați să numărați secundele iTimeoutID = window.SetTimeout("mySleep", 1000) end if end if End Sub
Dacă descărcarea are succes, objXML.readyState va fi egal cu patru, iar starea (objXML.status) va returna valoarea 200.
Funcția objXML_onreadystatechange() If (objXML.readyState = 4) Then "msgbox objXML.statusText If (objXML.status = 200) Then bRespReceived=true SaveFile(objXML.responseText) else =(timerFirSet00", "Timer" timer) încercați să reactualizați într-un minut Funcția End If End If End
În acest caz, salvați fișierul într-un folder temporar Windows
Funcție SaveFile(what) Set fso = CreateObject("Scripting.FileSystemObject") tempFolder = fso.GetSpecialFolder(2) filepath = tempFolder+"\weather.xml" Dim fso1, tf Set fso1 = CreateObject("Scripting.FileSystemfObject") = fso1.CreateTextFile(filepath, True, True) "rewrite, unicode tf.Write(what) tf.Close ParseXML End Function
Și începem să analizăm fișierul.
Sub ParseXML Set fso = CreateObject("Scripting.FileSystemObject") tempFolder = fso.GetSpecialFolder(2) filepath = tempFolder+"\weather.xml" Set xmlDoc = CreateObject("Msxml2.DOMDocument") xmlDoc.async="Docfalse" xml. load(filepath) "nodul principal - în cazul nostru
Verificarea versiunilor noi se face exact în același mod.
Nu uitați să creați un fișier de setări - settings.html, a cărui existență am anunțat mai sus.
Setări
Asta, de fapt, este tot. Mă voi bucura dacă articolul meu (primul :)) s-a dovedit a fi util cuiva.
Surse folosite.
Crea Widget WordPress- cam așa se creează un plugin, dar mult mai simplu și mai clar. Tot ce aveți nevoie este un fișier cu totul PHP cod care este mult mai ușor de scris decât un plugin care are mai multe fișiere. Există trei funcții principale ale unui widget: acestea sunt widget, ActualizațiȘi formă.
- widget de funcție()
- actualizare functie()
- forma funcției ()
| Descărcați surse |
Structură de bază
Aspectul de bază al widget-ului nostru este foarte simplu, există funcții utile pe care trebuie să le cunoașteți. Coloana vertebrală a structurii noastre widget va fi cam așa:
Add_action("widgets_init", "register_my_widget"); // funcția de încărcare a funcției widget-ului register_my_widget() () // funcție de înregistrare a clasei mele de widget My_Widget extinde WP_Widget () () // Exemplul de funcție a clasei de widget My_Widget() () // Funcția Widget Settings widget() () // afișează funcția widget update() () // actualizează funcția widget form() () // și, desigur, formularul pentru opțiunile widget
Pasul 1. widget_init
Înainte de a face toate acestea, trebuie să încărcăm widgetul nostru cu funcția widget_init. Acesta este un indiciu acțiune, despre care puteți găsi mai multe informații în codexul WordPress.
Add_action("widgets_init", "register_my_widget");
Următorul lucru pe care îl vom face este Inregistreaza-te widget-ul nostru în WordPress, astfel încât să fie disponibil în secțiunea de widget-uri.
Funcția register_my_widget() ( register_widget("My_Widget"); )
Pasul 2 Clasă
Vom include widget-ul nostru în Clasă. Numele clasei contează! Ceea ce trebuie să reținem este că numele clasei și numele funcției ar trebui să fie aceeași.
Clasa My_Widget extinde WP_Widget()
Acum vom trece la clasă câteva Opțiuni setări. De exemplu, putem trece lăţimeȘi înălţime. Putem oferi și un mic Descriere widget-ul nostru dacă vrem. Acest lucru va fi util dacă conectați widgetul la tema dvs. comercială.
Funcția My_Widget() ( function My_Widget() ( $widget_ops = array("classname" => "exemplu", "descriere" => __("Un widget care afișează numele autorilor ", "exemplu")); $control_ops = array("width" => 300, "height" => 350, "id_base" => "example-widget"); $this->WP_Widget ("example-widget", __("Example Widget", "example" ), $widget_ops, $control_ops); )
Acum că am terminat cu cerințele de bază pentru widget-ul nostru, ne vom îndrepta atenția asupra trei funcții, despre care am vorbit mai devreme și care sunt funcții importante sau blocuri de bază pentru construirea widget-ului nostru!
Pasul 3. functionwidget()
Prima funcție este legată de afişa widget-ul nostru. Vom trimite câteva argumente la funcția noastră. Vom transmite argumente din subiect, poate fi un titlu sau alți parametri. Acum trecem o variabilă instanță, care este asociat cu clasa noastră de funcții.
Functionwidget($args, $instance)
După aceea extragem Opțiuni din argumente pentru că avem nevoie ca opțiunile să fie disponibile local. Dacă nu știți ce este o variabilă locală, nu vă faceți griji acum și adăugați acest pas.
Extras($args);
În continuare vom seta antetȘi alte optiuni pentru widget-ul nostru, care poate fi modificat de utilizator în meniul widget-ului. Adăugăm și variabile speciale, cum ar fi $before_widget, $după_widget. Aceste opțiuni sunt gestionate de temă.
$title = apply_filters("titlu_widget", $instanță["titlu"]); $nume = $instanță[„nume”]; $show_info = isset($instance["show_info"]) ? $instance["show_info"] : fals; echo $before_widget; // Afișează titlul widgetului dacă ($title) echo $before_title . $titlu. $după_titlu; //Afișează numele dacă ($nume) printf("
" . __("Hei, marinarul lor! Numele meu este %1$s.", "exemplu") . "
", $nume); if ($show_info) printf($nume); echo $after_widget;Pasul 4. actualizare funcție()
Actualizarea funcției($new_instance, $old_instance) ( $instance = $old_instance; //Decupați etichetele din titlu și nume pentru a elimina HTML $instance["title"] = strip_tags($new_instance["title"]); $instance[" nume"] = strip_tags($new_instance["nume"]); $instance["show_info"] = $new_instance["show_info"]; return $instance; )
Un lucru de reținut este că aici folosim strip_tags pentru a elimina tot textul XHTML, care ne poate sparge widgetul.
Pasul 5. Formul funcției()
În pasul următor, vom crea formă, care va servi bloc de intrare. Acesta va accepta setări și valori definite de utilizator. Funcţie formă pot include casete de selectare, câmpuri de introducere a textului etc.
Înainte de a crea aceste câmpuri de intrare, trebuie să decidem ce să afișăm atunci când utilizatorul nu selectează nimic din widget. Pentru a face acest lucru, vom transmite valori implicite pentru parametri, cum ar fi titlul, descrierea și așa mai departe.
//Configurați câteva setări implicite pentru widget. $defaults = array("titlu" => __("Exemplu", "exemplu"), "nume" => __("Bilal Shaheen", "exemplu"), "show_info" => true); $instanță = wp_parse_args((matrice) $instanță, $implicit); ?>
Acum vom crea câmpul de introducere a textului. Vom include aceste valori într-o etichetă de paragraf.
// Titlul widgetului: introducerea textului
"name="get_field_name("titlu"); ?>"value=""style="width:100%;" />
//introducerea textului"name="get_field_name ("nume"); ?>"value=""style="width:100%;" />
// Caseta de bifatid="get_field_id ("afișați_informații"); ?>"name="get_field_name ("afișați_informații"); ?>" />
Concluzie
OK, totul sa terminat acum. Tocmai ți-ai creat propriul widget frumos și simplu care arată numele autorului blogului. Mai mult, permite utilizatorului să aleagă dacă să arate sau nu informațiile publicului. Salvați codul în fișier PHPși încărcați în folderul dvs. cu teme. Sună-l în ta funcții.php. După aceea, accesați consola în Aspect → Widgeturiși vei vedea widget-ul tău.
Tot acest cod este inclus în fișierul atașat articolului, deci este și mai ușor să copiați și să lipiți. Bucurați-vă!
