Sencha Touch - Sencha Touch
![]() Aplikace Sencha Touch s tématem iOS6 | |
Vývojáři | Sencha |
---|---|
Stabilní uvolnění | 2.4.2 / 15. června 2015 |
Napsáno | JavaScript |
Operační systém | Android, iOS, Ostružina, Roznítit, Windows Phone, Tizen |
K dispozici v | Angličtina |
Typ | Knihovna JavaScript |
Licence | GPLv3 nebo komerční |
webová stránka | www |
Sencha Touch je uživatelské rozhraní (Uživatelské rozhraní) Knihovna JavaScript nebo webový rámec, speciálně postavený pro Mobilní web. Může být použit Weboví vývojáři vyvíjet uživatelská rozhraní pro mobilní zařízení webové aplikace ten vzhled a pocit nativní aplikace na podporovaných mobilních zařízeních. Je to založeno na webové standardy jako HTML5, CSS3 a JavaScript. Cílem Sencha Touch je usnadnit rychlý a snadný vývoj mobilních aplikací založených na HTML5, které běží Android, iOS, Okna, Tizen a Ostružina zařízení a současně umožňuje nativní vzhled a chování aplikací.
Historie verzí a podpora
Sencha Touch je produkt společnosti Sencha, který byl vytvořen po populárních projektech knihoven JavaScript Ext JS, jQTouch a Raphaël byly kombinovány. První vydání aplikace Sencha Touch ve verzi 0.90 beta bylo zpřístupněno 17. července 2010. Tato verze beta podporuje zařízení se systémem Android a iOS (na iPhone, ipod touch, iPad ).
Následně byla v listopadu 2010 vydána první stabilní verze 1.0. Verze 1.1.0 přidala podporu pro běžící zařízení BlackBerry OS 6.0.
Poslední vydání, Sencha Touch 2.4.2, vyšlo v červnu 2015[1] a je navržen tak, aby fungoval na následujících prohlížečích a platformách:
- Prohlížeč Android, Google Chrome pro Android
- BlackBerry 10
- Bada Mobilní prohlížeč
- Kindle Fire Prohlížeč
- Tizen
- Windows Phone 8 a Windows 8 IE10
- Mobilní Safari
Neexistují žádné ohlášené plány podpory Firefox Mobile.
Funkce
Architektura MVC
Sencha Touch následuje MVC vzor, který odděluje data aplikace, kontrolní kód a zobrazení. Toto oddělení umožňuje flexibilním a snadno udržovatelným rozsáhlým aplikacím.
Komponenty widgetů a přizpůsobitelná témata
Sencha Touch má vestavěný DOM manipulační rozhraní, které neguje závislost na ostatních UI rámce jako jQuery. Zahrnuje sadu grafické uživatelské prostředí Založené na GUI řízení (nebo komponenty) pro použití v mobilních webových aplikacích. Tyto komponenty jsou optimalizovány pro dotykový vstup. Komponenty jsou:[2]
- Tlačítka se specifickými motivy a efekty zařízení
- Prvky formuláře, například textová pole pro e-mail
- Výběr data a adresa
- Posuvníky, selektory a rozbalovací seznamy
- Komponenta seznamu s posouváním hybnosti a indexovým pruhem
- Minimální sada ikon
- Panely nástrojů a nabídky
- Pohyblivé karty, spodní panely nástrojů
- Součást mapy s podporou pro vícedotykové gesta jako sevření a přiblížení
- Kolotoče
Všechny komponenty lze tematizovat podle cílového zařízení. To se provádí pomocí Sass, jazyk stylů založený na CSS. Některá témata nativního vzhledu jsou Cupertino Classic (pro iOS6.x a nižší), Cupertino (pro iOS 7) a Mountain View (pro Android).[3]
Přechody, animace a adaptivní uživatelské rozhraní
Sencha Touch má osm vestavěných přechodových efektů, včetně posunutí nad nebo pod aktuální prvek, pop, flip a krychle. Podporuje běžná dotyková gesta vytvořená z dotykové události, což jsou Webové standardy ale podporováno pouze Android, iOS a některá dotyková zařízení. Jedná se o klepnutí, dvojité klepnutí, přejetí, posouvání a sevření.
Vzhledem k tomu, že Sencha touch je založen na HTML5, má rozložení, které nabízí, extrémně adaptivní charakter.
Mapování
Sencha Touch také podporuje komponenty mapování včetně koláčových grafů, sloupcových grafů, řadových řádků atd. S vysvětlujícími legendami. Tyto komponenty podporují interaktivitu, jako je např. Sevření a přiblížení. Stejně jako komponenty Grid v ExtJS, Sencha Touch nabízí funkčnost TouchGrid.[4]
Profily
Profilování v aplikaci Sencha Touch umožňuje vytvářet různé profily přizpůsobené různým velikostem obrazovky. Když je aplikace načtena, rozhraní určuje typ zařízení a jeho odpovídající profil určuje, které komponenty a funkce je třeba vyměnit, a konkrétní pohledy a řadiče, které je třeba vyvolat, což vývojáři uloží úkol vytvořit jiný aplikace pro každý typ zařízení.[5]
Základní adresářová struktura aplikace
Aplikace Sencha Touch mají následující základní strukturu souborů a adresářů:[2][6]
Adresář / Soubor | Popis |
---|---|
aplikace | Hlavní adresář, který obsahuje modely, pohledy, řadiče, obchody a profily aplikace |
app.js | Soubor, který obsahuje celkové nastavení aplikace. Odkazy na všechny modely, pohledy, ovladače, obchody a profily najdete zde. Po načtení těchto odkazů se volá hlavní funkce spouštění aplikace. Tato funkce načte první pohled, a proto ji lze považovat za první bod aplikace |
index.html | Hlavní HTML soubor pro aplikaci. To může zahrnovat mnoho stránek / obrazovek pro mobilní aplikaci |
zdroje | Adresář, který obsahuje všechny obrázky, CSS a jakýkoli další externí soubor, který aplikace potřebuje |
app.json | Konfigurační soubor aplikace |
packager.json | Soubor používaný k vytváření nativních balíčků |
ext-touch.js | Toto je Senchova knihovna JavaScript (během fáze vývoje se doporučuje ext-touchdebug.js) |
ext-touch.css | Toto je Senchova knihovna CSS |
Nástroje pro vývojáře a doplňky
Sencha Touch poskytuje IDE pluginy pro snadný vývoj. Mezi výhody těchto pluginů patří generování kódu a automatické dokončování, refaktorování kódu a snadná navigace do rámce codebase a vlastních tříd. Sencha Touch má pluginy pro populární IDE JetBrains, Vizuální studio a Zatmění.
K vytváření aplikací pro různé platformy HTML5 existuje vizuální tvůrce aplikací, Sencha Architect. Poskytuje návykové funkce, jako je motivování a příkazový řádek integrace.[7]
Ukázkové použití
Aplikace Sencha Touch usnadňuje použití mapy ve vaší aplikaci pomocí komponenty Ext.Map.[8] Zahrnutí souboru JavaScriptu "Google Maps API" je nezbytné pro Google mapy API pracovat.[9]
<!DOCTYPE HTML><html><hlava><titul>Stiskněte Test</titul><!-- Sencha Touch CSS --><odkaz rel="styly" typ=„text / css“ href=„sencha-touch / resources / css / sencha-touch-debug.css“ /><!-- Google Maps API --><skript typ=„text / javascript“ src=„//maps.google.com/maps/api/js?sensor=true“></skript><!-- Sencha Touch JavaScript code --><skript typ=„text / javascript“ src=„sencha-touch / sencha-touch-debug.js“></skript><!-- Application script --><skript typ=„text / javascript“> Ext.založit( { připraven: funkce() { // vytvoření kořenového panelu Nový Ext.Panel({ celá obrazovka: skutečný, položky: [ { xtype: "mapa" } ] }); } });</skript></hlava><tělo></tělo></html>
Ext.setup () je výchozím bodem pro inicializaci aplikace, nastavení výřezu a systému událostí.[10]
Srovnání s nativními aplikacemi
Sencha Touch podporuje PhoneGap[11] a Apache Cordova API pro Akcelerometr Fotoaparát, kompas, Geolokace, Zachycení,[12] InAppBrowser, Media, Notification, Úvodní obrazovka, Úložiště (SQLite) atd., které byly dříve přístupné pouze nativním aplikacím. Sencha Touch využívá JavaScript k vytváření většiny komponent uživatelského rozhraní a ke změně CSS DOM prvky za běhu. S JavaScriptové motory jsou efektivnější a rychlejší než dříve, webové aplikace běží téměř stejně hladce jako nativní aplikace.
Viz také
- Víceúčelový webový aplikační rámec pro telefonování
- Porovnání rámců JavaScriptu
- jQuery Mobile
- Tizen
- Android (operační systém)
- iOS
Reference
- ^ „Oznámení Sencha Touch 2.4.2 s vylepšeným zážitkem BlackBerry 10.3“. sencha.com. 15. června 2015.
- ^ A b Allen, Sarah; Graupera, Vidal; Lundrigan, Lee (2010). Pro multiplatformní vývoj chytrých telefonů. Spojené státy americké: APress. str. 226. ISBN 978-1-4302-2869-1.
- ^ „Poznámky k verzi Sencha Touch 2“. cdn.sencha.com.
- ^ „Announcing Sencha Touch 2.3 - Touch Grid, Cordova Support, and New Themes“. sencha.com. 1. října 2013.
- ^ Clark, John Earl; Johnson, Bryan P. (duben 2013). Vytváření mobilních aplikací pomocí Sencha Touch 2. Birmingham UK: Packt Publishing. 233, 234. ISBN 978-1-84951-890-1 - přes Ebrary.com.
- ^ „Touch Guides - Začínáme s Sencha Touch“. docs.sencha.com.
- ^ "Sencha Architect". sencha.com. 25. března 2015.
- ^ „Touch - Sencha Docs“. docs.sencha.com.
- ^ „IBM Developer Works- Vytvářejte mobilní webové aplikace pomocí Sencha Touch“.
- ^ „Touch Guides - Events“. docs.sencha.com.
- ^ „Využití PhoneGap v Sencha Touch“. phonegap.com.
- ^ „Touch Guides - Using Native APIs“. docs.sencha.com.
Bibliografie
- Jesus Garcia a Anthony De Moss, Mitchell Simoens, Sencha Touch v akci, ISBN 978-1-61729-037-4
- Ajit Kumar, Kuchařka Sencha Touch, ISBN 978-1-84951-544-3.
- Hiren J. Dave, Instant Sencha Touch, ISBN 9781782165996.
- Ajit Kumar, Kuchařka Sencha Touch - druhé vydání, ISBN 978-1-78216-918-5.
- Lee Boonstra, Hands-On Sencha Touch 2: Real-World App Approach 1st Edition, ISBN 978-1-44936-652-0.
- Ajit Kumar, Sencha MVC Architecture, ISBN 978-1-84951-888-8.
- Matthew David, mobilní webové stránky HTML5, přeplňování HTML5 pomocí jQuery, Sencha Touch a dalších rámců, ISBN 978-0-24081-814-6.
- https://developer.salesforce.com/page/Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch