Létrehozása Mobile Alkalmazás PhoneGap és webix
Webix Blog létrehozása mobil alkalmazások PhoneGap és Webix
A Webix hozhat létre webes alkalmazásokat, amelyek ugyanolyan jól működnek a mobil és dekstopnyh eszközök. Ugyanakkor ezek az alkalmazások továbbra is HTML5-alkalmazásokhoz. Fejleszteni a natív alkalmazások, akkor szüksége lesz egy eszköz, mint PhoneGap.
PhoneGap - szabad keret nyílt forráskódú. A PhoneGap, akkor fejleszteni a mobil alkalmazások, standard web-API minden platformon használja. Emellett PhoneGap alapul HTML5, és lehetővé teszi, hogy hozzon létre natív alkalmazások az összes jelentős mobil operációs rendszerek: iOS, Android, Windows Phone és mások.
Ebben a cikkben leírjuk létrehozásának folyamatát egy egyszerű natív alkalmazások PhoneGap és Webix eszközöket.
Szerezd meg a végső kód elérhető a GitHub.
A fejlesztés megkezdése
Kezdeni dolgozni PhoneGap először állítsa be a következő összefüggés:
- A legfrissebb nodejs. E művelet után fut a parancs: „NPM telepíteni -g PhoneGap” a telepítés PhoneGap.
Mivel azt tervezzük, hogy teszteljük az alkalmazást az Android készülék, telepíteni kell az Android fejlesztői eszközök:
Ezután telepítse az Android SDK-t. és vegye fel a mappát „platform-tools” és «eszközök» A PATH:
További információk találhatók a PhoneGap dokumentációt. (Ref)
Miután befejeztük az előkészületeket a fent leírt, akkor kezdődik hogy dolgozzon ki egy mobil alkalmazás.
Létre egy alkalmazást
Az első dolog, amit tennie kell -, hogy az alábbi parancsot:
PhoneGap létre myapp
Ez létrehoz egy mappát «myapp» a benne lévő összes fájl. „Www” - ez az egyetlen al-mappa, amit kell. Ebben a mappában fogjuk tárolni az összes HTML és JS kód szükséges építeni a kérelmet.
Másolja a Js és .css fájlokat a „www / webix”. Győződjön meg róla, hogy másolt a mappát Webix csomagot a könyvtár „www / webix”. Ezt meg kell tenni annak érdekében, hogy megjelenítse az ikont az alkalmazásban.
Akkor kezdhetjük írni a HTML kódot a demo alkalmazás.
PhoneGap már létrehozott fájl «index.html». Most arra van szükség, hogy utalni a Webix fájlokat:
Adjuk hozzá a konfigurációs felhasználói felület:
webix. kész # 40; függvény # 40; # 41; # 123;
var eszköztár = # 123; kilátás. „Eszköztár”.
elemekkel. # 91;
# 123; kilátás. „Keresés”. értéket. "". tovább. # 123;
onTimedKeyPress. függvény # 40; # 41; # 123;
$$ # 40; 'List' # 41;. szűrő # 40; "Firstname". ezt. getValue # 40; # 41; # 41; ;
# 125;
# 125; # 125;
# 93;
# 125; ;
var list = # 123;
kilátás. "List". id. "List". válasszon. igaz.
sablont. "HTML-> item_list".
url. "Contacts.json".
tovább. # 123;
onItemClick. függvény # 40; id # 41; # 123;
$$ # 40; „Részletek” # 41;. mutat # 40; # 41; ;
$$ # 40; „Részletek” # 41;. setValues # 40; ezt. getItem # 40; id # 41; # 41; ;
# 125;
# 125;
# 125; ;
var template = # 123; sablont. "HTML-> item_details". tekercset. igaz. id. „Részletek” # 125; ;
webix. ui. fullscreen # 40; # 41; ;
webix. ui # 40; # 123;
sorok. # 91;
eszköztár.
# 123; sejtekben. # 91; listát. sablon # 93;. id. "Multiview" # 125;
# 93;
# 125; # 41; ;
# 125; # 41; ;
A fenti kód létrehoz egy egyszerű felhasználói felület egy szűrő tetején a listán, és válassza ki a / highlight alább. Miután rákattint bármelyik elem a listán, akkor megjelenik a képernyőn a „részletek”.
két sablon használt kód - az egyik a lista elemeit, és a második - a „részletek” képernyő. Nevezzük őket «index.html», az alábbiak: