Tworzenie aplikacji Sencha Touch przy użyciu Sencha Cmd

Tworzenie aplikacji Sencha Touch przy użyciu Sencha Cmd

Cześć, po przeczytaniu tego artykułu dowiesz się jak wygenerować automatycznie całą strukturę swojej mobilnej aplikacji. Aby rozpocząć musisz mieć na swoim komputerze zainstalowany Sencha Cmd Tools oraz posiadać bibliotekę Sencha Touch. Jeśli nie posiadasz na swoim komputerze Sencha Cmd, zapraszam do innego artykułu, w którym jest opisane jak zainstalować to narzędzie.

Instalacja Sencha Cmd

Dobrze, teraz jeszcze Sencha touch 2, jeśli nie posiadasz tej biblioteki skorzystaj z tego linku:

Kliknij tutaj, aby pobrać Sencha Touch 2

Po rozpakowaniu, ten katalog pomoże Ci generować mobilne aplikacje z terminala przy użyciu Sencha Cmd. Aby utworzyć swój projekt, wejdź proszę do terminala i uruchom następującą komendę:

sencha -sdk senchatouch/libs/sencha/ generate app CmdApp senchatouchcmd

Zmienna -sdk potrzebuje ścieżki do katalogu, który pobrałeś z Sencha Touch. Kolejne generate app czeka na nazwę (namespace) Twojej aplikacji, na końcu podaje się katalog, w którym ma utworzyć cały projekt. Po uruchomieniu komendy konsola ładnie inforumje o postępach:

5-sencha-touch

Jeśli wszystkie linie otrzymałeś na zielono, oznacza, że Twój projekt utworzył się pomyślnie. Jeśli otrzymałeś negatywny rezultat, proszę daj mi znać a postaram się pomóc. Jednak gdy zielono, możesz odwiedzić w przeglądarce index.html i powinieneś mieć rezultat podobny do tego:

6-sencha-touch

Jak wejdziemy do utworzonego katalogu, można zobaczyć drzewo pełne folderów/plików:

7-sencha-touch

Generator tworzy dla nas wszystkie potrzebne zasoby, modele, kontrolery oraz widoki. Tworzy również jeden przykładowy widok. Jak otworzysz zaznaczony plik app.js zobaczysz, że generator użył Twojej nazwy dla “namespace” całej aplikacji: 

Ext.application({
 name: 'CmdApp',

requires: [
 'Ext.MessageBox'
 ],

views: [
 'Main'
 ]
...

Przykładowym widokiem jest standardowy Ext Panel, który znajduje w katalogu view i nosi nazwę Main.js :

Ext.define('CmdApp.view.Main', {
 extend: 'Ext.tab.Panel',
 xtype: 'main',
 requires: [
 'Ext.TitleBar',
 'Ext.Video'
 ],
 config: {
 tabBarPosition: 'bottom',

items: [
 {
 title: 'Welcome',
 iconCls: 'home',

styleHtmlContent: true,
 scrollable: true,

items: {
 docked: 'top',
 xtype: 'titlebar',
 title: 'Welcome to Sencha Touch 2'
 },

html: [
 "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
 "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
 "and refresh to change what's rendered here."
 ].join("")
 },
 {
 title: 'Get Started',
 iconCls: 'action',

items: [
 {
 docked: 'top',
 xtype: 'titlebar',
 title: 'Getting Started'
 },
 {
 xtype: 'video',
 url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
 posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
 }
 ]
 }
 ]
 }
});

Powyższy plik jest montowany w app.js w funkcji launch:

launch: function() {
 // Destroy the #appLoadingIndicator element
 Ext.fly('appLoadingIndicator').destroy();

// Initialize the main view
 Ext.Viewport.add(Ext.create('CmdApp.view.Main'));
 }

Widok Main.js jest podpinany pod Viewport (coś w rodzaju layoutu) i wyświetlany na ekranie startowym. Funkcja Ext.create() pobiera jako pierwszy argument ciąg znaków określający jaki obiekt ma być utworzony, w tym przypadku jest to nasz namespace plus nazwa katalogu view i nazwa pliku. Funkcja Ext.create() może otrzymać również drugi parametr, którym jest obiekt. Dzięki temu możemy nadpisać domyślnie zdefiniowane parametry w pliku Main.js.

W innym poście pisałem o prostym użyciu i korzystaniu z Sencha Touch, opisałem tam podstawowe elementy (w tym funkcję launch), które są wymagane do najprostszego uruchomienia aplikacji. Tutaj Sencha Cmd generuje już cały bazowy szkielet gotowy do ciekawszej (zaawansowanej) pracy. Zatem miłej zabawy. Pozdrawiam.

Komentarze:

Zostaw odpowiedź

Proszę wypełnij wymagane pola aby dodać komentarz.


Drag circle to the rectangle on the right!

Wyślij