Using Blend to Design JavaScript Based Windows Store Apps ---

Overview Blend for Microsoft Visual Studio 2013 provides you with great visual design tools to help build

compelling Windows Store Apps.

In this lab, you’ll explore how you can use Blend to build a Windows Store App using HTML and

JavaScript.

Objectives In this hands-on lab, you will learn how to do the following:

- Learn to create a simple “Hello, World” App

- Learn to create and style a richer Windows 8 Store App that has access external services

Prerequisites The following are required to complete this hands-on lab:

- Windows 8.1

- Microsoft Visual Studio 2013 (with Update 2 RC applied)

- A free Microsoft account

- A free Rotten Tomatoes web service key

Note: You must be an Administrator on the machine where you run this lab in order to install a

developer license.

Notes Estimated time to complete this lab: 60 minutes.

Note: You can log into the virtual machine with user name “User” and password “P2ssw0rd”.

Note: This lab may make references to code and other assets that are needed to complete the exercises.

You can find these assets on the desktop in a folder named TechEd 2014. Within that folder, you will

find additional folders that match the name of the lab you are working on.

Exercise 1: Hello, World In this exercise, you will create a simple Windows Store App in Blend using HTML.

Task 1: Creating a New Project In this first task, you will build a simple Windows Store App.

1. Start Blend for Visual Studio 2013.

2. Select New Project from the startup screen.

3. In the New Project dialog, select HTML (Store Apps) | Windows Apps from the left pane, and

choose Blank App (Windows) from the right pane. Name the project HelloWorld, select a location

(or leave the default value), set the Language to JavaScript and then click OK.

4. If you do not have a developer license for Windows 8.1 installed yet, you will be prompted to agree

to the terms and then install a license. Click the “I Agree” button if you agree with the terms. You

will also need to click Yes in the User Account Control dialog box that appears.

Note: Developer licenses are needed for each machine that you develop or test on, and are free

to obtain and use.

5. If you are installing a developer license, you may also need to sign in with your Microsoft account.

Go ahead and sign in to finish the developer license installation.

6. After installing a developer license using a Microsoft account, you will be given 30 days before it

expires. Click the Close button.

7. Blend opens with the design surface in the center of the screen and various tool windows ready to

go. In the next task, you modify and run the application.

Task 2: Modifying and Running the Application In this second task, you modify the app using some of the tooling in Blend and then run it.

1. Select the “Content goes here” text in the main editing window.

2. You’ll notice that as you select the object on the design surface or art board, the various editor and

tool windows synchronize. Blend provides two editors that by default are at the bottom of the

environment. The one on the left is an HTML editor. The one on the right is a CSS editor.

3. Delete the selected item by pressing the delete key.

4. Select the Assets panel. The Assets panel in blend provides you will a single place to find all the

available items you can use to design and build your application.

5. In the Assets panel, select the HTML Elements node on the left side list.

6. In the right side list, locate the h1 element and double-click on it to add it to the art board.

7. Note that both the Live DOM window and the HTML editor window are updated with the new

element. The Live DOM presents a tree of objects for the running version of your application. As you

build a more complicated application later, all the objects in the application will be available for you

to manipulate and style.

8. On the art board, double-click on the h1 element and change the text to hello, world.

9. Now that you’ve added some text, you’ll want to style it. Blend provides a number of tools to help

you style your application. In particular, it provides a rich set of out-of-the-box styles for Windows

Store Apps.

10. Select the Style Rules tab to access the Style Rules panel.

11. The Style Rules panel lists all of the style sheets Blend has loaded for your application. There are

two. The first, ui-dark.css, provides all of the styling from Microsoft to build a Windows Store App

that follows the standard style guidelines. This file is locked and you can’t change it. However, Blend

provides a second file, default.css, and this is for you to define your own styles for use with your

application.

12. Select and expand default.css in the Style Rules.

13. Create a new style rule by clicking the + symbol to the right of default.css.

14. Name the style h1.

15. Change the font-size property to 300px in the Font category of the CSS Properties panel. Press the

Enter key to save your changes to the property.

16. Select the body element in the Live DOM panel.

17. In the CSS Properties panel, select body (default.css).

18. Change the background-color in the Background group to #FF005F89 by first clicking in the box with

the text “Not set”, and then entering the value in the text field. Press the Enter key to save your

changes.

19. Press F5 to run the application.

