Componentone Studio Lightswitch for HTML
Total Page:16
File Type:pdf, Size:1020Kb
ComponentOne Studio LightSwitch for HTML Copyright 1987-2014 GrapeCity, Inc. All rights reserved. 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. 1 * 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. 2 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. 3 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: 4 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