Crearea unui calendar de evenimente mobile cu DHTMLX

Acest tutorial descrie cum se construiește un calendar mobil bazat pe HTML5 pentru a urmări conferințele și evenimentele care rulează pe telefoane iOS și Android utilizând o versiune mobilă a dhtmlxScheduler (open source, GPL). În final, utilizatorii vor putea să adauge și să editeze evenimente, să selecteze locația conferinței pe Hărți Google și să vadă evenimentele din vizualizările de zi, de lună sau de liste.

---

rezumatul proiectului

Demo-ul final include calendarul evenimentului (îl vom numi și planificatorul) care afișează evenimente în trei vizualizări standard: listă, zi și lună. În timp ce utilizatorul final adaugă, șterge sau editează evenimente, aplicația calendar salvează modificările la server și actualizează baza de date. De asemenea, demo-ul detectează automat localizarea în uz și adaptează interfața calendarului în consecință. Utilizatorul final poate seta locația evenimentului pe Hărți Google în două moduri: tastând adresa sau indicând-o pe Hărți Google.

---

1. Începeți

Mai întâi, descărcați cel mai recent pachet de versiune mobilă a dhtmlxScheduler. Se bazează pe cadrul DHTMLX Touch și este distribuit sub licență open source (GNU GPL).

Planificatorul DHTMLX mobil are o așa numită arhitectură bazată pe multiview. Afișează un set de ecrane care se schimbă între ele. Fiecare ecran este o vizualizare singulară în care puteți adăuga orice conținut. În mod implicit, planificatorul conține următoarele vizualizări:

• Ecran de previzualizare a evenimentului (afișează o scurtă informație despre eveniment)
• Formularul Detalii (utilizat pentru a edita detaliile evenimentului)
• Formularul de editare de început / sfârșit (datepickers built-in pentru a alege datele de început și de sfârșit ale evenimentului)
• Vizualizările calendarului: Listă (Agendă), Zi și Lună

Vizitele predefinite sunt personalizabile (puteți găsi definițiile implicite în documentație). De asemenea, există posibilitatea de a adăuga noi vederi personalizate.

---

2. Efectuarea unui calendar de evenimente pe o pagină

Pasul 1

Vom începe cu fișierele de cod necesare pentru a afișa planificatorul de dispozitive mobile pe o pagină: dhxscheduler_mobile.js și dhxscheduler_mobile.css.

Pasul 2

Adăugați în pagina dvs. următorul cod:

 dhx.ready (funcția () dhx.ui.fullScreen (); dhx.ui (vizualizare: "scheduler", id: "scheduler"););

Iată ce fac aceste linii de cod:

• de asteptare dhx.ready () funcția garantează că codul plasat în interior este apelat după ce pagina a fost parsată complet, protejându-l de erori potențiale. Acest lucru este opțional, dar vă încurajez să îl utilizați.
• dhx.fullScreen () activează modul ecran complet.
• dhx.ui () este un constructor de obiecte pentru programator (folosit în biblioteca DHTMLX Touch).
• vizualizare: "scheduler" - stabilește componenta de render ("scheduler" este numele hardcoded al planificatorului mobil).
• id este un parametru opțional care stabilește ID-ul obiectului. Am specificat acest parametru, deoarece vom face referire mai târziu la acest obiect.

După ce am inclus fișierele necesare și am adăugat codul de mai sus, calendarul este redat pe o pagină:

Planificatorul are un interfață inteligentă și simplă, astfel încât să îl poți folosi așa cum este. Este suficient de flexibil, astfel încât să puteți configura aspectul și simțul acestuia pentru a se potrivi nevoilor dvs. de proiectare, dacă doriți.

---

3. Încărcarea și salvarea datelor

Pasul 1

Pentru a încărca datele în calendar, vom folosi sarcină() metodă. Pe măsură ce vom încărca date de pe server, ar trebui să setăm singurul parametru (calea spre scriptul de server).

Pentru a oferi posibilitatea de a salva date înapoi pe server, trebuie să definim încă un parametru în constructorul de obiecte - Salvați. De asemenea, trebuie să specificăm același script de server pe care l-am specificat în sarcină() metodă.

 dhx.ui (vizualizare: "scheduler", id: "scheduler", save: "data / data.php"); $$ ( "Scheduler") de sarcină ( "date / data.php").;

Pentru a vă referi la planificator prin idul său, vom folosi $$ ( "Scheduler") record.

