Sencha Touch

Sencha Touch
P14.png
Eine Sencha Touch -App mit einem iOS6 -Thema
Entwickler (en) Sencha
Endgültige Veröffentlichung
2.4.2 / 15. Juni 2015; vor 7 Jahren
Geschrieben in JavaScript
Betriebssystem Android, iOS, Brombeere, Entzünden, Windows Phone, Tizen
Verfügbar in Englisch
Typ JavaScript -Bibliothek
Lizenz GPLV3 oder Kommerziell
Webseite www.Sencha.com/Produkte/berühren

Sencha Touch ist ein Benutzeroberfläche (UI) JavaScript -Bibliothek, oder Web Framework, speziell für die gebaut Mobiles Web.Es kann von verwendet werden von Web-Entwickler Um Benutzeroberflächen für Mobile zu entwickeln Web Applikationen das sieht aus und fühlt sich an wie native Anwendungen auf unterstützten mobilen Geräten. Es basiert auf Webstandards wie zum Beispiel HTML5, CSS3 und JavaScript. Das Ziel von Sencha Touch ist es, eine schnelle und einfache Entwicklung von mobilen Apps auf HTML5 -basierten mobilen zu erleichtern Android, iOS, Fenster, Tizen und Brombeere Geräte, die gleichzeitig ein natives Erscheinungsbild für die Apps ermöglichen.

Versionsgeschichte und Unterstützung

Sencha Touch ist ein Produkt von Sencha, das nach beliebten JavaScript -Bibliotheksprojekten gegründet wurde Ext js, JQTouch und Raphaël wurden kombiniert. Die erste Veröffentlichung von Sencha Touch, Version 0.90 Beta, wurde am 17. Juli 2010 verfügbar gemacht. Diese Beta -Version unterstützte Geräte, die Android und iOS (on iPhone, IPod Touch, iPad).

Anschließend wurde die erste stabile Version 1.0 im November 2010 veröffentlicht. Version 1.1.0 fügte Unterstützung für Geräte, die ausgeführt wurden Blackberry OS 6.0.

Die jüngste Veröffentlichung, Sencha Touch 2.4.2, wurde im Juni 2015 veröffentlicht[1] und ist so konzipiert, dass sie auf den folgenden Browsern und Plattformen ausgeführt werden:

Es gibt keine angekündigten Pläne zur Unterstützung Firefox Mobile.

Merkmale

MVC -Architektur

Sencha Touch folgt dem MVC Muster, das die Anwendungsdaten, den Steuercode und die Ansicht trennt. Diese Trennung ermöglicht es in großem Maßstab flexibel und leicht zu warten.

Widget -Komponenten und anpassbare Themen

Sencha Touch hat einen eingebauten Einbau Dom Manipulationsschnittstelle, die die Abhängigkeit von anderen negiert UI Frameworks wie JQuery. Es enthält einen Satz von grafische Benutzeroberfläche GUI-basiert Kontrollen (oder Komponenten) für die Verwendung in mobilen Webanwendungen. Diese Komponenten sind für den Berührungseingang optimiert. Die Komponenten sind:[2]

  • Schaltflächen mit Gerätspezifischen Themen und Effekten
  • Formeln Sie Elemente wie Textfelder für E -Mails
  • Date Picker und Adresse
  • Schieberegler, Selektoren und Combo-Boxen
  • Eine Listenkomponente mit Impuls-Scrolling und einer Indexleiste
  • Ein minimales Symbolsatz
  • Symbolleisten und Menüs
  • Bewegliche Registerkarten, untere Symbolleisten
  • Eine Kartenkomponente mit Unterstützung für Multi-Touch Gesten wie Prise und Zoom
  • Karussell

Alle Komponenten können nach dem Zielgerät thematisiert werden. Dies geschieht mit Verwendung Sass, eine Stylesheet -Sprache, die über CSS aufgebaut ist. Einige der nativen Themen sind Cupertino Classic (für iOS6.x und unten), Cupertino (für iOS 7) und Mountain View (für Android).[3]

Übergänge, Animationen und adaptive Benutzeroberfläche

Sencha Touch hat acht eingebaute Übergangseffekte, einschließlich Schieben über oder unter dem aktuellen Element, Pop, Flip und Cube. Es unterstützt gemeinsame Touch -Gesten aus Berührenereignisse, welche sind Webstandards aber nur unterstützt von Android, iOSund einige berührungsfähige Geräte. Dies sind tippen, doppelt tippen, wischen, scrollen und kneifen.

Da Sencha Touch HTML5 basiert, sind die von ihnen angebotenen Layouts äußerst adaptiv.

Diagramm

Sencha Touch unterstützt auch die Chartkomponenten wie Kreisdiagramme, Balkendiagramme, Linienserien usw. mit erklärenden Legenden. Diese Komponenten unterstützen die Interaktivität wie Prise und Zoom. Genau wie die Gitterkomponenten in Extjs, Sencha Touch bietet Touchgrid -Funktionen.[4]

Profile

Mit der Profilierung in Sencha Touch können Sie verschiedene Profile für unterschiedliche Bildschirmgrößen erstellen. Wenn die Anwendung geladen ist, bestimmt das Framework den Gerätetyp, und sein entsprechendes Profil bestimmt, welche Komponenten und Funktionen ausgetauscht werden müssen, und welche spezifischen Ansichten und Controller, die aufgerufen werden müssen Anwendung für jeden Gerätetyp.[5]

Grundlegende Anwendungsverzeichnisstruktur

Die Sencha Touch -Anwendungen haben eine grundlegende Datei- und Verzeichnisstruktur wie folgt:[2][6]

Verzeichnis/Datei Beschreibung
App Das Hauptverzeichnis, das die Modelle, Ansichten, Controller, Geschäfte und Profile der App enthält
app.js Datei mit den Gesamteinstellungen der Anwendung. Verweise auf alle Modelle, Ansichten, Controller, Geschäfte und Profile finden Sie hier. Sobald diese Referenzen geladen sind, wird die Haupt -App -Startfunktion aufgerufen. Diese Funktion lädt die erste Ansicht und kann daher als erster Punkt der Anwendung angesehen werden
index.html Hauptsächlich Html Datei für die App. Es kann viele Seiten/Bildschirme für die mobile App umfassen
Ressourcen Verzeichnis, das alle Bilder, CSS und alle anderen externen Dateien enthält, die die App benötigt
app.json Konfigurationsdatei der App
packager.json Datei zum Erstellen native Pakete verwendet
ext-touch.js Dies ist die JavaScript-Bibliothek von Sencha (ext-touchdebug.js, die während der Entwicklungsphase empfohlen werden)
ext-touch.css Dies ist die CSS -Bibliothek von Sencha

Entwicklerwerkzeuge und Plugins

Sencha Touch bietet Ide Plugins zur einfachen Entwicklung. Zu den Vorteilen dieser Plugins gehören Codegenerierung und Autovervollständigung, Code Refactoring und einfache Navigation zu Framework -Codebasis und benutzerdefinierten Klassen. Sencha Touch hat Plugins für beliebte IDEs wie Jetbrains, Visual Studio und Finsternis.

Es gibt einen visuellen App -Builder, Sencha Architect, für die Erstellung von HTML5 -Apps mit Cross -Plattform. Es bietet Suchtfunktionen wie Themen und Befehlszeile Integration.[7]

Stichprobenverbrauch

Bei Sencha Touch wird es bequem, eine Karte in Ihrer Anwendung mit der Ext.Map -Komponente zu verwenden.[8] Die Einbeziehung der JavaScript -Datei "Google Maps API" ist für die unerlässlich Google Maps API arbeiten.[9]

 <html> <Kopf> <Titel>BerührungstestTitel>  <Verknüpfung rel="Stylesheet" Typ="Text/CSS"  href="Sencha-Touch/Ressourcen/CSS/Sencha-Touch-Debug.css" />  <Skript Typ="Text/JavaScript"  src="//maps.google.com/maps/api/js?sensor=true"> </Skript>  <Skript Typ="Text/JavaScript" src="Sencha-Touch/Sencha-Touch-debug.js"> </Skript>  <Skript Typ="Text/JavaScript">  Ext.Konfiguration( {  Onready: Funktion() {  // Erstellen Sie das Stammfeld  Neu Ext.Panel({{  ganzer Bildschirm: Stimmt,  Artikel: [  {  xtyp: "Karte"    }  ]  });  }  }); Skript> Kopf> <Karosserie> Karosserie> html>

Ext.setUp () ist der Ausgangspunkt, um die Anwendung zu initialisieren und das Ansichtsfenster und das Ereignissystem einzurichten.[10]

Vergleich mit nativen Anwendungen

Sencha Touch unterstützt PhoneGap[11] und Apache Cordova APIs für Beschleunigungsmesser, Kamera, Kompass, Geolokalisierung, Erfassung,[12] Inappbrowser, Medien, Benachrichtigung, Begrüßungsbildschirm, Speicher (SQLite)usw., die bisher nur für native Anwendungen zugänglich waren. Sencha Touch nutzt JavaScript, um die meisten UI -Komponenten zu erstellen und CSS von zu ändern Dom Elemente im Fliegen. Mit JavaScript -Motoren Wenn Web -Apps effizienter und schneller als zuvor sind, laufen die Web -Apps fast so reibungslos wie native Apps.

Siehe auch

Verweise

  1. ^ "Ankündigung von Sencha Touch 2.4.2 mit verbessertem Blackberry 10.3 -Erlebnis". sencha.com. 15. Juni 2015.
  2. ^ a b Allen, Sarah; GRAUPERA, VIDAL; Lundrigan, Lee (2010). Pro-Smartphone-plattformübergreifende Entwicklung. Vereinigte Staaten von Amerika: Apress. p. 226. ISBN 978-1-4302-2869-1.
  3. ^ "Sencha Touch 2 Release -Notizen". cdn.sencha.com.
  4. ^ "Ankündigung von Sencha Touch 2.3 - Touch Grid, Cordova -Unterstützung und neue Themen". sencha.com. 1. Oktober 2013.
  5. ^ Clark, John Earl; Johnson, Bryan P. (April 2013). Erstellen mobiler Apps mit Sencha Touch 2. Birmingham UK: Packt Publishing. S. 233, 234. ISBN 978-1-84951-890-1 - via Ebrary.com.
  6. ^ "Touch Guides - Beginnen Sie mit Sencha Touch". docs.sencha.com.
  7. ^ "Sencha Architekt". sencha.com. 25. März 2015.
  8. ^ "Berührung - Sencha Docs". docs.sencha.com.
  9. ^ "IBM Developer Works- Erstellen Sie mobile Webanwendungen mit Sencha Touch".
  10. ^ "Touch Guides - Ereignisse". docs.sencha.com.
  11. ^ "Nutzung von Telefonlücken in Sencha Touch". Telefonegap.com.
  12. ^ "Touch Guides - mit nativen APIs". docs.sencha.com.

Literaturverzeichnis

  • Jesus Garcia und Anthony de Moss, Mitchell Simoens, Sencha Touch in Aktion, ISBN978-1-61729-037-4
  • Ajit Kumar, Sencha Touch Cookbook, ISBN978-1-84951-544-3.
  • Hiren J. Dave, Instant Sencha Touch, ISBN9781782165996.
  • Ajit Kumar, Sencha Touch Cookbook - zweite Ausgabe, ISBN978-1-78216-918-5.
  • Lee Boonstra, praktische Sencha Touch 2: Ein realer App-Ansatz 1st Edition, ISBN978-1-44936-652-0.
  • Ajit Kumar, Sencha MVC Architecture, ISBN978-1-84951-888-8.
  • Matthew David, HTML5 Mobile Websites, Turbo -Lading -HTML5 mit JQuery, Sencha Touch und anderen Frameworks, ISBN978-0-24081-814-6.
  • https://developer.salesforce.com/page/developing_mobile_applications_with_force.com_and_sencha_touch

Externe Links