Microsoft Silverlight 4 and SharePoint 2010 Integration by Packt Publishing : Book Preview

I am more than happy to share that the book which keep me involved so much from past few months,finally got published and also now available on Packt Publishing and Amazon. Yes ! I am one of the Reviewer of this book with my fellow friends Marius Constantinescu,Laurent Duveau and Russell East. The book is published by Packt Publishing. I worked as reviewer for this Book which is now titled as “Microsoft Silverlight 4 and SharePoint 2010 Integration”. Gastón C. Hillar is Author of this book.This book is very unique ! With SharePoint 2010 lot many features got introduced by Microsoft, Along with that, Silverlight is another Technology which is creating a solid wave in Technical communities around the universe.

About Author :

Read Bio here : https://www.packtpub.com/authors/profiles/gast%C3%B3n-c-hillar

Target Audience :

All Silverlight and SharePoint Developers and Enthusiast with some awareness about both technologies.

Acknowledgement Section :

I am happy to share these images out of book with you :)

Author’s words :

I dedicate this Book to My Family,Friends,India MVP Program and Team Silverlight at Microsoft for all their support for my work and activities :)

My Personal views on this Book :

As we are all aware that Silverlight is Cross Browser Cross Platform Technology and works as Plug-in Mechanism. Silverlight is helping businesses across the world in their day to day apps which we term as Line Of Business applications.

SharePoint on another hand, helping businesses to automate their most of the processes, Keeping day to day things centralized. I mean SharePoint have so many features under one hood. Its all in one solution for business as we know.

This book is about the Integration of Silverlight with SharePoint. In each chapter,Author shows us how the integration is powerful and how one can create wonders out of that.

About the Book : (via Packt Publishing site)

• Develop and host Silverlight Rich Internet Applications in SharePoint 2010 Pages
• Deploy and debug a Silverlight RIA included in a SharePoint solution by using the new SharePoint deployment features offered by Visual Studio 2010
• Take advantage of Silverlight 4 features to create rich UX for SharePoint solutions
• Work with asynchronous SharePoint requests and queries, and debug their execution
• Retrieve information from SharePoint lists, workflows, and libraries
• Use Silverlight applications to read, insert, update, and delete items from SharePoint 2010 lists and external data sources
• Combine external data sources in SharePoint 2010 and interact with them through Silverlight
• Create Web Parts that host multiple Silverlight applications
• Create Visual Web Parts that render Silverlight applications
• Consume SharePoint 2010 WCF Data Services in Silverlight applications
• Use Silverlight multimedia controls and features to display information to users taking advantage of the processing power offered by their client computers
• Enhance the responsiveness offered by SharePoint 2010 Visual Web Parts by transforming them into Silverlight Rich Internet Applications

Other Reviews by my friends :

Davide Zordan : http://www.davidezordan.net/blog/?p=2065

Russell East : http://russelleast.wordpress.com/2010/08/04/integrating-silverlight-4-with-sharepoint-2010/

Siddharth Mehta : http://siddhumehta.blogspot.com/2010/08/microsoft-silverlight-4-and-sharepoint.html

My Rating : * * * * * (5 Stars)

Would you like to check out Sample Chapter ? : https://www.packtpub.com/sites/default/files/0066-chapter-1-integrating-silverlight-4-with-share-point%20.pdf

Want to Buy this book? For all details,visit :

https://www.packtpub.com/microsoft-silverlight-4-and-sharepoint-2010-integration/book

I would like to say big “Thank You” to Poorvi,Geeta,Wilson from Packt Publishing and their entire Team who given me opportunity to become Reviewer of this unique book which will be going to be a unique resource of Microsoft Silverlight 4 and SharePoint 2010 Integration. Thanks to Pack Publishing once again !

How can I forget you guys? :) ..You are the one who always shown confidence in me. Given me encouragement for my work in Silverlight Technology and Community work I am doing along with my day to day routine..Million Thanks to all of you !!

See you soon with some more books..Silverlight and much more !

Vikram.

Silverlight On Mobile : Ink Capabilities on Windows Phone 7

Hope my last post on Charting on Windows Phone 7 went well for you and you must have explore that in depth. Today I am going to talk on Ink capabilities on Windows Phone 7. As you all know, Ink capabilities is nothing new to us, I have already made 2 posts on Ink in Silverlight in past. Since Ink is functionality provided by Silverlight 3, I am going to utilize the same on Phone 7 since we all know Silverlight 3 is main platform on Phone 7.