Pentru a vă referi la vizualizările planificatorului (sau la elementele de vizualizare), ar trebui să scrieți un lanț de moștenire a dependenței de proprietate completă: $$ ( 'planificator " '). $$ (' VIEW_ID '). $$ (' viewElement_id') ... Puteți verifica ID-urile elementelor din documentația aferentă.

Pasul 2

data.php fișierul conține logica de comunicare client-server pentru integrarea cu partea serverului. Pentru a defini logica, vom folosi un dhtmlxConnector special de ajutor care implementează toate rutina (există versiuni pentru Java, .NET, PHP și ColdFusion și sunt gratuite cu widgeturile dhtmlx UI). Puteți obține mai multe detalii despre utilizarea dhtmlxConnector aici.

Vom folosi versiunea PHP și vom crea în codul următor data.php fişier:

 render_table ( "events_map", "EVENT_ID", "dată_început, dată_sfârșit, EVENT_NAME, detalii, event_location, LAT, LNG"); ?>

Liniile codului fac următoarele:

• Prima linie include fișierul de cod necesar.
• Următoarele două linii stabilesc o conexiune la server și deschid baza de date SQL specificată.
• Ultimele două linii creează un obiect de conector ($ scheduler) și configurează datele pentru a fi preluate.

În pachetul demonstrativ atașat, puteți găsi fișierul de memorie al bazei de date "schedulertest".

Pe măsură ce realizăm acest pas, avem un calendar cu date demo:

---

4. Localizarea

Pasul 1

Prin acest pas, calendarul nostru se va adapta la o anumită limbă și regiune.

În primul rând, trebuie să specificăm un obiect de localizare (în bibliotecă are numele codului hardcoded - 'locales') care va defini toate etichetele utilizate în calendar.

Vom crea un obiect într-un fișier separat, pentru a nu "supraaglomera" fișierul principal .html. Fișierul va arăta astfel:

 var locales = "de": ..., "en": ..., ...

Pentru a vedea versiunea completă a 'locales' obiect, deschideți locales.js fișierul inclus în dosarul "codebase" din pachetul de descărcare. În demo-ul nostru, am inclus exemplele locale pentru doar două limbi (engleză și germană). Dacă este necesar, puteți adăuga locația oricărei alte limbi în acest fișier.

Pasul 2

Apoi vom include locales.js fișier în pagină:

Apoi, adăugați următorul cod în fișierul html:

 // pune acest cod chiar la începutul paginii și nu în funcția dhx.ready () var locale = (navigator.language || navigator.systemLanguage || navigator.userLanguage || 'en') substr (0, 2) .toLowerCase (); dacă (! locales [locale]) locale = 'en'; scheduler.locale.labels = localizări [locale]; dhx.Date.Locale = localități [locale] .calendar;

Liniile codului fac următoarele:

• Prima linie primește versiunea lingvistică a browserului.
• Următoarele câteva linii stabilesc localizarea în funcție de valoarea returnată de primul rând.
• scheduler.locale.labels setează locația pentru etichetele comune din programator.
• dhx.Date.Locale stabilește locația pentru calendarele utilizate în planificator.

Calendarul cu localizare germană arată astfel:

---

5. Afișarea locației evenimentului pe Hărți Google

Nu ar fi minunat dacă utilizatorii ar putea vedea locul unde se întâmplă un eveniment? Iată lista pașilor necesari pentru a oferi o astfel de oportunitate în aplicația dvs.:

• Creați o vizualizare separată pentru Google Maps
• Adăugați un buton, dând clic pe acesta, utilizatorul va deschide vizualizarea Hărți
• Adăugați o funcție de handler "onclick" care va fi responsabilă pentru afișarea Hărții Google cu marcatorul corespunzător al evenimentului
• Adăugați informațiile despre locația evenimentului în ecranul de previzualizare a evenimentului

Pasul 1

Începem prin crearea unei vizualizări Hărți. Pentru primul pas, vom include un alt fișier pe pagină:

Apoi trebuie să adăugăm o nouă vizualizare care va afișa Google Maps. DHTMLX Touch biblioteca are 'harta Google' care face integrarea cu Google Maps destul de ușoară (documentația aferentă).

Aici este afișarea noastră Google Maps:

 (id: "locationView", rânduri: [vizualizare: "toolbar", css: "dhx_topbar" elemente: , eticheta: scheduler.locale.labels.icon_back, faceți clic pe: "$$ ('scheduler'). $$ (' );

Câteva explicații despre codul de mai sus:

• scheduler.config.views.push comanda adaugă o nouă vizualizare la colecția multiplă de planificare existentă.
• rânduri: [] aranjează elementele pe verticală. Fiecare obiect este un rând separat. Vederea constă dintr-o bară de instrumente și din Google Maps.
• $$ ( 'Scheduler'). $$ ( 'vizualizări') se referă la un obiect multi-vizualizare. Metoda back () comută multi-vizualizarea la vizualizarea activă anterior.

Vizualizarea hărții va arăta astfel:

Pasul 2

Acum trebuie să adăugăm un buton pe bara de instrumente. Cea mai potrivită vedere este cea care afișează detalii pentru evenimentul selectat.

 // plasați acest cod după blocul "localizare" (pasul 4) scheduler.config.selected_toolbar = [vizualizare: "buton", inputWidth: scheduler.xy.icon_back, css: "cancel", id: "back" : "stânga", etichetă: scheduler.locale.labels.icon_back, view: 'button', lățime: 100, id: "location", align: "right", label: scheduler.locale.labels.label_location, click : "showLocation", // noul nostru buton nou view: 'button', lățime: 70, id: "editați", aliniați: "right", label: scheduler.locale.labels.icon_edit];

Codul de mai sus este definiția implicită a barei de instrumente (o găsiți în documentația bibliotecii) și noul nostru buton denumit ca Locație.

Pe măsură ce localizăm aplicația noastră, toate etichetele pe care le adăugăm trebuie să fie denumite într - un fel și adăugate la locales.js fişier. De exemplu, acum vom adăuga un buton cu numele "Locație". Deci, în locales.js fișierul pe care îl adăugăm parametru label_location: "Locul de amplasare" și apoi setați eticheta atributului butonului scheduler.locale.labels.label_location valoare.

Atributul de clic stabilește numele unei funcții de handler care va fi invocată în cazul clicurilor pe butoane.

Acesta este modul în care ecranul cu detalii despre eveniment ar trebui să arate acum că am adăugat Locație buton:

Pasul 3

Înainte de a merge la codul principal, să adăugăm la pagină o variabilă denumită "marker" și să o atribuim instanței markerului Google Maps. Definim această variabilă ca globală deoarece trebuie să avem doar un marcator pe pagină (evenimentele noastre trebuie să aibă o singură locație).

 // pune acest cod chiar la începutul paginii var marker = new google.maps.Marker ();

Funcția executabilă sau modulul "onClick" conține următorul cod:

 show function () if (marker! = null) / * prezinta vizualizarea multiview * / $$ ("scheduler"). / * necesar pentru redimensionarea hărții google * / $$ ("scheduler"). $$ ("locationView"). / * evenimente de evenimente * / var eventId = $$ ("scheduler") getCursor (); var element = $$ ("programator"). element (eventId); / * Punct LatLng * / var punct = nou google.maps.LatLng (item.lat, item.lng); var hartă = $$ ("scheduler"). $$ ("mymap"). map.setZoom (6); map.setCenter (punct); google.maps.event.clearListeners (hartă, "faceți clic"); marker.position = punct; marker.map = hartă; marker.title = item.event_location; marker.setMap (harta); ;

Din nou, permiteți-mi să explic ce fac aceste linii de cod:

• Primele linii afișează vizualizarea creată în primul sub-pas și o redimensionează pentru a umple întregul ecran.
• Următoarele linii primesc obiectul unui eveniment pe care cursorul este în prezent activat. Rețineți că biblioteca DHTMLX utilizează o concepție "cursor" în logica sa interioară. Deci, pentru a asigura procesarea corectă, ar trebui să lucrați cu "cursorul" în timp ce obțineți elementul selectat curent. În majoritatea cazurilor, getCursor () metoda returnează elementul selectat curent. Există o singură excepție: atunci când ștergeți un eveniment, planificatorul elimină selecția, dar ține cursorul și indică evenimentul inexistent. Fii atent cu asta!
• A doua linie utilizează API-ul Google Maps pentru a crea un punct pe baza coordonatelor specificate (coordonatele evenimentului care sunt stocate în baza de date). Aflați mai multe despre API-ul Google Mas.
• $$ ( "planificator"). $$ ( "mymap") se referă la vizualizarea "googlemap". Proprietatea "hartă" returnează obiectul Google Maps.
• Ultimele linii măriți, centrați harta și setați marcatorul în punctul specificat.

Pasul 4

Pentru a adăuga informații despre locație în ecranul de previzualizare, trebuie să redefinim șablonul de ecran implicit. Pentru ca nu trebuie sa rescriim intregul template (care este destul de mare), vom folosi un truc:

 var default_temp = scheduler.templates.selected_event; scheduler.templates.selected_event = funcția (obj) var html = default_temp (obj); dacă (html! = "") html = html.replace (/<\/div>$ /, ""); html + = "
"+ Scheduler.locale.labels.label_location +"
"; html + ="
"+ Obj.event_location +"
"; html + ="

 scheduler.config.form = [vizualizați: "text", etichetă: scheduler.locale.labels.label_event, id: "text", nume: "text", view: "text", label: scheduler.locale. "start_date", dateFormat: scheduler.config.form_date, id: 'details', view: "datetext", etichetă: scheduler.locale.labels.label_start, id: vizualizați: "datetext", etichetă: scheduler.locale.labels.label_end, id: 'end_date', nume: 'end_date', dateFormat: scheduler.config.form_date, view: "toggle", id: 'allDay' etichetă: "", opțiuni: value: "0", etichetă: scheduler.locale.labels.label_time, value: "1", label: scheduler.locale.labels.label_allday , valoare: "0", // secțiuni personalizate pentru locație view: "text", etichetă: scheduler.locale.labels.label_location, id: "event_location", view: 'button', id: ", etichetă:" Latitude ", id:" lat ", ascuns: true, view:" text ", etichetă: scheduler.locale.labels.label_locate, etichetă: "Longitudine", id: 'lng', ascuns: true];

 dhx.event ($$ ("scheduler"). $$ ("event_location"). $ view, "focusout", setPlaceCoordinates);

 funcția setPlaceCoordinates () if (marker! = null) var eventId = $$ ("programator") getCursor (); var geocoder = nou google.maps.Geocoder (); var adresa = $ $ ("scheduler"). $$ ("event_location"). getValue (); dacă (adresa! = "") geocoder.geocode ('adresa': adresa, funcția (rezultate, starea) if (status == google.maps.GeocoderStatus.OK) $$ ('scheduler'). $ (set) (results [0] .geometry.location.Xa); $$ ('scheduler'). $ $ ("lng") setValue (results [0] .geometry.location.Ya ); altceva dhx.alert ("Din păcate, locația dvs. nu a fost găsită."); dacă ($$ ("scheduler" ) $ ($) ($) $ ($) $ ($) $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ") .setValue (" Blackheath Avenue Londra, Greenwich, Greater London SE10 8XJ, Marea Britanie "); altceva if (eventId! = null) var item = $$ (" scheduler " ("planificator") $ $ ("event_location"); setValue (item.event_location);); ;

 funcția setLocation () if (marker! = null) / * arată vizualizarea multiview * / $$ ("scheduler"). / * necesar pentru redimensionarea hărții google * / $$ ("scheduler"). $$ ("locationView"). var punct; var eventId = $$ ("programator") getCursor (); dacă (eventId! = null) var item = $$ ("programator"). item (eventId); / * Punctul latin * / punct = nou google.maps.LatLng (item.lat, item.lng); marker.title = item.event_location;  altceva point = new google.maps.LatLng (51.477840, -0.001492); // coordonatele Observatorului Regal Greenwich marker.title = "Blackheath Avenue Londra, Greenwich, Greater London SE10 8XJ, Marea Britanie";  var map = $$ ("scheduler"). $$ ("mymap"). map.setZoom (6); map.setCenter (punct); marker.position = punct; marker.map = hartă; marker.setMap (harta); google.maps.event.addListener (hartă, "clic", funcție (e) var request = location: e.latLng, radius: '1'; service = new google.maps.places.PlacesService (hartă); service.search (cerere, functie (rezultate, status) if (status == google.maps.places.PlacesServiceStatus.OK) this.service.getDetails ( starea) if (status == google.maps.places.PlacesServiceStatus.OK) $$ ("scheduler"). $$ ("lat") setValue (details.geometry.location.Xa) planer '). $$ ("lng") setValue (detalii.geometry.location.Ya); marker.title = details.formatted_address; marker.position = e.latLng; marker.map = harta; marker.setMap ); $ $ ('scheduler') $ $ ("event_location"); setValue (marker.title);););); ;

 show functionLocation () google.maps.event.clearListeners (harta, "clic"); ...;