Componentone Studio Lightswitch for HTML

ComponentOne Studio LightSwitch for HTML

ComponentOne, a division of GrapeCity 201 South Highland Avenue, Third Floor Pittsburgh, PA 15206 • USA

Internet: [email protected] Web site: http://www.componentone.com Sales E-mail: [email protected] Telephone: 1.800.858.2739 or 1.412.681.4343 (Pittsburgh, PA USA Office)

Trademarks The ComponentOne product name is a trademark and ComponentOne is a registered trademark of GrapeCity, Inc. All other trademarks used herein are the properties of their respective owners.

Warranty ComponentOne warrants that the original CD (or diskettes) are free from defects in material and workmanship, assuming normal use, for a period of 90 days from the date of purchase. If a defect occurs during this time, you may return the defective CD (or disk) to ComponentOne, along with a dated proof of purchase, and ComponentOne will replace it at no charge. After 90 days, you can obtain a replacement for a defective CD (or disk) by sending it and a check for $25 (to cover postage and handling) to ComponentOne. Except for the express warranty of the original CD (or disks) set forth here, ComponentOne makes no other warranties, express or implied. Every attempt has been made to ensure that the information contained in this manual is correct as of the time it was written. We are not responsible for any errors or omissions. ComponentOne’s liability is limited to the amount you paid for the product. ComponentOne is not liable for any special, consequential, or other damages for any reason.

Copying and Distribution While you are welcome to make backup copies of the software for your own use and protection, you are not permitted to make copies for the use of anyone else. We put a lot of time and effort into creating this product, and we appreciate your support in seeing that it is used by licensed users only.

This manual was produced using ComponentOne Doc-To-Help™.

Table of Contents

How to Install ComponentOne Studio for LightSwitch HTML ...... 1 Prerequisites ...... 1 To Install Studio for LightSwitch HTML ...... 1 Using the Studio for LightSwitch HTML Extension ...... 2 Installing the NuGet Client Package (Required) ...... 2 Installing the NuGet Server Package (Optional) ...... 7

iii

How to Install ComponentOne Studio for LightSwitch HTML ComponentOne Studio for LightSwitch HTML is a set of jQuery Mobile controls, screen templates, and design- time extensions for use with the LightSwitch HTML Client in Microsoft Visual Studio 2013, or Microsoft Visual Studio 2012 (Update 2 or greater). Based on the popular Wijmo control kit for jQuery UI and jQuery Mobile, Studio for LightSwitch HTML automates the generation of JavaScript code for custom controls and integrates seamlessly with the LightSwitch design-time environment to provide both ready-made screens and control-level extensibility. Individual controls include grids, charts, calendars, gauges, and an image viewer. If you are interested in developing LightSwitch applications for the desktop, you may want to check out ComponentOne Studio for LightSwitch Desktop. The following sections provide helpful information on installing ComponentOne Studio for LightSwitch. Prerequisites You must have Visual Studio 2012 (Update 2 or greater) installed before attempting to install ComponentOne Studio for LightSwitch HTML. If you have older versions of ComponentOne LightSwitch extensions installed, you should uninstall them before installing newer versions. Before installing Studio for LightSwitch it is recommended that you do the following:  Install Visual Studio 2013 Professional  Install Visual Studio 2013 SDK  Install the LightSwitch Extensibility Toolkit for Visual Studio 2013 Once you install the LightSwitch Extensibility Toolkit, complete the following: 1. Double click on the Microsoft.LightSwitch.Toolkit.vsix present in the file. The VSIX Installer dialog box appears. 2. Copy the Microsoft.LightSwitch.Toolkit.targets from this zip into:  For 32-bit systems: %ProgramFiles%\MSBuild\Microsoft\VisualStudio\LightSwitch\v4.0  For 64-bit systems: %ProgramFiles(x86)%\MSBuild\Microsoft\VisualStudio\LightSwitch\v4.0 3. Open Visual Studio and notice the project templates for LightSwitch Extension Library will be available under the installed Templates| Visual Basic or C#| LightSwitch| Extensibility node in the New Project Dialog. To Install Studio for LightSwitch HTML 1. Double-click on C1StudioLightSwitch_versionnumber.exe. 2. Follow the Wizard to install. Make sure to select the Studio for LightSwitch HTML check box when it is displayed.* (This check box will not be enabled if Visual Studio 2012 (Update 2 or greater) is not installed.) 3. Once the installation is complete, click Close.