For this, I am taking typical Windows Phone 7 Application project. For Ink capabilities, you will need reference of following :

• System.Windows.Ink
• System.Windows.Media
• System.Windows.Input
• Microsoft.Phone.Controls

Remember, The challenge on Phone 7 will be performance not for Ink but for any app you write. So as usual, I will advice you to keep things simple and not make them too jazzy. In this app, I am going to make use of App Bar (Application Bar). I know that we have not touch upon App bar in our earlier discussions, but for time being, just try to understand the syntax part of it and I will cover that App Bar in my next post since its totally a new discussion and there are lot many small things to explore. If you don’t find App Bar comfortable at moment, you can surely replace that with normal Command Buttons as I have shown in my old posts on Ink Capabilities in Silverlight.

Let us first see at the XAML part for good design.

XAML Code : For Guys n Gals who don’t want App Bar

<Grid x:Name="ContentGrid" Grid.Row="1">
          <InkPresenter x:Name="inkP" Background="Pink">
              <Button Height="73" Width="114" Foreground="Black" Content="Blue" x:Name="btnBlue" Click="btnBlue_Click" Canvas.Left="126" Canvas.Top="466" />
              <Button Content="Red" Height="72" Foreground="Black" Width="116" x:Name="btnRed" Click="btnRed_Click" Canvas.Left="230" Canvas.Top="466" />
              <Button Height="72" Width="116" Foreground="Black" Content="Green" x:Name="btnGreen" Click="btnGreen_Click" Canvas.Left="336" Canvas.Top="466" />
              <Button Height="74" Width="114" Foreground="Black" x:Name="btnClear" Content="Clear" Click="btnClear_Click" Canvas.Left="21" Canvas.Top="466" />
          </InkPresenter>
      </Grid>
The Code in Italic represents the respective buttons for drawing and you need to handle and write code in each click of button respectively.

XAML Code : For Guys n Gals who are comfortable with App Bar

<Grid x:Name="ContentGrid" Grid.Row="1">
            <InkPresenter x:Name="inkP" Background="Pink">
            </InkPresenter>
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
       <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
           <shell:ApplicationBarIconButton x:Name="appbar_clear" IconUri="/Images/appbar.delete.rest.png" Text="Clear" Click="appbar_clear_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_blue" IconUri="/Images/appbar.edit.rest.png" Text="Blue" Click="appbar_blue_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_red" IconUri="/Images/appbar.edit.rest.png" Text="Red" Click="appbar_red_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_green" IconUri="/Images/appbar.edit.rest.png" Text="Green" Click="appbar_green_Click"></shell:ApplicationBarIconButton>
       </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
There is also another option of “Menu Item”..but as we decided, not to speak too much on App Bar and focus more on Ink, so time being don’t scratch your head for this.

This peace of XAML will show the design like this :

From above snap, Understand the three main parts as “Ink Area”, “Command Buttons” and “App Bar”. Ink Area is area where you are going to Draw whatever you like with Ink. Out of Command Buttons and App Bar, depends what you implement in your development.

Namespaces :

using System;
using Microsoft.Phone.Controls;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;

Global Declarations :

Stroke s;
int mycol = 0;

Constructor :

inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
inkP.MouseLeftButtonDown += new MouseButtonEventHandler(inkP_MouseLeftButtonDown);
inkP.MouseLeftButtonUp += new MouseButtonEventHandler(inkP_MouseLeftButtonUp);

Mouse Events :

void inkP_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
       {
           s = null;
       }

       void inkP_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
       {
           inkP.Cursor = Cursors.Stylus;
           inkP.CaptureMouse();
           s = new Stroke();
           s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
           switch (mycol)
           {
               case 0: s.DrawingAttributes.Color = Colors.Black;
                   break;
               case 1: s.DrawingAttributes.Color = Colors.Blue;
                   break;
               case 2: s.DrawingAttributes.Color = Colors.Red;
                   break;
               case 3: s.DrawingAttributes.Color = Colors.Green;
                   break;
           }
           inkP.Strokes.Add(s);
       }

       void inkP_MouseMove(object sender, MouseEventArgs e)
       {
           if (s != null)
           {
               inkP.Cursor = Cursors.Stylus;
               s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
           }
       }

Application Bar :

private void appbar_clear_Click(object sender, EventArgs e)
{
      inkP.Strokes.Clear();
      mycol = 0;
}

