Quick Start: Change Appearance and Add Content

In this step, you'll begin by setting up the view and creating the wijflipcard widget.

Note: This step assumes that you have created an MVC Classic project. See the Creating an MVC Classic Project topic for more information.

In Source View

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following reference within the <head></head> tags:

                        
    <!--RequireJs-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
    <script type="text/javascript">
        requirejs.config({
            baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
        });
    </script>

By default the widget uses bootstrap theming. To change the theme, add the following reference to wijmo themes within the <head></head> tags:
```
 <link href="http://cdn.wijmo.com/themes/midnight/jquery-wijmo.css" rel="stylesheet" type="text/css" />
```

Add the following script between the <head></head> tags to initialize the widget and set its height and width.

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijflipcard"], function () {
        $(document).ready(function () {
            $("#flipcard1").wijflipcard({
                height: 250,
                width: 200
            });
        });
    });
</script>

Add the following markup within the <body></body> tags of the page, just after @RenderBody() to create the wijflipcard and display an image from an external source:

<div id="flipcard1">
    <div><center>
        <br />
        <img src="http://wijmo.com/img/wijmo.png"><br />
        This is the frontPanel.
    </center></div>
    <div><center>
        <br /><br />
        <br /><br />
        This is the backPanel.
    </center></div>
</div>

Press F5 to run the project.

What You've Accomplished

The wijflipcard will appear as shown in the image below:

Click the wijflipcard to flip it over.