Create your first Windows Store app with Blend, part 1: the master 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 a list of new movies. The list is generated through an API from Rotten Tomatoes, and you must register to get an API key that you'll paste into the code.

The home page of the PickaFlick app

In part 1 of this tutorial, you'll create the home page for the app. Along the way, you'll learn how to:

• Create a project from a project template

• View how the Blend UI reflects changes to your app

• Add an item template to your project

• Implement the single-page navigation model

• Switch to Visual Studio and back

• Add a reference to Windows JavaScript API

• Add images to your project

• Define CSS style rules

• Create a flexbox layout container

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.

No experience with HTML, CSS, or JavaScript is necessary to complete this tutorial. However, to be successful using Blend, an intermediate level of experience with HTML, CSS, and JavaScript is helpful.

Create a project from a project template

Blend and Visual Studio provide the same project templates that help you start to develop your Windows Store app. For more information about templates that Blend and Visual Studio offer for developing other kinds of apps, see Templates to speed up your app development.

To create a project

1. In Blend, on the File menu, click New Project.

   In the New Project dialog box, a list of project types appears on the left side. When you click a project type, the project templates that are associated with it appear on the right side.

   

2. In the list of project types, click HTML (Windows Store).

3. In the list of project templates, click Blank App.

4. In the Name text box, type PickaFlick.

5. In the Location text box, verify the location of the project.

6. In the Language list, JavaScript is the only option.

View how the Blend UI reflects changes to your app

The default workspace in Blend provides a visual interface for building Windows Store apps: the design surface, panels, workspace configurations, authoring views, and menus. For more information, see Blend app workspace (HTML).

When you are working on a project, changes made in one area of the app are reflected throughout the interface.

In the upper left, click the Projects tab to see the folders and files that are automatically generated when you create a project from the Blank App template:

• References   Contains the read-only CSS and Windows Libraries for JavaScript.

• css   Contains the .css file for your app.

• images   Contains the default image assets for your app.

• js   Contains the default .js file for your app.

• default.html   The default start page of your app.