private void appbar_blue_Click(object sender, EventArgs e)
{
      mycol = 1; 
}

private void appbar_red_Click(object sender, EventArgs e)
{
      mycol = 2; 
}

private void appbar_green_Click(object sender, EventArgs e)
{
      mycol = 3; 
}

Note : Same code will work if you put this in Command Button Click event.
Now just hit F5 and your Paint app is ready ! With Ink you can do much more things like stroke adjustments,colors and lot many things which you use to do it in Web based Silverlight Ink App.

The initial screen will look like this :

You can draw strokes with color strokes options from Command Button if you have or from App Bar like this :

App Bar options have some Text, so you will be able to identify each of them and not to get confuse by white icons.It will look like this :

I hope with this information, you must have understood that how quickly we can implement Ink on Windows Phone 7 with minimum efforts and minimum code. Do let me know your feedback, I am coming with much more stuff in next week..Till then enjoy WP7 Development !

Vikram.

Silverlight On Mobile : Charting on Windows Phone 7

Working in office on weekends and that too doing bug fixes in code which is written by others is pathetic job ! Well, After doing that finally got some time to explore new things on Windows Phone 7. I hope you enjoyed my last article on Splash Screen on Windows Phone 7. Today I am going to talk on Charting on Windows Phone 7.

Charting in Silverlight is nothing new to us since I have already wrote one article on that in past.Today I am going to push this charting feature to our Windows Phone 7 to have the same Data Visualization experience which we had inside browser in Desktop/Web version of Silverlight. Visifire is another player to introduce Charting Controls for Windows Phone 7 when I search across. If you know any more vendors who exposed their charting controls for Windows Phone 7 then do buzz back. Visifire unfortunately didn’t worked for me. So I finally decided to use our traditional Charting Controls provided by Silverlight 3 Toolkit.

Remember one thing that you will not have those controls sitting ready to go on your designer, First you need to install toolkit then you can set reference to the Charting Controls DLL like this :

System.Windows.Controls.DataVisualization.Toolkit for our development.So you should expect output like this :

So,Lets do a simple Pie Chart. The methodology I am going to demonstrate for Pie Chart is exactly similar for Line,Bar,Column and other types of graph. For sake of Data to display on chart, I am going to Class and not actual data from Database since we are yet to explore service consumption in Windows Phone 7, However you feel you can do that then please go ahead and let me know if you have some issues.

XAML Code :

<mychrt:Chart x:Name="MyPieChart"                           
                             Title="Sample Chart" BorderBrush="{x:Null}" Background="{StaticResource TransparentBrush}" Margin="8,181,8,8" Style="{StaticResource ChartStyle1}" d:IsHidden="True">           
                <mychrt:PieSeries
                        Foreground="AliceBlue"
                        IndependentValueBinding="{Binding Name}"                  
                        DependentValueBinding="{Binding Sales}" Height="397" Margin="8,-22,-21,0" VerticalAlignment="Top" Style="{StaticResource PieSeriesStyle1}">
                    <mychrt:PieSeries.Background>
                        <ImageBrush Stretch="UniformToFill"/>
                    </mychrt:PieSeries.Background>
                </mychrt:PieSeries>
            </mychrt:Chart>

C# Code :

Namespaces :

using System.Collections.Generic;
using System.Windows;
using Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;

Class Declaration :

#region ProductSales Class Declaration
       public class ProductSales
       {
           public string Name { get; set; }
           public double Sales { get; set; }
       }
#endregion

Class Implementation :

#region Public Method GetProductSales()
       public void GetProductSales()
       {
           List<ProductSales> PieData = new List<ProductSales>();
           PieData.Add(new ProductSales() { Name = "Vikram", Sales = 10.5 });
           PieData.Add(new ProductSales() { Name = "Chaitanya", Sales = 20.2 });
           PieData.Add(new ProductSales() { Name = "Manjiri", Sales = 30.2 });
           PieData.Add(new ProductSales() { Name = "Swati", Sales = 40.1 });

           PieSeries pieSlice = MyPieChart.Series[0] as PieSeries;
           pieSlice.ItemsSource = PieData;

           MyPieChart.LegendTitle = "Activity in this Month in %";
       }
#endregion

GetProductSales() Consumption :

// Constructor
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        #region Calling GetProductSales() to Bind Pie Chart
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
                GetProductSales();          
        }
        #endregion

and here is the output…