20. Close the app by pressing Alt+F4. To return to the Desktop, either press Win+D or select the

Desktop tile on the Start screen.

21. Select File | Close Project.

Exercise 2: Building an Application using Blend Now that you’ve gotten a quick taste of Blend, let’s see how you can build an application that gets

current movie reviews from the Internet.

Task 1: Open and Run the Finished Solution In this first task, you will open and run the finished solution that you’re going to learn how to build.

1. Select File | Open Project/Solution.

2. Navigate to the lab’s Source\Exercise 2\PickAFlick-Solution folder and then double-click on the

MyPickAFlick.sln file to open.

3. Feel free to examine the contents of the solution. You’ll note that the application is composed of

two pages and uses the Rotten Tomatoes API to return movie synopsis with an image for each movie

displayed. The screenshot below shows the design view for the default.html page.

4. Double-click on the js\default.js file from the Projects panel.

5. Scroll down to the getMovieData function and replace the “apikey” value with your Rotten

Tomatoes API key (use the pre-defined key, if you do not have your own key).

6. Press F5 to run the application. Note that you need to have Internet access in order to run the

solution.

7. Once the application has started, click the red bird in the middle of the app.

8. The app connects to the Internet and the Rotten Tomatoes web service and downloads information

about current movies. Feel free to scroll through the movies.

9. Close the app by pressing Alt+F4. To return to the Desktop, either press Win+D or select the

Desktop tile on the Start screen.

10. Select File | Close Project.

Task 2: Creating a New Project In this task, you will create a new project and import existing design assets to help you make your

application look more professional, like the Pick’a Flick solution.

1. Select File | New Project.

2. In the New Project dialog, select HTML (Store Apps) | Windows Apps from the left pane, and

choose Blank App (Windows) from the right pane. Name the project MyPickAFlick, select a location

(or leave the default value), set the Language to JavaScript and then click OK.

3. In a File Explorer window, navigate to the lab’s Source\Images folder.

4. Press Ctrl+A followed by Ctrl+C to select all the images and then copy them to the clipboard.

5. Return to Blend and locate the Projects panel.

6. Right-click on the images folder node and then select the option to Paste.

7. In the default.html document window, select the “Content goes here” paragraph item, and then

press the Delete key to remove it.

Task 3: Layout the Main Page In this task, you will format and layout the main page.

1. The first thing you want to do is change the background color. Select the body element in the Live

DOM panel.

2. In the CSS Properties panel, select the body (default.css) style rule.

3. Change the background-color in the Background group to #FFD5BF9A by first clicking in the box

with the text “Not set”, and then entering the value in the text field. Press the Enter key to save

your changes.

Task 4: Add a New Page to the Project In this task, you will create a new page that will serve as the home page for the application.

1. In the Projects panel, right-click on your project and select Add New Item.

2. In the New Item dialog, select HTML Page, change the name to homepage.html, and then click OK.

Blend adds a new blank page with no CSS references.

3. Delete the “Content goes here” element from the new page.

4. Select the Assets panel.

5. Type “div” (without the quotes) in the Search assets text box.

6. Drag and drop an empty div element to the design surface of homepage.html. Blend will put the div

element inside the body element and update all of the windows like the Live DOM and the HTML

editing window.

7. Provide the div element with a new ID attribute of homePageContainer. You can do this using the

HTML editor window or the HTML Attributes panel.

8. Close homepage.html and save your changes when prompted.

Task 5: Adding JavaScript In this task, you will add some initial JavaScript to your application that will render the contents of the

new home page to the body of the default page. In addition to using Blend, you’ll also see how you can

simultaneously use Visual Studio 2013.

1. Select the Projects panel in Blend.

2. If necessary, collapse the images folder.

3. Expand the js folder and open default.js by double-clicking on it.

4. At the end of the file, add a blank line and then type the following JavaScript at the end. As you

type, you’ll notice that, while the editor is convenient, it doesn’t provide IntelliSense.

JavaScript var target; function loadInitialPage() { target = document.querySelector("body"); }

5. Remove the code you just typed.

6. In the Projects panel, right-click on default.js and then select Edit in Visual Studio.

7. In Visual Studio, type in the same JavaScript code at the end of the of the script file. This time you

should get the full IntelliSense experience as you type.

8. Now add the following to the end of the loadInitialPage function. Feel free to use copy/paste

method instead of typing.

