Create your first Windows Store app with Blend, part 2: the details page (HTML & JavaScript)

You can develop a Windows Store app more quickly and efficiently by using the collection of HTML and CSS tools in Blend for Visual Studio. As you walk through this tutorial, you'll build a simple app, PickaFlick, in which you can browse new movies in a list that's generated through an API from Rotten Tomatoes.

Create your first Windows Store app - Blend (HTML)

By downloading this project from the samples gallery, you can review not only the code but also all of its assets so that you can follow along and build the project as you go.

Note

To run this app, you must register with Rotten Tomatoes to get a key and paste it into the code. See Add a reference to Windows JavaScript API later in this topic.

In Create your first Windows Store app with Blend, part 1: the master page (HTML & JavaScript), you created the PickaFlick home page. In part 2, you'll:

Add an item template to your project

As you create the movie details page, the initial steps will be familiar from the first part of this tutorial: create an HTML page, add a div to it, and then rename that element to create an element id.

To add an HTML page

  1. In the Projects panel, right-click the project file, and then click New Item.

    The New Item dialog box opens.

    Blend new HTML page

  2. In the list of item templates, click HTML Page, name the page movieDisplay.html, and then click OK.

To add a div to movieDisplay.html

  1. In the Live DOM panel, right-click body, click Insert Element, and then click div, or press Ctrl+Shift+=.

  2. In the Live DOM panel, rename the div element that you just added by clicking it and then typing movieDisplayContainer in the text field.

    Blend Live DOM panel

Switch to Visual Studio and back again

The Windows JavaScript Fragment Namespace is the same namespace that you used when you created homepage.html in the first part of this tutorial, and the switch from Blend to Visual Studio will also be familiar. This call to the WinJS.Ui.Fragments Namespace will load the movieDisplay page as a fragment in default.html when the chicken button is clicked.

