Sưu tầm: Các phương thức bổ sung giao diện cho các ứng dụng làm từ LightSwitch 2011


This walkthrough demonstrates how to create a theme extension for Visual Studio LightSwitch. A theme extension defines a color and font palette for the LightSwitch shell.

To create a theme extension, you must do the following:

  1. Create a theme extension project.

  2. Specify the display name and description.

  3. Define the theme.

  4. Test the theme extension.

Prerequisites


  • Visual Studio Professional 2012

  • Visual Studio 2012 SDK

  • LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012

Create a Theme Extension Project


The first step is to create a project and add a LightSwitch Theme template.

To create an extension project
  1. On the menu bar in Visual Studio, choose File, New Project.

  2. In the New Project dialog box, select the LightSwitch node, and then select LightSwitch Extension Library (Visual Basic) or LightSwitch Extension Library (C#).

  3. In the Name field, type TestThemeExtension as the name for your extension library. This name will appear on the Extensions tab of the LightSwitch Application Designer.

  4. Choose the OK button to create a solution that contains the seven projects that are required for the extension.

To choose an extension type
  1. In Solution Explorer, select the TestThemeExtension.Lspkg project.

  2. On the menu bar, choose Project, Add New Item.

  3. In the Add New Item dialog box, select LightSwitch Theme.

  4. In the Name field, enter TestTheme as the name for your extension.

  5. Choose the OK button. Files will be added to several projects in your solution.

Specify the Display Name and Description


The default name for your theme is “TestTheme” and the default description is “TestTheme description.” Both of these will appear in the Application Designer at design time. Therefore, you will change them to something more meaningful.

To specify the display name and description
  1. In Solution Explorer, choose the TestThemeExtension.Common project.

  2. Expand the Metadata and Themes nodes, and open the TestTheme.lsml file.

  3. In the Theme element, replace the DisplayName value with Test Theme, and replace the Description value with This is my first try at creating a theme. As follows.

    Xml

    Copy

    <Theme Name="TestTheme">
        <Theme.Attributes>
          <DisplayName Value="Test Theme"/> 
          <Description Value="This is my first try at creating a theme."/>
        </Theme.Attributes>
      </Theme>
    

    These are the values that developers will see when they select your theme on the General Properties tab of the application designer.

At this point you have created a theme, and you can test it in a LightSwitch application.

Define the Theme


The LightSwitch Theme project template added a TestTheme.xaml file to the TestThemeExtension.Client project. This file contains the resource directory for the LightSwitch shell; the default values and styles define the appearance of the LightSwitch Blue Theme (Default) theme that is the default for LightSwitch applications. You define your own theme by modifying some or all of the values in this file. For more information on the available styles, see Control Elements for LightSwitch Themes.

To define the theme
  1. In Solution Explorer, choose the TestThemeExtension.Client project.

  2. Expand the Presentation and Themes nodes, and open the TestTheme.xaml file.

  3. On the menu bar, choose Edit, Find and Replace, Quick Replace.

  4. In the Find and Replace dialog box, enter Segoe UI, Arial in the Find what field, and enter Segoe Script in the Replace with field.

  5. Choose Current Document in the Look in list, and then choose Replace All.

    Eleven occurrences will be replaced, defining Segoe Script for all of the font values.

  6. In the TestTheme.xaml file, locate the TextBoxBackgroundBrush element, and replace <SolidColorBrush x:Key=”TextBoxBackgroundBrush” Color=”White”/> with <SolidColorBrush x:Key=”TextBoxBackgroundBrush” Color=”Yellow”/>.

  7. Locate the ToolbarBackgroundBrush element and replace <SolidColorBrush x:Key=”ToolbarBackgroundBrush” Color=”#FFE9EDF1″/ with <SolidColorBrush x:Key=”ToolbarBackgroundBrush” Color=”Red”/.

    Note that the color values can be entered as either a System.Drawing.Color value or a hexadecimal color value.

    TipTip

    You can also open the .xaml file in Microsoft Expression Blend 4 and change the colors in a visual designer.

At this point you have created a rudimentary theme, and you can test it in a LightSwitch application.

Test the Theme Extension


You can test the theme extension in an experimental instance of Visual Studio. If you have not already tested another LightSwitch extensibility project, you have to enable the experimental instance first.

To enable an experimental instance
  1. In Solution Explorer, select the TestThemeExtension.Vsix project.

  2. On the menu bar, choose Project, TestThemeExtension.Vsix Properties.

  3. On the Debug tab, under Start Action, choose Start external program.

  4. Enter the path of the Visual Studio executable, devenv.exe.

    By default on a 32-bit system, the path is C:\Program Files\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe; on a 64-bit system, it is C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe.

  5. In the Command line arguments field, type /rootsuffix Exp as the command-line argument.

    NoteNote

    All subsequent LightSwitch extensibility projects will also use this setting, by default.

To test the theme
  1. On the menu bar, choose Debug, Start Debugging. An experimental instance of Visual Studio opens.

  2. In the experimental instance, on the menu bar, choose File, Open Project.

  3. In the Open Project dialog box, select any existing LightSwitch application project and open it.

  4. On the menu bar, choose Project, ProjectName Properties.

  5. In the project designer, on the Extensions tab, check the TestThemeExtension check box.

  6. Select the General Properties tab, and in the Theme list, choose Test Theme.

  7. On the menu bar, choose Debug, Start Debugging. Observe the changes in appearance in the running application.

Next Steps


This completes the theme extension walkthrough; you should now have a fully functioning theme extension that you can reuse in any LightSwitch project. Of course, you might want to modify the styles to make the theme a bit more pleasing to the eye; the walkthrough is only intended to show you the necessary techniques.

If you are going to distribute your extension, there are a couple more steps that you must take. To make sure that the information displayed for your extension in the project designer and in Extension Manager are correct, update the properties for the VSIX package. For more information, see How to: Set VSIX Package Properties. In addition, there are several things to consider if you are going to distribute your extension publicly. For more information, see How to: Distribute a LightSwitch Extension.

 

LightSwitch Metro Theme Extension Sample

Introduction

This sample demonstrates how to recreate the LightSwitch Metro Theme extension, a contemporary theme for Visual Studio LightSwitch applications.

Building the Sample

The prerequisites for this sample are:

In addition to these prerequisites, you should be proficient in either Visual Basic or C# and should be familiar with theming in Silverlight. We also recommend that you be familiar with creating Visual Studio extensions using the Visual Studio SDK.

Description

This sample expands upon the Help topic Walkthrough: Creating a Theme Extension, which demonstrates a simple theme that defines fonts and colors. The Metro theme also makes use of styles, defining new appearance and behavior for the built-in LightSwitch control templates. To provide a consistent experience, you will need to define Resource Dictionaries in the form of a .xaml file for each control template, as shown in the following illustration:

Additional styles are defined in the MetroStyles.xaml file, which also contains a MergedDictionaries node that references the other .xaml files. When LightSwitch loads the extension, it reads in all of the style information and applies it to the built-in templates, providing a different look and feel for your application.

There isn’t much code in this sample; most of the work is done in xaml. You can use this sample as a starting point for your own theme, changing the fonts, colors, and styles to create your own look. Enjoy!

More Information

For more information on creating extensions for Visual Studio LightSwitch, seeVisual Studio LightSwitch 2011 Extensibility Toolkit.

 

LightSwitch Extensibility Toolkit for Visual Studio 2012

Visual Studio LightSwitch is a tool for developing business applications for the desktop, web, and cloud. You can extend the functionality of LightSwitch by creating extensions using Microsoft Visual Studio Professional 2012, the Visual Studio 2012 SDK, and the LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012.

The following are required in order to create LightSwitch extensions:

  • Visual Studio Professional 2012

  • Visual Studio 2012 SDK

  • LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012

In addition to these prerequisites, you should be proficient in either Visual Basic or C# and should be familiar with both Windows Presentation Foundation (WPF) and Silverlight. We also recommend that you be familiar with creating Visual Studio extensions using the Visual Studio SDK.

Extension Types


There are six types of extensions for LightSwitch:

  • Business types

    Let you wrap a base data type in a semantic type, providing additional validation and display capabilities in LightSwitch while continuing to store the data in its underlying type. They can include a Silverlight control for displaying data.

  • Custom controls

    Silverlight user controls with additional attributes to make them usable in and better integrated with LightSwitch.

  • Data sources

    Domain service adapter class that enables LightSwitch to work with other data sources.

  • Screen templates

    Can be used to create screens that have common layout patterns different from the standard screen layouts provided by LightSwitch.

  • Shells

    Let you create an application shell with a different layout and different capabilities than the standard LightSwitch application shell.

  • Themes

    Let you create a different appearance and behavior for LightSwitch applications and controls.

The LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012 includes templates that contain the necessary files for each extension type.

Creating LightSwitch Extension Projects


The LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012 installs two new project templates, LightSwitch Extension Library (Visual Basic) and LightSwitch Extension Library (Visual C#), that can be used to create extensions. When you select one of these project types, a solution with seven projects is generated:

  • The projects with names that end in .Client, .Client.Design, .Common, .Design, and .Server contain the various parts of the extension items that will be added to the library.

    Content ​project

    Purpose​

    Referenced by​

    Client

    Contains client implementations that should be deployed with a LightSwitch application but are not found in the Common project. For example, controls, shells, and themes.

    Client sub-project

    Client.Design

    Contains implementations necessary during the debugging of a LightSwitch application. For example, control images or custom property editors for the runtime screen designer.

    Client sub-project

    Common

    Contains ​implementations that are common to both the client and the server. For example, metadata loaders and validators.

    Client sub-project, server sub-project, Visual Studio IDE

    Design

    Contains implementations for design time integrated development environment (IDE) operations. For example, a screen template.

    Visual Studio IDE

    Server

    Contains server implementations that should be deployed with a LightSwitch application but are not found in the Common project. For example, data sources.​

    Server sub-project

  • The .Lspkg project packages the previous five projects so that LightSwitch can unpack and reference them when the package is installed.

  • The .Vsix project packages the generated .Lspkg file into a .Vsix package so that it can be added to LightSwitch through the Extension Manager.

The contents of each project will differ depending on which extension type template is selected. To learn more about how to create extensibility projects, see How to: Create a LightSwitch Extension Project

Developing LightSwitch Extensions


The process of developing a LightSwitch extension is like that of developing a Visual Studio extension using the Visual Studio SDK. As with any extension, you create an extensibility project, write code for the extension, debug the extension, set properties for the .Vsix package, and distribute the extension.

The actual code that you have to write will vary depending on the extension type. To start working with a particular extension type, see one of the following topics:

As with any Visual Studio extension, you debug a LightSwitch extension by using an experimental instance of Visual Studio. To learn more about how to debug, see How to: Debug or Test a LightSwitch Extension.

Once your extension is complete, you will want to set properties in the .Vsix package to identify the extension. For more information, see How to: Set VSIX Package Properties. The final step is to publish your extension on Visual Studio Gallery. For more information, see How to: Distribute a LightSwitch Extension.

About thangletoan

Hallo Aloha

Posted on 25/09/2012, in Công nghệ và Giáo dục, Chính sách CNTT, ICT & Phát triển Rich Media content, Lập trình C, LOB, LOB - Lập trình - Phát triển phần mềm, Microsoft and tagged . Bookmark the permalink. Để lại bình luận.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: