Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web development, networking and server security. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Šta je novo u Beta Metro / JS obrascima za VS11


Probna verija Windows 8-ice (ili Win8 beta) je sada dostupna za preuzimanje, zajedno sa odgovarajućim Visual Studio 11 beta . Možete ih preuzeti sa the Developer Center for Metro style Apps, kada sam ih preuzimao jutros, išlo je glatko i radilo dobro. U slučaju da ste zainteresovani, skinuo sam ISO, umesto setup, i ja trenutno pišem ovaj blog u Windows Live Writer-u koji radi unutar WMWare Workstation 8,0 virtualnog uređaja koji radi na Windows 7 OS domaćinu koji radi unutar Boot Camp na mom Macbook Pro. Kao što je neko rekao jutros: "To je puno VM-a!" Možda je tako, ali Win8 i VS11 bete rade iznenađujuće dobro unutar mog Inception-box-a.

Metro / JS obrasci za VS11 u BUILD

Ako ste se igrali sa Metro / JS obrascima u VS11 sa BUILD konferencije u septembru, primetićete da su izvedene aplikacije bile u skladu sa Windows 8 UX stilskim smernicama, ali da su dva obrasca - Grip i Split - generisalii velike količine koda. To je zato što su ovo najveće aplikacije koje Microsoft ikada izbacio kao obrasce. Oni svaki imaju višestruke stranice i trude se da budu što jednostavniji, ali karakteristike završavaju Metro stil aplikacije:.

Međutim, kao što su BUILD obrasci primenjeni na Win8 UX, njihov broj kodova nije bio najveći, iz sledećih razloga
  • Obrasci su pokušavali da šifriraju najbolje prakse za potpuno nove modele aplikacija. To će uvek da oduzme vreme za ispravku.
  • Postojalo je taman toliko vremena za ispravku neposredno pre BUILD-a - bilo je ili da se ima odličan kod ili odličan UX, tako da je tim za obrasce izabrao ovo drugo.
  • Tikvan PM koji je u to vreme bio nadležan (ja) odlučio je da je bolji izbor ubacivanje modela podataka u svaku stranicu umesto njihovo centralizovanje. Bila je to loša ideja.

  • Model podataka, raširen preko gotovo svake JS datoteke u obrascima, ponašao se statično. Međutim, velika većina aplikacija dobija svoje podatke dinamički iz nekog spoljašnjeg izvora i obrazac- generisan kod učinio je to vrlo teškim za izvođenje.
  • Bilo je brojnih slučajeva da potrebni obrasci ne postoje direktno na platformi, već u WinJS, IE DOM ili u WinRT datotekama, tako da su obrasci potrebni da obezbede te slučajeve.
Svaki od ovih razloga znači da je funkcionalnost generisanih Grid i Split aplikacija stvorena kao instrukcioni početak za izgradnju vaše vlastite Metro style aplikacije, predpostavljajući da ste bili spremni da se mučite sa mnoštvom kodova. Novi obrasci u Win8 beta rešiće gotovo svaki od tih problema.

Get-VS-11-BetaMetro / JS obrasci za VS11 Beta


Out of the box, Metro / JS obrasci u VS11 beta (dostupni danas, 29. februara 2012.), postaju sve bolji kako postaju složeniji. Hajde da počnemo jednostavno i da se usput unapređujemo.

Blank Aplikacija


Blank Aplikacija je gotovo najmanja Metro/JS aplikacija koju možete napravti, osim što uključuje referencu za Microsoft Windows Library za JavaScript (takođe poznatu kao WinJS)


I da bude jasno, to je posve nova pogodnost. Uključivanje WinJS kao referencu umesto ubacivanja koda u svaki projekta znači da MS može preneti jednu zajedničku implementaciju umesto da svaka aplikacija u memoriji duplira kod. Ako želite kopirati kod u svoj ​​projekat, to možete učiniti, ali ćete takođe morati da ažurirate URL reference za JS i CSS datoteke iz vaše HTML datoteke, kao što je ovaj isečak iz napravljenog default.html-a:

default.html
  1. <!-- WinJS references -->
  2. <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
  3. <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
  4. <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>


Uz novu sintaksu sa vodećim dvostrukim crtama, jer je broj WinJS datoteka daleko manji u Beta. Sada je samo base.js i ui.js, što omogućava lako odlučivanje koji(e) želite i kojim redom želite da ih uključite, popravljajući čest problem u BUILD bitovima.

Jedna druga stvar koja je nova u Blank Application obrascu je da postoje jezgra za izvršavanje tomb-stoning radi lakšeg čuvanja i obnavljanja vaše aplikacione sesije u default.js:

default.js
  1. var app = WinJS.Application;
  2.  
  3. app.onactivated = function (eventObject) {
  4.     if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
  5.         if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
  6.             // TODO: This application has been newly launched. Initialize
  7.             // your application here.
  8.         } else {
  9.             // TODO: This application has been reactivated from suspension.
  10.             // Restore application state here.
  11.         }
  12.         WinJS.UI.processAll();
  13.     }
  14. };
  15.  
  16. app.oncheckpoint = function (eventObject) {
  17.     // TODO: This application is about to be suspended. Save any state
  18.     // that needs to persist across suspensions here. You might use the
  19.     // WinJS.Application.sessionState object, which is automatically
  20.     // saved and restored across suspension. If you need to complete an
  21.     // asynchronous operation before your application is suspended, call
  22.     // eventObject.setPromise().
  23. };


Upravljanje završenim stanjem u aktiviranoj radnji na liniji 3 i manipulator radnje kontrolne tačke na liniji 16 za reaktivaciju i čuvanje vašeg primenjenog stanja.

I, konačno, zgodni TODO komentari su nešto što ćete pronaći raštrkano po obrascima zasnovano na temelju upotrebljivosti povratne informacije, sprovedene kako bi se utvrdilo u čemu je programerima stvarno potrebna pomoć pri dodavanju svojih funkcionalnosti aplikacijama.

Fixed Layout Application


Podižući skalu složenosti, Fixed Layout Application obrazac je namenjen da uradi upravo ono što govori - osigurava tačku iskakanja za aplikacije koje su logički fiksirane forme Srž ovog koda je upotreba ViewBox kontrole u default.html:

default.html
  1. <body>
  2.     <div data-win-control="WinJS.UI.ViewBox">
  3.         <div class="fixedlayout">
  4.             <p>Content goes here</p>
  5.         </div>
  6.     </div>
  7. </body>


Linija 2 maskira sadržaj aplikacije u ViewBox kontroli, koja će sve unutar nje dovesti do veličine sadržaja koji je definisan u default.css datoteci u fixedLayout stilu:

default.css
  1. .fixedlayout {
  2.     -ms-grid-columns: 1fr;
  3.     -ms-grid-rows: 1fr;
  4.     display: -ms-grid;
  5.     height: 768px;
  6.     width: 1024px;
  7. }


Videćete u linijama 5 i 6 da je visina i širina div sadržana u ViewBox-e 768x1024, što znači da se sadržaj može biti kreiran koristeći apsolutno pozicioniranje i dimenzioniranje. Zadatak ViewBox-a je da sa promenom veličine aplikacije , bilo da se promenila rezolucija na računaru ili da se češće menja aplikacija između krajolika, portreta, prelomljene i pune veličina, ViewBox će skalirati sadržaj da bi zauzeo što je više moguće mesta, održavajući razmere konstantnom i razmeravanje sadržaja takvo da aplikacija sama po sebi može smatrati sebe kao logičnih 768 x 1024(ili bilo koje veličine da je div). To je vrlo zgodno za izgradnju stvari kao što su igrice u kojima želite skaliranje, ali generalno bez uvećavanja - želite da kontrolišete gde su Scrabble pločice ili parčići Tic-Tac-Toe-a i to je mnogo lakše učiniti sa fiksnom veličinom.

I sada kada da sam ga opisao, reći ču vam da je ovaj obrazac jedini koji je strukturno identičan i za BUILD i za Beta. Ipak, koristan je.

Navigaciona aplikacija


Sledeći na lestvici je Navigation Application obrazac, gde smo dobili Back tipku i podršku za premeštanje HTML fragmenata u i iz DOM baš kao da je korisnik logički orijentisao od strane do strane. U BUILD bitovima, ova navigaciona funkcionalnost smeštena je u default.js datoteku, ali u Beta, default.js je ista kao i jednostavniji obrasci. Umesto toga, navigaciona funkcionalnost je smeštena u novu datoteku: navigator.js. Razlog zbog kog je ova datoteka razdvojena jeste taj da ukoliko želite da sprovedete drugačiju navigacionu politiku, npr. MVC, onda je to datoteka sa kojom treba da počnete. Nadalje, sve dok ova funkcionalnost treba biti usmerena na uključivanje u WinJS, još nije sasvim "pečena", što znači da je MS još nije odlučio da je to "način’’ za izradu navigacije.

Ipak, to je još uvek " način " za pravljenje navigacije u Metro / JS aplikaciji i to prilično koristan. Esencijalno za njegov način rada je to da postoji jedinstven PageControlNavigator u default.html datoteci koji drži stranice dok se menjaju . default.html postoji takođe gde je sadržan i navigator.js.

default.html
  1. <script src="/js/navigator.js"></script>
  2. ...
  3. <div id="contenthost" data-win-control="Application7.PageControlNavigator" data-win-options="{home: '/html/homePage.html'}"></div>


Navigator.js datoteka definiše PageControlNavigator kontrolu, koja zadržava logičke stranice dok korisnik klikće okolo po aplikaciji. Home parametar je mesto od kog treba započeti navigaciju. Nalazite se na stranici, koja je stvarno mapirana između HTML datoteke i skupa događaja za obradu tokom trajanja te stranice:

homePage.js
  1. // This function is called whenever a user navigates to this page. It
  2. // populates the page elements with the app's data.
  3. function ready(element, options) {
  4.     // TODO: Initialize the fragment here.
  5. }
  6.  
  7. WinJS.UI.Pages.define("/html/homePage.html", {
  8.     ready: ready
  9. });


Naravno, navigacija na početnoj stranici će biti retka u odnosu na navigaciju između stranica. Najlakši način da biste dobili novu stranicu i dodali je svojoj ​​aplikaciji jeste da desnom tipkom miša kliknete na vaš projekt u Solution Exploreru i odaberite Add | New Item:


Poslednja od tri stavke obrasca je za kostur ugovora implementacije, koji je izvan domena ovog bloga, ali prva je Page Controle, što nam daje trijadu HTML, JS i CSS koji se uklapaju tačno u navigacijski model pružen od strane PageControlNavigator kontrole: :

page2.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>page2</title>
  6.  
  7.     <!-- WinJS references -->
  8.     <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
  9.     <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
  10.     <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
  11.    
  12.     <link href="page2.css" rel="stylesheet">
  13.     <script src="page2.js"></script>
  14. </head>
  15. <body>
  16.     <div class="page2 fragment">
  17.         <header aria-label="Header content" role="banner">
  18.             <button class="win-backbutton" aria-label="Back" disabled></button>
  19.             <h1 class="titlearea win-type-ellipsis">
  20.                 <span class="pagetitle">Welcome to page2</span>
  21.             </h1>
  22.         </header>
  23.         <section aria-label="Main content" role="main">
  24.             <p>Content goes here.</p>
  25.         </section>
  26.     </div>
  27. </body>
  28. </html>

 

page2.cs
  1. .page2 p {
  2.     margin-left: 120px;
  3. }

 

page2.js
  1. // This function is called whenever a user navigates to this page. It
  2. // populates the page elements with the app's data.
  3. function ready(element, options) {
  4.     // TODO: Initialize the fragment here.
  5. }
  6.  
  7. function updateLayout(element, viewState) {
  8.     // TODO: Respond to changes in viewState.
  9. }
  10.  
  11. WinJS.UI.Pages.define("/page2.html", {
  12.     ready: ready,
  13.     updateLayout: updateLayout
  14. });


Navigacja do ove nove kontrole definisane ovim datotekama je jednostavna stvar pozivajući navigacionu metodu:

homePage.html
  1. <a onclick="WinJS.Navigation.navigate('/page2.html')">Page 2</a>


Što se tiče korisnika tiče, anchor tag prikazuje se kao bilo koji link:


Klikom na "Stranica 2" okida onclick događaj, koji poziva navigacionu metodu, prolazeći do HTML datoteka i uzrokujući da Page Controlu bude definisana u page2.html, page2.js i page2.css da bude učitana:


Osim što god da je sadržaj na vašoj Page Control, primetićete da se Back tipka automatski pojavi. Back tipka upravlja navigacijom putem klika, dodirivanja tipke pretraživača;. Ctrl + Strelica lijevo i Ctrl + strelica desno rade kao Back i Forward.

Grid i Split Aplikacija


U ovom trenutku, mi smo pokrili gotovo sve osnovne koncepte koji čine Grid i Split aplikaciju: oni uvode WinJS pozivanjem, koriste kontrolu i navigaciju putem Page Control. U stvari, iako Grid aplikacija ima tri stranice i Split aplikacija dve, oni su zapravo samo obrazac za navigaciju sa stranicama za implementaciju Grid i Split aplikacije za koje je MS odlučio da su glavne aplikacione šeme prikladne za Win8. Međutim, šabloni Grid i Split aplikacije imaju dve značajne odlike koje drugi obrasci nemaju:. Podrška za multiple view (višestruki izgled) i centralizovani model podataka

Podrška za multple view stanje znači da kako se aplikaciija pomera se između portreta, pejzaža, full i split, aplikacija samu sebe prilagođava da izgleda dobro dobro u svim stanjima. Upravljanje pregledom oblika uglavnom se barata sa CSS stilovima povezanim sa medijima modovima, kao u Split App’s itemsPage.css:

itemsPage.css
  1. ...
  2. @media screen and (-ms-view-state: snapped) {
  3.     .itemspage .itemslist .win-vertical.win-viewport .win-surface {
  4.         margin-bottom: 30px;
  5.     }
  6. ...



U Metro / JS aplikaciji, MS je obezbedio medijsko ispitivanje iskaza nazvano -ms-view-state, što može biti jedan od četiri stanja izgleda i stilovi u media quiery bloku biće primenjeni kada aplikacija dospe u to stanje. Osim toga, ako želite da upravljate promenom pregleda stanja u JS, to možete učiniti pozivanjem Q event-a u vašem Page Control-u, kao što je ovaj isečak iz itemsPage.js:

itemsPage.js
  1. // This function updates the page layout in response to viewState changes.
  2. updateLayout: function (element, viewState) {
  3.     var listView = element.querySelector(".itemslist").winControl;
  4.     if (viewState === Windows.UI.ViewManagement.ApplicationViewState.snapped) {
  5.         listView.layout = new ui.ListLayout();
  6.     } else {
  7.         listView.layout = new ui.GridLayout();
  8.     }
  9. }


U ovom slučaju, updateLayout se poziva kada je kontrola inicijalno kreirana i kako se aplikacija kreće kroz pregled stanja, tako se može menjati stil rasporeda za ListView kontrolu prikazujući sadržaj stranice:


Landscape vs. Snapped view state layout for the itemsPage ListView control.

Druga važna karakteristika šablona aplikacija Grid Split - a ova karakteristika je nova u Beta bitovima - je centralizovam model podataka a to je tamo odakle dolaze svi podaci za sve stranice. Ovaj model podataka definisan u data.js i sadrži statičku grupu podataka kao što ste upravo videli. Jezgra podataka je izložen od data.js ovako:

data.js
  1. WinJS.Namespace.define("data", {
  2.     items: groupedItems,
  3.     groups: groupedItems.groups,
  4.     getItemsFromGroup: getItemsFromGroup
  5. });



Ove tri člana objekta podataka korišćeni su kroz šablone, npr. u itemsPage.js event handler-u:

itemsPage.js
  1. // This function is called whenever a user navigates to this page. It
  2. // populates the page elements with the app's data.
  3. ready: function (element, options) {
  4.     var listView = element.querySelector(".itemslist").winControl;
  5.     ui.setOptions(listView, {
  6.         itemDataSource: data.groups.dataSource,
  7.         itemTemplate: element.querySelector(".itemtemplate"),
  8.         oniteminvoked: this.itemInvoked.bind(this),
  9.     });
  10.     this.updateLayout(element, Windows.UI.ViewManagement.ApplicationView.value);
  11. },


Uzmite u obzir da se data.groups karakteristika koristi na liniji 6 da bi se izvela operacija povezivanja podataka. To pvezivanje podataka je nasuprot DataSource karakteristika objekta vraćenog iz data.groups, koje je samo po sebi kreirano metodom na WinJS.Binding.List objekta koji drži podatke grupisanih stavki. Ova lista povezivanja, nova karakteristika u WinJS za betu, je ona koja olakšava premeštanje statičkih podataka koji su obezbeđeni šablonima i dinamičkim podacima koje definiše vaša aplikacija.

Lista povezivanja je izvor povezivanja podataka, što znači da ako dodajete stavke u njega on obaveštava bilo kakvu kontrolu koja se dešava da bude vezana za njega. Ovo e posebno od pomoći kada se vaše aplikacije pokreću sa nula podataka, ali morate da pokrenete ListViews tako da se to pokaže čim podaci postanui dostupni (možda iz asinhronog mrežnog poziva)..

Ako otvorite data.js, videćete statičke uzorke podatke:

static sample data
  1. // Each of these sample groups must have a unique key to be displayed
  2. // separately.
  3. var sampleGroups = [
  4.     { key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },
  5.     ...
  6. ];
  7.  
  8. // Each of these sample items should have a reference to a particular
  9. // group.
  10. var sampleItems = [
  11.     { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
  12.     ...
  13. ];


Grupni podaci imaju jedinstveni ključ, naslov, podnaslov, pozadinsku sliku i opis, a to su sve polja od kojih zavisi šablon podataka koji je upotrebljen u aplikacijama Split i Grid The Group (iako ih možete promeniti ako želite). Podatak o stavkama se poziva na grupu kojoj pripada, naslov, podnaslov, opis, pozadinska slikau i sadržaj za samu stavku :.

Kod koji je sadržan u listi vezivanja sa uzorkom podataka igleda ovako: :

statically bound data
  1. var list = new WinJS.Binding.List();
  2. var groupedItems = list.createGrouped(groupKeySelector, groupDataSelector);
  3.  
  4. // TODO: Replace the data with your real data.
  5. // You can add data from asynchronous sources whenever it becomes available.
  6. sampleItems.forEach(function (item) {
  7.     list.push(item);
  8. });



Kako je to razjašnjeno u komentaru, ovaj kod je taj koji ćete najverovatnije želeti da promenite. Umesto uvlačenja statičkih podataka iz sampleItems podataka, želimo da uvučemo stavke asihrono, možda iz RSS feed-a ili dva, baš kao u mom prethodnom post-u:

dynamically bound data
  1. var list = new WinJS.Binding.List();
  2. var groupedItems = list.createGrouped(groupKeySelector, groupDataSelector);
  3.  
  4. // RSS feeds
  5. var feeds = [
  6.     { key: "feed1", title: "Scott Hanselman", subtitle: "a blog", backgroundImage: darkGray, description: "a blog", url: "http://feeds.feedburner.com/ScottHanselman" },
  7.  
  8.     { key: "feed2", title: "Raymond Chen", subtitle: "a blog", backgroundImage: lightGray, description: "a blog", url: "http://blogs.msdn.com/b/oldnewthing/rss.aspx" },
  9.  
  10.     { key: "feed3", title: "Chris Sells", subtitle: "a blog", backgroundImage: mediumGray, description: "a blog", url: "http://sellsbrothers.com/posts/?format=rss" },
  11. ];
  12.  
  13. feeds.forEach(function (feed) {
  14.     WinJS.xhr({ url: feed.url }).then(function (request) { processPosts(feed, request); });
  15. });
  16.  
  17. function processPosts(feed, request) {
  18.     // parse the RSS
  19.     var nodes = request.responseXML.selectNodes("//item");
  20.     for (var i = 0, len = nodes.length; i < len; i++) {
  21.         var node = nodes[i];
  22.         var item = {
  23.             group: feed,
  24.             title: node.selectNodes("title")[0].text,
  25.             subtitle: node.selectNodes("pubDate")[0].text,
  26.             description: "a post",
  27.             content: node.selectNodes("description")[0].text,
  28.             backgroundImage: feed.backgroundImage
  29.         };
  30.         list.push(item);
  31.     }
  32. }


U ovom slučaju, naši grupni podaci su skup RSS feed-ova, pazeći da koriste nazive polja iste grupe tako da ne morate ažurirati šablone podataka u ostatku aplikacije. Kada aplikacija ušitava, i dalje formiramja listu vezivanja, ali umesto da je popunjavam direktno, započinjem asinhroni xhr poziv (WinJS XMLHttpRequest wrapper) za svaki feed, praveći tako stavku za svaki RSS post na koji naiđem po uspešnom završetku. Zato sam ostavio model podataka samog i zato što koristim listu povezivanja to je sve što imam da promenim, i sada je cela aplikacija ažurirana kako bi podržala te podatke :



Strana sa stavkama sa setom feed-ova u šablonu Split aplikacije



Split stranica sa postovovima od odabranog feed-a

Gde smo mi?

Kao što možete videti, Metro / JS obrasci u VS11 beta počinju jednostavno i dodaju karakteristike sa navigacijom, stranice sa posebnim funkcionalnim šablonima, multiple view state podršku i jedinstven model podataka. Glavna razlika u Beta verziji ovih obrazaca je da je kod pojednostavljen, ulepšan i umetnut u WinJS koliko god je to moguće ba bi unutrašnjost vaše aplikacije učinio lepom i jednostavnom za korišćenje kao što je ona spolja.



Published (Last edited): 20-09-2012 , source: http://www.sellsbrothers.com/Posts/Details/12716