To modify default.js

  1. In the Projects panel, right-click the PickaFlick.sln file, and then click Edit in Visual Studio.

    Visual Studio opens the Pick-a-Flick project.

  2. In Solution Explorer, expand the js folder, and then double-click default.js to open it.

  3. Locate .done(). Inside the parentheses, paste the following code:

    //when the loadInitialPage function is complete, call handleLoadedPage
        function completed(r) {
          handleLoadedPage();
        }
      );
    }
    
    //create the chickenButton variable, and add a click event listener
    //when chickenButton is clicked, call loadResultsPage
    function handleLoadedPage() {
      var chickenButton = document.querySelector("#chickenButton");
      chickenButton.addEventListener("click", loadResultsPage);
    }
    
    //define loadResultsPage function, load movieDisplay.html
    function loadResultsPage() {
      clearChildren(target);
    
    //When page is loaded, use Windows Javascript Fragments API to load movieDisplay.html
    //call getMovieData
      WinJS.UI.Fragments.render("/movieDisplay.html", target).done(
    function completed(r) {
      getMovieData();
    }
    );
    }
    
    function clearChildren(element) {
      while (element.hasChildNodes()) {
        element.removeChild(element.lastChild);
      }
    }
    
    //define movieData variable and associated movie data variables
    //insert your own Rotten Tomatoes API key for apikey variable
    var movieData;
    
    function getMovieData() {
      var movieArray = new Array();
      var apikey = "Insert API Key Here";
      var baseUrl = "https://api.rottentomatoes.com/api/public/v1.0";
      var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apikey;
    
      WinJS.xhr({
        url: moviesSearchUrl, dataType: "jsonp"
      }).then(function (xhr) {
        var response = JSON.parse(xhr.response);
    
    //get title, summary, box art
        response.movies.forEach(function (i) {
          movieArray.push({
            title: i.title,
            summary: i.synopsis,
            boxart: i.posters.detailed
          });
        });
    
    //create movieData binding
        movieData = new WinJS.Binding.List(movieArray);
    
        WinJS.UI.processAll();
      }
    
  4. If you want to run this app, replace the text Insert API Key Here with the key that you received from Rotten Tomatoes, and then save all of your changes by pressing Ctrl+Shift+S.

    When you register for a Rotten Tomatoes API key, you are required to supply the name of your app and a URL. You can use any name, and supply a URL to a personal site, for example, a blog. They also request that you select your application type. Because this is a Windows 8 app, it is optimized for Windows 8 tablets and desktops. The app calls a list of new movie releases, including the title, box art, and summary.

  5. In Blend, click Reload to load the changes that you just made to the project in Visual Studio.

Use interactive mode

If you build and run the app (for example, by pressing F5), you can access movieDisplay.html by clicking or tapping the chicken button. However, you can't click or tap the chicken button on the design surface. If you access movieDisplay.html from within Blend, the application state must change. By using interactive mode, you can pass events to your application at design time and, thereby, access application states that aren't available until after the JavaScript has run.

When you use interactive mode, you can interact with your app the same way that users interact with it when it's installed on their devices. Most importantly, after you run your app in interactive mode, you can style key elements of your app that were previously unavailable from within Blend.

To access movieDisplay.html by using interactive mode

  1. With default.html visible on the design surface, click Turn on Interactive Mode Blend interactive mode icon (in the upper-right corner of the app interface), or press Ctrl+Alt+I.

  2. After the app launches in interactive mode, click or tap the chicken button to navigate to movieDisplay.html, which is blank.

  3. Click Turn off Interactive Mode Blend Turn off Interactive Mode icon (in the upper-right corner of the app interface), or press Ctrl+Alt+I.

Notice that you're still working in default.html, as the tab at the top of the app indicates. However, movieDisplayContainer now appears in the Live DOM panel. In addition, the notification "The selected content is part of movieDisplay.html." appears at the top of the app under the default.html tab. As mentioned earlier in this topic, this page wasn't available for editing in its dynamic state before you entered interactive mode. Now that you've loaded movieDisplay.html, you can start to style movieDisplayContainer.

To add a style to movieDisplayContainer

  1. In the Live DOM panel, right-click movieDisplayContainer, and then click Create Style Rule from Element ID.

  2. In the CSS Properties panel, with #movieDisplayContainer selected in the Applied Style Rules category, set height to 100%.

Add a Windows JavaScript Library (WinJS) FlipView control

A FlipView control is a Windows JavaScript Library control that displays one item at a time in a collection to enable a "flip" behavior for browsing the items in the collection. By using a FlipView control in PickaFlick, you can easily browse through the list of movies that the call to the Rotten Tomatoes API supplies.

You can add a FlipView control directly from the Assets panel in Blend.

To add a FlipView control

  1. In the Search text box of the Assets panel, type FlipView, and then press Enter.

  2. Double-click FlipView to add the control to movieDisplayContainer.

Notice that the FlipView control appears in the Live DOM panel. When a .winjs control is instantiated in Blend, the dynamic elements that are associated with the control also appear in the Live DOM panel. To view these dynamic elements, expand FlipView in the Live DOM panel. The lightning bolt icon b5-icn-livedom-dynamic on the right side of an element indicates that the element is dynamically generated.

Blend FlipView in the Live DOM

If you point to FlipView in the Live DOM panel, more information about the control appears, including the type, tag, id, and class. Notice that the FlipView control is part of the win-flipview class.

Blend FlipView Live DOM Hover

If you click FlipView in the Live DOM panel, and then point to .win-flipview (ui-dark.css) in the Applied Style Rules category of the CSS Properties panel, you can confirm that .win-flipview is defined in .win-flipview (ui-dark.css) and that height is set to 400px.

Blend FlipView in uiDarkCSS

You can override the default style (derived from ui-dark.css) by creating a custom style in default.css. Because a class is already assigned to the FlipView control, you can quickly add a reference in default.css to the class and then define a style rule for that class.

To create a style for the win-flipview class

  1. In the CSS Properties panel, to the right of Applied Style Rules, click the Create style rule from selected element icon, and then click Create Style Rule from Element Class.

    Blend- Applied Styles - Create Style Rule icon

  2. In the Style Rules panel, click win-flipview.

    Notice that .win-flipview (default.css) now appears in the Applied Style Rules category of the CSS Properties panel.

    Blend FlipView in defaultCSS

  3. In the CSS Properties panel, set height to 100%.

Bind to the movie data

At this point, the movie data is loaded, but it doesn't display because the HTML contains no reference to it. The HTML that appears on the design surface and the data that default.js generates (and that the movieData variable defines) are completely independent of one another. To display the data on the design surface, you must bind the data to the FlipView control in the HTML.

To bind the FlipView control to movieData

  1. In the Live DOM panel, click FlipView.

    You can now access the FlipView control in the HTML Attributes panel (the tab next to the CSS Properties tab).

    Tip

    When you click an element, the HTML Attributes panel shows element properties. When you click a control, the HTML Attributes panel shows control properties.

  2. In the Windows App Controls category of the HTML Attributes panel, type movieData.dataSource in the itemDataSource text box.

    In movieDisplay.html, the data-win-options attribute is now applied to the FlipView control and contains the value itemDataSource:movieData.dataSource.

Create and style an item template

Because you're running your app from within Blend, the live data appears on the design surface. The raw data appears as a string. Now that you've verified the data connection, you can style the data by using the title, summary, and boxart properties that you created in default.js.

Blend data source on the design surface

You'll create a data template to apply a consistent style to all of the movie data that you've retrieved from Rotten Tomatoes.

You'll create an item template by applying an itemTemplate property to the FlipView control.

To create an item template

  1. In the Live DOM panel, ensure that FlipView is selected.

  2. In the itemTemplate list in the Windows App Controls category of the HTML Attributes panel, click Create new template.

    The Create New Template dialog box appears.

  3. Name the template movieDisplayTemplate, and ensure that Identify by ID is selected.

  4. In the Add data fields to template list, click boxart, summary, and title. Click OK.

    The box art, summary, and title of the first movie in the list appear on the design surface.

    Blend item template

    Important

    Because this app uses live data, the data that appears may differ from the data in the previous image.

The data that you want appears on the page but not quite the way that you want in the final app. To modify the layout, you'll apply a grid to the display property of the itemTemplate, that grid will form the foundation for the layout of the contents on the page. After you've created your grid, you can start to style the elements that you'll add to the page.

To style the item template

  1. On the design surface, click to the right of the box art image. This selects the div that contains the box art, title, and summary, indicated by the blue box around the elements on the page.

  2. Right-click the div, and then click Add New Class.

  3. In the Add New Class dialog box, name the class movieContainer, ensure that Create style rule targeting this class is selected, and then click OK.

  4. In the Style Rules panel, click .movieContainer.

  5. In the Search or Set text box of the CSS Properties panel, type height: 100%; width: 100%; to set the height and width properties at the same time, and then press Enter.

    The content moves to the upper-left corner of the design surface.

  6. To make it easier to create the grid, clear the page by deleting the following code from movieDisplay.html:

    <img data-win-bind="src:boxart" height="100" width="100">
         <div data-win-bind="textContent:summary"></div>
         <div data-win-bind="textContent:title"></div>
    
  7. In the CSS Properties panel, clear the Search or Set text box by clicking the Clear Search icon Blend Clear Search icon on the right side of the box.

  8. In the Layout category, click –ms-grid in the display drop-down list.

Create the layout grid

Now that the display property is set to -ms-grid, you can create rows and columns by clicking directly on the design surface.

You can modify objects by using adorners, which are handles that appear at the corners and in the middle of the object outlines. Adorners also appear at the ends of guidelines and gridlines. When you create a grid, you use an insert adorner to place the gridline where you want it.

To create the layout grid

  1. In the CSS Properties panel, make sure that either Winning Properties or .movieContainer is selected.

  2. On the design surface, point to the dotted blue line at the top of the grid, and then click the orange insert adorner that appears.

    Blend grid column adorner

    A column adorner is added.

  3. Repeat to add three more grid column adorners, which define five columns.

  4. Point to the left grid adorner. Click to add a row adorner, which defines two rows.

    Blend grid row adorner

    When you're finished, you should have a grid with five columns and two rows that resembles the following illustration:

    Blend layout grid

For this tutorial, you can estimate the column and row widths. However, you can refine your layout by specifying exact widths for each column or row by using the width adorner. Click inside the box to type a number, and choose one of the following options in the list:

  • Fractional (fr)

  • Pixel (px)

  • Auto

  • Percentage (%)

Lay out the grid elements

The layout consists of a logo, a placeholder image for the box art, the title, and the summary. In the following procedure, you'll add and style the elements, and you'll bind the box art, title, and summary data to the elements on the page.

To insert and style the images

  1. In the Projects panel, open the images folder, and then drag small-LogoChicken into the top-left cell in the grid.

  2. Right-click small-LogoChicken, and then click Add New Class.

  3. In the Add New Class dialog box, name the class smallLogo-Chicken.

  4. Make sure that Create style rule targeting this class is selected, and then click OK.

  5. In the CSS Properties panel, in the Grid category, set grid-column-align and grid-row-align to center.

    Blend tutorial logo image

  6. In the Projects panel, open the images folder, and then drag temp.png into the third column in the second row of the grid.

  7. Right-click temp.png, and then click Add New Class.

  8. In the Add New Class dialog box, name the class boxart.

  9. Ensure that the Create style rule targeting this class is selected, and then click OK.

  10. In the CSS Properties panel, in the Grid category, set grid-column-align to center and grid-row-align to start.

    Blend temporary box art

You can now bind to the data and then style it directly in the design surface.

Edit the data bindings

By binding the individual elements to the specific data objects that are defined in default.js, you can style each element separately.

In the following procedure, you'll bind the box art image to the box art data object. In addition, you'll add title and summary elements, bind them to the title and summary data, and then style them.

To bind the box art image to the box art data

  1. On the design surface, click the box art image.

  2. In the HTML Attributes panel, in the Common category, click Advanced Options 12e06962-5d8a-480d-a837-e06b84c545bb, and then click Edit Data Binding.

  3. In the Create Data Binding for <img>.src dialog box, click boxart, and then click OK.

    The yellow border around the value editor indicates a data-bound object.

    Blend data-bound object in HTML Attributes panel

    After a slight delay as the data connection is refreshed, the new movie image appears on the design surface.

  4. In the CSS Properties panel, set the height to 500px.

To add and style the title

  1. In the Assets panel, type h1 into the Search text box, and then drag the h1 element to the third column in the first row.

    The h1 element appears on the page.

  2. Right-click the h1 element, and then click Add New Class.

  3. In the Add New Class dialog box, name the class title.

  4. Make sure that Create style rule targeting this class is selected, and then click OK.

  5. Click the h1 element, and then, next to Color in the Font category of the CSS Properties panel, click Not Set.

  6. In the bottom-right corner of the color editor, click the color eyedropper Blend color eyedropper icon.

    Blend font-color editor

  7. Using the eyedropper, point to the chicken image on the design surface to specify the shade of red that you want for the title text.

    Notice that the title color changes as you point to different parts of the chicken image.

  8. Click the color that you want to apply to the title.

To bind the h1 element to the title data

  1. With h1 element selected, in the Common category of the HTML Attributes panel, click Advanced Options 12e06962-5d8a-480d-a837-e06b84c545bb, and then click Edit Data Binding.

  2. In the Create Data Binding for h1.textContent dialog box, click title, and then click OK.

    After a slight delay as the data connection is refreshed, the new movie title appears on the design surface.

To prevent longer titles from appearing on two lines, you can modify the column span so that longer titles will span two or more columns.

To modify the column span for the title

  • In the CSS Properties panel, in the Grid category, set the value of grid-column-span to 3, and then press Enter.

    The h1 element now spans three columns.

To add the summary

  • In the Assets panel, type article into the Search text box, and then drag the article to the fifth column in the second row.

    The article element appears in .movieContainer. Because the element is empty, you won't see the content until you bind to the data.

To bind the article element to the summary data

  1. Right-click the article element, and then click Add New Class.

  2. In the Add New Class dialog box, name the class summary.

  3. Make sure that Create style rule targeting this class is selected, and then click OK.

  4. In the Common category of the HTML Attributes panel, click Advanced Options 12e06962-5d8a-480d-a837-e06b84c545bb to the right of textContent, and then click Edit Data Binding.

  5. In the Create Data Binding for article.textContent dialog box, click summary, and then click OK.

    The new movie summary appears on the design surface.

Modify the font properties

The default text style isn't easy to read, but you can easily modify the font properties of text by using the CSS Properties panel. In the following procedure, you'll style the summary text. You can modify the title font in the same way.

To style the summary text

  1. Click the article element, and then click the font that you want in the font-family name list in the CSS Properties panel.

    You can add fonts to your font-family list by clicking them in the font-family name list.

    You can also change the order of your font selection by selecting a font in the font-family name list and then clicking the Up or Down arrows. You can confirm in the .css file that the order of the fonts changes accordingly.

  2. In the font-size value editor, click or enter the value that you want.

    Blend Font CSS Properties

  3. Next to color, click Not Set.

  4. In the color editor, click the color that you want, or enter the hex code for the color that you want into the hex value text box, and then press Enter.

    As an alternative, you can click the color eyedropper Blend color eyedropper icon in the bottom-right corner of the color editor. Use the eyedropper to point to any element on the desktop that has the color that you want. The color of the title changes as you point to different elements. If you click the element that has the color that you want, the summary text becomes that color.

    In addition, you can embed a custom font to further brand your app. See Use a custom font in a Windows Store app (HTML).

To add a scrollbar to longer summaries, modify the overflow property of the article element.

To add a scrollbar to longer summaries

  1. Select the article element, and then, in the Search or Set text box, type overflow.

  2. In the overflow list, click auto.

    A scrollbar will now appear for summaries that run off the page.

You can also further refine your layout by using rulers and guides to align elements on the page. See Use rulers and guides.

If you registered with Rotten Tomatoes and incorporated the appropriate API key, you can now press F5 to build and run your app.