JavaScript WinJS.UI.Fragments.renderCopy("/homepage.html", target).done( function completed(r) { handleLoadedPage(); });

9. Create a new function named handleLoadedPage just after the loadInitialPage function.

JavaScript function handleLoadedPage() { }

10. Locate the existing line of code that makes a call to “app.start()”. Add a blank line after that and

then type the following code.

JavaScript document.addEventListener("DOMContentLoaded", loadInitialPage, false);

11. Save the changes to default.js with Ctrl+S and then return to Blend.

12. When prompted to reload files, click Yes to All.

13. Close default.js.

14. Open default.html.

15. Refresh default.html by clicking the Refresh button in the upper right corner about the document

art board.

16. Note that the new homePageContainer div shows up in the Live DOM. Blend is executing the

JavaScript that you added.

17. Select homePageContainer in the Live DOM panel. Notice that Blend gives you visual cues to show

you’re working with an element that was programmatically added. In this case, the default.js script

rendered the homepage.html markup into the body element of default.html.

Task 6: Add Some Images In this task, you’ll use some of the images you added earlier to start styling the app.

1. Right-click on the homePageContainer element in the Live DOM and then select Create Style Rule

from Element ID.

2. In the CSS Properties panel, expand the Sizing group and change the height property to 100%.

Alternatively, you can also type in the property and value in the CSS editor. This pattern of creating a

style from an ID, or even a Class, and then adjusting properties is something you’ll repeat often in

order to give your application the look and feel you’re after.

Note: When working with properties in the CSS Properties panel, remember that you can type in

a property name in the Search CSS Properties text field to find it quickly.

3. In the CSS Properties panel, expand the Background section and click the Add layer button to create

a new layer.

4. In the Background section, click the Image button under the new layer.

5. From the combo-box below the Image button, select FilmStrip.png from the list of images you

already added to your project.

6. Change the position-x to 0%, position-y to center and repeat to repeat-x.

7. The designer view should now look similar the following screenshot.

8. Now repeat the process to add in a new layer for the logo. Pick the MainLogo.png image file and

change the position-x to center, position-y to center and repeat to no-repeat.

9. With the MainLogo.png layer selected, click the “Move selected layer up” button to move this layer

above the FlimStrip.png layer in the z-order.

10. The designer view should now look similar the following screenshot.

11. In the Projects panel, expand the images folder.

12. Drag and drop ChickenSprite.png picture onto the document.

13. In the Live DOM panel, select the homePageContainer object.

14. In the CSS Properties panel, expand the Layout section and change the display property to

–ms-flexbox.

15. In the CSS Properties panel, expand the Flexbox section and change both the align-items and

justify-content properties to center.

16. At this point, you have the image centered. However, you want to have it only show one of the

images at a time, alternating between them when you hover over the image. Using the HTML

editor, wrap the existing ChickenSprite image element in a new div as follows (all within the

homePageContainer div):

HTML <div id="spriteContainer"> <img alt="ChickenSprite" src="/images/ChickenSprite.png"> </div>

17. Right-click on the spriteContainer element in the Live DOM and then select Create Style Rule from

Element ID.

18. In the CSS Properties panel, type height into the search box to filter the properties.

19. Change the height property to 180px.

20. In the CSS Properties panel, type overflow into the search box filter the properties.

21. Change the overflow property to hidden.

22. In the Live DOM window, right-click the img element under the spriteContainer and then select the

Edit ID option.

23. Change the ID to chickenButton.

24. Select the Style Rules panel and expand the default.css item.

25. Click the + symbol to the right of default.css to create a new style rule.

26. Set the selector for the new style rule to be #chickenButton:hover.

27. In the CSS Properties panel, type margin into the search box filter the properties.

28. Change the margin-top property to be -180px.

29. Press F5 to run your app.

30. Hover your mouse over the sprite and you should see it toggle between the two images.

31. Close the application and return to Blend.

Task 7: Add a Page to Display Movie Details In this task, you will a new page to display the movie details.

1. In the Projects panel, right-click on your project and select Add New Item.

2. In the New Item dialog, select HTML Page, change the name to movieDisplay.html and then click

OK.

3. Delete the “Content goes here” element from the new page.

4. Using the Assets panel like before, drag and drop an empty div element to the body of the page.

5. Give the new div element an ID of movieDisplayContainer.

6. Press Ctrl+S to save your changes.

7. Close movieDisplay.html.

