Create and test an application project (HTML)

  • Article

A Windows Store project built using HTML creates an application that you can run on your Windows desktop. Blend for Visual Studio 2012 makes it easy to not only design the user interface for your application, but also to test the app as you progress.

To create an HTML application project

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

    JJ190123.f60e8b59-50de-4da1-9ba8-722dc5394d9d(en-us,VS.110).png

    The New Project dialog box appears.

  2. For Windows app projects, click HTML (Windows Store).

  3. In the list of available project templates, select Blank App. The other fields display default values for the project name, location, and the programming language for the application logic. You can leave those fields as they are and click OK.

    Tip

    For more information about the individual HTML project types, see "To create a new HTML project" in Create a new project (Windows Store apps).

    A new application project is created and the startup page, default.html, opens for editing.

  4. Click the Projects panel to view the files that were created for your project.

    If you are a graphic designer who is working with a programmer to produce an application, both of you can work on the project at the same time. You would design the user interface by working with the markup files (.html, .css), and the programmer would work with the application logic (default.js), possibly using Microsoft Visual Studio 2012 Express.

  5. Make sure that Design view is visible by clicking either the Design tab JJ190123.32be2832-9f81-4617-97e6-a4a3988a136c(en-us,VS.110).png or the Split tab JJ190123.5b79e600-984e-4f44-b8cd-6c1522832ad4(en-us,VS.110).png on the side of the artboard. This will enable you to edit items on the artboard.

    JJ190123.6077fdd4-d9ee-4372-9324-4e417771b3d6(en-us,VS.110).png

  6. In the Live DOM panel, select the <p> element. In the CSS Properties panel, select Inline Style from the Applied Style Rules list.

    Expand the Text category. Set font-size to 40px and set color to #FF7CCFFF.

    Setting text style

  7. Click Save All on the File menu to save your project to disk. Save early, save often.

To test an HTML application project

  • To build and run your application, click Run Project on the Project menu (or press F5, Ctrl+F5).

    If the test build is successful, your project will automatically open in an application window. If the test build is unsuccessful, you can view the build errors in the Results panel.

See Also

Tasks

Undo or redo an action (Blend for Visual Studio)

Add or link to an existing item (Blend for Visual Studio)

Change the active document (Windows Store apps)

Insert an item into the active document (Windows Store apps)

Insert an item into the active document (Windows Store apps)