Make a note that, you can apply Styles to this chart like I did, I made use of some brushes and styles to make it look good.I know this looks very old style, How if your same graph looks like this :

Lets make this look Jazzy … So I am taking example of a picture which I got while surfing. So lets add some nice background to graph by adding Image to Grid. Remember one thing, Though I am going to show the way how it will look jazzy,I warn you guys that should not go beyond limits and make it over jazzy else it will put performance down and then you might suffer. But yes, using right design is also need of application, So lets do it. Lets take one Image like this :

If you want to adjust some properties or style you can do it via blend like this :

Same piece of code,only looks will be different. So here it will look like this :

I hope you will find this information useful especially to represent your business data in form of Charts on your Windows Phone 7. I know we are not playing with real data but with real data methodology will remain same. So go ahead and try this out, If you find something unique or worth to discuss over here then do buzz back. Let’s meet again on this weekend with some new exciting feature of Silverlight On Mobile – Silverlight on Windows Phone 7.

Vikram.

Silverlight On Mobile : Windows Phone 7 Splash Screen and Customization

After talking about 3D capabilities on Windows Phone 7 using Silverlight in last article, Now I am moving ahead with small but equally important part of development. I am going to talk in short about Splash Screen of your application and how you can customize it depending on your business scenario.

Whenever you start with new project of Windows Phone 7, By default you will get on default splash screen as JPEG format titled as “SplashScreenImage”.This is a 10KB file,Default size of this Image is 480x800 and it is always recommended to keep the same even while you customize it.It loads once your application starts.If you have not seen it before, Here how it looks like :

Now we will see how we can make it more useful and good looking. In Ideal Scenario, This will be either your company logo or some product logo with some picture and text. (Loading.. Image and Progress Bar? Hold on…I am leaving that experiment to you).

Here today I am assuming a Application based on Indian Film Industry (Bollywood), You can take any case studay for your trial. The way we are going to this is important that content.So our job is make default splash screen look more nice like this :

So lets start !

Step 1 : Choose Editor to edit SplashScreenImage

This is initial important and easy step. All you have to do is just right click on SplashScreenImage and select “Open With…”, You will get Default dialog box where you will find list of editors, If you find that Editor you looking for is not there then you can add it as well,I added Expression Design 4 like this :

Step 2 : Edit in Microsoft Expression Design 4

Once you open Image in Expression Design 4 then you can edit it like this :

Remember one thing, Image has to be in JPEG format which is by default and also size aspect should be maintained 480x800 for ideal results.The advantage of Expression Design 4 is that it allows you to add effects and export image in whatever format you like.

I understand the above Image of Model is stunning ! ..So how about make it more jazzy by adding some more effects?

Step 3 : Adding Effects using Expression Design 4

Check the Effects Tab on right hand side and start applying some effects like this :

After applying effects you can see the change in Plain Image and Image with Effects like this :

Before :After :

Step 4: Export Image as JPEG and save as “SplashScreenImage”

After adding effects as per your requirement and choice,Next step is to save our work in Expression Designer 4 and hit back to Visual Studio. Export option you can find in Context Menu as well as in File Menu. Make sure while saving Image that Format and Size are as per predefined standards.

Step 5 : Execute and Enjoy your Splash Screen !

While doing this POC, My friend saw this stuff I am doing and he asked me how one can add some Text over it and apply effects to that as well instead of just Raw Image or Image effects. Well the solution for this problem is same ! Follow same steps and take help of Expression Design 4, So something similar like this :

Again Export this Image so finally it will look like this :

So, Your Splash Screen is Ready !.. I am seriously looking ahead for some exciting splash screens from you people since I am not expert Designer. So buzz me back with your designs.I will surely post it here with giving you full credits and it will be great collection as well.

Though my splash screen is Jazzy ! I Hope you understand the real life application of it and the business value it carries, Remember ! Splash Screen is your first impression of application. So be careful about it and do it very seriously.

On more serious note. While making splash screen jazzy like this, Make sure it does not becomes a Heavy Image and trouble for your end users and customers.

Note that I am using Microsoft Expression Design 4 because I find it simple, However you can do this using other editors and put some transparent layer of PNG image on this and do layer as well. You need to figure out smart and better way,I just shown the way to do it !

In coming post we will now focus into other areas related to UI and then we will go to controls and navigation then followed by Data and Line of Business applications. So expect lot of stuff here and keep visiting for more !

Vikram.