Létrehozása Mobile Alkalmazás PhoneGap és webix

előző ◈ a következő

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:

  • telepíteni jdk és hangya eszközöket. Kicsomagolás után a csomag ne felejtsük el beállítani a shell változók JAVA_HOME és ANT_HOME mappákba «jdk» és a file «hangya» eszközöket, ill. Ezen felül, akkor meg kell adni az utat a «bin» -papok mindkét műszer a PATH változó:

    • 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: