locked
About creation of tiles for windows 8 using metro style apps RRS feed

  • Question

  • Hi

    i want to create two tile without any content written on it. how to do it? can anyone help me so that i can create tiles in my app to display the list of restaurant and its details in each tile.

    Thursday, September 20, 2012 7:44 PM

Answers

  • For starters, the default tile images you include in the app manifest should always contain content like your app's logo, because they'll be visible prior to any updates making their way to the Start screen.

    Tile updates that you then issue from the app (or through push notifications) must then be in one of the forms described in the tile template catalog. Each update you issue is a piece of XML that describes the content of the tile, and that XML must match one of the templates. There's a lot of options here, as you can see, but if you want to do something more specific then you need to use an image-only tile and create the images on the fly (e.g. creating them in a canvas, then saving the canvas contents to a file in your appdata/local folder, then using an ms-appdata:///local URI to refer to it in the XML's <image> element. Saving canvas content to a file is something I show how to do in Programming Windows 8 Apps in HTML, CSS, and JavaScript (free eBook), Chapter 10).

    If you can use an image plus text as in one of the templates, that will be easier, of course. You can consider using one of the peek templates that include image and text that alternate on the tile.

    .Kraig

    Thursday, September 20, 2012 9:24 PM
  • Same answer--you create secondary tiles one at a time through the SecondaryTile.requestCreateAsync method, and you do it in response to a user-invoked command.

    Sources for that design case study are not available at present, to my knowledge.

    You can refer to the Secondary Tiles sample for code details.

    Monday, September 24, 2012 4:03 PM
  • I've already provided all the resources you need for creating secondary tiles from an app.

    If by "dynamic" you mean making a secondary tile a live tile, the same resources will answer those questions. Once created, secondary tiles can be live tiles like the app's main tile. The only difference is that you issue updates through Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForSecondaryTile (whereas the primary tile uses createTileUpdater as the method).

    Again, the Secondary Tiles sample, scenario 6, shows how to do this. You can also refer to the App Tiles and Badges Sample for more code on creating live tiles, just make sure you get the tile updater for the specific secondary tile you want to update.

    If you have any specific questions about how these samples work, feel free to post them here. Otherwise, we've give you references to all the samples and documentation to work with secondary tiles, so please take the time to study them in detail for your purposes.

    • Marked as answer by WinNRock Wednesday, October 31, 2012 6:39 AM
    Monday, October 1, 2012 3:49 PM
  • You have to use what is called "cell spanning" in a ListView to get variable sized items.

    See http://msdn.microsoft.com/en-us/library/windows/apps/jj657974.aspx or Chapter 5 of my free ebook, Programming Windows 8 Apps in HTML, CSS, and JavaScript, available here: http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook-programming-windows-8-apps-with-html-css-and-javascript.aspx

    • Marked as answer by WinNRock Wednesday, November 7, 2012 8:24 AM
    Tuesday, November 6, 2012 7:50 PM

