" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi

Set Scroll To A Particular Item In WinJS ListView

Posted on January 27th, 2016 by Anup Samantray

The code snippet below sets the scroll to the last item of the list   //Array of numbers var array = [2, 3, 4, 5, 6, 7, 8, 9, 10]; //Bind the array to list var list = new WinJS.Binding.List(array); var listView = document.getElementById(“basicListview”).winControl; //Set the itemDataSource property of basicListview listView.itemDataSource = list.dataSource; //The function […]

How to catch the click event of the button inside the WinJs ListView

Posted on November 23rd, 2015 by Debashrita Swain

Goal: Catch the click events of the button inside the WinJs listview using win-interactive class  and   WinJS.Utilities.markSupportedForProcessing. sometimes we may have requirement like having buttons or diffrent images in the Winjs Listview items.As we click on the listview item ,ItemInvoke  event is always getting called.so to call the individual button click event we need win-interactive […]

How to use RadPictureRotatorHubTile And Update From The WinJs

Posted on November 23rd, 2015 by DEBASHRITA SWAIN

RadPictureRotatorHubTile rotates images one at a time Following are the steps for creating and updating RadPictureRotatorHubTile from Winjs Step 1: lets add the following code in the Home.html <div id=”Radtiles” style=”margin-left:400px; margin-top:200px; height:400px; width:400px; background-color:white”> <div id=”customTile” style=”margin-left:20px; margin-top:20px; background-color:blue; height:300px; width:300px;” > </div> </div>   step 2: need to add following code in the […]

Creating And Using Global Variables In WinJS

Posted on November 23rd, 2015 by Nirmal Hota

Define a Global variable in WinJS – Can be declared in any exitsing global JS file in the project, to get the access through out the project. – default.JS file can also be a used to declare global variables. Syntax WinJS.Namespace.define(“<Namespace Name>”,{<variable name>: <valu>,});   Example WinJS.Namespace.define(“MyNameSpace”, { MyGlobalVariable: 1 , });   – The […]

How to use Navigation Template in Windows store App using WinJs

Posted on November 23rd, 2015 by DEBASHRITA SWAIN

Windows Store apps uses the single-page navigation model. where we use a single page for our app and load additional data into that page as needed. We still split our application into multiple files, but instead of moving from page to page, our app loads other documents into the main page. Because your app’s main […]

How to store data in Session in Windows Store App using WinJs

Posted on November 23rd, 2015 by DEBASHRITA SWAIN

Session data is the temporary data that useses user’s current session data  in the app. To store data in session in WinJS we use WinJS.Application.sessionState. Lets create an example for storing user’s credential in Session. We need to add the following code snipet in the Login.html <div style=”margin-left:400px; width:200px;”> <input id=”userName” type=”text” /> <p style=”margin-left:5px; […]

How to bind data to the WinJs Listview using Template

Posted on November 23rd, 2015 by DEBASHRITA SWAIN

Goal: Binding  data to the  Winjs Listview using Template. ListView: Winjs Listview need an item template that contains the markup you want to use to display each list item. There are two ways to create a template we can use markup to define a WinJs.Binding.Template or we can create a templating function. WinJS.Binding.Template is easy […]

Navigate to another page in WinJS

Posted on November 23rd, 2015 by Anobik Dey

This code demonstrates how to use winJS navigation object to navigate to a new page.   WinJS.Navigation.navigate(pageUrl, options); Where pageUrl -> is the relative path of the page options -> data to be send from the previous page to next page    

How to create RadslideHubTile and update it from WinJs

Posted on November 23rd, 2015 by Debashrita Swain

Following are the steps we need to follow  for creating RadSlideHubTile and updating its Top and BottomContent from Winjs step 1: Lets add the following code in Home.html <div id=”Radtiles” style=”margin-left:400px; margin-top:200px; height:400px; width:400px; background-color:white”> <div id=”customTile” style=”margin-left:20px; margin-top:20px; background-color:blue; height:300px; width:300px;” > </div> </div>  Step 2: need to add the following code in Home.js […]

How To Add Header Menu To Windows Store App Using WinJS

Posted on November 23rd, 2015 by Debashrita Swain

We can create a header menu in windows store app by using a menu control. A menu is a control in the Windows Library for JavaScript  WinJS.UI.Menu. Here in this example we will open a menu on clicking a  button.so following is the code snippet for the default.html <button id=”btnMenu” aria-haspopup=”true”> Show </button> <div id=”menuFlyOut” […]

How to display items of different sizes in WinJs Listview

Posted on November 23rd, 2015 by Debashrita Swain

Goal: In many situations we need to display the items of different sizes in WinJs listView, but by default, the ListView allocates the same size cell for each  item  it contains. The size of the cell is determined by the size of the first item in the ListView. When the ListView contains items of different […]

How To Use The State Property Of WinJS.Navigation

Posted on November 23rd, 2015 by Debashrita Swain

How to use the  WinJS.Navigation.navigate function state  property for transfering data from one page to other pages.Generally the WinJS.Navigation.navigate function can take the parameter of object Type like place and state.The palce to navigate to. Generally the place is a string containing the URL, but it may be anything.The state is a user-defined object that […]

How to access local folder in winJS

Posted on November 23rd, 2015 by Anobik Dey

This code snippet allows you to store data in winJS local folder. var localFolder = Windows.Storage.ApplicationData.current.localFolder; //— gets the local folder localFolder.createFileAsync(“TestLog.txt”, Windows.Storage.CreationCollisionOption.openIfExists).done(function (testLog) { //do your operation on the file testLog })     Windows.Storage.CreationCollisionOption.openIfExists -> option to specify what to do when file is present. If present then open the existing file or […]

Adding WinJS EventMixin to a Type

Posted on November 23rd, 2015 by Anup Samantray

WinJS.Utilities.eventMixin is basically meant for objects that don’t have associated UI elements (it can’t use the listener methods on the element in the DOM, so it has its own implementation of these methods). We can add WinJS.Utilities.eventMixin to any type we define. It contains WinJS.Utilities.eventMixin.addEventListener, WinJS.Utilities.eventMixin.removeEventListener and WinJS.Utilities.eventMixin.dispatchEvent functions that help us to raise and […]

Applying fade effect to objects in WinJS

Posted on November 23rd, 2015 by Nirmal Hota

Goal of the below demonstration is to apply animation on the DOM objects using the inbuilt namespace in WinJS. Namespace required : WinJS.UI.Animation Below in an example to demonstrate the way FadeIn and FadeOut works in WinJS. Goal : Animating 2 images on one after another in an interval of 3 seconds. HTML File Content […]

Observable binding data to the controls using WinJS.Bind

Posted on November 23rd, 2015 by Nirmal Hota

Goal : Observable binding data to the controls using WinJS.Bind from the JS. Let’s bind a Student data to the text boxes located in the Html file. We will make this binding observable. On any changes made to the data will get reflected in the controls automatically. Add a Student page control (Student.Html, Student.CSS, Student.JS) […]

Binding data to the controls using WinJS.Bind

Posted on November 23rd, 2015 by Nirmal Hota

Goal : Binding data to the controls using WinJS.Bind from the JS. Let’s bind a Student data to the text boxes located in the Html file. Add a Student page control (Student.Html, Student.CSS, Student.JS) to the project. We will basically deal with Student.JS and Student.Html here. Student.Html ======================== – Add a <div> element with few […]

How To Add An App Bar In Windows Store App Using WinJS

Posted on November 23rd, 2015 by Debashrita Swain

For adding an app bar in every pages of our application we need to add the app bar in the default.html. As we know  when we create a project with use of Navigation Template we can add different pages as Page controls.If we need to  show the app bar in each page control we can […]

Display The Route Between Two Places Using Bing Maps Windows Store App JavaScript SDK In Windows Store App

Posted on November 23rd, 2015 by Debashrita Swain

Let’s first create a new project and add the Bing maps for JavaScript reference. Step 1: We need to  create two textboxes for  taking the values of two places so following code snippets we need to add in the default.html <div style=”position:absolute; height:100%;width:260px; padding:10px; background-color:brown; overflow-y:auto;”> <div style=”height:150px;”> <h2>Enter the places</h2> From: <input id=”fromId” type=”text” […]

How To Display The Searched Place In Bing Maps Windows Store App JavaScript SDK In Windows Store App

Posted on November 23rd, 2015 by Debashrita Swain

Following are the steps lets first create a new project and add the Bing maps for javascript reference. Step 1: Add the following in the default.html <div style=”position:absolute; height:100%; width:260px; padding:10px; background-color:brown; overflow-y:auto;”> <div style=”height:136px;”> <h2>Search</h2> <input id=”searchId” type=”text” style=”width:200px;”/> <button onclick=”Coordinates();” >Search</button> <button onclick=”Clearprev();” >clear</button> <div id=”PlaceDiv” style=” position:absolute; width:240px;”></div> </div> <div id=”mapViewDiv” style=”position:absolute; […]

Set The Scroll To a Particular Item in WinJS ListView

Posted on November 23rd, 2015 by Anup Samantaray

The code snippet below set the scroll to the last item of the list //Array of numbers var array = [2, 3, 4, 5, 6, 7, 8, 9, 10]; //Bind the array to list var list = new WinJS.Binding.List(array); var listView = document.getElementById(“basicListview”).winControl; //Set the itemDataSource property of basicListview listView.itemDataSource = list.dataSource; //The function accepts […]

How to create and update Telerik RadMosaicHubTile from WinJs

Posted on November 23rd, 2015 by DEBASHRITA SWAIN

Since RadMosaicHubTile is designed to exclusively display images,It is combination of small tiles that individually flip themselves to display a random image. Following are the steps for displaying random images in RadMosaicHubTile step 1:           lets add the following code in the Home.html           <div id=”Radtiles” style=”margin-left:400px; margin-top:200px; height:400px; width:400px; background-color:white”>                 <div id=”customTile” […]