To jest stara wersja strony!
Aplikacje hybrydowe
Wstęp -- WebView
Sencha Touch
Powtórka
-
Zauważ, że aplikacja nie działa na IceWeasel (Firefox/Thunderbird/Seamonkey/Waterfox/dowolne [żywioł]+[zwierzę]). Wyciągnij wniosek na temat rynku przeglądarek w środowiskach mobilnych.
Otwórz aplikację na różnych urządzeniach/w różnych przeglądarkach bazujących na WebKit; czy dostrzegasz różnice w interfejsie?
Przejrzyj dostępne komponenty i porównaj kod potrzebny do ich implementacji (przycisk 'Source') z natywnym kodem Javy.
Jakie są przewagi kodu Senchy?
Jeżeli jakieś znalazłeś, zastanów się, czemu rynek jest niezmienne zdominowany przez aplikacje natywne.
Przejrzyj alternatywne rozwiązania międzyplatformowe
Xamarin,
RoboVM.
phonegap,
C/
C++². Czy któreś z nich wydaje się być pozbawione wad Senchy?
¹ Kitchen Sink, used in Software development to denote a permanent, ever growing test and demo environment which showcases all the functionalities of a software product en.wikipedia.org
² blame MS
Ćwiczenia
Stworzenie bazowego projektu
Pobrać i zainstalować Seancha Touch 2 i Cmd
-
sudo apt-get install nodejs npm nodejs-legacy
Następnie, korzystając z linii komend, wygenerować przykładową aplikację:
sencha -sdk <ścieżka_do_sdk_senchy> generate app <nazwa_aplikacji> <katalog_aplikacji>
-
Uruchomienie aplikacji
Podgląd na desktopie
Uruchom serwer Senchy
sencha fs web -p 8888 start -map <path/to/your/application/folder>
-
Zmodyfkuj zawartość Pliku app/view/Main.js
w elemencie html
tak aby aplikacja wyświetlała 'Hello World
'
Usuń kartę 'Get Started
' i zamiast niej wstaw kartę 'News
Zmień ikonę karty News na info
Uruchomienie w emulatorze
Upewnij się że pluginy
cordova
i
phonegap
sa zainstalowane:
sudo npm install -g cordova
Przygotuj plik konfiguracyjny do budowy natywnej aplikacji
sencha cordova init re.geist.sencha.hello HelloWorld
Obejrzyj plik
app.json
i zmodyfikuj poniższy fragment, tak aby możliwe było zbudowanie natywnej aplikacji tylko dla Androida:
"builds": {
"web": {"default": true},
"native": {
"packager": "cordova",
"cordova" : {
"config": {
// Uncomment the line below and add the platforms you wish to build for
//"platforms": "ios android",
"id": "re.geist.sencha.hello",
"name": "HelloWorld"
}
}
}
},
Zbuduj aplikcję natywną poleceniem
sencha build app <nazwa-build-z-app.json>
Uruchom na emulatorze przy pomocy polecenia adb (jak to zrobić:
no jak?)
Uruchomienie na urządzeniu fizycznym
Analogicznie jak powyżej, tylko z podłączonym urządzeniem fizycznym
Rozbudowa projektu bazowego
Uzyskaj klucz api np. do serwisu newsowego:
https://newsapi.org/ i zobacz jak wygląda odpowiedź na przykładowe zapytanie
Dodaj widok
nestedList
do zakładki
News
items [
...
{
title: 'News',
iconCls: 'info',
xtype: 'nestedlist',
title: 'News',
}
Dodaj Store o nazwie
NewsStore
do katalogu /app/store:
Ext.define('HelloWorld.store.NewsStore', {
extend: 'Ext.data.TreeStore',
requires: ['Ext.data.proxy.JsonP'],
id: 'NewsStore',
config:{
autoLoad: true,
fields: ['author', 'title', 'description', 'url', {
name: 'leaf',
defaultValue: true
}],
root: {
leaf: false
},
data: [
{author: 'Szymon Bobek',title:'Wielkie dzieło',description:'Blabla bla blabla blabla',url:'geist.re'},
{author: 'Krzysztof Kluza',title:'Wiekopomne dzieło',description:'Blabla blabl blabalbal blabla',url:'geist.re'}
],
}
});
Dodaj Store do
app.js
:
...
name: 'HelloWorld',
requires: [
'Ext.MessageBox'
],
stores:[
'HelloWorld.store.NewsStore'
],
...
Dodaj HelloWorld.store.NewsStore
do requires
w Main.js
Dodaj obsługę tego Stora w zakładce news. Oraz dodaj opcję „wyżwietl wiecej po kliknięciu na tytuł”. definicja zakładki powinna wyglądać tak:
title: 'News',
iconCls: 'info',
xtype: 'nestedlist',
store: 'NewsStore',
title: 'News',
displayField: 'title',
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(
[post.get('description'),"</b>See more: <a href=",post.get('url'),">TechCrunch</a>"].join(""));
}