All replies

  • For starters, the default tile images you include in the app manifest should always contain content like your app's logo, because they'll be visible prior to any updates making their way to the Start screen.

    Tile updates that you then issue from the app (or through push notifications) must then be in one of the forms described in the tile template catalog. Each update you issue is a piece of XML that describes the content of the tile, and that XML must match one of the templates. There's a lot of options here, as you can see, but if you want to do something more specific then you need to use an image-only tile and create the images on the fly (e.g. creating them in a canvas, then saving the canvas contents to a file in your appdata/local folder, then using an ms-appdata:///local URI to refer to it in the XML's <image> element. Saving canvas content to a file is something I show how to do in Programming Windows 8 Apps in HTML, CSS, and JavaScript (free eBook), Chapter 10).

    If you can use an image plus text as in one of the templates, that will be easier, of course. You can consider using one of the peek templates that include image and text that alternate on the tile.

    .Kraig

    Thursday, September 20, 2012 9:24 PM
  • My App is after clicking button the restaurant  list is displaying in list. Can i able to assign tiles for each restaurant which are displaying in list. i want each one in each tile.  Is there any simple method for it? 



    • Edited by WinNRock Friday, September 21, 2012 8:17 AM
    Friday, September 21, 2012 8:16 AM
  • I think you're referring to creating secondary tiles for those restaurants. This happens through the Windows.UI.StartScreen.SecondaryTile API, specific that class' requestCreateAsync method.

    However, this method will always pop up a confirmation dialog to get the user's consent to create the tile. You cannot avoid this: the start screen is precious real estate and this user prompt is there to prevent apps from littering the start screen with stuff the app thinks is important rather than what the user thinks is important. That is, your app should not just automatically try to add a bunch of tiles. Do one at a time.

    The guidance, then, is that you only call requestCreateAsync in response to a specific Pin command or such that the user has invoked. In you case, if the user selects a restaurant you can make a Pin command available. If the restaurant is already pinned (see SecondaryTile.exists), then you'd offer a command to unpin it. This keeps the user always in control.

    .Kraig

    Friday, September 21, 2012 9:56 PM
  • Okay.

    There is no code for creation of multiple tiles. Can you help me to fine the code for this App

    http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx because my app is similar to this App.

    Thank you for your help.

    • Marked as answer by WinNRock Monday, September 24, 2012 2:46 PM
    • Unmarked as answer by WinNRock Monday, September 24, 2012 2:46 PM
    Monday, September 24, 2012 10:24 AM
  • Same answer--you create secondary tiles one at a time through the SecondaryTile.requestCreateAsync method, and you do it in response to a user-invoked command.

    Sources for that design case study are not available at present, to my knowledge.

    You can refer to the Secondary Tiles sample for code details.

    Monday, September 24, 2012 4:03 PM
  • Hi, i need to know more about tiles. I created  static secondary tiles. How to create tiles dynamically. Means in my app Restaurant  list is retrieving based on zip code and street address. So i need to know about creation of tiles dynamically. As i'm fresher its difficult me to proceed fast. Please help me by giving some samples for creation of tiles dynamically.

    Monday, October 1, 2012 12:09 PM
  • I've already provided all the resources you need for creating secondary tiles from an app.

    If by "dynamic" you mean making a secondary tile a live tile, the same resources will answer those questions. Once created, secondary tiles can be live tiles like the app's main tile. The only difference is that you issue updates through Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForSecondaryTile (whereas the primary tile uses createTileUpdater as the method).

    Again, the Secondary Tiles sample, scenario 6, shows how to do this. You can also refer to the App Tiles and Badges Sample for more code on creating live tiles, just make sure you get the tile updater for the specific secondary tile you want to update.

    If you have any specific questions about how these samples work, feel free to post them here. Otherwise, we've give you references to all the samples and documentation to work with secondary tiles, so please take the time to study them in detail for your purposes.

    • Marked as answer by WinNRock Wednesday, October 31, 2012 6:39 AM
    Monday, October 1, 2012 3:49 PM
  • Ok.... Now i took the two textbox values like this in default.js file...

                var streetaddress = document.getElementById("textbox1").value;
                var zipcode = document.getElementById("text2box2").value;

    I need to pass these two textbox values from default.js file to another js file. Can we pass these values from one js  to other.

    • Marked as answer by WinNRock Wednesday, October 31, 2012 6:39 AM
    • Unmarked as answer by WinNRock Wednesday, October 31, 2012 6:39 AM
    Friday, October 5, 2012 9:06 AM
  • If you have mulitple .js files loaded into the same .html file (e.g. in <script> elements), then anything you add to the global namespace will be visible all code in any .js file.

    By default, .js files use the "module pattern" with the (function () { })(); stuff around everything to keep variables out of the global namespace entirely. The recommended way to "export" a variable is to define a namespace with WinJS.Namespace.define, and declare members within that namespace whose values are the variables you wish to exposure. Then in other code modules you can refer to them via <namespace>.<member>.

    All this assumes that you are keeping the script context of default.html active and using a mechanism like page controls to load stuff into the DOM of default.html, so you preserve its script context.

    Sunday, October 7, 2012 4:26 AM
  • Hi,

    Here i have one more question.

    In a.html i want to display image where image url is in a.js file. Code is below is incorrect i know but i m  not getting correct code for this. Please help to display an image

    a.html

      <img src="#" id="restaurant"  />

    a.js

    var picture='/images/cuisine_' + forwardcuisinename + '.jpg ';

     document.getElementById("restaurant").innerText = picture;


    Wednesday, October 31, 2012 6:46 AM
  • Hi,

    for creation of different sized tiles i m using following code

    In a.js

        var dataArray = [
    { title: "Login", color: "#8f1111", pic: '/images/user.png', type:"A" },
    { title: "The Menus", color: "#8f1111", pic: '/images/magazine.png' ,tyoe:"B"}
        ];

     var dataList = new WinJS.Binding.List(dataArray);

      var publicMembers =
                {
                    itemList: dataList
                };

    WinJS.Namespace.define("home", publicMembers);

    In a.html

                      

      <div id="MainPageTamplate" data-win-control="WinJS.Binding.Template">   
    <div className="type">
                <img src="#" data-win-bind="src : pic; alt : title" id="tileimg1"  />
             <h2 id="title" data-win-bind="innerText:title; style.background: color;" > 
                    </h2>
    </div>
        </div> 

    <div id="MainPage" data-win-control="WinJS.UI.ListView"  
              data-win-options="{ itemDataSource : home.itemList.dataSource,
              itemTemplate: select('#MainPageTamplate'),
               selectionMode: 'none', 
               swipeBehavior: 'none'}">
                </div>

    In a.css

    .A{

    height:250px;

    width:200px;

    }

    .B

    {

    Height:400px;

    width:400px;

    }

    Problem in this is type B's tile taking the type A's tile size, means B type tiles are taking 400px as height n width but when mouse hover its showing  height:250px; width:200px; (A's size)

    Tuesday, November 6, 2012 1:05 PM
  • You have to use what is called "cell spanning" in a ListView to get variable sized items.

    See http://msdn.microsoft.com/en-us/library/windows/apps/jj657974.aspx or Chapter 5 of my free ebook, Programming Windows 8 Apps in HTML, CSS, and JavaScript, available here: http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook-programming-windows-8-apps-with-html-css-and-javascript.aspx

    • Marked as answer by WinNRock Wednesday, November 7, 2012 8:24 AM
    Tuesday, November 6, 2012 7:50 PM
  • Hi,

    One more question.  I want to add dropdown list in tiles. Is this possible? I tried with this code

         

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
            <div id="someTile" >

                <!-- Displays the "picture" field. -->
                <img src="#" data-win-bind="alt: title; src: picture"  />
                <div >

                    <!-- Displays the "title" field.-->
                    <h4 data-win-bind="innerText: title"></h4>
                    <!-- Displays the "text" field.-->
                    <h6 data-win-bind="innerText: text"></h6>
                </div>
            </div>
              <select id="dropdown">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
        </div>

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
         data-win-options="{ itemDataSource :a.itemList.dataSource ,
         itemTemplate : select('#mediumListIconTextTemplate'),
                        selectionMode: 'single', 
                    tapBehavior: 'none', 
                    swipeBehavior: 'none', 
                    layout: { 
                        groupInfo: groupInfo, 
                        type: WinJS.UI.GridLayout 
                    }
         }">


    </div>

    Its not working. if i click on  dropdown button then whole tile is selecting.

    Please help me out.

    Friday, December 21, 2012 7:13 AM
  • Friday, December 21, 2012 5:08 PM
  • Hi,

    Thank you for your reply. One more question. Here i'm creating tile using code as shown below. 

       var dataArray = [
        { title: "Basic banana", text: "$4.5", picture: "URL('/images/images (1).jpg')", type: "smallListIconTextItem" },
        { title: "Banana blast", text: "$4.5", picture: "URL('#')", type: "mediumListIconTextItem" },
        { title: "Brilliant banana", text: "$4.5", picture: "URL('#')", type: "largeListIconTextItem" },
        { title: "Orange surprise", text: "$4.5", picture: "URL('#')", type: "mediumListIconTextItem" },
        { title: "Original orange", text: "$4.5", picture: "URL('#')", type: "smallListIconTextItem" },
        { title: "Vanilla", text: "$4.5", picture:"URL('#')", type: "smallListIconTextItem" },
        { title: "Very vanilla", text: "$4.5", picture:"URL('#')", type: "mediumListIconTextItem" },
        { title: "Marvelous mint", text: "$4.5", picture: "URL('#')", type: "mediumListIconTextItem" },
        { title: "Succulent strawberry", text: "$4.5", picture: "URL('#')", type: "smallListIconTextItem" }
        ]; 

     var groupInfo = WinJS.Utilities.markSupportedForProcessing(function groupInfo() {
            return {
                enableCellSpanning: true,
                cellWidth:10,
                cellHeight: 10
            };
        });


        var dataList = new WinJS.Binding.List(dataArray);
        var publicMembers =
                {
                    groupInfo: groupInfo,
                    itemList: dataList
                };

    In html file

                     

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" >

            <div id="someTile" data-win-bind="style.backgroundImage: picture" >   
                    <h3 data-win-bind="innerText: title"></h3>

          </div>

    <div id="basicListView" 
          data-win-control="WinJS.UI.ListView"
          data-win-options="{ itemDataSource :a.itemList.dataSource ,
          itemTemplate : select('#mediumListIconTextTemplate'),
          selectionMode: 'multi',                         
          onkeyboardnavigating : handler,

          tapBehavior: 'toggleSelect',

        layout: {             
        type: WinJS.UI.GridLayout 
           }
         }">

    </div>

    Means here i 'm creating nine tiles with different size.  For the first tile say  "URL('/images/images (1).jpg')" and  title: "Basic banana" i want to change the images for every 3 or 4 seconds.I want to update images for only first tile for 3 seconds.  where and how to add images. 

    Wednesday, January 2, 2013 10:57 AM
  • Hi,

    I m creating tiles that have 2 item 1.Fare of food 2. Quantity(dropdown list to select quantity). Now i want to display the quantity soon after selecting from the Dropdown list in one label. Ex:If i select qty 10 then it should display 10 in one label and it automatically calculate food fare*qty. And total should display in another label. But problem is that i can select whole tile, but i want to select only quantity from tile and result should display in label soon after selecting qty from dropdown list.

               In html file

                                   

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" >
            <h2 data-win-bind="innerText: Rate"></h2>
               <select id="dropdown" class="win-interactive itemcount" data-win-bind="selectedIndex:UserData.Index">
      <option >1</option>
      <option >2</option>
      <option >3</option>
      <option >5</option>    
    </select>
        </div>

      

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
         data-win-options="{ itemDataSource :a.itemList.dataSource ,
         itemTemplate : select('#mediumListIconTextTemplate'),
                        selectionMode: 'multi',                         
                onkeyboardnavigating : handler,
                  tapBehavior: 'toggleSelect',
                    layout: {             
                        type: WinJS.UI.GridLayout 
                    }
         }">


    </div>

    In a.js

           var  listView = element.querySelector("#basicListView").winControl;
            
                listView.onselectionchanged = function (args) {
                    WinJS.UI.enableAnimations();
                    count++;
                    updateStatus();
                }
                function updateStatus() {
                    document.getElementById("item").innerHTML = "Items = " + count;
                }

    Where i need to change my code to select quantity from list and it should display soon after selecting it.

    Wednesday, January 2, 2013 1:39 PM
  • You'll need to control the timing of the updates yourself with calls like setInterval or setTimeout. To update an image, update the value in the associated element of dataArray. Because you have a WinJS.Binding.List built on that, and the ListView is data-bound to the binding list, changes to that underlying array should propagate to the ListView item.
    Wednesday, January 2, 2013 7:11 PM
  • Ya but how to do it  programmatically? How to update value of that element programmatically?

    Thursday, January 3, 2013 8:37 AM
  • Something like:

    dataArray[0].picture =  "URL('/images/images6.jpg')";

    It's just setting values in a JavaScript array. Nothing fancy.

    Thursday, January 3, 2013 5:06 PM
  • Hi,

    Can we add button in tiles????

    Here i m using code for button within tile is as below

        <div id="FoodItemTamplate" data-win-control="WinJS.Binding.Template">
            <div id="FoodNamePriceQuant">
            <h3 id="FoodName" data-win-bind="innerText: Name"></h3><hr />
             <h3 id="FoodPrice" data-win-bind="innerText: Price"></h3><hr />
             <h3 id="FoodQuantity" data-win-bind="innerText: Quantity"></h3><hr />
                <button id="DeleteItemBtn"  class="win-interactive itemCount"></button>
                </div>
        </div>

    But here button code is not working. How to define button here.


    Shilpa Monocept Windows store apps

    Monday, January 21, 2013 5:40 AM