Írásban web-alkalmazások HTML 5

Készítsen web-alapú alkalmazások holnap ma

A legfontosabb dolog, amit meg kell futtatni a cikkben szereplő példák - néhány böngészők tesztelésre. Én nagyon ajánlom az teszteli a legújabb változat a Mozilla Firefox, az Apple Safari és a Google Chrome. Amikor kutatja ezt a cikket, azt használják a Mozilla Firefox 3.6, az Apple Safari és a Google Chrome 4,04 5.0.322. Érdemes lehet kipróbálni az alkalmazást a mobil böngészők. Kipróbáltam az alkalmazást a böngészők futó emulátor mobil eszközökre legújabb verzióját az SDK for Android és az iPhone.

Tudod letölt a forráskód példák ezt a cikket.

Határozza Támogatott funkcionalitás

Van egy régi vicc, hogy a Web-fejlesztő költeni 20% százaléka az idő kódot írni, és a maradék 80%, hogy ez ugyanúgy működik minden böngészőben. Ha azt mondjuk, hogy a fejlesztők megszokták, hogy a különböző böngészők más alapon működnek - ez nem is beszélve. Ezzel kapcsolatban az új innovációs hullám a böngészők, ez pesszimista teljesen ésszerű. Funkcionalitás támogatja a legújabb változat a böngészők, folyamatosan változik.

Azonban a pozitív dolog az, hogy az új funkciók jelennek meg a web-alapú szabványok, kezdjük használni őket ma. Használhatja a technika fokozatos bővülése (progresszív javítása) - az alapvető funkciókat, ellenőrizze a támogatást a kiegészítő funkciók, és ha támogatja, hogy bővítse az alkalmazás új funkciókkal bővül. Először nézzük meg, hogyan kell meghatározni, hogy a böngésző támogatja bármely, az új funkciók. 1. kódrészlet egy egyszerű kimutatására script.

1. listán parancsfájl

Ennek része a HTML 5 rengeteg új funkciók és szabványoknak. Mi ebben a cikkben fog összpontosítani néhány elég hasznos funkciókat. A script 1. listában határozza meg a böngésző támogatja a négy lehetőség van:

2. lista DOM-szerkezet kimeneti eredményeit észlelési forgatókönyv

2. lista bemutatja egy egyszerű HTML-szerkezet megjelenítéséhez használt diagnosztikai által gyűjtött információk a forgatókönyvet. Ezután az 1. listában, akkor ellenőrizze a támogatást a helymeghatározáshoz. Itt újra használható kettős negatív vétel, de van jelölve a helymeghatározás objektumot. ami kell egy tulajdonsága a navigátor objektumot. Ha a földrajzi hely objektum létezik, akkor mi használ a módszer getCurrentPosition kap az aktuális tartózkodási helyét. Előállítása helyszín lehet egy lassú hatása, mivel általában egy Wi-Fi leolvasó lánc. A mobil eszközök, ez az eljárás is tartalmazhat szkennelés az adótornyok és a GPS-műholdak felmérés. Mivel ez hosszú időt vesz igénybe, getCurrentPosition egy aszinkron módszer, amely úgy, mint a paraméter a visszahívási függvény. Ebben az esetben a visszahívás funkciót, használjuk a lezárás, amely egyszerűen megjeleníti helyszíni információk helyét (via a megfelelő CSS stílus), majd írja a koordináta értékeket a DOM-struktúrát.

A következő lépés az, hogy ellenőrizze az adatbázis támogatás. Mi ellenőrizze a rendelkezésre álló globális OpenDatabase funkciót. amely létrehozásához használt ügyfél adatbázisok és az azokhoz való hozzáférést.

3. lista lehetőségei különböző böngészők

Minden népszerű asztali böngésző támogatja egy csomó új funkciót.

Támogatás a helymeghatározáshoz kissé nyúlt az asztali böngészők, de a mobil böngészők geolocation eszköz támogatott nagyon jól. 4. lista mutatja összesített eredmények mobil böngészők.

