2012年5月3日

[Windows 8]DataBinding

To get familiar with Windows 8 Metro style application programing and get my first Windows 8 Metro style app looks more “Metro”. I want to writing something that retrieves data via WCF and then display them on the app.
So, first assume we have a WCF service which returns a set of records.
   1: [OperationContract]



   2: [WebInvoke(Method = "POST",



   3:     BodyStyle = WebMessageBodyStyle.Wrapped)]



   4: CaseListResult [] GetCaseList(CaseListQueryCriteria criteria);




Now for our result page layout




   1: <!DOCTYPE html>



   2: <html>



   3: <head>



   4:     <meta charset="utf-8">



   5:     <title>itemsPage</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>
   1:  
   2:     <script src="//Microsoft.WinJS.0.6/js/ui.js">
   1: </script>
   2:     
   3:     <link href="/css/default.css" rel="stylesheet">
   4:     <link href="/css/itemsPage.css" rel="stylesheet">
   5:     <script src="/js/data_from_wcf.js">
</script>



  10: </head>



  11: <body>



  12:     <!-- item template definition -->



  13:     <div id="my_template" class="itemtemplate" data-win-bindsource="data" data-win-control="WinJS.Binding.Template">



  14:         <div class="item-overlay">



  15:             <div class="item-title" data-win-bind="innerText: DisplayID"></div>



  16:             <div class="item-subtitle" data-win-bind="innerText: CaseType"></div>



  17:         </div>



  18:     </div>



  19:     <!-- The content that will be loaded and displayed. -->



  20:     <div class="itemspage fragment">



  21:         <header aria-label="Header content" role="banner">



  22:             <button class="win-backbutton" aria-label="Back" disabled></button>



  23:             <h1 class="titlearea win-type-ellipsis">



  24:                 <span class="pagetitle">TestSplit</span>



  25:             </h1>



  26:         </header>



  27:         <section aria-label="Main content" role="main">



  28:             <div class="itemslist" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: select('#my_template') , layout:{type:WinJS.UI.GridLayout}}"></div>



  29:         </section>



  30:     </div>



  31: </body>



  32: </html>




I got problem displaying result on the page due to a tricky piece of code, in the list view, I have to use {itemTemplate : select(‘#my_template’)…} to get right template instead of as many other posts on the internet that simply coded like this : {itemTemlate:my_template,…}


And the java script codes to retrieve data from WCF and then bind to data list.




   1: (function () {



   2:         "use strict";



   3:         var q = { "item": { "UserID": "domain\\userid" } };



   4:         WinJS.xhr(



   5:             {



   6:                 type: "POST",



   7:                 url: "http://10.1.184.2:8080/tmmbwadapter/services/test.svc/AJAX/GetCaseList",



   8:                 headers: {



   9:                     "Content-type": "application/json",



  10:                 },



  11:                 data: JSON.stringify(q)



  12:             }



  13:  



  14:         ).done(function (result) {



  15:             var jo = JSON.parse(result.responseText);



  16:             var cases = jo.GetCaseListResult;



  17:             //var cases = [{ DisplayID : "test", Applicant : "testa"}];



  18:             var caseList = new WinJS.Binding.List(cases);



  19:             var lv = document.querySelector(".itemslist").winControl;



  20:             lv.itemDataSource = caseList.dataSource;



  21:  



  22:         },



  23:         function (err) {



  24:             //error handling goes here...



  25:         });



  26: })();


沒有留言:

Blog Archive

About Me