Sencha Touch - Szybki przewodnik
Sencha Touch to popularna platforma Sencha do tworzenia interfejsu użytkownika dla aplikacji mobilnych. Pomaga deweloperowi stworzyć aplikację mobilną za pomocą prostego HTML, CSS, JS, która obsługuje wiele urządzeń mobilnych, takich jak Android, IOS, BlackBerry i Windows. Oparty jest na architekturze MVC. Najnowsza wersja Sencha Touch to 2.4.
Historia Sencha Touch
Po wydaniu innego produktu Senchy, ExtJs, który był przeznaczony do aplikacji internetowych, pojawiła się potrzeba opracowania frameworka, który będzie działał również na urządzeniach mobilnych.
Pierwsza wersja Sencha Touch była wersją beta 0.9, która obsługiwała urządzenia z systemem Android i IOS. Później pierwsze główne wydanie Sencha Touch w wersji 1.0 pojawiło się w listopadzie 2010, która była pierwszą stabilną wersją i również obsługiwanymi urządzeniami Blackberry.
Najnowsza wersja Sencha Touch to wersja 2.4 wydana w czerwcu 2015 roku, która obsługuje wiele urządzeń, takich jak Windows, Tizen wraz z systemem Android, IOS, BlackBerry OS 10, Google Chrome na Androida i mobilne Safari itp.
Cechy Sencha Touch
Oto najważniejsze cechy Sencha Touch -
Konfigurowalny i ponad 50 wbudowanych widżetów UI z kolekcją bogatych interfejsów użytkownika, takich jak listy, karuzele, formularze, menu i paski narzędzi, stworzonych specjalnie dla platform mobilnych.
Zgodność kodu nowych wersji ze starszą.
Elastyczny menedżer układu, który pomaga organizować wyświetlanie danych i treści na wielu urządzeniach mobilnych z różnymi systemami operacyjnymi.
Struktura obejmuje solidny pakiet danych, który może wykorzystywać dane z dowolnego źródła danych zaplecza.
Adaptacyjne układy, animacje i płynne przewijanie zapewniają lepsze wrażenia z użytkowania aplikacji mobilnej.
Gotowe do użycia, natywne motywy dla każdej większej platformy umożliwiają dostosowanie aplikacji internetowych i hybrydowych do wyglądu i działania platform docelowych.
Sencha Touch ─ Korzyści
Sencha Touch to wiodący standard tworzenia aplikacji internetowych na poziomie biznesowym. Oferuje narzędzia niezbędne do tworzenia solidnych aplikacji dla większości urządzeń mobilnych, zapewniając pojedynczą platformę do tworzenia aplikacji. Oto niektóre korzyści -
Zapewnia responsywną funkcję dotykową, dzięki czemu użytkownik może łatwo nawigować podczas korzystania z aplikacji mobilnej.
Zapewnia zgodność ze wszystkimi najnowszymi wersjami systemów IOS, Android i Blackberry oraz Windows.
Zapewnia najszybszą możliwą prędkość pożądaną dla każdej aplikacji mobilnej.
Zapewnia ekonomiczne rozwiązanie dzięki kompatybilności z różnymi platformami.
Oparty na natywnych interfejsach API i podstawowych językach tworzenia stron internetowych, takich jak HTML, CSS, JS, co ułatwia programistom zrozumienie Sencha Touch.
Sencha Touch ─ Ograniczenia
Sencha Touch API nie ma następujących możliwości -
Aplikacja nie ma dostępu do aparatu urządzenia, kontaktów ani akcelerometru.
Nie zapewnia funkcji powiadomień push. W tym celu musimy użyć gniazd sieciowych lub długiego odpytywania.
Zgodnie z ogólną polityką licencji publicznych, jest bezpłatny dla aplikacji open source, ale płatny w przypadku zastosowań komercyjnych.
To nie jest dobre dla zaawansowanych aplikacji graficznych i animacyjnych, takich jak aplikacje do gier.
Sencha Touch ─ Narzędzia
Sencha SDK
To jest zestaw deweloperski Sencha użyty do stworzenia szkieletu projektu. Używamy polecenia „sencha -sdk ścieżka / do / touch generuj nazwę aplikacji”, aby utworzyć aplikację o nazwie podanej w poleceniu.
Po utworzeniu aplikacji możesz zobaczyć w niej następujące pliki -
app - Ten folder zawiera model, widok, kontroler i pliki do przechowywania aplikacji.
app.js- To jest główny plik JS Twojej aplikacji. Z tego pliku rozpoczyna się przepływ kodu Sencha.
app.json - To jest plik konfiguracyjny aplikacji, wszystkie szczegóły konfiguracji znajdują się tutaj.
index.html - To jest główny plik html, do którego dołączamy plik app.js i inne pliki związane z Sencha.
package.json - Ten plik zawiera wszystkie zależności i inne informacje związane z aplikacją.
resources - Ten folder zawiera wszystkie pliki CSS i obrazy wymagane dla aplikacji.
Sencha CMD
Sencha CMD to narzędzie wiersza poleceń, które zapewnia funkcje minifikacji kodu Sencha Touch, tworzenia rusztowań, generowania kompilacji i innych przydatnych funkcji do celów produkcyjnych.
Używamy polecenia „Pakiet budowania aplikacji Sencha” w wierszu poleceń, aby zbudować odpowiednią aplikację. Przejdź do katalogu aplikacji w wierszu polecenia i wpisz powyższe polecenie. Gdy kompilacja się powiedzie, zobaczymy zminimalizowaną wersję aplikacji używaną zasadniczo do celów produkcyjnych.
Można to pobrać z https://www.sencha.com/products/extjs/cmd-download/
Inspektor Sencha
Sencha Inspector to narzędzie do debugowania do debugowania dowolnego problemu w kodzie Sencha podczas programowania.
Konfiguracja środowiska lokalnego
Ta sekcja zawiera instrukcje pobierania i konfigurowania Sencha Touch na komputerze. Postępuj zgodnie z instrukcjami, aby skonfigurować środowisko.
Pobieranie plików bibliotecznych
Pobierz komercyjną wersję plików biblioteki Sencha Touch z poniższego linku https://www.sencha.com. Otrzymasz wersję próbną z witryny na swój zarejestrowany identyfikator poczty, który będzie spakowanym folderem o nazwie sencha-touch-2.4.2-commercial.
Rozpakuj folder, a znajdziesz różne pliki JavaScript i CSS, które możesz dołączyć do swojej aplikacji. Uwzględnij głównie następujące pliki -
Javascript Files - Plik JS, który można znaleźć w folderze \ sencha-touch-2.4.2commercial \ touch-2.4.2 to -
| Sr.No | Opis pliku |
|---|---|
| 1 | sencha-touch.js Jest to plik podstawowy, który zawiera wszystkie funkcje potrzebne do uruchomienia aplikacji. |
| 2 | sencha-touch-all.js Ten plik zawiera cały zminimalizowany kod bez komentarzy w pliku. |
| 3 | sencha-touch-debug.js To jest niezminifikowana wersja sencha-touch-all.js do celów debugowania. |
| 4 | sencha-touch-all-debug.js Ten plik jest również niezminifikowany i jest używany do celów programistycznych, ponieważ zawiera wszystkie komentarze i dzienniki konsoli do sprawdzania wszelkich błędów / problemów. |
Możesz dodać te pliki do folderu JS projektów lub możesz podać bezpośrednią ścieżkę do miejsca, w którym znajdują się pliki w systemie.
CSS Files - Istnieje wiele plików opartych na motywach, które można znaleźć w folderze I: \ sencha touch \ sencha-touch-2.4.2-commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.css
Te pliki bibliotek zostaną dodane w aplikacji Sencha Touch w następujący sposób -
<html>
<head>
<script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>
<link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>Możesz zachować kod aplikacji Sencha Touch w pliku app.js.
Konfiguracja CDN
CDN to sieć dostarczania treści, za pomocą której nie musisz pobierać plików biblioteki Sencha Touch, zamiast tego możesz bezpośrednio dodać link CDN do ExtJS do swojego programu w następujący sposób -
<html>
<head>
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
<script type = "text/javascript" src = "app.js" > </script>
</head>
</html>Popularni redaktorzy
Ponieważ jest to framework JavaScript używany do tworzenia aplikacji internetowych, projekt będzie zawierał pliki HTML, JS, a do pisania programów Ext JS potrzebny będzie edytor tekstu. Na rynku dostępnych jest wiele IDE. Ale na razie możesz rozważyć jedną z następujących rzeczy -
Notepad - Na komputerze z systemem Windows możesz użyć dowolnego prostego edytora tekstu, takiego jak Notatnik (zalecany w tym samouczku), Notepad ++.
Brackets - Kolejne popularne IDE, które można pobrać z http://brackets.io/ .
Sublime - Kolejne popularne IDE, które można pobrać z https://www.sublimetext.com/3/ .
Naming conventionto zbiór zasad, których należy przestrzegać w przypadku identyfikatorów. Dzięki temu kod jest czytelny i zrozumiały także dla innych programistów.
Konwencja nazewnictwa w Sencha Touch jest zgodna ze standardową konwencją JavaScript, która nie jest obowiązkowa, ale jest dobrą praktyką do przestrzegania. Powinien być zgodny ze składnią wielbłądów w celu nazwania klasy, metody, zmiennej i właściwości.
Jeśli nazwa jest połączona z dwoma słowami, drugie słowo zawsze zaczyna się od dużej litery. Na przykład doLayout (), StudentForm, firstName itp.
| Sr.No. | Nazwa i konwencja |
|---|---|
| 1 | Class Name Powinien zaczynać się od dużej litery, po której następuje wielbłąd. Na przykład StudentClass |
| 2 | Method Name Powinien zaczynać się od małej litery, po której następuje wielbłąd. Na przykład studentMethod () |
| 3 | Variable Name Powinien zaczynać się od małej litery, po której następuje wielbłąd. Na przykład studentName |
| 4 | Constant Name Powinien być pisany tylko wielkimi literami. Na przykład COUNT, MAX_VALUE |
| 5 | Property Name Powinien zaczynać się od małej litery, po której następuje wielbłąd. Na przykład enableColumnResize = true |
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, jednak najlepszą praktyką 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 filesFolder 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 przy użyciu 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 rzeczywistego obiektu, 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.
MVC oznacza kontroler widoku modelu. Jest to wzorzec architektoniczny, który dzieli aplikację na logiczne komponenty, dzięki czemu jest łatwiejsza w zarządzaniu.
Poniższy diagram pokazuje, jak działa architektura MVC -
Controller - Kontroler kontroluje całą aplikację, powiadamia widok o zmianie modelu i wykonuje akcje na podstawie danych wejściowych użytkownika.
View- Zawiera interfejsową część aplikacji, która jest wizualna dla użytkownika. Powiadamia kontroler o zmianie modelu po wprowadzeniu danych przez użytkownika.
Model- Zawiera obiekty, które wiążą dane sklepu do przeglądania. Jest to reprezentacja obiektu świata rzeczywistego, który zasadniczo zajmuje się bazą danych. Powiadamia również kontrolera o każdej zmianie widoku.
W tym rozdziale wymienimy kroki, jakie należy wykonać, aby napisać pierwszy program Hello World w Ext JS.
Krok 1
Utwórz stronę index.htm w wybranym przez nas edytorze. Uwzględnij wymagane pliki biblioteki w sekcji head strony html w następujący sposób.
index.htm
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
</script>
<script type = "text/javascript">
Ext.application( {
name: 'Sencha', launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true, items: [{
title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
<body>
</body>
</html>Wyjaśnienie
Metoda Ext.application () jest punktem wyjścia dla aplikacji Sencha Touch. Tworzy zmienną globalną o nazwie „Sencha” zadeklarowaną z właściwością name - wszystkie klasy aplikacji, takie jak modele, widoki i kontrolery, będą znajdować się w tej jednej przestrzeni nazw, co zmniejsza ryzyko kolizji zmiennych globalnych i nazw plików.
launch () jest wywoływana po przygotowaniu strony i załadowaniu wszystkich plików JavaScript.
Metoda Ext.create () służy do tworzenia obiektu w Sencha Touch. Tutaj tworzymy obiekt z prostego panelu klasy Ext.tab.Panel.
Ext.tab.Panel to predefiniowana klasa w Sencha Touch do tworzenia panelu.
Każda klasa Sencha Touch ma inne właściwości do wykonywania podstawowych funkcji.
Klasa Ext.Panel ma różne właściwości, takie jak -
fullscreen właściwość ma wykorzystywać cały ekran, dlatego panel zajmie miejsce na pełnym ekranie.
items właściwość jest pojemnikiem na różne przedmioty.
iconCls to klasa używana do wyświetlania różnych ikon.
title właściwością jest podanie tytułu do panelu.
html właściwość to zawartość HTML, która ma być wyświetlana w panelu.
Krok 2
Otwórz plik index.htm w standardowej przeglądarce, a otrzymasz następujące dane wyjściowe.
Dzisiejsze zapotrzebowanie na aplikację internetową polega na tworzeniu szybkiej aplikacji przy mniejszym wysiłku programistycznym. Sencha Touch pomaga w tym z łatwością, ponieważ zapewnia wiele bibliotek kompilacji do wyboru, w oparciu o kod programistyczny lub produkcyjny, a także możliwość tworzenia niestandardowej kompilacji.
Biblioteki kompilacji Sencha Touch ładują klasy dynamicznie. Dynamiczne ładowanie oznacza klasy, które są ładowane w razie potrzeby i zostaną uwzględnione tylko te klasy, które są wymagane w aplikacji. Dzięki temu aplikacja działa szybciej, ponieważ zmniejsza się liczba ładowanych plików, jednocześnie skracając czas ładowania.
Sencha Touch 2.x zapewnia pięć następujących bibliotek kompilacji.
| Sr.No. | Konstrukcje i użytkowanie |
|---|---|
| 1 | sencha-touchdebug.js Ta kompilacja jest używana podczas lokalnego tworzenia aplikacji. Jest to niezminifikowana wersja ze wszystkimi komentarzami i dziennikami debugowania dla łatwego debugowania podczas programowania. |
| 2 | senchatouch.js Ten plik jest używany do celów produkcyjnych. Jest to wersja zminimalizowana, gdy mamy niestandardową kompilację. |
| 3 | sencha-touchall.js Ten plik jest używany do celów produkcyjnych. Jest to wersja zminimalizowana, gdy nie mamy niestandardowej kompilacji. |
| 4 | sencha-touchall-debug.js Ten plik jest używany do debugowania w środowisku produkcyjnym. Nie jest zminimalizowany i zawiera wszystkie komentarze i dzienniki debugowania. |
| 5 | sencha-touchall-compat.js Ta kompilacja służy do migracji wersji 1.x do wersji 2.x. Daje ostrzeżenie, gdy kod wersji 1.x jest niezgodny i wymaga modyfikacji. |
Dzięki wyżej wymienionym kompilacjom Sencha Touch zapewnia możliwość tworzenia niestandardowych kompilacji.
Zalety posiadania niestandardowej wersji
Kompilacja niestandardowa nie ładuje wszystkich plików dotykowych. Wczytuje tylko te pliki, których używamy w aplikacji, dzięki czemu aplikacja jest szybsza i łatwa w utrzymaniu.
Sencha CMD służy do tworzenia niestandardowych kompilacji. Aby utworzyć niestandardową kompilację w Sencha CMD, przejdź do katalogu, w którym znajduje się plik aplikacji i wpisz jedno z następujących poleceń, aby utworzyć kompilację.
| Sr.No. | Polecenie i użycie |
|---|---|
| 1 | sencha app build native Kompiluje aplikację i przygotowuje plik o nazwie packager.temp.json, którego można użyć do spakowania aplikacji - plik packager.temp.json jest taki sam jak plik packager.json, ale zawiera dodatkowe ścieżki. |
| 2 | sencha app build -run native Tworzy i automatycznie pakuje aplikację oraz uruchamia odpowiedni symulator. |
| 3 | sencha app build package Kompiluje aplikację z obsługą pakowania, ale nie konfiguruje pliku JSON programu pakującego. Jest to przydatne w przypadku projektów, które ręcznie obsługują wiele plików packager.json. |
Gdy kompilacja się powiedzie, wygeneruje plik all-classes.js, który musimy dołączyć do naszego pliku index.html, aby był gotowy do produkcji.
Poniższy kod przedstawia zmiany, które należy wprowadzić dla kodu gotowego do produkcji.
Index.html before building application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
</head>
<body>
</body>
</html>Index.html after building the application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
<script type = "text/javascript" src = "app-classes.js"> </script>
</head>
<body>
</body>
</html>Sencha Touch zawiera różne poprawki z wcześniejszej wersji.
Sencha Touch 2 jest dostarczany z kompilacją kompatybilności wstecznej, która ułatwia proces migracji z wersji 1.x do 2.x.
Ta kompilacja po prostu ułatwia pracę, zapewniając ostrzeżenie i dzienniki za każdym razem, gdy wystąpi problem z migracją lub wymagana jest zmiana kodu, dzięki czemu użytkownik dowie się, gdzie zmiany muszą być, aby upewnić się, że aplikacja działa z najnowszą wersją.
Migracja Sencha Touch 2.x wymaga następujących zmian w kodzie.
System klas
Code in Sencha Touch 1.x -
MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
scroll: 'vertical',
html: 'Student Panel'
initComponent: function() {
Ext.getCmp('StudentIdDiv').update('This is a Student panel');
}
});Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentPanel', {
extend: 'Ext.Panel',
config: {
scroll: 'vertical',
html: 'Student Panel'
},
initialize: function() {
Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
}
});Patrząc na obie wersje, możesz zobaczyć, że sposobem tworzenia klasy są zmiany, które są teraz inspirowane przez ExtJ, takie jak -
Ext.extend zostaje zmieniony na Ext.define.
Wszystkie parametry konfiguracyjne związane z klasą są teraz zdefiniowane w parametrze config.
InitComponent zostaje zmieniony na metodę initialize ().
W Sencha Touch 2.x możemy mieć funkcje setHtml () i getHtml () do aktualizacji html lub do pobierania wartości.
Architektura MVC
Kod Sencha Touch 1.x był modułowy i oparty na architekturze MVC. Sencha Touch 2.x ma inną składnię do pisania modelu, widoku i kontrolera. Zobaczmy różnice w plikach modelu, widoku i kontrolera w różnych wersjach.
Model
Code in Sencha Touch 1.x -
Ext.regModel('MyApp.model.StudentModel', {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
});Code in Sencha Touch 2.x -
Ext.define('MyApp.model.StudentModel', {
extend: 'Ext.data.Model', config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
}
});Ext.regModel został zmieniony na Ext.define, który rozszerza Ext.data.Model.
Wszystkie pola znajdują się teraz w sekcji konfiguracji w wersji 2.x.
Widok
Code in Sencha Touch 1.x -
Ext.Panel("studentView", {
items: [{}]
});Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentView', {
extend: 'Ext.tab.Panel',
items: [{}]
});Widok jest prawie taki sam, jedyną zmianą jest to, że nazwa widoku następuje po przestrzeni nazw wersji 2.x, takiej jak Myapp.view.StudentView, a kod jest zapisywany w metodzie Ext.define jako podobny model.
Kontroler
Code in Sencha Touch 1.x -
Ext.regController("studentController", {
someMethod: function() {
alert('Method is called');
}
});Code in Sencha Touch 2.x -
Ext.define('MyApp.controller.studentController', {
extend: 'Ext.app.Controller', someMethod: function() {
alert('Method is called');
}
});Taki sam jak model w kontrolerze. Również Ext.regController został zmieniony na Ext.define, który rozszerza Ext.app.Controller.
Podanie
Code in Sencha Touch 1.x -
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.StudentView');
}
});Code in Sencha Touch 2.x -
Ext.application({
name: 'MyApp',
models: ['studentModel'],
controllers: ['studentController'],
views: ['studentView'],
stores: ['studentStore'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});Główna różnica między wersją 1.x a wersją 2.x polega na tym, że w 2.x deklarujemy wszystkie modele, widoki, kontrolery i magazyny w samej aplikacji.
Sencha Touch ma różne podstawowe koncepcje, takie jak system klas, ajax, kontrolery itp.
Poniższa tabela zawiera odnośniki do podstawowych koncepcji Sencha Touch.
| Sr.No. | Pojęcie i opis Link |
|---|---|
| 1 | System klas |
| 2 | składniki |
| 3 | Kontrolery |
| 4 | Wsparcie BlackBerry |
| 5 | Korzystanie z Ajax |
Pakiet danych w Sencha Touch jest odpowiedzialny za przeprowadzanie wszelkiego rodzaju manipulacji danymi, przechowywania lub ładowania danych.
Pakiety danych są powiązane z modelem, magazynem i serwerami proxy.
| Sr.No. | Pojęcie i opis Link |
|---|---|
| 1 | Model Jest to zbiór danych i pól, za pomocą których wyświetlamy wszystkie wartości w interfejsie użytkownika. Opis |
| 2 | Store Jest to zbiór instancji modelu, który zasadniczo przechowuje dane lokalnie. W sklepie zapisujemy wszystkie zdarzenia i pozostałe wywołania w celu uzyskania danych. Opis |
| 3 | Proxy Jest zasadniczo odpowiedzialny za ładowanie danych w sklepie. Przeważnie używamy proxy Ajax do ładowania danych magazynu. Opis |
Sencha Touch zapewnia szereg motywów do wykorzystania w twoich aplikacjach. Możesz dodać różne motywy zamiast klasycznego motywu i zobaczyć różnicę w wynikach w zależności od urządzenia, którego używamy do aplikacji. Odbywa się to po prostu przez zastąpienie pliku CSS motywu, jak wyjaśniono w poniższym przykładzie.
Motyw pulpitu
Rozważ swoją pierwszą aplikację Hello World. Poniższy CSS z aplikacji jest używany jako motyw pulpitu.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAby zobaczyć efekt, wypróbuj następujący program -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>To da następujący wynik -
Motyw systemu Windows
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssAby zobaczyć efekt, wypróbuj następujący program -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>To da następujący wynik -
Motyw IOS
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssAby zobaczyć efekt, wypróbuj następujący program -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>To da następujący wynik -
Klasyczny motyw IOS
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssAby zobaczyć efekt, wypróbuj następujący program -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>To da następujący wynik -
Motyw Androida
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssAby zobaczyć efekt, wypróbuj następujący program -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>To da następujący wynik -
Motyw BlackBerry
Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssDodaj następujący CSS, aby użyć motywu systemu Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssAby zobaczyć efekt, wypróbuj następujący program -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>To da następujący wynik -
W dzisiejszym świecie technologii mamy wiele urządzeń, takich jak telefon komórkowy, tablet, komputer stacjonarny i laptop z różnymi rozmiarami ekranu. Stąd potrzeba tworzenia aplikacji, które będą dostępne z każdego urządzenia i będą dobrze wyglądać i działać. Jednak tworzenie różnych kodów dla różnych urządzeń jest bardzo czasochłonne i kosztowne.
Sencha Touch pomaga nam w tym, oferując funkcję profilu urządzenia. W oparciu o aktywny profil będą uruchamiane i stosowane różne zależności.
Profil urządzenia możemy zadeklarować podczas pisania kodu aplikacji. Możemy mieć wiele urządzeń jako -
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});Po zakończeniu profile zostaną załadowane jako -
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
Pisanie prostego profilu telefonicznego
Ext.define('Mail.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['phoneView']
},
isActive: function() {
return Ext.os.is('Phone');
}
});Pisanie prostego profilu tabletu
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet',
views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
});Jak widać z profilu, mamy funkcję isActive, która określa, czy dane urządzenie jest aktywne. Jeśli urządzenie jest aktywne, odpowiednie zależności zostaną załadowane i utworzone.
Jak wspomniano w powyższym przykładzie, jeśli używamy urządzenia telefonicznego, funkcja isActive profilu telefonu zwróci wartość true i zostaną załadowane zależności związane z urządzeniem telefonicznym; tutaj zostanie załadowany phoneView. Jeśli urządzeniem jest tablet, funkcja isActive profilu telefonu zwróci wartość false, a funkcja isActive profilu tabletu zwróci wartość true i zostanie załadowana zależność tabletView.
Uruchom proces
Jeszcze jedna kwestia, na którą należy zwrócić uwagę, to kiedy mamy profile w aplikacji, to ładowanie i tworzenie instancji kodu aplikacji będzie przebiegać w następującej kolejności -
- Kontrolery są tworzone jako pierwsze, a funkcja inicjująca każdego kontrolera zostanie załadowana.
- Zostanie wywołana funkcja uruchamiania profilu.
- Zostanie wywołana funkcja uruchamiania aplikacji.
Zarówno profil, jak i funkcje uruchamiania aplikacji są opcjonalne, więc jeśli nie zdefiniujemy żadnej z nich, nie zostaną one wywołane.
Spójrz na poniższy kod, aby sprawdzić, gdzie i jak można zdefiniować różne funkcje uruchamiania i init.
Funkcja init kontrolera
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});Funkcja uruchamiania profilu
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet', views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
launch : function() {
Ext.Msg.alert('profile's launch function');
}
});Funkcja uruchamiania aplikacji
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});W Sencha Touch zdefiniowano pewne sposoby deklarowania zależności, jeden w aplikacji, a drugi w klasach.
Przyjrzyjmy się różnym sposobom definiowania zależności.
Zależności na poziomie aplikacji
Tutaj deklarujemy wszystkie zależności podczas tworzenia aplikacji Ext.
Ext.application({
name: 'MyApp',
views: ['StudentsView'],
models: ['StudentsModel'],
controllers: ['StudentsController'],
stores: ['StudentsStore'],
profiles: ['Phone', 'Tablet']
});Teraz, gdy aplikacja zostanie załadowana, wszystkie zależności zostaną załadowane w tym samym czasie. Ścieżka do innych plików będzie miała postać -
- MyApp.views.StudentsView
- MyApp.models.StudentsModel
- MyApp.stores.StudentsStore itp.
Powyższy sposób deklaracji nie tylko ładuje plik, ale także decyduje o tym, który profil ma zachować jako aktywny. Po załadowaniu kontrolera upewnia się, że utworzy jego instancję. Po załadowaniu sklepów tworzy ich instancje i dostarcza jeden identyfikator, jeśli nie został jeszcze podany.
Zależności specyficzne dla profilu
Kiedy używamy profili w aplikacji, może istnieć możliwość, że kilka funkcji jest wymaganych tylko dla określonego profilu.
Zależności specyficzne dla profilu są deklarowane w samych profilach zamiast w deklaracji poziomu aplikacji.
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile', config: {
views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
}
});Zależności są ładowane niezależnie od tego, czy profil jest aktywny, czy nie. Jednak na podstawie aktywnego profilu następuje dalsze przetwarzanie, takie jak tworzenie instancji kontrolera i sklepów.
Zależności zagnieżdżone
Kiedy mamy większą aplikację, mamy wiele kontrolerów, modeli, widoków i sklepów.
W większych aplikacjach zawsze dobrze jest zachować modułowość. W tym celu możemy zdefiniować podfoldery, a deklarując zależności możemy zadeklarować nazwę podfolderu.
Ext.application({
name: 'MyApp',
controllers: ['Controller', 'nested.NewController'],
views: ['class.Cview', 'SView']
});W powyższym przypadku wczytane zostaną następujące pliki -
- MyApp.controllers.Controller
- MyApp.controllers.nested.NewController
- MyApp.Views.Sview
- MyApp.Views.class.Cview
Zależności zewnętrzne
Możemy określić zależności poza aplikacją, podając w pełni kwalifikowane nazwy klas jako -
Ext.Loader.setPath({
'Class': 'Class'
});
Ext.application({
views: ['Class.view.LoginForm', 'Welcome'],
controllers: ['Class.controller.Sessions', 'Main'],
models: ['Class.model.User']
});W powyższym przypadku wczytane zostaną następujące pliki -
- Class/view/LoginForm.js
- Class/controller/Sessions.js
- Class/model/User.js
- app/view/Welcome.js
- app/controller/Main.js
Pomaga w identyfikacji używanego systemu operacyjnego, przeglądarki, na której pracujesz i jakie funkcje są dostępne w Twoim środowisku.
Sencha Touch zapewnia różne funkcje, aby uzyskać informacje specyficzne dla środowiska. Wszystkie wymienione poniżej metody można sprawdzić, jeśli warunek jest if (Ext.os.is.Windows) {} i jest oparty na warunku, zadania mogą być wykonywane.
Wszystkie poniższe metody zwracają wartość logiczną.
System operacyjny
Ext.os to klasa, która udostępnia różne metody sprawdzania, nad którym systemem operacyjnym pracujemy.
| Sr.No | Metoda i opis |
|---|---|
| 1 | Ext.os.is.webOS Ta funkcja zwróci wartość true, jeśli używasz systemu operacyjnego webos, w przeciwnym razie zwróci false. |
| 2 | Ext.os.is.RIMTable Ta funkcja zwróci wartość true, jeśli używasz systemu operacyjnego RIMTable, w przeciwnym razie zwróci false. |
| 3 | Ext.os.is.Linux Ta funkcja zwróci wartość true, jeśli używasz systemu operacyjnego Linux, w przeciwnym razie zwróci wartość false. |
| 4 | Ext.os.is.Windows Ta funkcja zwróci true, jeśli używasz systemu operacyjnego Windows, w przeciwnym razie zwróci false. |
| 5 | Ext.os.is.MacOs Ta funkcja zwróci wartość true, jeśli używasz systemu operacyjnego Mac, w przeciwnym razie zwróci wartość false. |
| 6 | Ext.os.is.BlackBerry Ta funkcja zwróci wartość true, jeśli używasz systemu operacyjnego BlackBerry, w przeciwnym razie zwróci wartość false. |
| 7 | Ext.os.is.iOS Ta funkcja zwróci wartość true, jeśli używasz systemu operacyjnego IOS, w przeciwnym razie zwróci wartość false. |
| 8 | Ext.os.is.Android Ta funkcja zwróci wartość true, jeśli używasz systemu operacyjnego Android, w przeciwnym razie zwróci wartość false. |
Wykrywanie urządzeń
| Sr.No | Metoda i opis |
|---|---|
| 1 | Ext.os.is.iPad Ta funkcja zwróci wartość true, jeśli używasz iPada, w przeciwnym razie zwróci wartość false. |
| 2 | Ext.os.is.iPhone Ta funkcja zwróci wartość true, jeśli używasz iPhone'a, w przeciwnym razie zwróci false. |
| 3 | Ext.os.is.iPod Ta funkcja zwróci wartość true, jeśli używasz iPoda, w przeciwnym razie zwróci wartość false. |
Wersja systemu operacyjnego
| Sr.No | Metoda i opis |
|---|---|
| 1 | Ext.os.name Zwraca nazwę systemu operacyjnego. |
| 2 | Ext.os.version.version Podaje wersję używanego przez nas systemu operacyjnego. |
Wykrywanie przeglądarki
| Sr.No | Metoda i opis |
|---|---|
| 1 | Ext.browser.is.IE Ta funkcja zwraca wartość true, jeśli używamy przeglądarki Internet Explorer, w przeciwnym razie zwraca wartość false. |
| 2 | Ext.browser.is.FF Ta funkcja zwraca true, jeśli używamy przeglądarki FireFox, w przeciwnym razie zwraca false. |
| 3 | Ext.browser.is.Chrome Ta funkcja zwraca wartość true, jeśli używamy przeglądarki Chrome, w przeciwnym razie zwraca wartość false. |
| 4 | Ext.browser.is.Opera Ta funkcja zwraca wartość true, jeśli używamy przeglądarki Opera, w przeciwnym razie zwraca wartość false. |
| 5 | Ext.browser.is.Safari Ta funkcja zwraca wartość true, jeśli używamy przeglądarki Safari, w przeciwnym razie zwraca wartość false. |
Ta funkcja Zewn. Przeglądarka udostępnia różne inne funkcje -
| Sr.No | Metoda i opis |
|---|---|
| 1 | Ext.browser.userAgent Zwraca aktualny userAgent. |
| 2 | Ext.browser.isSecure Zwraca prawdę, jeśli bieżąca strona używa SSL. |
| 3 | Ext.browser.isStrict Zwraca prawdę, jeśli przeglądarka jest w trybie ścisłym. |
| 4 | Ext.browser.engineName Zwraca nazwę silnika przeglądarki (WebKit, Gecko, Presto, Trident i inne). |
| 5 | Ext.browser.engineVersion Zwraca wersję silnika przeglądarki. |
funkcje
Ext.feature.has ma sprawdzić, czy przeglądarka ma następującą funkcję, czy nie.
| Sr.No | Metoda i opis |
|---|---|
| 1 | Ext.feature.has.Audio Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję znaczników audio w formacie HTML5. |
| 2 | Ext.feature.has.Canvas Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję tagów kanwy w formacie HTML5. |
| 3 | Ext.feature.has.classList Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję listy klas w HTML5, która jest używana do dodawania, usuwania i przełączania klas css dla elementu html. |
| 4 | Ext.feature.has.Css3dTransforms Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję CSS 3D Transform w CSS3. |
| 5 | Ext.feature.has.CssAnimations Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje animacje css3. |
| 6 | Ext.feature.has.CssTransforms Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję transformacji CSS w css3. |
| 7 | Ext.feature.has.CssTransitions Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję przejścia CSS3. |
| 8 | Ext.feature.has.DeviceMotion Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję ruchu urządzenia. |
| 9 | Ext.feature.has.Geolocation Ta metoda zwraca wartość „prawda”, jeśli przeglądarka obsługuje funkcję geolokalizacji w formacie HTML5. |
| 10 | Ext.feature.has.History Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję historii html. |
| 11 | Ext.feature.has.Orientation Ta metoda zwraca wartość true, jeśli przeglądarka może wykryć orientację urządzenia. |
| 12 | Ext.feature.has.OrientationChange Ta metoda zwraca wartość „prawda”, jeśli przeglądarka może wykryć zmianę orientacji urządzenia. |
| 13 | Ext.feature.has.Range Zakres jest rodzajem znacznika wejściowego HTML dla elementu suwaka zakresu, więc jeśli przeglądarka obsługuje suwak, ta funkcja zwraca wartość true. |
| 14 | Ext.feature.has.SqlDatabase Baza danych SQL w sieci Web jest interfejsem API strony WWW do przechowywania danych i bazy danych, na której możemy wykonywać operacje zapytań. Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje bazę danych SQL. |
| 15 | Ext.feature.has.Svg Svg oznacza Scalable Vector Graphics, ta metoda zwraca wartość true, jeśli przeglądarka obsługuje funkcję svg HTML 5. |
| 16 | Ext.feature.has.Touch Ta metoda zwraca wartość true, jeśli przeglądarka ma funkcję Touch. |
| 17 | Ext.feature.has.Video Ta metoda zwraca wartość „prawda”, jeśli przeglądarka obsługuje tagi wideo HTML 5. |
| 18 | Ext.feature.has.Vml Vml oznacza wektorowy język znaczników, który jest językiem znaczników opartym na XML. Więc ta metoda zwraca prawdę, jeśli przeglądarka obsługuje vml. |
| 19 | Ext.feature.has.WebSockets Gniazdo sieciowe to w zasadzie protokół komunikacyjny dla komputerów, który obsługuje dwie komunikacje między klientami a serwerem. Ta metoda zwraca wartość true, jeśli przeglądarka obsługuje WebSockets, w przeciwnym razie zwraca wartość false. |
Zdarzenia to coś, co jest uruchamiane, gdy coś dzieje się z klasą. Na przykład, gdy przycisk jest klikany lub przed / po renderowaniu elementu.
Metody zapisywania wydarzeń
Poniżej przedstawiono metody zapisywania wydarzeń.
- Wbudowane zdarzenia korzystające z detektorów.
- Dołączanie wydarzeń później
- Wydarzenia niestandardowe
Wbudowane zdarzenia przy użyciu detektorów
Sencha Touch zapewnia właściwości słuchacza do zapisywania wydarzeń i zdarzeń niestandardowych w plikach Sencha Touch.
Słuchacz piszący w Sencha Touch
Dodamy odbiornik w poprzednim programie, dodając właściwość Listen do panelu, jak pokazano poniżej -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
html: 'My Panel', fullscreen: true, listeners: {
painted: function() {
Ext.Msg.alert('I was painted to the screen');
}
}
});
}
});
</script>
</head>
</html>To da następujący wynik -
W ten sposób możemy również zapisać wiele zdarzeń we właściwości Listeners.
Wiele zdarzeń w tym samym odbiorniku
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on({
tap: function() {
var randomWidth = 100 + Math.round(Math.random() * 200);
this.setWidth(randomWidth);
},
widthchange: function(button, newWidth, oldWidth) {
alert('My width changed from ' + oldWidth + ' to ' + newWidth);
}
});
}
});
</script>
</head>
</html>To da następujący wynik -
Dołączanie wydarzenia później
W poprzedniej metodzie zapisywania zdarzeń zapisywaliśmy zdarzenia w słuchaczach w momencie tworzenia elementów.
Inny sposób dołączania wydarzeń jest następujący -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
}
});
</script>
</head>
</html>To da następujący wynik -
Wydarzenia niestandardowe
Możemy pisać zdarzenia niestandardowe w Sencha Touch i odpalać zdarzenia metodą fireEvent. Poniższy przykład wyjaśnia, jak pisać zdarzenia niestandardowe.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: "Just wait 5 seconds",
listeners: {
myEvent: function(button, points) {
alert('myEvent was fired! You score ' + points + ' points');
}
}
});
Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);
myButton.fireEvent('myEvent', myButton, number);
}, 5000);
}
});
</script>
</head>
</html>Gdy strona zostanie załadowana, a dokument jest gotowy, pojawi się strona interfejsu użytkownika z przyciskiem, a ponieważ uruchamiamy zdarzenie po 5 sekundach, gdy dokument jest gotowy, po 5 sekundach pojawi się okno ostrzegawcze.
Tutaj napisaliśmy zdarzenie niestandardowe „myEvent” i wyzwalamy zdarzenia jako button.fireEvent (eventName);
Układ to sposób rozmieszczenia elementów w kontenerze. Może to być pozioma, pionowa lub jakakolwiek inna. Sencha Touch ma różne układy zdefiniowane w swojej bibliotece, chociaż zawsze możemy również pisać niestandardowe układy.
| Sr.No. | Układ i opis |
|---|---|
| 1 | hBox Taki układ umożliwia rozmieszczenie elementu w sposób poziomy. |
| 2 | vBox Taki układ umożliwia rozmieszczenie elementu w pionie. Jest to jeden z powszechnie używanych układów. |
| 3 | Dopasowanie W tym układzie kontener jest wypełniony pojedynczym panelem, a gdy nie ma określonych wymagań związanych z układem, używany jest ten układ. |
| 4 | Karta (TabPanel) Ten układ rozmieszcza różne komponenty w sposób zakładkowy. Karty zostaną wyświetlone na górze kontenera. Za każdym razem, gdy widoczna jest tylko jedna karta, a każda karta jest traktowana jako inny składnik. |
Sencha Touch oferuje pełną obsługę historii i funkcje głębokiego linkowania.
Posiada najprostszą funkcjonalność przycisku Wstecz, która pomaga użytkownikowi nawigować między ekranami, nawet bez odświeżania strony lub aplikacji.
Zapewnia również funkcjonalność tras, która pomaga użytkownikowi przejść do dowolnego adresu URL. Na podstawie adresu URL podanego w oknie przeglądarki wywołuje określone funkcje w celu wykonania określonego zadania.
Spójrz na poniższy przykład, aby zapoznać się z funkcją przycisku Wstecz.
Ten przykład pokazuje zagnieżdżoną listę, która jest niczym innym jak listą wewnątrz listy, więc po kliknięciu dowolnego elementu listy otwiera się kolejna lista, a na górze ekranu pojawia się przycisk Wstecz.
Aby uzyskać pełną bazę kodów, możesz sprawdzić Lista zagnieżdżona w sekcji składnika widoku.
Wytyczanie
Najprostszy przykład tras
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
routes: {
login: 'showLogin',
'user/:id': 'userId'
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page');
},
userId: function(id) {
Ext.Msg.alert('This is the login page specific to the used Id provided');
}
});W powyższym przykładzie, jeśli adres URL przeglądarki to https://myApp.com/#login, zostanie wywołana funkcja showLogin.
Możemy podać parametry w adresie URL i na podstawie konkretnego parametru można wywołać funkcję. Na przykład, jeśli adres URL to https://myApp.com/#user/3, zostanie wywołana inna funkcja userId, a określony identyfikator będzie mógł zostać użyty wewnątrz funkcji.
Trasowanie zaawansowane
Czasami mamy parametry zaawansowane, które obejmują przecinek, spację i znaki specjalne itp., Jeśli użyjemy powyższego sposobu pisania tras, to nie zadziała. Aby rozwiązać ten problem, Sencha touch zapewnia routing warunkowy, w którym możemy określić, jaki typ danych parametr powinien akceptować.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login/:id: {
action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page with specific id which matches criteria');
}
}
});Tak jak w powyższym przykładzie podaliśmy wyrażenie regularne w warunku, który jasno określa, jaki typ danych powinien być dozwolony jako parametr adresu URL.
Udostępnianie tego samego adresu URL w różnych profilach urządzeń
Ponieważ Sencha touch zapewnia profil urządzenia, więc ten sam kod aplikacji może być używany na wielu urządzeniach, mogą istnieć możliwości, że różne profile mogą mieć różne funkcje dla tego samego adresu URL.
Aby rozwiązać ten problem, Sencha touch daje nam swobodę pisania routingu w głównym kontrolerze i wywoływanej funkcji, która ma być zapisana we wszystkich profilach z ich profilami specyficznymi.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login: 'showLogin'
}
},
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
extend: 'MyApp.controller.Main, showLogin: function() {
Ext.Msg.alert('This is the login page for mobile phone profile');
}
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
extend: 'MyApp.controller.Main,showLogin: function() {
Ext.Msg.alert('This is the login page for tablet profile');
}
});Jak pokazuje przykład, mamy jeden główny kontroler, który ma funkcję showLogin i mamy dwa różne profile (telefon / tablet). Oba profile mają funkcję showLogin z innym kodem specyficznym dla profilu.
W ten sposób możemy udostępniać ten sam adres URL na wielu urządzeniach profilowych z ich określonymi funkcjami.
Sencha Touch zapewnia konfigurację XHR2 do pracy z rozwojem Ajax i Ajax2.
XHR2 to xmlHttpRequest poziom 2, który służył do żądania danych z serwera. W przypadku każdej aplikacji internetowej dane znajdują się na serwerze i po załadowaniu strony należy uzyskać do nich dostęp z serwera za pomocą żądań Ajax.
XHR2 w Sencha Touch zapewnia funkcję paska postępu, która pokazuje użytkownikowi ilość przesłanych danych dla konkretnego żądania. XHR2 jest nowo dodany, więc musimy sprawdzić, czy przeglądarka go obsługuje, czy nie.
Poniżej znajduje się funkcja sprawdzania, czy przeglądarka obsługuje XHR2 -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Możemy nawet sprawdzić, czy progresywne przesyłanie z XHR2 jest obsługiwane przez przeglądarkę, czy nie.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Różne nowe funkcje XHR2 są zawarte w Sencha Touch.
| Sr.No | Funkcje i opis |
|---|---|
| 1 | XHR2: true Służy do włączania i wyłączania funkcjonalności XHR2 w aplikacji. |
| 2 | Ext.field.File Dodawane jest nowe pole pliku, aby lepiej zrozumieć typ pola. |
| 3 | Ext.field.FileInput Ma to na celu zapewnienie FileInput. |
| 4 | Ext.progressIndicator Ma to na celu podanie dokładnego procentu przesłanych danych w postaci paska postępu. |
| 5 | xtype: fileinput Aby utworzyć wystąpienie klasy fileInput. |
| 6 | xtype: filefield Aby utworzyć wystąpienie klasy pliku. |
| 7 | responseType : value Ten parametr pozwala na różne typy odpowiedzi, takie jak tekst, dokument, blob itp. |
Poniżej znajdują się przykłady wysyłania prostego żądania AJAX z parametrami i bez nich oraz przesyłania plików przy użyciu AJAX.
Proste żądanie Ajax bez parametrów - powodzenie
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>To da następujący wynik -
Powyższy przykład pokazuje pomyślne wywołanie ajax, ponieważ podany adres URL jest poprawny. W tym przykładzie nie przekazujemy żadnego parametru, jest to po prostu proste żądanie AJAX, które trafia pod wspomniany adres URL.
Jeśli używasz przeglądarki Chrome w narzędziu deweloperskim, przejdź do sekcji sieci, możesz zobaczyć wysyłane żądanie i otrzymaną odpowiedź.
Proste żądanie Ajax bez parametrów - niepowodzenie
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>To da następujący wynik -
W powyższym przykładzie, aby pokazać, jak działa błąd Ajax, wspomnieliśmy o nieprawidłowym adresie URL. Porównaj ten i poprzedni przykład, znajdziesz różnicę.
Wysyłanie parametrów w żądaniu Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "Hi");
formData.append("lastName", "Reader");
// Request will be sent as part of the payload instead of standard post data
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
Ext.Msg.alert(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
Ext.Msg.alert('Ajax failed!');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>To da następujący wynik -
W tym przykładzie przekazujemy parametry z AJAX, używając właściwości data wywołania Ajax.
Przesyłanie plików za pomocą Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
Ext.Msg.alert('File uploaded successfully.');
},
failure: function(response) {
Ext.Msg.alert('File upload failed.');
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>To da następujący wynik -
Ten przykład pokazuje, jak przesyłać dane przy użyciu wywołania ajax. W tym przykładzie używamy wskaźnika paska postępu, aby pokazać postęp podczas przesyłania pliku.
Sencha Touch zapewnia różne komponenty interfejsu użytkownika, które można dostosować do wymagań.
| Sr.N0. | Opis podzespołu |
|---|---|
| 1 | Karuzela Ten składnik interfejsu użytkownika służy do wyświetlania karuzeli. |
| 2 | Lista Ten składnik interfejsu użytkownika służy do wyświetlania list. |
| 3 | Lista zagnieżdżona Ten składnik interfejsu użytkownika służy do wyświetlania listy zagnieżdżonej. |
| 4 | Formularz Ten składnik interfejsu użytkownika służy do wyświetlania formularzy. |
| 5 | Wykres Ten składnik interfejsu użytkownika służy do wyświetlania różnych typów wykresów. |
| 6 | Pływający komponent Ten składnik interfejsu użytkownika służy do wyświetlania składnika pływającego. |
| 7 | Panel zakładek Ten składnik interfejsu użytkownika służy do wyświetlania widoku panelu kart. |
| 8 | Widok nawigacji Ten składnik interfejsu użytkownika służy do wyświetlania widoku nawigacji. |
| 9 | Menu czynności Ten składnik interfejsu użytkownika służy do wyświetlania paska menu akcji. |
| 10 | Widok danych Ten składnik interfejsu użytkownika służy do wyświetlania widoku danych. |
| 11 | Mapa Ten komponent interfejsu użytkownika służy do wyświetlania mapy Google. |
Sencha Touch posiada natywne funkcje pakowania.
Poniżej znajdują się linki do natywnych koncepcji opakowań Sencha Touch.
| Sr.No. | Pojęcie i opis Link |
|---|---|
| 1 | Natywne udostępnianie systemu iOS |
| 2 | Natywne interfejsy API |
Podstawowa najlepsza praktyka JavaScript
Dobrą praktyką jest przechowywanie całego kodu związanego z JavaScript w osobnym miejscu js (external JS) plik, zamiast zapisywać go w <script> tag pod sekcją head lub wbudowany JavaScript w treści dokumentu.
Zawsze sprawdzaj wartość null, zanim element zostanie użyty w dalszej logice.
Zawsze przestrzegaj konwencji nazewnictwa, ponieważ ułatwia to zrozumienie kodu przez każdego innego programistę.
Aby kod był zrozumiały, zawsze preferowane jest pisanie komentarzy dla metod JS z jasną logiką związaną z tym, co robi funkcja.
Najlepsza praktyka specyficzna dla Sencha Touch
Użyj zalecanej przez Sencha Touch struktury folderów, która będzie pomocna podczas kompresji lub minifikacji JS.
Zdecydowanie zaleca się używanie nasłuchiwania (onclick / onblur itp.) W kontrolerze zamiast zapisywania go w samej stronie html.
Nie twórz instancji sklepu, gdy sklep jest wywoływany z widoku.
Kiedy tworzymy wystąpienie sklepu, zawsze powinniśmy je niszczyć, ponieważ wpływa to na wydajność.
Podczas korzystania z Sencha Touch nie określaj żadnego innego prostego pliku JavaScript. Użyj wszystkich funkcji z klas Ext (wymienionych w kontrolerze lub narzędziach).
Jeśli odwzorowanie modelu i nazwa są takie same, nie określaj odwzorowania. Tylko nazwa rozwiąże cel.
Nie używaj niepotrzebnych właściwości w widoku. Używaj tylko tej właściwości, która jest wymagana, i jej wartości różni się od wartości domyślnej.