* If you decide you would like to install Studio for LightSwitch Desktop later, go to the Programs and Features in the Control Panel and select the Change command. Navigate forward to the Options dialog and install.

Using the Studio for LightSwitch HTML Extension Once you have installed the LightSwitch Extensibility Toolkit for Visual Studio 2013 you will have access to the screen templates and custom controls at design time. To view the Lightswitch screen templates, complete the following: 1. Open Visual Studio 2013 or Visual Studio 2012. 2. Open File|New Project. 4. In the New Project Dialog expand the Installed| Templates| Visual Basic or C# and select LightSwitch. 5. In your LightSwitch projects, go to the Extensions tab in project properties and check the extension named ComponentOne Studio for LightSwitch HTML. This will give you access to the screen templates and custom controls at design time. Runtime artifacts are installed in the next steps. Installing the NuGet Client Package (Required) In order for the ComponentOne controls and screens to work at runtime, you will need to install a NuGet package into each HTML Client project. To begin, upgrade the NuGet Package Manager to version 2.5 or later. For more information, see the NuGet Package Manager for Visual Studio 2013 Extension. Next, follow these steps: 1. For Visual Studio 2012, in Solution Explorer, change 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. 2. 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.

3. Ensure that the Stable Only option is selected and then search for wijmo. 4. Install the package named D3 Controls for LightSwitch HTML Client and accept the licenses when prompted to do so.

Note: The Wijmo for LightSwitch HTML Client is also installed since it is a prerequisite for the D3 Controls. 5. If you get the File 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.

NOTE: 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.

NOTE: 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 ComponentOne Studio for LightSwitch HTML. Filenames that are highlighted in blue are part of the original default.htm, but they have been modified to reflect upgrades to jQuery Mobile.

AppTitle

jquery.mobile.structure- 1.3.2.min.css" />

Installing the NuGet Server Package (Optional) In order to use the Wijmo OLAP Screen template, you will need to install a NuGet package into the Server project. First, ensure that your LightSwitch project has at least one data source, and then follow these steps: 1. For Visual Studio 2012, in Solution Explorer, change the LightSwitch project from Logical View to File View. 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. 2. Right-click the Server project and then click Manage NuGet Packages. Make sure that you do not perform these steps on the HTML Client project. 3. Select the Online tab, ensure that the Stable Only option is selected, and then search for wijmo. 4. Install the package named ComponentOne OLAP Server for LightSwitch. Note that you do not need to install any other Wijmo or ComponentOne packages into the Server project. Accept the licenses when prompted to do so. 5. Close the Manage NuGet Packages dialog. 6. In the Solution Explorer, expand the Server project node and the API folder, and then open the file named OlapController.cs (or OlapController.vb if you initially created a Visual Basic project). 7. Search for the TODO comment and replace MyDataSource.MyCollection with an actual entity set reference (for example, NorthwindEntitiesData.Invoices). 8. (Visual Basic only) Edit the file Global.asax and follow the directions contained in the file.

If you have configured the Server project as described here, then the Wijmo OLAP Screen will just work without any modifications, provided that the entity you specify when instantiating the screen template is the same entity specified in step 7 above. Trademarks Microsoft, Windows, Visual Studio, LightSwitch, Excel, and Silverlight, are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. ComponentOne Studio for LightSwitch is a registered trademark of GrapeCity, inc. All product and company names herein may be trademarks of their respective owners.