Installing the NuGet Client Package (Required)

For the ComponentOne controls and screens to work at runtime, you need to install NuGet packages into each HTML Client project. To begin, upgrade the NuGet Package Manager to version 2.5 or above. For more information, see the NuGet Package Manager for Visual Studio 2013 Extension.

Now, complete the following steps:

In case you are using Visual Studio 2012, go to Solution Explorer and changes the LightSwitch project from Logical View to File View. Note that in Visual Studio 2013 you no longer need to switch between Logical View and File View because all your project content is available under one view in Solution Explorer.
Right-click the HTML Client project and then click Manage NuGet Packages. Make sure that you do not perform these steps on the Desktop Client (Silverlight) project.
Ensure that the Stable Only option is selected and then search for wijmo.

Install the package named D3 Controls for LightSwitch HTML Client and accept the licenses when prompted to do so.

The Wijmo for LightSwitch HTML Client is also installed since it is a prerequisite for the D3 Controls.

If you get theFile Conflict warning dialog box, click the Yes to All button and then click on the Close button to exit the Manage NuGet Packages dialog box.

After installing the client package, open the newly modified default.htm. This file is the same as the original default.htm except that it has additional references to .css and .js files that were added to the project by the client package. Change both occurrences of AppTitle to a meaningful name for your project. If you prefer to use the LightSwitch dark theme, you should change the following stylesheet references:

· light-theme.css => dark-theme.css

· msls-light.css => msls-dark.css

· c1ls-light.css => c1ls-dark.css

· d3ls-light.css => d3ls-dark.css

The first two files are part of a standard HTML Client project; the third one is added by the Wijmo for LightSwitch HTML Client package. The last file is added after you install the D3 Controls for LightSwitch HTML Client package. Note that the actual filenames contain version numbers, which are not shown here.

If you are not going to use the D3 controls in your project, you can install the Wijmo for LightSwitch HTML Client package instead of D3 Controls for LightSwitch HTML Client. This will eliminate unnecessary references to D3 scripts and stylesheets. You can always install the D3 package later on if desired.

Both the Wijmo and D3 client packages unconditionally install three versions of default.htm:

· default-1.0.1.htm (VS2012 Update 2)

· default-2.0.0.htm (VS2013)

· default-2.5.0.htm (VS2013 + March 2014 Update of Office Developer Tools for VS2013)

These files are used by the package installation script, and are provided for your reference.

Version 4.0.20141.29 changed how default.htm is installed by the NuGet packages for HTML client projects. A copy of the original default.htm is now saved as default-backup.htm. Depending upon which version of Visual Studio you are using, default.htm is then replaced with compatible content. Formerly, the package prompted the user before overwriting the file.

The following listing shows default.htm (for Visual Studio 2013) with references that are current at the time of this writing. Lines that are highlighted in yellow are specific to LightSwitch HTML Edition. Filenames that are highlighted in blue are part of the original default.htm, but they have been modified to reflect upgrades to jQuery Mobile.

HTML	Copy Code
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=10" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="msapplication-TileImage" content="Content/Images/user-logo-144.png" /> <meta name="msapplication-TileColor" content="#0072c6" /> <link rel="icon" href="Content/Images/user-logo.ico" type="image/x-icon" /> <title>AppTitle</title> <script type="text/javascript"> // Work around viewport sizing issue in IE 10 on Windows Phone 8 if (navigator.userAgent.match(/IEMobile\/10\.0/)) { document.writeln("<style>@-ms-viewport { width: auto!important; }</style>"); } </script> <!-- Change light-theme-2.5.0.css and msls-light-2.5.0.css to dark-theme-2.5.0.css and msls-dark-2.5.0.css respectively to use the dark theme. Alternatively, you may replace light-theme-2.5.0.css with a custom jQuery Mobile theme. --> <link rel="stylesheet" type="text/css" href="Content/light-theme-2.5.0.css" /> <link rel="stylesheet" type="text/css" href="Content/msls-light-2.5.0.css" /> <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.2.min.css" /> <link rel="stylesheet" type="text/css" href="Content/msls-2.5.0.min.css" /> <!-- Wijmo Widgets CSS --> <link rel="stylesheet" type="text/css" href="Content/jquery.wijmo-pro.all.3.20133.29.min.css" /> <link rel="stylesheet" type="text/css" href="Content/c1ls-light-4.0.20141.34.css" /> <!— D3 Controls CSS --> <link rel="stylesheet" type="text/css" href="Content/d3ls-light-4.0.20141.34.css" /> <!-- Default font, header, and icon styles can be overridden in user-customization.css --> <link rel="stylesheet" type="text/css" href="Content/user-customization.css"/> </head> <body> <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore"> <div class="msls-app-loading-img"></div> <span class="ui-icon ui-icon-loading"></span> <div class="ui-bottom-load"> <div>AppTitle</div> </div> </div> <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script> <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script> <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script> <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="Scripts/jquery.mobile-1.3.2.min.js"></script> <script type="text/javascript" src="Scripts/datajs-1.1.1.min.js"></script> <script type="text/javascript" src="Scripts/Generated/resources.js"></script> <script type="text/javascript" src="Scripts/msls-2.5.0.min.js"></script> <!--Wijmo Widgets JavaScript--> <script type="text/javascript" src="Scripts/amplify.min.js"></script> <script type="text/javascript" src="Scripts/jquery.wijmo-open.all.3.20133.29.min.js"></script> <script type="text/javascript" src="Scripts/jquery.wijmo-pro.all.3.20133.29.min.js"></script> <script type="text/javascript" src="Scripts/c1ls-4.0.20141.34.js"></script> <!-- D3 Controls JavaScript --> <script type="text/javascript" src="Scripts/d3.v3.js"></script> <script type="text/javascript" src="Scripts/colorbrewer.v1.js"></script> <script type="text/javascript" src="Scripts/d3ls-4.0.20141.34.js"></script> <script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script> <script type="text/javascript"> $(document).ready(function () { msls._run() .then(null, function failure(error) { alert(error); }); }); </script> </body> </html>

HTML

Copy Code

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="msapplication-TileImage" content="Content/Images/user-logo-144.png" />
    <meta name="msapplication-TileColor" content="#0072c6" />
    <link rel="icon" href="Content/Images/user-logo.ico" type="image/x-icon" />

    <title>AppTitle</title>

    <script type="text/javascript">
        // Work around viewport sizing issue in IE 10 on Windows Phone 8
        if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
            document.writeln("<style>@-ms-viewport { width: auto!important; }</style>");
        }
    </script>

    <!-- Change light-theme-2.5.0.css and msls-light-2.5.0.css to dark-theme-2.5.0.css and msls-dark-2.5.0.css respectively to use the 
         dark theme.  Alternatively, you may replace light-theme-2.5.0.css with a custom jQuery Mobile theme. -->
    <link rel="stylesheet" type="text/css" href="Content/light-theme-2.5.0.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-light-2.5.0.css" />
    
    <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.2.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-2.5.0.min.css" />

    <!-- Wijmo Widgets CSS -->
    <link rel="stylesheet" type="text/css" href="Content/jquery.wijmo-pro.all.3.20133.29.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/c1ls-light-4.0.20141.34.css" />

    <!— D3 Controls CSS -->
    <link rel="stylesheet" type="text/css" href="Content/d3ls-light-4.0.20141.34.css" />

    <!-- Default font, header, and icon styles can be overridden in user-customization.css -->
    <link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
</head>
<body>
    <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
        <div class="msls-app-loading-img"></div>
        <span class="ui-icon ui-icon-loading"></span>
        <div class="ui-bottom-load">
            <div>AppTitle</div>
        </div>
    </div>

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
    <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="Scripts/datajs-1.1.1.min.js"></script>
    <script type="text/javascript" src="Scripts/Generated/resources.js"></script>
    <script type="text/javascript" src="Scripts/msls-2.5.0.min.js"></script>

    <!--Wijmo Widgets JavaScript-->
    <script type="text/javascript" src="Scripts/amplify.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.wijmo-open.all.3.20133.29.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.wijmo-pro.all.3.20133.29.min.js"></script>
    <script type="text/javascript" src="Scripts/c1ls-4.0.20141.34.js"></script>

    <!-- D3 Controls JavaScript -->
    <script type="text/javascript" src="Scripts/d3.v3.js"></script>
    <script type="text/javascript" src="Scripts/colorbrewer.v1.js"></script>
    <script type="text/javascript" src="Scripts/d3ls-4.0.20141.34.js"></script>

    <script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            msls._run()
            .then(null, function failure(error) {
                alert(error);
            });
        });
    </script>
</body>
</html>