U prošloj ste lekciji naučili kako stvoriti vlastitu vlastitu bočnu traku, a u ovoj ćete lekciji naučiti kako izraditi vlastiti widget na WordPressu. Widget je modul koji je posebno dizajniran za postavljanje na bočnu traku.
Zašto su nam widgeti uopće potrebni? Oni su potrebni za uredno postavljanje pomoćnog sadržaja na stranicu, kao i njeno daljnje uređivanje. Na primjer, vrlo često widgeti sadrže poveznice, oglasne blokove, obrasce za pretplatu i druge važne informacije.
Na WordPress Već postoje standardni widgeti koji se mogu vidjeti na lijevoj strani administratorske konzole. Na kartici - Izgled/ Widgeti, desnu stranu zauzimaju bočne trake, gdje možete mišem povući i ispustiti sve dostupne widgete.
Kako izraditi vlastiti widget na WordPressu
Idemo otvoriti WordPress kod i da vidimo o čemu piše dokumentacija stvaranje vlastitog widgeta. WordPress predlaže proširenje standardne klase WP_Widget i njegove funkcije te demonstrira primjer gotovog koda s jednim tekstualnim poljem. Novi_widget proteže ugrađeni WordPress widget WP_Widget.
Klasa New_Widget proširuje WP_Widget (
Kod za stvaranje novog widgeta sa zadanim imenom Foo_Widget, svugdje morate ovo ime zamijeniti svojim - Novi_widget.
Moramo dodati novu klasu Novi_widget, kopirajte kod s Primjer u kod i zalijepite ga u datoteku funkcija.php. Također morate registrirati novi widget, to se radi pomoću kuke widgets_init, kuka povezuje dodani widget s jezgrom WordPress. Ispod je primjer registracije widgeta Novi_widget, dodajte ovaj kod u datoteku funkcija.php, odmah nakon šifre s klasom.
Funkcija register_new_widget() (
register_widget("Novi_widget");
}
add_action("widgets_init", "register_new_widget");
Sada se naš widget pojavio u području dostupnih widgeta, koji se mogu dodati na željeno mjesto u bočnoj traci.
Widget koji smo izradili možemo vidjeti na web stranici. Novi widget je apsolutno beskoristan, jer prikazuje samo naslov, ali mi je bilo bitno prikazati sam princip izrade.
Datoteka function.php nije gumena
Ako imate previše prilagođenog koda, preporučujem da kod za svaku novu klasu widgeta stavite u zasebnu PHP datoteku, koju treba smjestiti u zasebnu mapu s widgetima. Osim toga, za registracijski kod za sve prilagođene widgete morate izraditi drugu datoteku. Sada moramo povezati te datoteke s funkcija.php preko funkcije zahtijevati.
Zahtijeva get_template_directory() . "/widgets/custom-widget-1.php";
zahtijevaju get_template_directory() . "/widgets/custom-widget-2.php";
Kako onemogućiti widgete
Ako ne namjeravate koristiti standardne ili prilagođene widgete, možete ih onemogućiti. Za ovu svrhu WordPress funkcija je osigurana - unregister_widget(), ne uklanja widgete iz WordPress zauvijek, a jednostavno ih uklanja njihova administratorska konzola. Zalijepi u datoteku funkcija.php imena widgeta koje trebate onemogućiti.
Funkcija remove_calendar_widget() (
unregister_widget("WP_Widget_Calendar");
}
Također ne zaboravite ukloniti kuku koja se povezuje s kernelom WordPress.
Add_action("widgets_init", "remove_calendar_widget");
Ako ste početnik web programer, naravno da možete koristiti gotove dodatke s widgetima. Iz vlastitog iskustva znam koji su widgeti trenutno najtraženiji na web stranicama.
Kontakt obrazac 7 - dodatak za obrazac za povratne informacije
Ovaj dodatak je najpopularniji, iako ne stvara vlastiti widget, ali svi obrasci koje kreirate imaju svoj kratki kod. Kopirate kratki kod željenog obrasca i zalijepite ga u tekstualni widget u modu "Tekst" ovaj kratki kod.
Widget s gotovim obrascem za povratne informacije pojavit će se na stranici na bočnoj traci.
Widgeti u WordPressu olakšavaju korisnicima postavljanje elemenata na svoje web mjesto. Postoji mnogo različitih WordPress tema i dodataka koji koriste widgete kako bi korisnicima omogućili stvaranje vlastitih izgleda. Postoje različiti dodaci za poboljšanje upravljanja widgetima. U ovom ćemo vam članku pokazati kako izraditi prilagođeni widget za svoju WordPress stranicu.
Što je WordPress widget?
Widgeti su stvoreni da pruže jednostavan način upravljanje dizajnom i strukturom materijala u WP temi. Dobra stvar kod widgeta je da ih možete povući i ispustiti u svoju bočnu traku ili u bilo koje područje vaše web stranice spremno za widgete. Oni pružaju veliku fleksibilnost dodacima, što je razlog zašto ih programeri tema tako često koriste. omogućuju programerima da dodaju funkcionalnost svojim proizvodima, omogućujući korisnicima pristup bez potrebe za pisanjem koda.
Naravno, kao korisnik, uvijek možete kreirati vlastitu, koju kasnije možete koristiti u bilo kojoj temi.
Izrada widgeta u WordPressu
Kôd widgeta može se stilizirati na dva načina: dodajte ga u datoteku functions.php vaše teme ili izradite zaseban dodatak za funkcionalnost.
U ovom vodiču izradit ćemo jednostavan widget koji jednostavno pozdravlja posjetitelje. Kopirajte sljedeći kod i postavite ga u dodatak svoje teme ili functions.php.
// Stvaranje klase widgeta wpb_widget proširuje WP_Widget ( function __construct() ( parent::__construct(// Osnovni ID vašeg widgeta "wpb_widget", // Naziv widgeta pojavit će se u korisničkom sučelju __("WPBeginner Widget", "wpb_widget_domain") , // Widget description array("description" => __("Sample widget based on WPBeginner Tutorial", "wpb_widget_domain"),)); ) // Stvaranje widget front-end-a // Ovdje se događa radnja widget javne funkcije ($args, $instance) ( $title = apply_filters("widget_title", $instance["title"]); // prije i poslije argumenata widgeta definiraju teme echo $args["before_widget"]; if (! prazno ($title)) echo $args["before_title"] . $title . $args["after_title"]; // Ovo je mjesto gdje pokrećete kod i prikazujete izlazni echo __("Hello, World!", "wpb_widget_domain "); echo $args["after_widget"]; ) // Widget Backend javne funkcije form($instance) ( if (isset($instance[ "title" ])) ( $title = $instance[ "title" ]); ) else ( $title = __("Novi naslov", "wpb_widget_domain"); ) // Administratorski obrazac widgeta ?>
" ime="get_field_name("naslov"); ?>" type="text" value="!}" />
Sada idite na Izgled - Widgeti i povucite WPBeginner Widget u bočnu traku kako biste ga vidjeli na djelu.
Prilično jednostavno, zar ne? Prvo stvaramo prilagođeni widget. Zatim definiramo što točno widget radi i kako se prikazuje u pozadini. Zatim određujemo kako treba postupati s promjenama koje je napravio widget. Na kraju se registriramo i učitavamo widget.
Postoje neke stvari u ovom kodu koje bi vas mogle navesti na pitanja. Recimo, na primjer, što radi wpb_text_domain. WordPress koristi gettext za obradu prijevoda i lokalizacije. Dakle: wpb_text_domain i __e pokazuju gettextu da su ti nizovi dostupni za prijevod. , pogledajte naš vodič.
Svi koristimo widgete na ovaj ili onaj način, jer oni su domena Android sustava, pa čak i vlasnici iPhonea potajno bacaju poglede na njih. Koje widgete koristite? Sat, vrijeme - sve je to "posao", zar ne? Vjerojatno imate instalirane Beautiful Widgete, Premium Widgete ili slične aplikacije. Ovi programi su naravno dobri, ali ne dopuštaju vašim kreativnim sposobnostima da divljaju. Želite li sami izraditi widget za svoj pametni telefon? Onda da vidimo kako se to može učiniti pomoću aplikacije Editor widgets.
Uzimamo prekrasnu pozadinu, veliki brojčanik sata, dan u tjednu, ali što bez vremena? Dodat ćemo ga u naš idealni widget, i to na 3 dana odjednom. Dakle, sve ovo i mnogo više može se učiniti pomoću android aplikacije Editor widgets. Počnimo stvarati.
[
Prema zadanim postavkama imamo osam izgleda widgeta, odaberite jedan i počnite stvarati. Ovdje nas nitko ne ograničava u našim mogućnostima. Odaberite pozadinu. To može biti slika ili ispuna bojom; možete prilagoditi prozirnost sloja. Odabir okvira. Ima ih dosta i svi su jako lijepi, naravno okusom i bojom... Zatim prelazimo na punjenje našeg widgeta. Da bismo to učinili, imamo pristup raznim elementima: satu, danu u tjednu, datumu, napunjenosti baterije u nekoliko projekcija, obavijestima o propuštenim pozivima i porukama, vremenskim elementima. Kao što razumijete, izbor je vrlo širok. Uzimamo što nam treba i slažemo kako treba. Također možemo promijeniti boju objekta i stil fonta. Općenito, mi stvaramo potpunu ljepotu, a svatko ima svoju ljepotu – na kraju krajeva, svi smo jedinstveni!
Aplikacija Editor widgets stvara idealne uvjete. Stoga rezultat rada ovisi samo o letu naše mašte.
Widgeti mogu imati različite veličine i skalabilni su.
Usput, u postavkama možemo odabrati format vremena i datuma. I također postavite neku "akciju" kada kliknete na widget. To može uključivati dodatne informacije o stanju telefona ili pokretanje unaprijed odabrane aplikacije, na primjer, diktafona. Ili nazovite telefonski broj, što je još neobičnije, ali možda nekome korisno.
Općenito, ako želite izraditi widget za svoj Android uređaj, widgeti Editora bit će vaš vjerni pomoćnik.
AppWidget, ili jednostavno "widget", jedan je od najimpresivnijih i najprikladnijih elemenata korisničkog sučelja u operativnom sustavu Android, koji se može dodati na radnu površinu za brzi pristup određenim funkcijama odgovarajuće aplikacije. U ovom ćemo članku otkriti kako izraditi vlastiti widget.
Što je widget strukturno? Widget je potreban za prikaz određenih informacija vezanih uz aplikaciju kojoj pripada ili za brzu interakciju s ovom aplikacijom izravno putem radne površine. Najjednostavniji primjer je sat na radnoj površini. Naravno, widgeti se mogu lako dodavati ili uklanjati sa stolnih računala.
Visokokvalitetni widgeti značajno optimiziraju interakciju s uređajem. Štoviše, vrlo često najprikladniji widgeti zauzimaju najmanje prostora na radnoj površini, a ujedno su i najinformativniji. Gotovo svaki korisnik pokušat će smjestiti maksimalnu količinu informacija na radnu površinu svog Android gadgeta, a važno je da je prostor ograničen.
Počnimo stvarati widget s dizajnom. Srećom, Google je osigurao vrlo korisne UI smjernice za programere softvera, koje detaljno opisuju proces stvaranja dizajna i osnovne principe ergonomije. Postoji i posebna službena uputa za izradu widgeta koja se nalazi na poveznici: //developer.android.com/guide/practices/ui_guidelines/widget_design.html.
Widget koji zauzima jednu "ćeliju" na radnoj površini ima rezoluciju od 80x100 piksela, odnosno da biste stvorili duguljasti widget dužine 4 ćelije i visine jedne ćelije, potrebno vam je 320x100 piksela. Uzet ćemo ovu veličinu kao osnovu za widget koji stvaramo.
Sada widget treba nacrtati. U principu, widget možda i nema nikakav grafički dio, te prikazuje samo tekst ili kontrole, bez pozadine ili okvira, ali, naravno, lijep i oku ugodan widget jednostavno mora imati kvalitetan dizajn. Dakle, nacrtajmo pozadinu. Uzmimo kao osnovu pozadinu iz gore spomenutih Smjernica za korisničko sučelje. Predložak koji nam je dostupan otvorimo u Photoshopu ili nekom drugom grafičkom uređivaču i napravimo što god želimo, nakon čega pohranimo dobivenu sliku u .png formatu. Format koji nam treba je PNG-24, s 8-bitnom bojom i prozirnom pozadinom. Dakle, osnova za naš widget je spremna.
Sada prijeđimo na izradu softverskog dijela. Widget možda nema softverski dio. Jednostavno rečeno, nalazit će se u izborniku za dodavanje widgeta, ali ne i u glavnom izborniku aplikacije. Mi ćemo izraditi upravo ovu vrstu widgeta. Kreiramo novi projekt i zbog praktičnosti ga imenujemo tako da se glavna klasa zove widget.java.
Uređivanje AndroidManifest. xml. Izjavljujemo naš widget:
paket="com.example.widget"
android:versionCode=”1″
android:versionName=”1.0″>
android:resource=”@xml/widget_info” />
Sada uredimo widget.java. Ovdje je potrebno opisati kako će widget reagirati na različite uvjete. Klasa AppWidgetProvider ima sljedeće metode:
onUpdate – metoda se poziva kada se widget kreira, kao i nakon određenog vremena. Vrijeme je postavljeno u konfiguracijskoj datoteci ovog widgeta. Imajte na umu da se najčešće koristi.
onDeleted – metoda se izvršava kada se widget izbriše s radne površine.
onEnabled – metoda se poziva kada se widget aktivira prvi put. Ali ako se doda drugi potpuno isti widget, ova se metoda više ne izvršava.
onDisabled – metoda se izvršava kada se zadnja kopija widgeta izbriše s radne površine. Sukladno tome, ova metoda je obrnuta od onEnabled.
onReceive – metoda se poziva istovremeno sa svim ostalima. Često se uopće ne koristi.
Nećemo ulaziti preduboko u softverski dio widgeta, pa stoga nećemo pretrpavati naš primjer nikakvim rukovateljima, već ćemo jednostavno implementirati sve funkcionalnosti pomoću Layoutsa. Morate deklarirati klasu AppWidgetProvider na sljedeći način:
paket com.example.widget;
import android.appwidget.AppWidgetProvider;
widget javne klase proširuje AppWidgetProvider(
}
Zatim opisujemo naš widget - ovo je neophodno kako bi mobilni uređaj razumio s čime se bavi. Da biste to učinili, morate stvoriti mapu xml u mapi res. U njemu stvaramo datoteku s nazivom widget_ info. xml. Otvorite stvorenu datoteku i u nju upišite sljedeći kod:
android:minWidth=”294dp”
android:minHeight=”72dp”
android:updatePeriodMillis=”0″
android:initialLayout="@layout/widget">
Evo kratkog opisa navedenih parametara:
minWidth – minimalna širina potrebna za rad widgeta.
minHeight – minimalna visina potrebna za rad widgeta.
updatePeriodMillis – razdoblje tijekom kojeg se widget ažurira, navedeno u milisekundama. Parametar je vrlo koristan jer se nakon isteka navedenog vremenskog razdoblja pokreće metoda onUpdate objekta AppWidgetProvider.
initialLayout – parametar ukazuje na resurs koji opisuje sučelje našeg widgeta.
Formula za izračunavanje veličine widgeta je sljedeća: (broj ćelija * 74) - 2.
Počnimo s opisom sučelja widgeta koji stvaramo. Ovdje dobro dolazi prethodno kreirana pozadina. Uvezite pozadinsku sliku u mapu dwawable(ili u sve tri mape crtati za različite rezolucije zaslona). U mapi raspored stvoriti datoteku pod nazivom widget. xml. Sučelje je opisano kao za uobičajenu aktivnost, ali postoje neka ograničenja. Sljedeći elementi dopušteni su za upotrebu:
Kreirajmo LinearLayout na koji ćemo primijeniti stvorenu pozadinsku sliku i dodati AnalogClock na primjer. Sam sat neće stati u okvir, ali će poslužiti kao vizualni primjer. Tako:
android:id=”@+id/Widget”
android:layout_height="fill_parent"
android:orijentacija=”horizontalno”
android:gravity=”center_vertical”
android:background=”@drawable/frame”>
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
21. svibnja , 2016
Svaki put kada na svoje web stranice povežem gotovo rješenje iz usluga poput disqusa ili Google analyticsa, zadivi me lakoća integracije prilično složene funkcionalnosti. Stavio sam 3 retka javascript koda u kod - i već imate blok s komentarima. Još 2 retka - i dostupna je analitika s Googlea ili Yandexa. Naravno, ne događa se nikakva magija; te iste 3 linije koda povlače sav potreban kod s udaljenog poslužitelja i u suštini postavljaju malu web aplikaciju na stranice vaše stranice. Ali kako to funkcionira iznutra i kako to možete učiniti sami? Bilo je vrlo zanimljivo ovo shvatiti, i na kraju sam dobio mali widget koji radi točno prema ovoj jednostavnoj shemi ugrađivanja, a istovremeno radi neke korisne stvari. Daljni detalji.
Zašto su nam potrebni widgeti?
Iframe su vrlo prikladni za ovu svrhu. To su zapravo zasebne html stranice koje su ugrađene u druge stranice bez pristupa svom "roditelju". Odnosno, našu web aplikaciju možemo ugraditi u iframe, koja će tiho raditi svoj posao bez ometanja glavne stranice. A što će točno vaš widget učiniti, izgraditi sustav komentara na stranici, pokazati cool igračku ili nacrtati interaktivni reklamni banner - potpuno je stvar vašeg ukusa i mašte.
U ovom se članku nećemo fokusirati na igračku, već ćemo pogledati kako izraditi ugrađeni widget za određivanje vremena. Naravno, postoji mnogo različitih vremenskih usluga za to, ali mi nismo zainteresirani za korištenje gotovog rješenja. Želio bih izraditi jednostavan widget vlastitim rukama kako bih razumio kako općenito funkcionira i u budućnosti primijenio znanje za neke korisne stvari. Istodobno, usput ćemo osvježiti svoje znanje o izvornom javascriptu i php-u.
Što nam je činiti?
Napravit ćemo widget koji crta oblik s vremenskom prognozom za sutra. Uzmimo samo temperaturu kao primjer, ali kao što ćete vidjeti dalje, bit će lako dodati druge podatke. Widget će sadržavati informacije o temperaturi za sutra, padajući popis s mogućnošću odabira grada. Gumb Ažuriraj će poslati zahtjev poslužitelju, koji zauzvrat kontaktira uslugu treće strane za određivanje vremena i vraća nam potrebne informacije. Te podatke obrađujemo i vraćamo klijentovom pregledniku. Gdje klijentski dio widgeta presreće informacije i prikazuje ih korisniku.
Ovdje vidimo neku stranicu gdje se kaže da mi navodno znamo odrediti vrijeme. A našim posjetiteljima pokazujemo obrazac kako bi se uvjerili da se vrijeme zaista može saznati upravo ovdje.
Nisam se zabavio izgledom forme, nije to svrha članka. U stvarnom svijetu, naravno, stvorili bismo slatki oblik koji bi privukao pozornost.
Pa da se vratimo. Ljudi provjeravaju vremensku prognozu, možda čak i ne shvaćajući da zapravo koriste drugu uslugu. Ali svi su zadovoljni i sretni, dobivate posjetitelje na svoju stranicu, klijente - potrebne informacije.
Ovdje je potrebno malo pojašnjenje: svrha widgeta je pružiti jedinstvenu, praktičnu, zanimljivu funkcionalnost. U našem primjeru ne dajemo nikakve posebne informacije. Vrijeme možete provjeriti bilo gdje. Ali u obrazovne svrhe, budući da još ne znamo ništa učiniti sami, uzet ćemo podatke o vremenu iz vremenske prognoze u Rusiji i usluge CIS. Oni ljubazno daju besplatan API, koji ćemo mi koristiti.
Po tehnologiji
Također ništa komplicirano. Već sam promašio oko iframea. Napisat ćemo javascript kod u vanillaJS, bez ijedne dodatne biblioteke. Čak i bez jQueryja za DOM manipulaciju. Naš je cilj također osigurati da dobiveni widget bude što lakši i nema smisla povlačiti torbu dodatnih biblioteka u preglednik korisnika kako bismo olakšali rad. Stoga, prisjetimo se kako raditi s DOM-om i slati ajax zahtjeve u izvornom javascriptu, a naši će nam klijenti biti zahvalni. Poslužiteljski dio je nekoliko desetaka linija koda u PHP-u.
Mi pišemo kod. Izrada osnovne stranice
Stranica na kojoj će se nalaziti naš budući widget. Napišimo tamo nekoliko redaka teksta o tome koliko smo sjajni u smislu naše sposobnosti predviđanja vremena za sutra. Ovo će biti datoteka index.html - obična html stranica. U dijelu glave ćemo napisati ovo:
Webdevkin. Demonstracija widgeta za vrijeme
U odjeljku tijela ovako:
Što je ovdje zanimljivo? Pohranit ćemo stilove za stranicu (ne za widget!) u datoteci css/style.css. I u na pravom mjestu stvoriti iframe..html. Uklanjamo njegovu granicu i mogućnost ručnog pomicanja i postavljanja dimenzija widgeta. Naravno, zanimljivije je stvoriti adaptivnu, ali na to ćemo doći kasnije.
Stilovi za stranicu, bez ikakvih posebnih ukrasa:
Body (font-family: Arial; font-size: 14px; ) .wrapper (width: 960px; margin: 0 auto; ) .weather-widget-container ( margin: 30px 0; )
Prazno za widget
Widget je običan html dokument. Koja je razlika? Prvo, nećemo se zamarati nepotrebnim meta oznakama, jer tražilice ne trebaju naš widget. I drugo, napisat ćemo i stilove i js kod izravno u kodu html stranice. Ovo nam je potrebno kako bi se widget učitao što je brže moguće, a smanjenje broja zahtjeva prema web poslužitelju pomoći će nam u tome. Učitat ćemo sve što trebate u jednoj datoteci.
U odjeljku head imat ćemo sljedeći kod:
U dijelu tijela:
Pogledajmo ove blokove detaljnije.
Označavanje widgeta
Temperatura za sutra °C
Ovdje je uobičajeni obrazac. Na vrhu se nalazi mala ploča na kojoj ćemo prikazati temperaturu. Zatim odaberite s izborom grada. Vrijednosti za gradove su uzeti iz usluge meteoservice.ru, kasnije ću vam reći gdje točno, u odjeljku gdje ćemo izravno primati vremenske podatke. I na kraju je gumb Ažuriraj. Izgled ćemo napraviti u klasama; ID brojevi će biti dodijeljeni onim elementima kojima je potreban pristup iz javascript koda. Prefiks wbd- (od webdevkin) koristi se radi praktičnosti, kako ne bi došlo do brkanja označavanja widgeta i glavne stranice.
Stilovi widgeta
html, tijelo, tijelo * ( margina: 0; padding: 0; ) .wbd-widget, .wbd-widget * ( box-sizing: border-box; font-family: Ubuntu; ) .wbd-widget ( border: solid 1px #333; padding: 20px; color: black; ) .wbd-widget__info (boja: steelblue; font-size: 16px; text-align: center; ) .wbd-widget__form-label ( display: block; line-height: 30px; )Stilovi za widget su što je moguće jednostavniji - možete ih napisati kako god želite. Ne zaboravite da stilove stavljamo izravno u html datoteku widgeta u odjeljku head - style.
widget javascript kod.
Napišimo klasu koja će imati metode za inicijalizaciju, vezivanje događaja i primanje podataka s poslužitelja. Ne zaboravite da ćemo kod napisati u izvornom js-u jer ne želimo opteretiti korisnike nepotrebnim opterećenjem biblioteka.
Var WeatherWidget = (function() ( // Za izvođenje ajax zahtjeva var XHR = ("onload" u novom XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest; // Widget konstruktor funkcija Widget() ( this..php"; this. ui = ( updateBtn: null, citySelect: null, temperatureSpan: null ); this.init(); ) // Ažuriraj vremenske podatke Widget.prototype._updateData = function(e) ( // Pošalji ajax zahtjev poslužitelju) / / Inicijalizacija komponenti korisničkog sučelja Widget.prototype._initUI = function() ( this.ui.updateBtn = document.getElementById("wbd-widget-update"); this.ui.citySelect = document.getElementById("wbd-widget-city" ) ; this.ui.temperatureSpan = document.getElementById("wbd-widget-temperature"); ) // Vezivanje događaja Widget.prototype._bindHandlers = function() ( this.ui.updateBtn.addEventListener("click", Widget. prototype ._updateData.bind(this)); ) // Inicijaliziraj widget Widget.prototype.init = function() ( this._initUI(); this._bindHandlers(); this._updateData(); ) // Vrati klasu widgeta povratak Widget; ))(); novi WeatherWidget();
Što se ovdje događa? Kreiramo modul temeljen na zatvaranju WeatherWidget, unutar njega upisujemo klasu Widget, u čiji prototip dodajemo potrebne metode i vraćamo ga iz zatvaranja. Zadnji redak stvaramo instancu widgeta - new WeatherWidget();
XHR varijabla je potrebna za izvođenje ajax zahtjeva. U konstruktoru inicijaliziramo svojstvo url s kojeg ćemo primati vremenske podatke. Tu je i ui objekt koji pohranjuje 3 polja - same DOM elemente kojima trebamo pristupiti iz js koda. Inicijaliziraju se kasnije, u metodi _initUI(). Metoda init() uzrokuje inicijalizaciju korisničkog sučelja, vezanje događaja i ažuriranje podataka s poslužitelja (želimo da korisnik odmah vidi vremensku prognozu prilikom renderiranja widgeta bez klikanja Osvježi). U _bindHandlers, metoda _updateData vezana je za klik na gumb Ažuriraj. Ovo je jedini "interaktivni" dio našeg widgeta.
Obratite pozornost na konstrukciju Widget.prototype._updateData.bind(this). Ovdje eksplicitno vežemo kontekst - to nam je potrebno da uvijek pokazuje na instancu klase Widget u metodi _updateData. Sada će biti jasno zašto - pogledajmo kod metode _updateData
Primanje podataka s poslužitelja, metoda _updateData
// Ažuriranje vremenskih podataka Widget.prototype._updateData = function(e) ( e && e.preventDefault(); var xhr = new XHR(), city = this.ui.citySelect.value, temperatureSpan = this.ui.temperatureSpan, data = "city=" + city, resp; xhr.open("POST", this.url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr .send(data); xhr.onreadystatechange = function() ( if (this.readyState != 4) return; if (this.status != 200) ( console.log("Request error"); return; ) resp = JSON.parse(this.responseText); temperatureSpan.innerHTML = resp.temperature; ) )Imajte na umu da svojstvo e (event) prosljeđujemo parametrima metode. Potrebno je napraviti preventDefault na samom početku, kako ne bi ponovo učitavali naš widget (inače će slanje obrasca raditi).
Ali mi to radimo s ovom linijom
e && e.preventDefault();
Ova dodatna provjera prisutnosti e parametra je neophodna jer kada pozovemo this._updateData(), e parametar će biti nedefiniran, i sukladno tome e.preventDefault() će baciti iznimku.
Nakon toga kreiramo potrebne varijable, objekt za Ajax zahtjev, odabrani grad i DOM element u koji ispisujemo vrijednost temperature dobivenu sa servera. podaci će biti poslani u ajax zahtjevu, odnosno odgovor poslužitelja. Zatim otvaramo vezu i šaljemo podatke na poslužitelj. Čekamo odgovor od 200 s poslužitelja i prikazujemo rezultirajuću temperaturu u rasponu. Složimo se da json niz dolazi s poslužitelja u formatu ("code": "uspjeh", "temperatura": "temperaturni raspon"). Tradicionalno, rješavanje pogrešaka ostavljam vašoj savjesti; svatko to radi drugačije. Konačno, moramo saznati kako dobiti vremenske podatke s našeg poslužitelja.
Kako saznati vrijeme?
Preporučujem korištenje ove usluge s oprezom. Kad je članak bio gotovo spreman, format odgovora na upit o vremenu iznenada se promijenio. Ispis prognoze po dobu dana, koji sam u početku želio pokazati u widgetu, bio je odsječen. Morao sam djelomično prepisati kod i smanjiti funkcionalnost widgeta, što me nije usrećilo. Ne znam koliko im se često takve stvari događaju, ali korištenje usluge u prava primjena Ne savjetujem.
Pisanje php koda za dobivanje informacija o vremenu
Već je jasno kako uzeti podatke, algoritam je jednostavan: izvučemo parametar grada iz $_POST - odabranog grada i kreiramo niz poput http://xml.meteoservice.ru/export/gismeteo/point/$ cityId.xml. Ovo je put do vremenske datoteke. Šaljemo mu zahtjev za dobivanje koristeći curl. Analiziramo primljeni odgovor i iz njega izdvajamo potrebne parametre: minimalne i maksimalne temperature. Dobivene brojeve u json objektu šaljemo natrag u preglednik.
$cityId = (int)$_POST["grad"]; $url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml"; $temperatura = ""; if ($curl = curl_init()) ( curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($curl); curl_close($curl); $xml = simplexml_load_string ($result); $object = $xml->REPORT->TOWN->FORECAST->TEMPERATURE; $temperature = $object["min"] . "-" . $object["max"]; ) echo json_encode( array("code" => "uspjeh", "temperature" => $temperature));
Dopustite mi da objasnim o simplexml_load_string - ova funkcija stvara xml objekt koji već možemo analizirati. A objekt se stvara iz xml niza koji primamo od vremenske službe.
IZVJEŠĆE->GRAD->PROGNOZA->TEMPERATURA - ovo je put kroz xml čvorove do željenih temperaturnih vrijednosti. Slijedite gornju vezu (vrijeme u Moskvi) i jasno ćete vidjeti ove staze.
Ako vam nešto nije jasno, pitajte u komentarima.
Ukupno
I to je sve! Napravili smo jednostavan widget za dobivanje informacija o vremenu. Njegova glavna značajka je da ga je vrlo lako ugraditi na bilo koje web mjesto, samo trebate umetnuti sljedeće retke u html kod
Vjerujem da postoji mnogo opcija za korištenje takvih widgeta, od prikupljanja raznih informacija do reklamnih bannera. Imate li kakvu ideju gdje bi se to moglo primijeniti? Podijelite u komentarima!