मुझे लगता है कि यह लेख उन लोगों के लिए दिलचस्प होगा जो HTML और जावास्क्रिप्ट को जानते हैं और जानते हैं, लेकिन Win8 के लिए विकासशील अनुप्रयोगों में अपने हाथ की कोशिश नहीं की है। इस लेख के माध्यम से जाने और इसे एनकोड करने के लिए, आपके पास वीएस 2013 होना चाहिए।

लेख विन 8.1 मंच के लिए विकासशील अनुप्रयोगों के प्रमुख पहलुओं पर चर्चा करेगा। अर्थात्:

अनुप्रयोग जीवन चक्र
वादा;
डेटा स्रोत के साथ काम करें;
अपने खुद के नियंत्रण बनाना;
टेम्पलेट्स के साथ काम करें;
टाइल-एस;
शेयर;

उन लोगों के लिए जो पढ़ना पसंद नहीं करते हैं, जैसा कि मैंने, उदाहरण के लिए, मैंने github.com/Sigura/HubraWin पर स्रोत कोड पोस्ट किया है,

सभी पहचाने गए विषयों का खुलासा करने के लिए, मैंने एक एप्लिकेशन बनाया जो संपर्कों की एक सूची प्रदर्शित करेगा।

यदि आप पहले से ही स्रोत को देख रहे हैं, तो ध्यान दें कि मैंने default.js को थोड़ा बदल दिया है ताकि एप्लिकेशन लॉन्च करने के लिए कोई सामान्य कोड न हो और इसे app.js. में बाहर रखा जाए। केवल डिफ़ॉल्ट सेटिंग्स छोड़कर सीधे default.js में शुरू करें। मैंने "सुविधाओं" और एक संदेश बस के एक मामूली सेट के साथ WinJs.Utilities को भी जोड़ा।

वस्तुओं के साथ काम करना

WinJS स्पेस में, क्लास बनाने के तरीकों का एक विशेष सेट है, इसमें विधियाँ जोड़ें, विस्तार करें और इसे उपलब्ध कराएँ।

उदाहरण के लिए, एक वर्ग घोषणा - संदेश बस:

//  ,        //     ,  -    //      (function (winJs) { 'use strict'; //   var bus = winJs.Class.define(winJs.Utilities.defaultConstructor(), { init: function (element, options) { var me = this; } }); //         winJs.Class.mix(bus, winJs.Utilities.eventMixin); //      winJs.Namespace.define('HabraWin', { MessageBus: bus }); })(WinJS);

WinJS आवेदन

वास्तव में, यह एक वेब एप्लिकेशन है जिसकी अपनी होस्टिंग (WWAHost.exe) है। WinJS, एप्लीकेशन, विंडोज, ... नेमस्पेस और WinJS.UI में नियंत्रण का एक सेट के साथ ओएस संसाधनों और अनुप्रयोगों के साथ काम करने के लिए स्वयं की रूपरेखा।
मैंने अन्य परियोजनाओं में इसका उपयोग करने के लिए आवेदन के लिए अपनी कक्षा बनाई। सेटिंग्स के मानक सेट के अलावा, यह वर्ग लॉन्च प्रोसेसिंग (स्टार्टअप जानकारी के साथ सक्रिय), काम की समाप्ति और अन्य चीजों (ऑनचेकपॉइंट, पहले-शुरू, बाद शुरू) के लिए इवेंट बनाता है।

आवेदन वर्ग

; ( फ़ंक्शन ( winJs , habraWin ) {

var app = winJs। क्लास। परिभाषित ( winJs। उपयोगिताएँ । defaultConstructor ( ) , {
init : फ़ंक्शन ( विकल्प ) {
var me = this ;
var ActiveEventType = 'सक्रिय' ;
var ui = विकल्प। उई ;
var अनुप्रयोग = विकल्प। ऐप ;
var nav = विकल्प। नौसेना ;
var सक्रियण = विकल्प। सक्रियण ;
var अनुसूची = विकल्प। अनुसूची ;

आवेदन। addEventListener ( ActiveEventType , function ( args ) {

मुझे। dispatchEvent ( ActiveEventType , {
दयालु : args। विस्तार से । दयालु ,
isReactivated : args। विस्तार से । पिछला एक्सियनियनस्टेट === सक्रियण। ApplicationExecutionState । समाप्त,
parevEventDetails : आर्ग्स। विस्तार
} ;

अगर ( args। विस्तार । तरह ! == सक्रियण। सक्रियकरण । लॉन्च । )
वापसी;

नव। इतिहास = आवेदन। अधिवेशन इतिहास || { } ;
नव। इतिहास । वर्तमान । initialPlaceholder = true ;

ui। अक्षमताएं ( ) ;
var p = ui। processAll ( ) । तब ( समारोह ) {
वापसी की नाव। नेविगेट करें ( नौसेना स्थान । habraWin। नेविगेटर । घर , नौसेना । राज्य ) ;
} ) । तब ( समारोह ) {
वापसी कार्यक्रम । requestDrain ( अनुसूची । प्राथमिकता । उपर्युक्त + 1 ) ;
} ) । तब ( समारोह ) {
ui। enableAnimations ( ) ;
} ;

आर्ग। setPromise ( p ) ;
} ;

आवेदन। oncheckpoint = function ( args ) {
मुझे। प्रेषण ( 'oncheckpoint' , { prevEvent : args } ) ;
आवेदन। अधिवेशन इतिहास = नौसेना। इतिहास ;
} ;
} ,
प्रारंभ : फ़ंक्शन ( ) {
var me = this ;

मुझे। प्रेषण ( 'पहले-शुरू' , मुझे ) ;

मुझे। विकल्प । ऐप । शुरू ( ) ;

मुझे। प्रेषण ( 'बाद शुरू' , मुझे ) ;

}
} ;

winJs। क्लास। मिक्स ( ऐप , winJs। यूटिलिटीज ; ईवेंटमिक्सिन ) ;

winJs। नाम स्थान । परिभाषित ( 'आवेदन' , {
उदाहरण : ऐप
} ;

} ) ( WinJS , HabraWin ) ;

तब एप्लिकेशन का लॉन्च (default.js) इस तरह दिखेगा:

 ; (function (application, winJs, habraWin, windows, window) { 'use strict'; winJs.Binding.optimizeBindingReferences = true; //    var app = new application.Instance({ activation: windows.ApplicationModel.Activation, app: winJs.Application, nav: winJs.Navigation, sched: winJs.Utilities.Scheduler, ui: winJs.UI }); //       WinJS winJs.bus = new habraWin.MessageBus(); //   window.app = app; //  app.start(); })(Application, WinJS, HabraWin, Windows, window);

पेज नेविगेशन

मैं एक "पेज" पर अनुप्रयोगों का समर्थक हूं। WinJS आधुनिक उपयोगकर्ता इंटरैक्शन परिदृश्यों को लागू करने के लिए सुविधाओं का एक समृद्ध सेट प्रदान करता है।
वेब उर्फ WinJS एप्लिकेशन को नेविगेशन के इतिहास, पेज द्वारा पेज, जीवन चक्र के रखरखाव के लिए एक अलग वस्तु की आवश्यकता होती है।
यानी प्रत्येक पृष्ठ पर संक्रमण के बाद हमें इसके तत्व में प्रस्तुत करने की आवश्यकता होगी, पिछले एक से छुटकारा पाने के लिए सुनिश्चित करें, अर्थात् ईवेंट श्रोताओं, खुले संसाधनों आदि को हटा दें।
पृष्ठ का जीवन चक्र कैसा दिखना चाहिए:

संसाधनों का उपयोग, बडिंग (संसाधित),
जब पृष्ठ पर सभी नियंत्रण तैयार हैं और संसाधन लागू किए गए हैं, तो प्रारंभ (तैयार) शुरू हो जाता है, यहां आप कर सकते हैं:
1. AppBar सहित पृष्ठ नियंत्रण घटनाओं की सदस्यता लें,
2. कुछ काम करने के लिए, जैसे कि पहली खोज,
प्रसंस्करण पृष्ठ ताज़ा, उदाहरण के लिए, जब आकार बदल रहा हो,
सभी ईवेंट हैंडलर और अन्य संसाधनों को साफ़ करने के लिए पेज अनलोडिंग।

नेविगेशन सेवा के लिए नियंत्रण

( फ़ंक्शन ( winJs , habraWin ) {
'सख्त का उपयोग करें' ;

winJs। नाम स्थान । परिभाषित ( 'हैब्रविन' , {
PageNavigatorControl : winJs। क्लास। परिभाषित (
फ़ंक्शन ( तत्व , विकल्प ) {
var nav = winJs। नेविगेशन;

यह ._ तत्व = तत्व || दस्तावेज़। createElement ( 'div' ) ;
यह । appendChild ( यह .createPageElement ( ) ) ;

यह । घर = विकल्प। घर ;

यह ._वेंटहैंडलररवर = [ ] ;

यह । addRemovableEventListener ( नौसेना , 'नेविगेट' , यह ._avigating। बाइंड ( यह ) , गलत ) ;
यह । addRemovableEventListener ( नेवी , ' नेवीगेटेड ' , यह ._navigated। बाइंड ( यह ) , गलत ) ;

खिड़की। onresize = यह ._resized। बाँध ( यह ) ;

habraWin। नाविक = यह ;
} {
addRemovableEventListener : function ( e , eventName , हैंडलर , कैप्चर ) {
var वह = यह ;

ई। addEventListener ( EventName , हैंडलर , कैप्चर ) ;

that._eventHandlerRemover। धक्का ( समारोह ) {
ई। RemoveEventListener ( eventName , हैंडलर ) ;
} ;
} ,
घर : '' ,
_भुक्ति : अशक्त ,
_lastNavigationPromise : winJs। वादा। के रूप में ( ) ,
_lastViewstate : 0 ,

पेजकंट्रोल : {
get : function ( ) {इसे वापस करें । pageElement और& यह । PageElement । winControl ; }
} ,

पृष्ठ-निर्धारण : {
get : function ( ) {इसे वापस करें । FirstElementChild ; }
} ,

निपटान : फ़ंक्शन ( ) {
अगर ( यह।
वापसी;
}

this ._disposed = true ;
winJs। उपयोगिताएँ। disposeSubTree ( यह ._element ) ;
के लिए ( var i = 0 ; मैं < यह ._वेंटहैंडलर रीमूवर। लंबाई ; i ++ ) {
यह ._वेंटहैंडलर रीमूवर [ i ] ( ) ;
}
this ._eventHandlerRemover = null ;
} ,

_createPageElement : फ़ंक्शन ( ) {
var तत्व = दस्तावेज। createElement ( 'div' ) ;
तत्व। setAttribute ( 'dir' , window। getComputedStyle ( यह ._element , null ) दिशा । ) ;
तत्व। शैली । स्थिति = 'पूर्ण' ;
तत्व। शैली । दृश्यता = 'छिपा हुआ' ;
तत्व। शैली । चौड़ाई = '100%' ;
तत्व। शैली । ऊँचाई = '100%' ;
वापसी तत्व ;
} ,

_getAnimationElements : फ़ंक्शन ( ) {
अगर ( यह पृष्ठकंट्रोल और & nbsp ; यह पृष्ठ है । पृष्ठ पर जाएँ । GetAnimationElements ) {
इसे वापस करो । पेजकंट्रोल getAnimationElements ( ) ;
}
इसे वापस करो । पेजईलमेंट ;
} ,

_navigated : फ़ंक्शन ( ) {
यह । PageElement । शैली । दृश्यता = '' ;
winJs। यूआई। एनीमेशन। enterPage ( यह ._getAnimationElements ( ) ) । किया ( ) ;
} ,

_navigating : फ़ंक्शन ( args ) {
var newElement = यह ._createPageElement ( ) ;
यह । appendChild ( newElement ) ;

यह ._lastNavigationPromise। रद्द ( ) ;

var me = this ;
यह ._lastNavigationPromise = winJs। वादा। as ( ) । तब ( समारोह ) {
winJs वापस करें। यूआई। पेज। रेंडर ( args। डिटेल । location , newElement , args। डिटेल । State ) ;
} ) । तब ( फ़ंक्शन पैरेंटमेंट ( नियंत्रण ) {
var OldElement = मुझे। पृष्ठकरण ;
अगर ( पुराना है। winControl ) {
अगर ( पुराना है। winControl । अनलोड ) {
oldElement। winControl । उतराई ( ) ;
}
oldElement। winControl । निपटान ( ) ;
}
oldElement। जनक । removeChild ( oldElement ) ;
oldElement। इनरटेक्स्ट = '' ;
} ;

आर्ग। विस्तार से । setPromise ( यह ._lastNavigationPromise ) ;
} ,

_resized : फ़ंक्शन ( args ) {
अगर ( यह । पृष्ठकंट्रोल और & quot ; यह पृष्ठ । कांट्रॉल । अपडेट लाइएट ) {
यह । पेजकंट्रोल अद्यतन करें । कॉल ( यह । पेजकंट्रोल , यह । पेजइमेंट ) ;
}
}
}
)
} ;
} ) ( WinJS , HabraWin ) ;

पेज कोड

( फ़ंक्शन ( जीत ) {
'सख्त का उपयोग करें' ;

winJs। यूआई। पेज। डिफाइन ( '/ पेजेस / हूब / हिंदी') , {
संसाधित : फ़ंक्शन ( तत्व ) {
वापसी जीत। संसाधन । processAll ( एलिमेंट ) ;
} ,
क्लासनेम : 'क्लाइंट-सर्च-हब' ,
तैयार : फ़ंक्शन ( तत्व , विकल्प ) {
यह । initEnv ( ) ;

यह । initAppBar ( एलिमेंट ) ;
यह । सदस्यता ( तत्व ) ;

यह । setFormValues ( विकल्प ) ;

यह । खोज ( ) ;
} ,
initAppBar : फ़ंक्शन ( तत्व ) {
var me = this ;
मुझे। appBar = तत्व। querySelector ( '#appbar' ) । winControl ;

यह । addRemovableEventListener ( me। appBar । getCommandById ( 'स्पष्ट' ) , 'क्लिक' , फंक्शन ( ) {
winJs। बस । प्रेषण ( 'स्पष्ट-आदेश' ) ;
} , झूठी ) ;
} ,
सदस्यता : समारोह ( ) {
var me = this ;

var खोज = me तत्व । querySelector ( '# खोज' ) ;

खोज && मुझे। addRemovableEventListener ( खोज , 'क्लिक करें' , मुझे। खोज । बाइंड ( मुझे ) , गलत ) ;

मुझे। addRemovableEventListener ( winJs। बस , 'ग्राहक-चयनित' , फ़ंक्शन ( आइटम ) {
मुझे। currentClient = आइटम। विस्तार से । डेटा ;
//me.editButton.disabled = false;
मुझे। AppBar । चिपचिपा = सच्चा ;
मुझे। AppBar । शो ( ) ;
} ;
मुझे। addRemovableEventListener ( winJs। बस , 'क्लाइंट-अचयनित' , फ़ंक्शन ( आइटम ) {
मुझे। currentClient = null ;
//me.editButton.disabled = true;
मुझे। AppBar । छिपाना ( ) ;
मुझे। AppBar । चिपचिपा = झूठा ;
} ;
} ,
उतराई : फ़ंक्शन ( ) {
यह । तत्व । क्लासिस्ट । निकालें ( यह । क्लासनेम ) ;

अगर ( यह।
वापसी;
}

this ._disposed = true ;
winJs। उपयोगिताएँ। disposeSubTree ( यह ._element ) ;
के लिए ( var i = 0 ; मैं < यह ._वेंटहैंडलर रिवरओवर ; लंबाई ; ++ i ) {
यह ._वेंटहैंडलर रीमूवर [ i ] ( ) ;
}
this ._eventHandlerRemover = null ;
} ,
addRemovableEventListener : function ( e , eventName , हैंडलर , कैप्चर ) {
कैप्चर = कैप्चर ! == झूठी ? गलत : सच ;

ई। addEventListener ( EventName , हैंडलर , कैप्चर ) ;

यह । धक्का ( समारोह ) {
ई। RemoveEventListener ( eventName , हैंडलर ) ;
} ;
} ,
updateLayout : फ़ंक्शन ( तत्व ) {
/// <परम नाम = "तत्व" वर्चस्व = "सत्य" />

// TODO: लेआउट में बदलाव का जवाब।

// डीबगर;
} ,
setFormValues : फ़ंक्शन ( clinetInfo ) {
यह । searchForm = यह । तत्व । querySelector ( '# मुख्य-खोज-फ़ॉर्म' ) ;

यह । searchForm && यह । खोज । सेटआट्रीब्यूट ( 'डेटा-विन-ऑप्शन' , JSON ; stringify ( clinetInfo ) ) ;
यह । searchForm && यह । खोज । winControl && यह । खोज । winControl । setValues ( clinetInfo ) ;
} ,
खोज : फ़ंक्शन ( ) {
winJs। बस । प्रेषण ( 'खोज-कमांड' ) ;
} ,
initEnv : फ़ंक्शन ( ) {
यह । तत्व । क्लासिस्ट । add ( यह । className ) ;
यह ._वेंटहैंडलररवर = [ ] ;
}
} ;
} ) ( WinJS ) ;

स्थानीयकरण

यदि आप फ़ाइल स्ट्रिंग्स \ ru-RU \ resource.resjson बनाते हैं

 { "pageHeader": "Habra WinJS 8.1" // … }

फिर कोड में लिंक का उपयोग करें:

 <span class="pagetitle" data-win-res="{ textContent: 'pageHeader' }"></span>

सबसे उपयुक्त भाषा का मार्ग स्वचालित रूप से स्टार्टअप पर उठाया जाएगा।
यह उत्सुक है कि संसाधनों में क्या एम्बेड किया जा सकता है।
यह भी दिलचस्प है कि संसाधन एक विशेष प्रकार की सामग्री का उपयोग करते हैं

 <PRIResource Include="strings\ru-RU\resources.resjson" />

यानी आपको वीएस इंटरफ़ेस का उपयोग करके एक संसाधन फ़ाइल बनाने की आवश्यकता है, आप पूरी तरह से मौजूदा फ़ाइल का नाम नहीं बदल सकते हैं, उदाहरण के लिए, रेजसन में txt, यह jsproj में होगा:

 <Content Include=" strings\ru-RU\resources.resjson" />

जिसके कारण इसका उपयोग करना असंभव हो जाएगा यह स्वचालित रूप से लोड नहीं होगा।

टेम्प्लेट्स, बडिंग

खाका उदाहरण:

 <div class="client-search-item-template" data-win-control="WinJS.Binding.Template" style="display: none;"> <div class="client-item"> <div class="client-info"> <div class="client-photo"><img data-win-bind="alt: name; src: this HabraWin.Converters.clientPhoto;" /></div> <div class="client-name" data-win-bind="innerText: name"></div> </div> <div class="decoration-bottom-line"></div> </div> </div>

यह सूची में उपयोगकर्ता को प्रदर्शित करने के लिए मार्कअप है। एक विशेष विशेषता (डेटा-विन-बिंद) एक तत्व की विशेष संपत्ति के साथ-साथ डेटा तक पहुंचने के लिए एक अभिव्यक्ति के लिए बाध्यकारी को इंगित करता है।
और कुछ परिवर्तन करने के लिए, उदाहरण के लिए, ग्राहक की फोटो दिखाने के लिए, आप कनवर्टर को निर्दिष्ट कर सकते हैं:
src: यह HabraWin.Converters.clientPhoto

 ; (function (winJs) { 'use strict'; var converters = { clientPhoto: winJs.Binding.converter(function (client) { if (!client || !client.hasPhoto) return '/images/empty-photo.png'; return converters.baseAddress + '/clients/photos/' + client.ID; }) }; winJs.Namespace.define('HabraWin', { Converters: converters }); })(WinJS);

टेम्प्लेट में डेटा लागू करने के लिए, यह पर्याप्त है:

 WinJS.Binding.processAll(element, data);

नियंत्रण

WinJS में नियंत्रण बनाना एक वर्ग बनाने के समान है। उदाहरण के लिए, प्रपत्र HabraWin.ClientSearchForm:

 <form role="form" id="main-search-form" data-win-control="HabraWin.ClientSearchForm"> <div class="form-group"><label for="second-name"><span data-win-res="{textContent: 'serachFormSecondNameLabel'}"></span></label><input data-win-res="{attributes: { 'placeholder' : 'serachFormSecondNamePlaceholder' }}" spellcheck="true" type="text" name="secondName" id="second-name" /></div> <div class="main-search-form-buttons form-group"> <button type="button" name="search" class="button" id="search"><span data-win-res="{textContent: 'serachFormSearchButton'}"></span></button> <button type="reset" name="clear" class="button" id="clear"><span data-win-res="{textContent: 'serachFormClearButton'}"></span></button> </div> </form>

घटनाओं और प्रपत्र नियंत्रणों की सर्विसिंग के लिए कोड

; ( फ़ंक्शन ( जीत ) {
'सख्त का उपयोग करें' ;

var searchForm = winJs क्लास। derive ( HabraWin। BaseForm , winJs। उपयोगिताएँ । defaultControlConstructor ( ) , {
init : फ़ंक्शन ( तत्व , विकल्प ) {
var me = this ;

मुझे। initProperies ( ) ;

मुझे। ClearForm ( ) ;

मुझे। डिफाइंडलाइज़ ( तत्व ) ;
मुझे। डिफाइन्वेंट ( ) ;
मुझे। सदस्यता ( ) ;

मुझे। setValues ( विकल्प ) ;
मुझे। खोज ( ) ;
} ,
डिफाइन एल्स : फंक्शन ( एलिमेंट ) {
var me = this ;

मुझे। फ़ील्ड = {
दूसरा नाम : तत्व। querySelector ( 'इनपुट [नाम = दूसरा नाम]' )
} ;

मुझे। बटन = {
स्पष्ट : तत्व। querySelector ( 'बटन [नाम = स्पष्ट]' ) //,
} ;

var मान = यह । getValues ( ) ;

यह । oldValues = JSON। stringify ( मान ) ;
} ,
डिफ़रेंट : फ़ंक्शन ( ) {
var me = this ;

मुझे। बटन । स्पष्ट। addEventListener ( 'क्लिक' , me। क्लियरअंडरसर्च । bind ( me ) ) ;
} ,
सेटवैल्यूज़ : फंक्शन ( मान ) {
अगर ( मान ) {
वापसी;
}
यह । परिवर्तितफिल्ड = [ ] ;

के लिए ( मूल्यों में var lbl )
if ( मान। haswwProperty ( lbl ) और& यह फ़ील्ड । hasOwnProperty ( lbl ) ) {
var क्षेत्र = यह । फ़ील्ड [ lbl ] ;
var value = मान [ lbl ] ;
var valPropName = फ़ील्ड और& ( फ़ील्ड में 'प्रकार' ) और& फ़ील्ड। टाइप === 'चेकबॉक्स' ? 'चेक किया गया' : ( फ़ील्ड & फ़ील्ड में 'मान' ? 'मूल्य' : 'वर्तमान' ) ;

अगर ( क्षेत्र ) {
जारी रखें ;
}
फ़ील्ड [ valPropName ] = मूल्य ;
यह मान && । बदला हुआ क्षेत्र । धक्का ( lbl ) ;
}
} ,
सदस्यता : समारोह ( ) {
var me = this ;

इसके लिए ( var lbl इस फ़ील्ड में )
अगर ( यह है । फ़ील्ड .OwnProperty ( lbl ) ) {
var क्षेत्र = यह । फ़ील्ड [ lbl ] ;
var isTextField = फ़ील्ड में 'मूल्य' ;

क्षेत्र। addEventListener ( isTextField ? 'keydown' : 'change' , me। fieldChanged । बाइंड ( me ) ) ;
क्षेत्र। addEventListener ( isTextField ? 'keydown' : 'change' , isTextField; me; मुझे खोजें । बाइंड ( me ) । defer ( 1000 ) : me। search । bind ( me ) ) ;

अगर ( isTextField ) {
[ 'कट' , 'पेस्ट' , 'परिवर्तन' ] । forach ( कार्य ( e ) {
क्षेत्र। addEventListener ( ई , मुझे। फील्डचेंज । बाइंड ( मुझे ) ) ;
} ;
}
}

winJs। बस । addEventListener ( 'क्लियर-कमांड' , me। clearAndSearch । बाइंड ( me ) ) ;
} ,
ClearAndSearch : फ़ंक्शन ( ) {
यह । ClearForm ( ) ;
यह । खोज ( ) ;
} ,
addNewClient : फ़ंक्शन ( ) {
var मान = यह । getValues ( ) ;

winJs। नेविगेशन। नेविगेट करें ( "/ pages/section/section.html" , मान ) ;
} ,
getValues : फ़ंक्शन ( ) {
var me = this ;
var मान = { } ;

यह । बदला हुआ क्षेत्र । forach ( कार्य ( lbl ) {
मान [ lbl ] = मुझे। getValue ( lbl ) ;
} ;

वापसी मान ;
} ,
खोज : फ़ंक्शन ( ) {
var मान = यह । getValues ( ) ;

winJs। बस । प्रेषण ( 'खोज-ग्राहक' , मूल्य ) ;

यह । oldValues = JSON। stringify ( मान ) ;
} ,
ClearForm : फ़ंक्शन ( ) {
var me = this ;

var फ़ील्ड्स = सरणी । प्रोटोटाइप । टुकड़ा । call ( me। element । querySelectorAll ( 'input [type = text], select' ) , 0 ) ;

खेतों। forach ( कार्य ( e ) {
ई। मूल्य = '' ;
} ;

var current = new Date ( ) ;

मुझे। फ़ील्ड्स && मुझे। खेतों । जन्मदिन && ( मुझे। क्षेत्र । जन्मदिन । वर्तमान = नई तिथि ( वर्तमान। सेटिअर । वर्तमान। getFullYear ( ) - 24 ) ) ) ;

यह । परिवर्तितफिल्ड = [ ] ;
} ,
फ़ील्डलैब : फ़ंक्शन ( फ़ील्ड ) {
वापसी फ़ील्ड && ( फ़ील्ड। getAttribute ( 'नाम' ) || फ़ील्ड। id ) ;
} ,
फ़ील्ड्ड : फ़ंक्शन ( e ) {
var फ़ील्ड = e && e। currentTarget ;
var lbl = यह । फ़ील्डलैब ( क्षेत्र ) ;

यदि ( (इसमें lbl। फ़ील्ड्स ) )
वापसी;

var मान = यह । getValue ( lbl ) ;

अगर ( मान ) {
यह । बदला हुआ क्षेत्र । निकालें ( lbl ) ;
वापसी;
}

अगर ( यह । बदला गया है । indexOf ( lbl ) === - 1 ) {
यह । बदला हुआ क्षेत्र । धक्का ( lbl ) ;
}
} ,
initProperies : फ़ंक्शन ( ) {
}
} ;

winJs। नाम स्थान । परिभाषित ( 'हैब्रविन' , {
ClientSearchForm : searchForm
} ;

} ) ( WinJS ) ;

Share के उदाहरण पर वादा करें

यदि आपने एसिंक्रोनस कॉल के लिए एपीआई का उपयोग किया है, उदाहरण के लिए, XmlHttpRequest और आपको एक-दूसरे पर निर्भर कॉल की एक श्रृंखला को निष्पादित करने की आवश्यकता है, तो आपने इस तथ्य पर ध्यान दिया कि ऐसी कॉल को बनाए रखना मुश्किल है, अर्थात्। घोंसले के कारण मुख्य रूप से पढ़ें और संशोधित करें। मैं दो पैटर्न जानता हूं जो आपको घोंसले से बचा सकते हैं: घटनाएं या वादा।

उदाहरण के लिए, लगातार कॉल का संयोजन:

 share: function(e) { var request = e.request; var deferral = request.getDeferral(); var offering = this.offering; var files = []; var me = this; var text = offering.description.replace(/<[^>]+>/gim, '').replace(/ [\s]+/, ' '); //   : this.fileListControl.selection.getItems() .then(function (items) { //   ,   return items.map(function (item) { var uri = new Windows.Foundation.Uri(item.data.uri); return Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri) .then(function (storageFile) { files.push(storageFile); }); }); }).then(function (promises) { //   ,      return WinJS.Promise.join(promises); }).done(function () { //            request.data.properties.title = offering.name; request.data.properties.description = text; if (files.length) request.data.setStorageItems(files); else me.articlePackage(request.data); deferral.complete(); }); },

डेटा एक्सेस - डेटा स्रोत

डेटा की कल्पना करने के लिए, आप WinJs.UI.ListView का उपयोग कर सकते हैं। उदाहरण के लिए, यह अद्भुत नियंत्रण डेटा को एक बार में लोड नहीं कर सकता है, लेकिन इसे आवश्यक रूप से प्रदर्शित करता है। यह एक सौ से अधिक रिकॉर्ड प्रदर्शित करते समय संसाधनों को बचाता है। लेकिन इसके लिए आपको पृष्ठ द्वारा डेटा पृष्ठ लोड करने के लिए समर्थन के साथ अपने डेटा स्रोत को लागू करने की आवश्यकता है।

उदाहरण पेजिंग उपयोगकर्ताओं के लिए डेटा स्रोत कोड

; ( फ़ंक्शन ( winJs , कंसोल ) {
'सख्त का उपयोग करें' ;

var clientSearchDataAdapter = winJs। क्लास। परिभाषित ( winJs। उपयोगिताएँ । defaultConstructor ( ) , {
def : {
अधिकतम : 300 ,
maxPageSize : 50 ,
minPageSize : 50
} ,
init : फ़ंक्शन ( विकल्प ) {
यह । कैश = { } ;
this ._filter = null ;

यह । dataSource = विकल्प। डेटा स्रोत ;
} ,
शर्त : {
मिल : फ़ंक्शन ( ) {
इसे वापस करें ।
} ,
सेट : फ़ंक्शन ( मान ) {

this ._filter = value ;

यह । dataSource && यह । डेटा स्रोत । अमान्य डेटा स्रोत । अमान्य ;

वापसी मूल्य ;
}
} ,
getQuery : फ़ंक्शन ( ) {
var me = this ;

नए HabraWin लौटें। ProxyBuilder ( 'ग्राहक' ) । तब ( फ़ंक्शन ( प्रॉक्सी ) {
प्रॉक्सी वापस करें । खोज ( मुझे। स्थिति ) ;
} ;
} ,
getCount : फ़ंक्शन ( ) {

var me = this ;
var cacheKey = JSON। stringify ( me। कंडीशन ) ;

अगर ( cacheKey इस में । cache )
WinJS लौटें । वादा। लपेटो ( मुझे। कैश [ cacheKey ] लंबाई ) ;

var क्वेरी = me। getQuery ( ) ;
var i = 0 ;

वापसी क्वेरी
। तब ( फ़ंक्शन ( क्लाइंट ))
मुझे। कैश [ cacheKey ] = ग्राहक। नक्शा ( फ़ंक्शन ( आइटम ) {
वापसी {
कुंजी : '' + ( i ++ ) ,
डेटा : आइटम ,
groupKey : आइटम। दूसरा नाम । लंबाई > 0 ? आइटम। दूसरा नाम । प्रतिस्थापन ( 0 , 1 ) । टॉपरकैस ( ) : '-'
} ;
} ;

var फ़िल्टर्ड = मुझे। applyFilters ( { आइटम : क्लाइंट , ऑफ़सेट : 0 , TotalCount : क्लाइंट। लंबाई } ) ;

वापस फ़िल्टर किया गया। आइटम । लंबाई ;
} ;
} ,
addFilter : फ़ंक्शन ( फ़िल्टर ) {
यह । फ़िल्टर = यह । फ़िल्टर || [ ] ;

यह । फ़िल्टर । धक्का ( फिल्टर ) ;
} ,
applyFilters : फ़ंक्शन ( परिणाम ) {

अगर ( यह ! फ़िल्टर । यह ! फ़िल्टर । लंबाई । )
वापसी परिणाम ;

var me = this ;

यह । फ़िल्टर । forach ( फ़ंक्शन ( फ़िल्टर ))
परिणाम = फ़िल्टर ( परिणाम , मुझे। स्थिति ) ;
} ;

वापसी परिणाम ;
} ,
itemsFromIndex : फ़ंक्शन ( requestIndex , countBefore , countAfter ) {
var me = this ;

अगर ( requestIndex > = me। ऑप्शन । maxCount ) {
वापसी जीत। वादा। wraError ( नया winJs। ErrorFromName ( winJs; UI ; FetchError । doNotExist ) ) ;
}

var fetchSize , fetchIndex ;
यदि ( उलटी गिनती > गिनती के बाद ) {
गणन = मठ । मिनट ( बाद में , 10 ) ;
var fetchBefore = गणित । अधिकतम ( गणित । मिनट । उलटी गिनती , मेरे पास। विकल्प । मैक्सपेजेज - ( काउंटआफ्टर + 1 ) ) , मुझे। विकल्प । मिनपेजेज - ( काउंटआफ्टर + 1 ) ) ;
fetchSize = fetchBefore + countAfter + 1 ;
fetchIndex = requestIndex - fetchBefore ;
} {
उलटी गिनती = मठ । मिन ( काउंटबियर , 10 ) ;
var fetchAfter = मठ । अधिकतम ( गणित । मिनट । ( बाद में , मेरे लिए। विकल्प । मैक्सपेज) - ( काउंटबियर + 1 ) ) , मुझे। विकल्प । मिनपेजेज - ( काउंटबीज + 1 ) ) ;
fetchSize = countBefore + fetchAfter + 1 ;
fetchIndex = requestIndex - countBefore ;
}
var cacheKey = JSON। stringify ( me। कंडीशन ) ;
var result = function ( ) {
var कैश = मुझे। कैश [ cacheKey ] ;
var आइटम = कैश। स्लाइस ( fetchIndex , fetchIndex + fetchSize ) ;
var ऑफसेट = requestIndex - fetchIndex ;
var TotalCount = मठ । न्यूनतम ( कैश। लंबाई , मुझे। विकल्प । अधिकतम राशि ) ;
वर र = {
आइटम : आइटम ,
ऑफसेट : ऑफसेट ,
TotalCount : कुल मिलाकर ,
} ;
var फ़िल्टर किया गया = मुझे। applyFilters ( r ) ;

फ़िल्टर किए गए ;
} ;

अगर ( मुझ में cacheKey। कैश ) {
WinJS लौटें । वादा। लपेटो ( परिणाम ( ) ) ;
}

var क्वेरी = me। getQuery ( ) ;

वापसी क्वेरी
। तब ( फ़ंक्शन ( आइटम ) {

var i = 0 ;

मुझे। कैश [ cacheKey ] = आइटम। नक्शा ( फ़ंक्शन ( आइटम ) {
वापसी {
कुंजी : '' + ( fetchIndex + i ++ ) ,
डेटा : आइटम ,
groupKey : आइटम। दूसरा नाम । लंबाई > 0 ? आइटम। दूसरा नाम । प्रतिस्थापन ( 0 , 1 ) । टॉपरकैस ( ) : '-'
} ;
} ;

वापसी परिणाम ( ) ;
} ;
}
} ;

var clientDataSource = winJs। क्लास। व्युत्पन्न ( winJs। यूआई । वर्चुअलाइज्डडॉटसोर्स , फ़ंक्शन ( स्थिति ) {
var dataAdapter = नया ग्राहक खोजडाटा Adapter ( {
dataSource : यह
} ;

यह । setCondition = function ( cond ) {
dataAdapter। कंडिशन = cond ;
} ;

यह । addFilter = function ( फ़िल्टर ) {
dataAdapter। addFilter ( फ़िल्टर ) ;
} ;

यह ._baseDataSourceConstructor ( dataAdapter ) ;

यह । सेटकंडिशन ( स्थिति ) ;
} ;

winJs। नाम स्थान । परिभाषित ( 'हैब्रविन.डॉटस सोर्स' , {
ग्राहक खोज : ClientDataSource
} ;

} ) ( WinJS , कंसोल ) ;

टाइल

Win8 में उन अनुप्रयोगों के लिए एक शानदार अवसर है जो उपयोगकर्ता ने एक समय या किसी अन्य पर सबसे मूल्यवान जानकारी प्रदर्शित करने के लिए अपने स्टार्ट पैनल में जोड़ा है।
नीचे दिए गए उदाहरण में, मैं TileWideSmallImageAndText03 टेम्पलेट का उपयोग करता हूं, सभी संभावित टेम्पलेट विकल्प msdn पर देखे जा सकते हैं
टाइल्स को अद्यतन करने के लिए नमूना कोड:

 ; (function(winJs, ui, dom) { winJs.Namespace.define('HabraWin', { Tile: { //  xml  tile- wideSmallImageAndText03: function(img, text) { var tileXmlString = '<tile><visual version="1" lang="ru-RU" branding="logo">' + '<binding template="TileWideSmallImageAndText03">' + '<image id="1" src="' + img + '" alt="logo" />' + '<text id="1">' + text + '</text>' + '</binding>' + '</visual></tile>'; var tileDom = new dom.XmlDocument(); tileDom.loadXml(tileXmlString); //   xml  return new ui.Notifications.TileNotification(tileDom); }, baseUrl: '', //  tile-   updateTile: function() { var tileUpdateManager = ui.Notifications.TileUpdateManager.createTileUpdaterForApplication(); var me = this; var mesageAccepted = WinJS.Resources.getString('tileMessageAccepted').value; var mesageDenied = WinJS.Resources.getString('tileMessageDenied').value; tileUpdateManager.clear(); tileUpdateManager.enableNotificationQueue(true); [ { Creator: { ID: '30BD3259-EF01-4ebb-ACEE-5065EB2885E1', Photo: true }, Description: mesageAccepted }, { Creator: { ID: 'A2021DFE-1271-41d1-9A90-A64039A8A5E6', Photo: true }, Description: mesageDenied } ].forEach(function(comment) { var img = (comment.Creator && comment.Creator.Photo && (me.baseUrl + '/clients/photos/' + comment.Creator.ID)) || 'appx:///images/empty.png'; var text = (comment.Description) || '...'; var tile = me.wideSmallImageAndText03(img, text); tileUpdateManager.update(tile); }); } } }); })(WinJS, Windows.UI, Windows.Data.Xml.Dom);

8.1 8.1 HTML और WinJS का उपयोग करके विन