8. Return to Visual Studio, and click Reload All when notified about changes occurring outside of the

editor. This was expected.

9. You will now add in some additional code that will handle the chicken button click, load the

movieDisplay.html page, call a getMovieData function to get movie data using the Rotten Tomatoes

API, parse the JSON response and finally bind the results to the UI.

10. Delete the existing placeholder handleLoadedPage() function from default.js, and replace it with

the following:

JavaScript function handleLoadedPage() { var chickenButton = document.querySelector("#chickenButton"); chickenButton.addEventListener("click", loadResultsPage); } function loadResultsPage() { clearChildren(target); WinJS.UI.Fragments.render("/movieDisplay.html", target).done( function completed(r) { getMovieData(); }); } function clearChildren(element) { while (element.hasChildNodes()) { element.removeChild(element.lastChild); } } var movieData; function getMovieData() { var movieArray = new Array(); var apikey = "kjca8hvypbdvnafdaca5uj3t"; var baseUrl = "http://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); response.movies.forEach(function (i) { movieArray.push({ title: i.title, summary: i.synopsis, boxArt: i.posters.detailed }); }); movieData = new WinJS.Binding.List(movieArray); WinJS.UI.processAll(); }); }

11. In the getMovieData function, replace the “apikey” value with your Rotten Tomatoes API key (use

the pre-defined key, if you do not have your own key).

11. Press Ctrl+S to save your changes.

12. Return to Blend.

13. Refresh default.html by clicking the Refresh button in the upper right corner of the document art

board.

14. Press F5 to run the app.

15. Click the chicken button to load the new movieDisplay.html page. The new page loads as expected,

but you won’t see anything yet. You will add some additional code to display the movies in the next

task.

16. Close the application and return to Blend.

Task 8: Add Navigation Support In this task, you will add some navigation support to the application. To do this, you’ll take advantage of

a powerful feature in Blend called Interactive Mode. This allows you to run the application in place and

the stop the application and design it after the app has loaded and processed dynamic content.

1. Switch Blend into Interactive Mode by clicking the Turn on Interactive Mode button at the top right

of the art board.

2. Click on the chicken button.

3. Your application is now in the state after it has loaded the movie data. Click the Turn off Interactive

Mode button (toggle the same button) to return to the design time mode.

4. You can now design things with the data retrieved from the Internet. Select the

movieDisplayContainer element in the Live DOM panel.

5. Right-click on movieDisplayContainer from the Live DOM panel and then select the Create Style

Rule from Element ID option.

6. In the CSS Properties panel, search for the height property and change it to 100%.

7. In the Assets panel, search for FlipView and then drag and drop the control onto the design surface.

Note: The Flipview control is ultimately just a div that has a pointer to the Microsoft JavaScript

library that generates dynamic elements and provides you with the control’s functionality.

Combined with the Live DOM, this makes it easy to style your application and quickly add in

functionality. The code you added earlier in getMovieData uses data binding to link the data to

the UI.

8. In the Live DOM panel, select the [FlipView] control. Because the control already has a class, you’re

going to create a style rule so you can override the built-in styles from ui.dark.css.

9. Right-click on the control and select Create Style Rule from Element Class | win-flipview.

10. Change the height to 100%.

Task 9: Bind Data to the User Interface In this last design-specific task, you’ll bring everything together and layout the page to display the data

retuned from the Rotten Tomatoes API.

1. Make sure you still have the [FlipView] control selected in the Live DOM panel.

2. Select the HTML Attributes panel.

3. In the Windows App Controls section, change the itemDataSource property to

movieData.dataSource and press Enter. The movieData object was created in the JavaScript that

you added in earlier and is used to store the movie information that is returned from the web

service. Take note of the raw data that is now displayed on the movieDisplay.html page.

4. Now you can format the raw data by creating an item template. In the Windows App Controls

section of the HTML Attributes panel, click the drop-down for the itemTemplate property and then

select Create new template.

5. Name the template movieTemplate, select the boxArt, summary, and title data fields, and then

click OK.

6. The design view for default.html should now look similar the following screenshot, although the

movie data will likely be different.

7. You’re now going to define rows and columns for the data using the ms-grid control. You could add

the control and then adjust properties in the CSS Properties panel. However, you can also do it using

the art board.

8. 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 all of those elements.

9. Right-click the selected div in the Live DOM pane, and then select Add New Class.

10. 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.

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

12. In the search box for the CSS Properties panel, type height: 100%; width: 100%; to set the height

and width properties at the same time, and then press Enter. This moves the content to the upper-

left corner of the design surface.

13. To make it easier to create a grid, clear the page by deleting the markup found in the

movieContainer div in movieDisplay.html. You will need to select the movieDisplay.html tab to view

the HTML.

14. Select the default.html tab to return to the default page.

15. In the CSS Properties window, search for display.

16. Change the display property to –ms-grid.

17. Ensure that the div with movieContainer class is selected in the Live DOM before moving on to the

next step.

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

19. Using your mouse, you can add rows and columns by moving your mouse to the edge of the

document on the art board. Blend will display an adornment with line representing where the

column or row will go. 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.

20. Repeat the process to add in three more grid column adorners, which will define five total columns.

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

22. When you're finished, you should have a grid with five columns and two rows that resembles the

following screenshot.

23. Note that you can also use the width adorner to make adjustments to the grid layout. To view the

width adorner, move the mouse cursor over one of the column or row values.

24. If you select the drop down arrow for the adorner, you can select between different measurement

options including Fraction (fr), Pixel (px), Auto, and Percentage (%).

Task 10: 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.

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

of the grid.

Note: If you need to make any adjustments to the rows and columns in future steps, you can do

so by selecting the movieContainer div once again and using the row and use the row and

column adorners.

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

3. In the Add New Class dialog box, name the class smallLogo-Chicken, ensure that the Create style

rule targeting this class is selected, and then click OK.

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

center.

5. In the Projects panel, open the images folder, and then drag temp.png onto the design surface.

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

7. In the Add New Class dialog box, name the class boxart, ensure that the Create style rule targeting

this class is selected, and then click OK.

8. In the CSS Properties panel, in the Grid category, set grid-column to 3 and grid-row to 2.

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

to start.

Task 11: 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.

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

2. In the HTML Attributes panel, in the Common category, click the property marker to the right of the

src attribute, and then select Edit Data Binding.

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

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

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

surface.

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

Note: Make adjustments to the column width if necessary in order to make the box art fit

comfortably within the bounds. The screenshot below shows that the third column size was

increased slightly.

7. In the Assets panel, type h1 into the Search text box, and then drag the h1 element onto the design

surface.

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

9. In the Add New Class dialog box, name the class title, 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 to 3 and grid-row to 1.

11. In the CSS Properties panel, next to Color in the Font category of the CSS Properties panel, click Not

Set.

12. In the bottom-right corner of the color editor, click the color eyedropper.

13. 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. Click the color that you want to apply to the title.

14. With h1 element selected, in the Common category of the HTML Attributes panel, click the property

marker to the right of the textContent property, and then click Edit Data Binding.

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

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

surface.

17. 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. In the CSS Properties panel, in the Grid category, set the value

of grid-column-span to 3, and then press Enter.

18. The h1 element now spans three columns.

19. In the HTML editor currently showing movieDisplay.html (bottom-left), locate the h1 element for

the movie title within the movieContainer div. Scroll to the right and replace the body of the tag

with “Loading…”, replacing the “h1” that is currently there.

20. In the Assets panel, type article into the Search text box, and then drag the article onto the design

surface. Because the element is empty, you won't see the content until you bind to the data.

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

22. In the Add New Class dialog box, name the class summary, ensure that Create style rule targeting

this class is selected, and then click OK.

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

24. In the Common category of the HTML Attributes panel, click the property marker to the right of the

textContent property, and then click Edit Data Binding.

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

26. The new movie summary appears on the design surface.

27. Adjust the grid rows and columns as desired to improve the layout if you would like to. For example,

starting with the layout as shown in the previous screenshot, you may want to decrease the size of

the fourth column between the box art and the summary text.

Task 12: 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.

1. Select the article element, and then select the Cambria font in the font-family name list in the CSS

Properties panel.

2. In the font-size property value editor, click or enter 30px.

3. Select the title element, and then select the Castellar font.

4. Feel free to play around with the final layout, fonts, or other properties for the movie template.

5. As one final last touch, you will add a scrollbar so that longer movie summaries can be fully viewed.

Select the article element, then search for the overflow property in the CSS Properties panel and

set it to auto.

6. Press F5 to run the application and navigate through the current movies.

Note: Your application may look slightly different from that shown in the following screenshot,

depending upon what additional customizations you apply to the movie template elements.