• package.appxmanifest   Lists the contents of your app and describes its capabilities (for example, whether it can access the user's webcam). This file also specifies the app start page.

For more information, see Projects panel (HTML).

Below the Projects panel, in the lower left of the interface, is the Live DOM panel. The Live DOM panel shows the structure of default.html. If you expand body, the p element appears.

The Live DOM panel gives you a view of the object hierarchy of the HTML page that you are working on. By working directly in the Live DOM panel, you can quickly and easily modify the object hierarchy as you go.

For more information, see Live DOM panel (HTML).

The p element contains the text "Content goes here" that appears on the design surface.

The related documents view shows the code for both default.html and default.css. When you change elements that appear on the design surface, the related documents are automatically updated. When you make changes to the JavaScript, you'll be alerted that you need to refresh your view. Click Refresh  in the upper-right corner of the app to view the changes on the design surface.

For more information, see Related documents view (HTML).

If default.html and default.css don't appear, click the Split view icon  in the upper-right corner of the design surface.

In this procedure, you'll remove the default p element from default.html, add a background color to body, and verify that the code is updated as you work.

To modify the display of default.html

1. In the Live DOM panel, right-click p, and then click Delete.

2. In the Style Rules panel, expand default.css, and then click body.

   Notice that the body selector is also selected in default.css in the related documents view.

3. In the CSS Properties panel, expand the Background category.

4. Next to background-color, click Not Set.

5. In the Hex value text box, type #D5BF9A, and then press Enter.

   The body selector in default.css now contains the style rule background-color: #D5BF9A.

Add an item template to your project

In addition to project templates, both Blend and Visual Studio provide item templates, which contain commonly used code. You can easily add one to a project to help speed up your app development. See Templates to speed up your app development.

For the PickaFlick app, you'll add an item template for an HTML page to the existing project. The page will contain the HTML for the homepage of your app.

To add an item template for an HTML page

1. On the File menu, click New Item.

   The New Item dialog box opens.

   

2. In the list of item templates, click HTML Page.

3. In the Name text box, type homepage.html, and then click OK to add the item template.

In the related documents view, notice that the markup for homepage.html is minimal.

Because homepage.html will be displayed as a fragment inside default.html, homepage.html will inherit the style of default.html, so you don't need to add CSS or HTML references to homepage.html.

Next, you'll add a div element to the page and then rename the div. When you rename the div, an id attribute is applied to it, which makes the div easier to identify among other div elements on the page and throughout the app.

You can add elements to your HTML page by:

• Typing directly in the code editor

• Inserting the element by using the Assets panel

• Inserting the element directly in the Live DOM panel.

The following procedure will show you all three methods for adding an element to the HTML page. After you add the div, you'll add an id attribute to the div by renaming it in the Live DOM panel.

To add a div to homepage.html

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

   Tip

   Additional ways to add an element to the design surface in Blend are:

   • In the related documents view, in homepage.html, place the cursor between the opening and closing body tags, and then type <div>. The closing tag is added automatically.

   • In the Live DOM panel, click body, and then, in the Assets panel, locate the div element by typing div in the Search text box, and then do one of the following:.

     • Double-click div to add a div element to the page.

     • Drag the div from the Assets panel to the design surface.

     • Drag the div from the Assets panel to the Live DOM panel.

     • Draw a div directly on the design surface.

   A new div appears in the Live DOM panel and in the HTML of homepage.html.

2. In the Live DOM panel, do one of the following to apply an id to the new div:

   • Double-click the div, and then type homepageContainer into the text field.

     

   • Right-click the div, click Edit ID, and then type homepageContainer.

   • In the HTML Attributes panel, in the id field, type homepageContainer.

   In the related documents view, in homepage.html, an id attribute with the value homepageContainer is added to the div.

   

Implement the single-page navigation model

In this section, you learn how to:

• Implement the single-page navigation model

• Switch between Blend and Visual Studio to modify JavaScript

For the PickaFlick app, you'll use the single-page navigation model, which means that you use a single page to display your app and load data into that page from other pages as needed. You still split your application into multiple files, but your app loads other pages as page fragments into the default page instead of moving from page to page (multi-page navigation). See Quickstart: Using single-page navigation (Windows Store apps using JavaScript and HTML).

Switch to Visual Studio and back again

To load the contents of homepage.html into default.html, you will need to call the Win.JS UI.Fragment Namespace to render the page fragment in default.html. You can modify your .js files in Blend, but you can add, modify, and debug JavaScript more easily by using tools that are built in to Visual Studio. For more information about those tools, see JavaScript IntelliSense.

You can easily switch between Blend and Visual Studio while you're working on a project. You can even have the same project file open in both Blend and Visual Studio at the same time, on the same computer. When you save a change to a file in one tool and then switch to the other tool, you simply reload the file to refresh your view of the project.

Add a reference to Windows JavaScript API

You are now ready to add a reference to the Windows JavaScript Fragment Namespace.

To add a reference in default.js to the WinJS.UI.Fragments Namespace

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

   Visual Studio opens the PickaFlick project.

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

3. Paste the following code immediately after app.start();:

   //add DOMContentLoaded event
       document.addEventListener("DOMContentLoaded", loadInitialPage, false);
   

4. Paste the following code at the end of the script:

   //When initial page is loaded, use WinJS.UI.Fragments Namespace to load homePage.html into the body element of default.html
   var target;
   
   function loadInitialPage() {
       target = document.querySelector("body");
       WinJS.UI.Fragments.renderCopy("/homePage.html", target).done();
   }
   

5. Press Ctrl+Shift+S to save all of your changes, and then switch back to Blend.

6. Click Reload when you're prompted to reload the project. Blend reflects the changes that you just made to the project in Visual Studio.

Notice that homepageContainer now appears in the Live DOM panel. Click the default.html tab at the top of the app. Notice that the background color for homepageContainer in the Live DOM panel is a different color than the rest of the Live DOM panel, indicating that it originates from a different page. To the right of homepageContainer is the fragment icon .

If you click homepageContainer in the Live DOM panel, you see homepage.html open in the related document view. In addition to those cues, when you select an element that originates from homepage.html while you're working on default.html, at the top of the app, under the default.html tab, the notification "The selected content is part of homepage.html" appears. This message helps you identify the source of the objects or elements that appear on the design surface when you're working on default.html, the core of your single-page navigation model.

Add the images to your project

The PickaFlick app is built with images that a graphic designer created. In addition to adding visual interest, the chicken image also serves as the button that the user clicks to start the app.

You can add the images to the project by:

• Using the Add Existing Item command on the Project menu

• Copying and pasting

• Dragging and dropping

For this example, you'll copy and paste the images.

To add the images to your project

1. The following images are included with the sample project:

   • ChickenSprite

   • FilmStrip

   • MainLogo

   • SmallLogo-Chicken

   • TempBoxArt

   If you downloaded the sample project, open the Assets folder, press Ctrl+A, and then press Ctrl+C.

2. In Blend, in the Projects panel, right-click the Images folder, and then click Paste.

You can now add the images to the design surface as you style your app.

Define CSS style rules

You modify the appearance of your app primarily by applying CSS styles. You can edit your styles by using any text editor, but you can create and edit them more easily by using a sophisticated set of CSS tools in Blend.

You can set specific CSS properties in Blend by:

• Typing directly in the code editor.

• Locating the property that you want to modify in the CSS Properties panel, either visually or by typing the property name in the Search or Set text box, and then entering the value that you want into the value editor for that property.

• Typing the property declaration directly into the Search or Set text box and using the correct CSS syntax. For example, you can set the background-repeat property to repeat-x by typing background-repeat: repeat-x into the Search or Set text box and then pressing Enter.

  You can also enter multiple properties for the same element by typing the property names and values directly into the Search or Set text box. Use the correct CSS syntax, and include a semi-colon (;) between each style definition. For example, you can set the background-repeat property to repeat-x and position-y to center by typing background-repeat: repeat-x; position-y: center into the Search or Set text box and then pressing Enter.

You can arrange properties in the CSS Properties panel in one of two ways: by category or by name.

If you arrange properties by category, the CSS properties appear grouped by category, with the categories arranged alphabetically. If you arrange the properties by name, you'll see an alphabetical list of all available CSS properties.

Next, you'll apply a height property to homepageContainer, and then you'll add and style the images.

To modify the height of homepageContainer

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

   Notice that #homepageContainer now appears in the Style Rules panel. A green outline indicates that it's the currently selected style. The yellow indicator below #homepageContainer is the insertion point for new styles. You can drag the insertion point if you want to insert new styles in a different location. In the CSS Properties panel, also notice that #homepageContainer (default.css) now appears in the Applied Styles window.

2. In the CSS Properties panel, locate the height property by typing height in the Search or Set text box.

3. In the height value editor, type 100%.

   If the properties are arranged by category, line-height will appear first on the list. If the properties are arranged by name, height will appear first on the list.

To add and style the background image

1. In the Search or Set text box, click the x to clear the selection from the previous procedure.

2. In the Background category of the CSS Properties panel, locate the Layers box, click Add , and then click the image resource button .

3. In the source list, click FilmStrip.png.

4. Set position-y to center, and then set repeat to repeat-x.

   

To add and style the main logo

1. In the Layers box, click Add , and then click the image resource button .

2. In the source list, click MainLogo.png.

   Notice that MainLogo.png appears behind filmstrip.png.

3. Change the z-index (layer order) by clicking MainLogo.png in the Layers box and then clicking the Up arrow to move MainLogo.png above filmstrip.png in the list of images.

   MainLogo.png now appears on top of filmstrip.png.

   

4. Set position-x and position-y to center, and set repeat to no-repeat.

   

Create a flexbox layout container

In this section, you'll add and style the chicken image. The chicken image appears in the center of the master page but changes position when you point to it. This effect isn't really an animation but a hover pseudo class that's applied to the image. By default, only half of the image appears. When you point to it, the hidden part of the image becomes visible, replacing the default view and simulating an animation.

To more easily position the image, you'll create a flexbox layout container by modifying the display property of homepageContainer. See Flexible box ("Flexbox") layout.

To add and style the flexbox

1. In the Live Dom panel, click homepageContainer.

2. In the Projects panel, open the images folder, and then double-click ChickenSprite.png to add the chicken image to the design surface.

   By clicking homepageContainer, you've added ChickenSprite.png as a child of homepageContainer. The img element is active, and the chicken image appears on the design surface.

   

3. In the Live DOM panel, click homepageContainer.

4. In the CSS Properties panel, locate the Layout category, and then click flex in the display list.

5. In the FlexBox category, set align-items and justify-content to center.

6. In the Live DOM panel, right-click the img element, click Group Into, and then click div, or press Ctrl+G.

   Tip

   You can also drag- the img element onto the div.

   The image element is now wrapped in a div container.

7. Click the div, and type spriteContainer in the text box.

8. Right-click spriteContainer, and then click Create Style Rule from Element ID.

9. In the CSS Properties panel, set height to 180px, and set overflow-y to hidden.

   

10. Click img in the Live DOM panel, and then type chickenButton in the text box.

    Tip

    Expand spriteContainer if the img element isn't visible.

11. In the Style Rules panel, to the right side of default.css, click Add .

12. In the Style Rules panel, click .newStyle, and then type #chickenButton:hover to create a pseudo-selector for chickenButton.

    Notice that, as you type, CSS Intellisense provides available CSS references for easier development of style rules.

    

13. In the CSS Properties panel, in the Margin category, set margin-top to -180px.

Press F5 to build and run your app, or press Ctrl+I to preview the app in interactive mode. Point to the chicken image to confirm that the chicken image switches states. Press Alt+F4 to close the app.

You can now to create the details page. To continue, see Create your first Windows Store app with Blend, part 2: the details page (HTML & JavaScript).