Jak zacząć korzystać z Sencha Touch 2 ?

Jak zacząć korzystać z Sencha Touch 2 ?

Cześć, w tym poście chciałbym krótko opisać jak możesz zacząć korzystać (spróbować jak działa) Sencha Touch 2.

Jeśli o tym nie słyszałeś, ten filmik pomoże Ci zapoznać się z Sencha Touch 2.

Kliknij tutaj, aby zobaczyć film

Od marca 2012 możemy cieszyć się nową wersją tego frameworka, który został napisany w 100% od nowa w porównaniu do poprzednika, głównie ze względów wydajnościowych. Jest to naprawdę solidnie napisane środowisko m.in. zespół Sencha napisał nowy silnik renderujący, który bazuje w całości na CSS oraz nowy system klas kompatybilny z Ext JS 4.

Wersja druga, o której piszę wspiera:

  • iOS od wersji 3
  • Android od wersji 2.3
  • BlackBerry OS od wersji 6 (tylko urządzenia z przeglądarkami WebKit)

Zespół Sencha Touch w 2012 roku, ogłosił, że w 2013 udostępnią wsparcie dla Windows Phone 8 oraz BlackBerry 10. Aktualną wersję możesz sciągnąć z tej strony:

Kliknij tutaj, aby pobrać Sencha Touch 2

Po ściągnięciu paczki z Sencha Touch nie potrzebujesz na razie własnego vhosta z serwerem i innych skomplikowanych rzeczy. Wystarczy, że skopiujesz sobie folder resources oraz pliki javascript z głównego katalogu. Na potrzeby tego przykładu utworzyłem katalog senchatouch, który wygląda następująco:

2-sencha-touch

Zawartość katalogu libs, jest skopiowana z paczki Sencha Touch 2. Plik index.html wygląda tak jak poniżej:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Prosty Start</title>
 <!-- Load Sencha Touch -->
 <link rel="stylesheet" href="libs/sencha/resources/css/sencha-touch.css" />
 <script src="libs/sencha/sencha-touch-all-debug.js"></script>
 <!-- Load js code -->
 <script src="app.js"></script>
</head>
<body>
</body>
</html>

// Pamiętaj, aby zamykać body ponieważ Sencha Touch manipuluje tym tagiem aby wygenerować UI.

Jak widać powyżej, cała akcja dzieje się w pliku app.js. To tutaj umieszczasz swoją startową logikę. Każda aplikacja Sencha Touch ma przynajmniej jedną strukturą jak w poniższym kodzie, rozpoczynającą się od najważniejszego elementu, czyli wywołania Ext.application().

Dwoma najważniejszymi parametrami są klucze:

a) name – typ String, ustawia “namespace”. Oznacza to, że po utworzeniu programista może używać w całej przestrzeni aplikacji co zapobiega mieszaniu się z globalnymi elementami

b) launch – tutaj oczekiwana jest funkcja, która uruchomi się po załadowaniu kodu i gdy aplikacja bedzie gotowa aby ją wywołać

Podsumowując funkcja Ext.application() jest punktem wejściowym Twojej aplikacji.

Ext.application({
    name: 'FirstApp',
    launch: function () {
        Ext.Msg.alert('Aplikacja działa!');
    }
});

Po zapisaniu swoich zmian możesz uruchomić w swojej przeglądarce plik index.html. Jeśli nie posiadasz urządzenia mobilnego lub odpowiedniego środowiska możesz po prostu uruchomić na komputerze.

// Pamiętaj, że do debugowania Sencha Touch można używać tylko przeglądarek z WebKit.

Rezultat powinieneś mieć następujący:

1-sencha-touch

Jeśli Ci się udało, gratuluję właśnie uruchomiłeś swoją “aplikację” Sencha Touch 2. Jeśli rezultat jest negatywny, skontaktuj się ze mną a postaram się pomóc. Będę kontynuował artykuły związane z Sencha Touch 2, niektóre będą tak proste jak ten oraz bardziej zaawansowane aby każdy mógł znaleźć coś dla siebie. Pozdrawiam.

Kliknij, aby pobrać kod źródłowy

Komentarze:

Zostaw odpowiedź

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


Drag circle to the rectangle on the right!

Wyślij