deedodee

September 19, 2012 · 2:41 am

How to create a custom Ribbon button in MS Dynamic CRM 2011

Go to Settings -> Customization -> Solutions.
Click ‘New’ button on Solutions page.
Fill up Display Name, Name, Publisher and Version as shown in the below figure and click ‘Save’.
Select ‘Entities’ and click ‘Add Existing’. A popup window will come out and choose any one of the entities to which you want to add the ribbon button. I will choose ‘Case’ entity here.

When you see the following dialog, choose ‘No, do not include required components’ as we are just going to add a custom ribbon button.

We will add the icons (16×16 and 32×32) to be used for the ribbon icon. Choose ‘Web Resources’ and click ‘New’ button as shown in the figure.
Fill up Name, Display Name, Type and upload the icon file as shown in the figure and click ‘Save and Close’.
Repeat the step no.6, and upload 32×32 icon file with the file name of ‘btn_dialog32’.
Add another web resource and fill up Name, Display Name, Type and click ‘Text Editor’ as shown in the figure.
Write java script as shown in the figure.

(You can write java script in TextEditor or you can upload java script file.)

After adding the javascript, you will see the URL as shown in the below figure. Then click ‘Save and Close’.

Now you will see there are two icons and one java script in your web resources. Click ‘Save and Close’.
Select the solution you have created just now and click ‘Export’. When the system prompts the dialog, click ‘Publish All Customizations’ button and after that, click ‘Next’ button.

Ignore all the warnings and click ‘Next’.

Export as ‘Unmanaged’.

(You need to export the solution you created so that you can add your customized ribbon button.)

The exported file is saved as in the form of zip file. Find the zip file and extract it. There is a file called ‘customizations.xml’. Open the file and look for <RibbonDiffXml> tag in order to edit it.
Replace existing <RibbonDiffXml> section with the following:

<Button Id=”B_formbuttonHelloRibbonButton” Command=”Cmd_DialogHelloRibbonButton”

LabelText=”Hello Ribbon” ToolTipTitle=”Hello Ribbon Button” ToolTipDescription=”This is my first ribbon button.” TemplateAlias=”o1″

Image16by16=”$webresource:new_btn_dialog16″ Image32by32=”$webresource:new_btn_dialog32″/>

</CommandUIDefinition>

</CustomAction>

</CustomActions>

</Templates>

</EnableRules>

</JavaScriptFunction>

</Actions>

</CommandDefinition>

</CommandDefinitions>

</RuleDefinitions>

</RibbonDiffXml>

Unzip the files and import into the system as shown in the figure.

Ignore the warning and click ‘Next’.

After importing, publish all the customizations again.

After that, Go to Service -> Cases and open one of the cases. You will see a new ribbon button on the case form. When you click that ribbon button, you will see the message as shown in the figure.

Learning Microsoft Silverlight 4 (Part 2)

Installing Expression Blend

In the last section, we talked about how to create a new Silverlight application in Visual Studio. We will continue to learn how to use Expression Blend to refine the Silverlight application.

Blend is the tool used to visually design a Silverlight or WPF (Windows Presentation Foundation) application. It is a very innovative tool, and might seem a little unusual to traditional software developers.

To develop Silverlight 4 (or WPF 4 for that matter), you will need to install Microsoft Expression Blend 4 which you can download from the Blend website, http://www.microsoft.com/expression/. We will take a quick tour of Expression Blend in this section, before diving deeper later.

(Note that there is currently no Express version of Expression Blend, only a commercial version is available. The price is $599 for a full version, part of a package called Expression Studio 4 Ultimate with a number of applications (including Expression Blend, Design, Web and Encoder). But you can try it for 60-day free trial.)

Creating a New Silverlight Application in Expression Blend

When you first start Expression Blend, you see the Welcome screen, as shown in Figure below. This screen allows you to open an existing project or create a new one, to find some help before starting, or to open preinstalled samples. If you close the Welcome screen, you can always bring it back with Help, Welcome Screen. The installed samples for Silverlight 4 are quite interesting because they help explain some of the capacities of Blend and of Silverlight. Don’t hesitate to explore them. You can open any sample and run it by pressing F5 (or selecting Project, Run Project from the menu).

If you choose to create a new Silverlight 4 application, you must choose between a Silverlight 4 application (with or without website) and a Silverlight 4 control library, used to host controls that can be included in multiple applications. Just like in Visual Studio, selecting Silverlight 4 Application + Website will create an ASP.NET web application project with a link to the actual Silverlight application. Note, however, the following:

In Expression Blend, you do not have the choice between ASP.NET Web Application, Website, or ASP.NET MVC.
If you create a Silverlight application without a hosting website, you cannot add this application to another website in Blend. You also cannot create a new website in Blend without an attached Silverlight application.

