atd10 - winjs izlazi na globalnu pozornicu
DESCRIPTION
Najbitnija novost u WinJS 3.0 je podrška za najpopularnije desktop i mobilne preglednike. Sva ljepota i elegancija WinJSa donedavno ograničena samo na Windows ekosustav, sada postaje dostupna posvuda, pa čak i u hibridnim aplikacijama izrađenim pomoću Apache Cordove. Predefinirane kontrole su bitno poboljšane i prilagođene različitim veličinama ekrana, a kad se tome još pribroji nova modularizacija koda za lakše održavanje i bolje performanse, stvarno nema isprike da vaša iduća web aplikacija ne koristi WinJS. Na početku predavanja će biti kratak uvod u WinJS i novosti u verziji 3.0 nakon čega će se kroz više demoa pokazati kako sve to funkcionira u praksi i na različitim uređajima.TRANSCRIPT
![Page 1: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/1.jpg)
![Page 2: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/2.jpg)
WinJS izlazi na globalnupozornicu
Matija Šmalcelj
Sr. SDE
RealNetworks
![Page 3: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/3.jpg)
![Page 4: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/4.jpg)
WinJS
• HTML / CSS / JavaScript
• v1.0 za Windows 8
• v2.0 za Windows 8.1, v1.0 za Xbox, v2.1 za Windows Phone
• open source: https://github.com/winjs/winjs
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
![Page 5: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/5.jpg)
![Page 6: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/6.jpg)
WinJS
• Core (klase, promisi, namespaces)
• App model
• Data binding
• Preko 20 kontrola spremnih za korištenje
• Predefinirani CSS
• Animacije
• Utility klase
![Page 7: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/7.jpg)
WinJS• Podržava druge biblioteke, npr. jQuery, AngularJS
• Dizajniran za dodir
• Svijetla i tamna shema boja
![Page 8: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/8.jpg)
Promisi
WinJS.xhr(options).then(
)
function completed(request) {return doSomethingElse(request.result);
}, null,function progress(request) {
// osvjezi progress bar}
.done(function(result) {// sve gotovo
}, function(error) // doslo je do greske
});
![Page 9: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/9.jpg)
WinJS 3.0
• Podržani svi važniji preglednici
• Modularizacija koda
• Ujednačen izgled na različitim platformama
![Page 10: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/10.jpg)
Ujednačen izgled
![Page 11: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/11.jpg)
Ujednačen izgled
![Page 12: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/12.jpg)
DEMO
![Page 13: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/13.jpg)
Cross-…
• …browser
• …platform
• Podrška za Apache Cordova biblioteku
![Page 14: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/14.jpg)
Apache Crodova (PhoneGap)
![Page 15: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/15.jpg)
DEMO
![Page 16: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/16.jpg)
Modularizacija
![Page 17: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/17.jpg)
Resursi
• http://try.buildwinjs.com/
• https://github.com/winjs/winjs
• Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition
![Page 18: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/18.jpg)
I za kraj…
![Page 19: ATD10 - WinJS izlazi na globalnu pozornicu](https://reader033.vdocument.in/reader033/viewer/2022052602/559b87791a28ab67158b457b/html5/thumbnails/19.jpg)
Pitanja?