Różnice między wybraną wersją a wersją aktualną.
| Both sides previous revision Poprzednia wersja Nowa wersja | Poprzednia wersja | ||
|
pl:dydaktyka:aml:lab7_2016 [2016/12/01 12:20] esimon [Rozbudowa projektu bazowego] |
pl:dydaktyka:aml:lab7_2016 [2019/06/27 15:50] (aktualna) |
||
|---|---|---|---|
| Linia 1: | Linia 1: | ||
| ====== Aplikacje hybrydowe ====== | ====== Aplikacje hybrydowe ====== | ||
| - | ====== Wstęp -- WebView ====== | + | ====== Wstęp - WebView ====== |
| + | - Stwórz aplikację android, która będzie skąłdała sie z jednej aktywności, zawierajacej tylko WebView. | ||
| + | - Umieść w swojej aplikacji poniższy zegar: http://alexanderbrevig.github.io/jsBinClock/ | ||
| + | - Odszukaj jaką grę w HTML5/Javascript i spróbują ją osadzić w całości w Webview. Jak poradzić sobie z CSS i innymi zewnętrznymi zasobami? | ||
| ====== Sencha Touch ====== | ====== Sencha Touch ====== | ||
| ===== Powtórka ===== | ===== Powtórka ===== | ||
| - | - Zapoznaj się z [[http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html/|kuchennym zlewem]]¹ [[http://www.sencha.com/products/touch/|Senchy]]. | + | - Zapoznaj się z [[https://cdn.sencha.com/touch/sencha-touch-2.3.1a/built-examples/kitchensink/index.html|kuchennym zlewem]]¹ [[http://www.sencha.com/products/touch/|Senchy]]. |
| - 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. | - 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? | - Otwórz aplikację na różnych urządzeniach/w różnych przeglądarkach bazujących na WebKit; czy dostrzegasz różnice w interfejsie? | ||
| Linia 22: | Linia 24: | ||
| ==== Stworzenie bazowego projektu ==== | ==== Stworzenie bazowego projektu ==== | ||
| - | - Pobrać i zainstalować Seancha Touch 2 i Cmd | + | - Pobrać i zainstalować Seancha Touch 2 i Cmd: [[http://www.sencha.com/products/touch/download/sencha-touch-2.3.1/3015|Download]] |
| - | * [[http://www.sencha.com/products/touch/download/sencha-touch-2.3.1/3015|Download]] | + | - Zaintalować Node.js: <code>sudo apt-get install nodejs npm nodejs-legacy</code> |
| - | * <code>sudo apt-get install nodejs npm nodejs-legacy</code> | + | |
| - Następnie, korzystając z linii komend, wygenerować przykładową aplikację: <code>sencha -sdk <ścieżka_do_sdk_senchy> generate app <nazwa_aplikacji> <katalog_aplikacji></code> | - Następnie, korzystając z linii komend, wygenerować przykładową aplikację: <code>sencha -sdk <ścieżka_do_sdk_senchy> generate app <nazwa_aplikacji> <katalog_aplikacji></code> | ||
| - Przejrzyj wygenerowaną zawartość i porównaj z [[http://docs.sencha.com/cmd/guides/touch/cmd_app.html#touch-_-cmd_app_-_understanding_your_application_s_structure|opisem zawartości aplikacji]] | - Przejrzyj wygenerowaną zawartość i porównaj z [[http://docs.sencha.com/cmd/guides/touch/cmd_app.html#touch-_-cmd_app_-_understanding_your_application_s_structure|opisem zawartości aplikacji]] | ||
| Linia 102: | Linia 103: | ||
| </code> | </code> | ||
| - Dodaj ''HelloWorld.store.NewsStore'' do ''requires'' w ''Main.js'' | - 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:<code> |
| + | 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'),">Geist</a>"].join("")); | ||
| + | } | ||
| + | </code> | ||
| + | - Zamiast statycznych danych, umieszczonych w polu **data** w NewsStore, użyj Proxy umozliwiającego wybranie danych z newsapi. zmodyfikuj Store, by wyglądał jak poniżej:<code> | ||
| + | Ext.define('HelloWorld.store.NewsStore', { | ||
| + | extend: 'Ext.data.TreeStore', | ||
| + | requires: ['Ext.data.proxy.Ajax'], | ||
| + | id: 'NewsStore', | ||
| + | config:{ | ||
| + | autoLoad: true, | ||
| + | fields: ['author', 'title', 'description', 'url', { | ||
| + | name: 'leaf', | ||
| + | defaultValue: true | ||
| + | }], | ||
| + | |||
| + | root: { | ||
| + | leaf: false | ||
| + | }, | ||
| + | |||
| + | proxy: { | ||
| + | type: 'ajax', | ||
| + | url: 'https://newsapi.org/v1/articles?source=techcrunch&apiKey=abe648b1a17a46df9609bd7778ba7522', | ||
| + | reader: { | ||
| + | type: 'json', | ||
| + | rootProperty: 'articles' | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | </code> | ||
| + | - Zbuduj aplikację natywną z wykorzystaniem Cordovy | ||
| + | - Może okazać sie, że URL-e się nie ładują (zobacz do log-cata) | ||
| + | - Być może konieczne będzie zainstalowanie pluginu <code>cordova plugin add cordova-plugin-whitelist</code> | ||
| + | - Zbuduj aplikację natywną z wykorzystaniem Phonegapa. | ||
| + | - Załóż konto na https://build.phonegap.com | ||
| + | - W katalogu root swojej aplikacji dodaj plik local.properties z zawartością jak poniżej:<code>phonegap.username=user@domain | ||
| + | phonegap.password=p@ssw0rd</code> UWAGA :!: W pliku ''app.json'' wygenerowanym przez senche pola nazywają sie ''phonegap.remote.user'' i ''phonegap.remote.password'' co jest mylace :!: Ma być jak w przykładzie powyżej. | ||
| | | ||