4. lista mobilböngészőkhöz

Vegye figyelembe, hogy az iPhone támogatja az összes, kivéve a munkafolyamat. A 3. lista azt mutatja, hogy a desktop változata Safari támogatja munkafolyamatok, így logikus azt feltételezni, hogy ezt a funkciót hamarosan elérhető lesz az iPhone.

Tehát képesek vagyunk meghatározni, hogy melyik funkció támogatja a felhasználó böngészőjének. Most nézzük meg egy példát olyan alkalmazás, amely egyesíti a funkcionalitást ez attól függ, hogy a böngésző támogatja azt. Fogunk létrehozni egy alkalmazás Foursquare API keresni népszerű oldalak, közelében található a jelenlegi helyét a felhasználó.

Hozzon létre egy alkalmazás holnap

Ebben a példában fogunk összpontosítani használatának földrajzi helymeghatározó mobil eszközök, de ne felejtsük el, hogy a Firefox 3.5+ is támogatja a helymeghatározás. Az alkalmazás elkezdi keres helyeken (mind Foursquare - helyszínek), közelében található a felhasználó aktuális tartózkodási helyét. Helyek bármi lehet, de általában - ez éttermek, bárok, üzletek, stb Mivel a példánkban egy webes alkalmazás domainházirend korlátozások vonatkoznak rá. A böngésző nem tudja közvetlenül elérni az API által biztosított Foursquare. Ezért létrehoz egy Java-servlet, hogy valóban hívások proxy böngésző. Nem feltétlenül az adott felhasználás Java; ilyen proxy könnyű írni PHP, Python, Ruby, vagy egy másik nyelvre. 5. listán ebben a példában használt a proxy servlet.

5. lista A proxy servlet dolgozó Foursquare

Mi használ a helymeghatározás

Először is, az alkalmazás teszi a hívást, hogy a helyek kereséséhez. 5. lista azt mutatja, hogy meg kell tennie két paramétert: geoLat és geoLong. jelezve a szélességi és hosszúsági.

Listing 6. Hívás helyet találni a hely közelében

A fenti kód ellenőrzi támogatására helymeghatározást a böngészőben. Ha a földrajzi hely támogatott, az alkalmazás kap információt a hollétéről, és felhívja a funkció venueSearch. halad, hogy a szélességi és hosszúsági. Ez a funkció Ajax (XMLHttpRequest objektum hivatkozni egy servlet látható az 5. listában). Mint egy visszahívási függvénynek a kódban áramkört alkalmazunk, ahol a szétszerelt adatok JSON, kapott Foursquare, és alább látható buildVenuesTable hivatkozott funkciót.

Listing 7. információkat jeleníti területén

Strukturált adatok tárolása

7. lista bemutatja a klasszikus stratégia fokozatos bővülése (progresszív tartozék). Ebben a példában, akkor ellenőrizze, hogy a böngésző támogatja az adatbázisba. Ha az adatbázis támogatott, az alkalmazás van egy új felhasználói felület elem, amely hozzáteszi, az új funkciók az alkalmazás, amelyre az adatbázist használják. Ebben az esetben a rendes gombot. Ha rákattint a funkciót nevezik saveAll. 8. példájában.

Listing 8. Mentse az adatokat egy adatbázisban

Ha menteni információkat helyek az adatbázisban, akkor először hozzon létre egy táblázatot, amelyben az adatok tárolása. Ez egy meglehetősen szabványos SQL szintaxis egy táblázatot készíteni. (Minden támogató böngészők az adatbázis segítségével SQLite. Lásd az SQLite dokumentációt, hogy megismerjék a támogatott adattípusok, korlátok, stb) SQL-kód lefut aszinkron. Úgynevezett tranzakciós funkció, amelyet át a visszahívási függvény. A visszahívási függvény megkapja a paramétert ügylet tárgya, amellyel elvégzésére SQL-lekérdezéseket. executeSQL függvény paraméterként egy sor SQL-kódot, egy opcionális paraméterek listáját, valamint rakodók sikeres végrehajtásához a kérelmet, és a hiba esetén. Ha a függvény az esetben, ha nincs hiba, akkor „lenyelte” a hiba. Az utasításokat create table pontosan mit kell tenni. Az első alkalommal a táblázat sikeresen létrehozta a forgatókönyvet. A következő hívás a forgatókönyvet kell majd hibát generál, mert az oldal már létezik. Ezért ezt a kódot, akkor egyszerűen arról, hogy a táblázat, hogy mi fog hozzá egy sortörés van.