If you need more extended options when creating your application, you need to create it in Visual Studio. Because Expression Blend and Visual Studio use exactly the same solution files, project files, and code file, you can create an application in the environment of your choice and then modify it somewhere else. You can even open the projects in both environments at the same time which is especially useful when you do design work on your application’s screens.

Opening Hello Silverlight

We will refine our Hello Silverlight application and add some movement and effects. This is the perfect task for Expression Blend: Even though most of what you can do in Blend can also be done in Visual Studio (and vice versa), Blend is more suitable for design tasks, and Visual Studio for development tasks. It is really up to you to choose the tool that suits you the best.

Choose Open Project from the Welcome Screen and look for the folder of HelloSilverlight application. Select the solution file HelloSilverlight.sln and open it in Blend. After opening the solution and MainPage.xaml in Blend, you should be now seeing the exact same scene as in Visual Studio’s designer.

Adding an Effect

We will now add a shadow effect to the Hello Silverlight text block. To do this, follow these steps:

Locate the TextBlock in the Objects and Timeline panel. This panel displays the tree of all the elements on the page, as shown in the figure: The UserControl (the page) contains a Grid, which contains a TextBlock.
Select the TextBlock and then copy and paste it. You can use the context menu for that, or Ctrl+C, Ctrl+V.
Click twice slowly on the first TextBlock in the tree to make its name editable, and change the name to Shadow.

You should now see two text blocks in the Objects and Timeline panel: One is named Shadow, and the second doesn’t have a name. However, both have exactly the same features, and therefore the front one is hiding the back one in the designer. Let’s change this with the next steps:

Select the Shadow element in the Objects and Timeline panel.
Make sure that the Properties panel is selected on the right side of the window, and using the brush editor, change the Shadow’s foreground to black, as shown on the Figure.
On the left of Blend’s window, you should see the tabs Projects, Assets, States, and Parts. You’ll learn more about all the panels in later sections. For now, select the Assets tab. This is where you will find all the controls and effects that we can use in Silverlight.
Select the Effects category. You will see the two built-in effects in Silverlight 4: Blur and DropShadow.
Select the Blur effect and drag/drop it with the mouse on the Shadow TextBlock in the Objects and Timeline panel, as in Figure.
With the BlurEffect selected in the Objects and Timeline panel, check the Properties panel on the right of the window, and set the Radius property to 40. You should now see a shadow right behind the Hello Silverlight TextBolck.

(Effects in Silverlight 4 are rendered by small components called pixel shaders. Although the default installation of Silverlight contains only two effects, you can find more online and add them to your application, as you will see in “Using Effects and Recording Media.” For this effect, we will use a Blur effect applied to the TextBlock in the background. Note that we could also use the DropShadow effect available in Blend. However the DropShadow effect is slower than the Blur effect; if you can, it is recommended to use a Blur effect instead, as we do here.)

Creating a Pulse Animation

We will now add some movement to the scene, by animating the Shadow when the TextBlock is clicked. Follow these steps:

In the Objects and Timeline panel, click the small plus sign (+) located on the top right of the panel to create a new storyboard.
In the Create Storyboard Resource dialog, name the storyboard ShadowStoryboard.
Notice how Blend turns in animation recording mode, with a red border signifying that the actions you perform now on the scene will be part of the storyboard.
Move the yellow vertical line (called the timeline) to 500 milliseconds, as shown in the Figure. Select the Shadow TextBlock and Click the Record Keyframe button. This button is circled in orange in the Figure.

This operation is adding a keyframe to the Silverlight scene at 500 milliseconds after the start of the storyboard. Now we need to modify the scene with the next steps to tell Silverlight what the user should see during these 500 milliseconds. We will also set a few properties on the storyboard itself. Silverlight will calculate the smooth transition to apply:

With the Shadow TextBlock selected, set the Opacity property to 0% in the Properties editor.
Click the name ShadowStoryboard in the Objects and Timeline panel. You should now see the storyboard’s properties in the Properties panel.
Check the AutoReverse check box. This means that the storyboard will reverse automatically after 500 milliseconds and restore the scene to the original state.
Finally, set the RepeatBehavior to 3x. This means that the storyboard will run three times when triggered. Possible values are lx, 2x, 3x, 4x, and so on. You can also enter Forever, meaning that the storyboard will never stop.
Close the storyboard by clicking on the small X button on the right of the name ShadowStoryboard.

Triggering the Storyboard

Now it’s time to trigger the storyboard and to test it in the web browser. To do this, we will handle an event in C# code with the following steps:

Select the TextBlock in front of the scene (the one with no name).
To notify the user that something will happen if he clicks the TextBlock, set the Cursor property to Hand.
In the Properties editor, click the Events button, shown in the Figure (circled in orange). This displays the list of all the events for the TextBlock control.
Double-click in the field next to the name MouseLeftButtonDown. This event will be triggered when the user presses the mouse’s left button on the TextBlock control. Depending on your settings, this opens a C# code file in Expression Blend’s code editor, or in Visual Studio. This code file is named the code behind file, and this is the location where event handlers and other methods for the Silverlight page are implemented.

The double-click action you performed in step 4 added a new event handler to the code file, named TextBlock_MouseLeftButtonDown. Modify this event handler as shown below.

private void TextBlock_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

var storyboard = this.Resources[“ShadowStoryboard”] as Storyboard;
if (storyboard != null)
{
storyboard.Begin();
}
}

Testing the Application

Now it’s time to run and test the application. You can do this in Expression Blend by pressing the F5 key (or selecting Project, Run Project from the menu); you can also do this in Visual Studio by pressing Ctrl+F5 (or selecting Debug, Start Without Debugging). If everything goes well, your default web browser should start, and you will see Hello Silverlight.

Pass your mouse over this text block (it should turn into a Hand cursor) and press the left mouse button. Observe how the shadow below the text block animates smoothly three times.

Summary

In this section, you saw how to install Visual Studio and Expression Blend, and how to start developing a simple Silverlight application. You will spend a lot of time in Visual Studio, so it is important to set it up correctly and to understand its features. For those interested in pushing the design of your application further than what the Visual Studio designer allows, Expression Blend is the perfect tool. This chapter also got you started with a Silverlight application, and showed that creating a rich application using gradients, effects, and animations is quite simple with the right tools. The next sections cover Silverlight controls, especially the new controls (and related features) added in Silverlight 3 and 4. These are the building blocks for your application, and a good understanding of these elements is vital.

(Reference Book: Silverlight 4 Unleashed)

Learning Microsoft Silverlight 4 (Part 1)

What is Silverlight?

Microsoft Silverlight is a cross-platform cross-browser plug-in for developing rich interactive applications for the web. It offers a programming model that is familiar to the web developers. Silverlight is programmed using a text bases mark-up language format and a JavaScript running inside browser’s script engine. Silverlight applications are created using a combination of Expression Studio (Expression Design, Expression Blend, and Expression Encoder) and Visual Studio. The Silverlight architecture is based on eXtensible Application Markup Language (XAML) which is XML based that what makes Silverlight cross-platform cross-browser plug-in. XAML provides a unified way to declare graphics, media, animation, text and layout. To know more about Silverlight, please go to the official site http://www.microsoft.com/silverlight/.

Getting Started with Silverlight 4

Before we start learning Silverlight 4, we need to install Visual Studio 2010 to develop Silverlight 4. (Silverlight 4 can be developed only in Visual Studio 2010.) After installing Visual Studio 2010, we need to install the Silverlight 4 Tools for Visual Studio 2010 which can be downloaded at http://www.microsoft.com/en-us/download/details.aspx?id=18149. It contains the following elements:

The Silverlight developer runtime: This is a special version of the Silverlight plugin that Visual Studio can attach a debugger to, to help you understand where issues come from, and to solve them.
New Templates for Visual Studio: These are used to create new projects and new items (pages, controls, classes and so on) in your Silverlight application.
The Software Development Kit (SDK) for Silverlight: This kit contains all the libraries you will need to create and deploy Silverlight applications, tools to create and package Silverlight application (for example, on a build server), and pointers to additional resources online such as the official Silverlight documentation.

After you have installed the Silverlight tools for Visual Studio, you are ready to create you first Silverlight application.

Creating a Silverlight Application

Start Visual Studio 2010.
Select File, New, Project.
In the New Project dialog box, select the Silverlight category on the left, and create a new Silverlight Application named HelloSilverlight, as shown in the figure.
In the next dialog box, choose whether you want to create a new Web Application Project, a new ASP.NET Website, or a new ASP.NET MVC application to host the Silverlight application.

Choosing between web application project, website or MVC application depends on what you want to achieve, personal preferences, what existing website you want to integrate your Silverlight application into, and so forth. The Silverlight application will be strictly the same, only the hosting web application will differ. The experience shows that web application projects are more flexible than ASP.NET websites, so this is what we will use. ASP.NET MVC applications are also very interesting and offer a nice alternative to ASP.NET web applications. For more information about ASP.NET, check out the website at http://www.asp.net.

Inspecting the Application

Based on the indications we gave, Visual Studio created two projects, as shown in the figure. (It is not possible to mix Silverlight application and “full .NET” applications in a single solution.

Let’s review the projects and the files.

HelloSilverlight is the Silverlight application itself. It contains four important files:

App.xaml and App.xaml.cs contain the global application object, global event handlers, global resources, and so on. This is also the main entry point for the application.

MainPage.xaml and the attached MainPage.xaml.cs are like the name indicates the main page for the application. You can have multiple pages in the application; the main page is the one that is created when the application starts.

HelloSilverlight.Web is the web application, running on ASP.NET. It contains the files that will be downloaded to the web browser.
ClientBin\HelloSilverlight.xap is a zip file with all the binary files needed to run the application in the plug-in (in our case, this is just HelloSilverlight.dll), and a file named AppManifest.xaml, called the application manifest. It contains information that the plug-in needs to start the application, as well as optional indication about the possibility to run the application out of the browser, and so forth.
HelloSilverlightTestPage.aspx and HelloSilverlightTestPage.html are two generated test pages hosting the Silverlight application. If you open either file, you will see generated HTML and JavaScript code, including the object tag within which the Silverlight plug-in will run.
Silverlight.js is a utility file with JavaScript functions that can be interesting to use within the HTML page. For example, there is a function helping you to check which version is installed on the client PC, and to react accordingly by alerting the user.

Unpacking an XAP File

If you want to look by yourself at the content of an XAP file, follow these steps:

Right click the ClientBin folder in the Solution Explorer, and select Open folder in Windows Explorer from the context menu.
Make a copy of HelloSilverlight.xap file and rename it to HelloSilverlight.zip.
If the operating system supports it (for example, in Windows 7), you can open the zip file just like any other folder and see the content.
On operating systems that do not support this function, you can use a zip tool to unpack the XAP file.

(Note that if you want, you can recompress the XAP file with a higher level of compression and get smaller files to send to the browser. The file will be transmitted faster, but it will take longer time to unpack it to start the application.)

Using the Visual Studio Designer

Open the file MainPage.xaml. If you didn’t change the Visual Studio settings, you should now see some XAML code. XAML is an XML-based language used in Silverlight and Windows Presentation Foundation (WPF) to describe the user interface. There are other possible usages for XAML, and in fact it is really just a serialization language for .NET.

With MainPage.xaml open in the designer, you should see tabs at the bottom, as shown in Figure.

Use the Design tab to see the scene in the designer, and use the XAML tab to see the XAML code.
Use the grip to slide the separator up, and visualize the XAML code on top and the design surface on the bottom.

Implementing Hello Silverlight

Let’s implement a simple application with the following steps:

Set a LinearGradientBrush in the main Grid by adding the XAML code below within the Grid tag. You must copy these lines between the opening tag <Grid x:Name=”LayoutRoot”> and the closing tag </Grid>. You must also remove the Background property that was set in the Gridtag initially.Setting a LinearGradientBrush<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

The below figure is what you will see in the design tab after adding LinearGradientBrush code.

Go to the XAML tab select the LinearGradientBrush as shown in the figure below and then press F4 to see the Properties Window for LinearGradientBrush. You can play around with the properties for LinearGradientBrush using that Properties Window.

Adding Some Text

We will now add a text block to our scene by following the steps:

Make sure that the Toolbox is visible in Visual Studio. It should be visible on the far left of the Visual Studio window, just below the toolbars. If you do not see the Toolbox, select View, toolbox from the menu.
If the Toolbox is collapsed, expand it by passing the mouse on the vertical Toolbox button.
From the Common Silverlight Controls section in the Toolbox, drag a TextBlock and drop it on the grid in the visual designer.
With the new TextBlock selected, in the property editor, click the name textBlock1 just above the Properties and Events tabs. This allows you to edit the name. For now, we don’t need a name for this text block, so you can just delete it.
Using the Properties editor or directly in XAML, find the Text property and set it to Hello Silverlight. Then change the following properties:

Set the HorizontalAlignment and VerticalAlignment properties to Center.
Set the Margin property to 0.
Set the Width and Height properties to Auto.
Set the FontFamily property to Verdana.
Set the FontSize to 72 and the FontWeight to Bold.
Finally, type White in the Foreground property.

After you complete these steps, you should see the image shown in Figure in the visual designer.

Resizing Text

Select the user control by clicking the outside of the gradient grid area. You will see the below icon at the bottom of the gradient grid area.
Re-size the user control so that you can see the whole Hello Silverlight text as shown in the figure and then save the project.

Now we have one Silverlight application and we already have some look and feel for the Silverlight application. In next section, we will learn together how to use Expression Blend to refine the application and add movement to it. As Expression Blend and Visual Studio work on the exact same files, it is important to save all the files before you move from one environment to another.

(Reference Book: Silverlight 4 Unleashed)