Sencha Touch - Architektura

Dolna warstwa każdej aplikacji mobilnej to system operacyjny, a do tego wszystko lub wszystko jest zbudowane. Następnie mamy przeglądarki, na których będziemy uruchamiać aplikacje. Może to być Chrome, Safari, IE cokolwiek. Górna warstwa to standard W3, który jest wspólny dla wszystkich. Sencha Touch stoi lub jest zbudowany w oparciu o standardy W3, które są niczym innym jak HTML5, co sprawia, że pojedyncza aplikacja jest kompatybilna z różnymi przeglądarkami różnych urządzeń.

Sencha Touch to połączenie trzech frameworków - ExtJs, JqTouch i Raphael (rysunek wektorowy). Jest zgodny z architekturą MVC. MVC oddziela kod na łatwiejsze w zarządzaniu fragmenty.

Chociaż architektura nie jest obowiązkowa dla programu, najlepszym rozwiązaniem jest przestrzeganie tej struktury, aby kod był wysoce konserwowalny i zorganizowany.

Struktura projektu z aplikacją Sencha Touch

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Folder aplikacji Sencha Touch będzie znajdować się w folderze JavaScript twojego projektu.

Aplikacja będzie zawierała pliki kontrolera, widoku, modelu, sklepu i narzędzi z plikiem app.js.

app.js- Główny plik, z którego rozpocznie się przepływ programu. Powinien być umieszczony w głównym pliku HTML za pomocą tagu <script>. Aplikacja wywołuje kontroler aplikacji dla pozostałych funkcji.

Controller.js- Jest to plik kontrolera architektury Sencha Touch MVC. Obejmuje to całą kontrolę nad aplikacją, detektory zdarzeń i większość funkcji kodu. Wykonuje następujące zadania: routing, pośrednictwo między widokiem a modelem oraz wykonuje zdarzenia.

View.js- Zawiera interfejsową część aplikacji, która jest wyświetlana użytkownikowi. Sencha Touch wykorzystuje różne bogate widoki interfejsu użytkownika, które można rozszerzać i dostosowywać zgodnie z wymaganiami.

Store.js- Zawiera lokalnie zbuforowane dane, które mają być renderowane na widok za pomocą obiektów modelu. Sklep pobiera dane za pomocą serwerów proxy, które mają ścieżkę zdefiniowaną dla usług do pobierania danych zaplecza.

Model.js- Zawiera obiekty, które wiążą dane sklepu do przeglądania. Jest to reprezentacja obiektu ze świata rzeczywistego, który zasadniczo zajmuje się bazą danych.

Utils.js- Nie jest uwzględniony w architekturze MVC, ale najlepiej jest go używać, aby kod był czysty, mniej złożony i bardziej czytelny. Możemy zapisać metody w tym pliku i wywołać je w kontrolerze lub w module renderującym, gdziekolwiek jest to wymagane. Jest to również przydatne w celu ponownego wykorzystania kodu.