Egy táblázat, hívjuk saveVenue foreach ciklus funkciót minden irányban kapott Foursquare. Ez a funkció először ellenőrzi, hogy van már az objektumot a helyi adatbázisban. Itt látjuk akcióban felvezető sikeres a megkeresés. Ebben a felvezető vezetjük a lekérdezés eredményét. Ha nincs találat, vagy ezen a helyen még nem mentett helyben nevezik insertVenue funkciót. azaz betét nyilatkozatot adni ezt a helyet az asztalon.

Miután az adatbázisban tárolt összes objektumot saveAll függvényt hívják countVenues. Felszólította ülőhelyek száma, amelyek adunk az asztalra. Ez használ szintaxisa sorban [ "COUNT (*)"]. amely méri a visszaadott sorok számát a lekérdezés.

Megtanultuk, hogyan kell használni a beépített böngésző az adatbázist, ha rendelkezésre áll. A következő részben nézzük meg a használatát munkavállaló szálak.

Háttér feldolgozás útján workflow (web munkások)

Térjünk vissza a lista 6. és azt a kis változás. Hozzáadjuk a vizsgálati böngésző támogatja a munkafolyamat, amint azt az alábbi felsorolás 9. Ha támogatás áll rendelkezésre, akkor használja a munkafolyamatok, minél több információt az egyes helyekről érkező Foursquare.

Listing 9. Módosított helyek

Listing 10. Script munkafolyamat details.js

Ebben a forgatókönyvben mászol minden helyen. Valamennyi helyszín a script teszi a hívást a proxy Foursquare, hogy több információt erről a helyről. Mint általában, ez használ az XMLHttpRequest objektumot. Fontos megjegyezni ugyanakkor, hogy a funkció az úgynevezett nyitott ez a tárgy, megnyit egy kapcsolatot átadjuk a harmadik paraméter (igaz). Lehetővé teszi, hogy a hívást a szinkron (aszinkron, és nem a szokásos módon). Szóval lehet csinálni, mert ez a művelet végre a munkafolyamat, hanem a fő UI téma, ami azt jelenti, hogy az alkalmazás nem bontja fel ezeket a hívásokat. Csinálok egy szinkron hívást, biztosítani fogjuk, hogy az elején minden ezt követő hívás az előző hívás befejeződött. Handler egyszerűen eltávolítja az összes helyhez kapcsolódó nyomokat, és gyűjtsük össze a transzfer a fő UI téma. Ahhoz, hogy visszatérjen a felhasznált adatok postMessage funkciót. ami a munkafolyamat visszahívási onmessage. ahogyan azt a 9. példában.

Alapértelmezésben a keresés nem hozott tíz helyen. Képzeld, mennyi időbe telne a végrehajtás tíz további több információt igényel. Hasonló problémák értelme a háttérben fut a munkafolyamatok használatával.

következtetés

Ebben a cikkben, néztük néhány új funkciók a HTML 5 támogatott modern böngészőben. Megtanultuk, hogyan kell ellenőrizni a támogatás e lehetőségeket, és fokozatosan bővíteni miatt alkalmassága az alkalmazás. Ezek a funkciók már széles körben támogatott böngészők jelentős, különösen a mobil eszközök. Most is létrehozhat innovatív web-alapú alkalmazások segítségével, az ő előnye technológiák, mint például a helymeghatározás és munkafolyamatokat.