Please follow:

http://www.bryanpanjavan.net/

http://www.bryanpanjavan.net/FTS_Silverlight2/FTS_Silverlight2.html

A couple of things to note about this “release”:

• In order to modularize this, I removed the connection to the web service which was updating the database on every command.
• Instead, what you get is a default set of “dummy” data.  On an update the application fakes this and shows you the load screen anyways.  On a cancel, you’ll get the same initial set of “dummy” transactions.

This post is one in a series featuring the FTS application. The original post for this series started here:

http://bpanjavan.wordpress.com/2009/01/11/financial-transaction-system-a-silverlight-20-line-of-business-application/

More to come…

This post is about Test-Driven Development, and applying unit tests to the FTS business module.

FYI this post is one in a series featuring the FTS application. The original post for this series started here: http://bpanjavan.wordpress.com/2009/01/11/financial-transaction-system-a-silverlight-20-line-of-business-application/

About Test-Driven Development

Test-Driven Development is “catching” on. I write that with quotes and say that with air quotes because there’s a formality to everything, and I have yet to see a project apply truly test-driven development at a macro and micro level. It’s hard.

At a macro level, truly Test-Driven Development involves detailed requirements (told you it was hard) and formal test cases, able to be read, and understood by manual testers. These testers execute their test cases throughout the development cycle and most importantly at the end of the cycle. Caution must be taken. As requirements inevitably change, these test cases must be maintained. At the end of each cycle, the completion and passing of the test cases is what decides the completion and correctness of the code in the cycle.

At a micro level is where it gets fun / tedious for developers. True micro-unit testing is very strict. It involves writing your unit tests as you write your code. More specifically, write a unit test for every little piece of functionality that you’re going to code just before you code it. This ensures that you’ve got near comprehensive coverage of your code, and you’ll have a plethora of tests you can re-use. Yeah, let’s do this.

There are a number of testing frameworks. Among the most popular are NUnit, MBUnit, and MS Test, which is Microsoft Visual Studio 2008’s built in testing framework. For this example, I’m using NUnit.

Code Sample – Unit Testing

Before I even create my FTSCategory class, I create my FTSCategoryTest class and my first test. Notice three things. I’ve imported the NUnit namespace. The test class is decorated with the TestFixtureAttribute. Each test is decorated with the TestAttribute. Each test should contain one assertion. Having a few is not illegal, but it’s strongly encouraged that each test method only contain one so if the test fails, you don’t have to guess which assertion failed.

using NUnit.Framework;

namespace FTS.BusinessNUnitTest
{

  [TestFixture]

  public class FTSCategoryTest : AssertionHelper

  {

    [Test]

    public void InitializeCategoryTest()

    {

      FTSCategory ftsCategory = FTSCategory.ReturnFTSCategory(1000, “Diamond”);

      Assert.IsNotNull(ftsCategory);

    }

    }

}

Obviously it won’t run.  It won’t even compile.  Good.  Now let’s write some bare minimum code by creating our FTSCategory class and coding the ReturnFTSCategory method.  

namespace FTS.Business

{

  public int FTSCategoryID { get; private set; }

  public string Name { get; private set; }

  public static FTSCategory ReturnFTSCategory(int ftsCategoryID, string name)

  {

    return null;   

  }

}

 This should get it to compile.

 Notice one thing.  The namespace of by business class is different than that of my test class.  Another important characteristic of testing is that your test project should be completely separate of the project that you’re testing.  This maintains a clear encapsulation of responsibilities.  Now let’s run the test using NUnit’s GUI.

Failed Test

 It failed.  Good.  One of the most important characteristics of writing your unit tests is that you make them fail before you make them pass.  That way you can be sure that you’re not writing happy unit tests that always pass.  Let’s make this one pass.

 

namespace FTS.Business

{

  public int FTSCategoryID { get; private set; }

  public string Name { get; private set; }

 

 

  public static FTSCategory ReturnFTSCategory(int ftsCategoryID, string name)

  {

    return new FTSCategory();   

  }

}

That should pass our original “not null” assertion.  Now lather, rinse, and repeat.  Re-run our unit test and this time it should pass.

 

Passing Test

So now, we write our next test.  Let’s ensure that the new FTSCategory ID and name are equal to the ones we pass in.  If you’re OCD you can split this into two tests.

[Test]

public void CheckCategoryValuesTest()

{

  int id = 1000;

  string name = “Diamond”;

 

  FTSCategory ftsCategory = FTSCategory.ReturnFTSCategory(id, name);

  Assert.AreEqual(id, ftsCategory.FTSCategoryID, “ID’s are not equal”);

  StringAssert.IsMatch(name, ftsCategory.Name, “Names do not match”);

}

Run all tests again and they will fail.  Now we can go back and once again add the bare minimum we need to make them pass.

public static FTSCategory ReturnFTSCategory(int ftsCategoryID, string name)

{

  return new FTSCategory(){ FTSCategoryID = ftsCategoryID, Name = name };   

}

Once again, we write the bare minimum, re-run our test, and we’re back in the green zone.

Conclusion

First off, I’ve only touched the tip of the iceberg regarding the unit testing capabilities of NUnit.  There are attributes you can use to test for an expected exception in your method.  You can assert many different things, including comparing collections, and several different ways to compare strings. 

Notice that we wrote the BARE minimum code that we needed to pass each test.  While it appears that writing unit tests may be a time taking process, there’s an ROI here.  Doing this ensures that your developers aren’t cowboy coding and bloating their application any more than they have to.

The last point is vital.  It’s no secret that refactoring requires re-testing.  1 month down the road when you’re re-factoring your code, you’ll be glad that you have a plethora of unit tests on hand to ensure that you haven’t broken any functionality.  This is the ultimate return on investment of unit testing.

 

More to come…

 

 

When it comes to web applications, one of the best characteristics in terms of customizing the user interface is the ability to modularize the look and feel using CSS style sheets.  Silverlight 2.0 emulates this functionality with the use of <Style /> resources, and takes it 10 steps further by allowing you to set type-specific properties and complete visual template control.  That last one tends to go over most peoples’ heads, but we’ll get into it in a few paragraphs.

First, we’ll take a look at a basic example of Silverlight 2.0 <Style/> elements.  A common property among Silverlight 2.0 controls is Background.  The main placeholder control is a Grid entitled “gridMain”.  Below is a sample of setting the Background property of this control.

<Grid x:Name=”gridMain” ShowGridLines=”False”

  Background=”Green”>

  …           

</Grid>

I can take this property into a style declaration that I place within the <UserControl.Resources/> section of my page.

<Style x:Name=”FTSMainGrid” TargetType=”Grid”>

  <Setter Property=”Background” Value=”Green” />

</Style>

<Setter/> also supports setting styles for complex properties:

<Style x:Name=”FTSMainGrid” TargetType=”Grid”>

  <Setter Property=”Background”>

    <Setter.Value>

      <SolidColorBrush Color=”Green”/>

    </Setter.Value>

  </Setter>

</Style>

Notice a few things.  Like a CSS style class, I give this style a name that can be referenced by my control.  However, I have the option of NOT giving it a name, which will result in this style being applied to ALL controls of type Grid under this scope.  This brings me to the next point.  The TargetType property specifies that this style can only be applied to controls of type Grid.  This must have been a tough decision for the Silverlight team.  This appears to be a drawback, because you cannot apply this style to other controls, and each would need their own style.  However, it is this strong typing that allows for type-specific property settings in Silverlight 2.0 styles, which we’ll get into next.

First, let’s see how “gridMain” references this style:

<Grid x:Name=”gridMain” ShowGridLines=”False”

  Style=”{StaticResource FTSMainGrid}”>

  …

</Grid>

I repeat this process for other controls in my application, such as the Button, and ListBox.   The result is below:

Green Style

Silverlight 2.0 supports type-specific properties when setting control styles.  In other words, all controls have a different set of properties that they support.  CSS did not make this distinction.  Instead, in all CSS style classes, you were given a very broad general set of style properties that may or may not apply to all controls.  In the example below, the <Style/> element is set for the Silverlight 2.0 DataGrid.  The DataGrid supports the properties RowBackground and AlternatingRowBackground, which no other control (that I can recall) supports, which makes sense.

<Style x:Name=”ModuleDataGrid” TargetType=”DataGrid”>

  <Setter Property=”RowBackground” Value=”#000066″/>

  <Setter Property=”AlternatingRowBackground” Value=”#003366″/>

</Style>

The resulting DataGrid:

DataGrid

Finally, in a move I can only call the Pandora’s Box of WPF and Silverlight 2.0, most if not all styles support full visual template control.  Not only can you customize decorative properties of controls such as background, size, etc., but now you can customize the base visual template of the control.  In the FTSTransaction module, I’ve created a style which overrides the default template of the Button class.  This is to be used for my “Add” button:

<Style x:Name=”FTSAddButton” TargetType=”Button”>

  <Setter Property=”Template”>

    <Setter.Value>

      <ControlTemplate TargetType=”Button”>

        <Grid>

          <Rectangle Width=”15″ Height=”45″

            Fill=”Navy”

          />

          <Rectangle Width=”45″ Height=”15″

            Fill=”Navy”>

          </Rectangle>

          <ContentPresenter

            Content=”{TemplateBinding Content}”

            ContentTemplate=”{TemplateBinding ContentTemplate}”

            Margin=”{TemplateBinding Margin}”

            HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}”

            VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”

          />

        </Grid>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

  <Setter Property=”Foreground” Value=”White”/>

  <Setter Property=”FontWeight” Value=”bold”/>

</Style>

Whatever I draw now becomes the default template of my Button.  The <ContentPresenter /> element is then used to present the same content that would appear on my button in the first place.  In this case, it is the text of the button.  I’ve done something similar to my “Delete” button and the result is below:

Button Templates

Just for kicks, here are two different color styles applied to my application; green being the original, and blue being my second style.

All Green

All Blue

More to come…

Silverlight 2.0 FTS Transactions

Introduction

This post is the first in a series showcasing the FTS (Financial Transaction System) mini-application.  FTS is a project I developed, front end to back, web app. to database, start to finish.  In the near future I intend to cover some of the technologies and topics used in this application, including Silverlight 2.0, ASP.NET 3.5, ASP.NET AJAX, ADO.NET Data Services, and ASP.NET Unit Testing.  Today’s topic is Silverlight 2.0.

Here is a screen cast if you’re in a hurry to see it in action. 

FTS Silverlight 2.0

The user manipulates Categories in the first module, then proceeds to the second module, Transactions.  Transactions are classified by Category, and can be added / deleted / updated.  The user can edit Transaction information such as the date, description, and amount. Then when ready to update, the user clicks “Apply” to update all Transactions at once.

History

The DotNet BaseLine project is an initiative started by a colleague of mine at Sogeti USA, Amir Rajan, as part of our internal DotNet training and development.  The idea is that based on a given set of requirements, our consultants would individually develop the fully functioning application from front end to back.  While the database was to be done in SQL, and the class libraries done in DotNet 3.5, the front end was up to each individual consultant to choose.  We’ve seen some consultants develop this as a Windows Application, and some as a Web Application using the MVC framework.  In my first iteration, I chose to develop this as an ASP.NET web application.  But shortly after that, Silverlight 2.0 was publicly released with an incredibly expanded runtime over Silverlight 1.0, with new data driven capabilities that rival ASP.NET.  I saw an opportunity to revamp FTS with a much more rich and responsive presentation.

Code Sample – Retreiving Data using WCF Web Service Proxy

In terms of data retrieval and communication, Silverlight 2.0 uses a web client or proxy to access ASP.NET WCF (Windows Communication Foundation) web services.  The WCF web service, FTSWCFWebService, provides the data for our application. 

Silverlight 2.0 WebSite WCF Web Service

The code snippet below shows the business entity class, FTSTransactionList, making an asynchronous call using a web client proxy for FTSWCFWebService.  Before the call is made, an event handler is added matching the delegate for the return call of the WCF web service.  On the return, the event argument is checked for errors before attempting to process the data contained in the Result property.

public void Load()

{

  FTSWCFWebServiceClient ftsWCFService = new FTSWCFWebServiceClient();

  ftsWCFService.FTSTransactionList_GetManyXMLCompleted

    += new EventHandler<FTSTransactionList_GetManyXMLCompletedEventArgs>(GetManyXMLCompleted);

  ftsWCFService.FTSTransactionList_GetManyXMLAsync();         

}

void GetManyXMLCompleted(object sender, FTSTransactionList_GetManyXMLCompletedEventArgs e)

{

  if (e.Error == null)

  {

    string result = e.Result;

    //Process result           

  }

  else

  {

    throw e.Error;

  }

}

Code Sample – Loading a Datagrid

FTSTransactionList derrives from an ASP.NET Generic List of FTSTransaction objects.  The list is loaded with the data from the call to the WCF web service.  The details on how this is done have been omitted because that is not the focus of this sample.

FTS Silverlight 2.0 Class Diagram

This list will be used as the source for our datagrid.  Below is the XAML markup.  The WPF / Silverlight datagrid is remarkably similar to the ASP.NET gridview control.  A variety of columns can be defined, such as text columns or check box columns, or custom template columns for flexibility.

<data:DataGrid x:Name=”datagridTransactions”

  AutoGenerateColumns=”False”

  SelectionMode=”Single”

  LoadingRow=”datagridTransactions_LoadingRow”>

  <data:DataGrid.Columns>

    <data:DataGridTextColumn

      Header=”Transaction Date”

      Binding=”{Binding DateOfTransaction,

        Converter={StaticResource DateConverter}}”/>

    <data:DataGridTemplateColumn Header=”Category”>

    <data:DataGridTemplateColumn.CellTemplate>

      <DataTemplate>

        <Grid>

          <Grid.ColumnDefinitions>

            <ColumnDefinition MinWidth=”50″/>

            <ColumnDefinition MinWidth=”1″/>

          </Grid.ColumnDefinitions>

          <ComboBox x:Name=”comboboxCategories”

            Grid.ColumnSpan=”2″

            DisplayMemberPath=”Name”

            SelectionChanged=”comboboxCategories_SelectionChanged”

            Loaded=”comboboxCategories_Loaded”

            DropDownClosed=”comboboxCategories_DropDownClosed”>

          </ComboBox>

        </Grid>

      </DataTemplate>

    </data:DataGridTemplateColumn.CellTemplate>

  </data:DataGridTemplateColumn>

  <data:DataGridTextColumn Header=”Description”

    Binding=”{Binding Description}” MinWidth=”250″/>

  <data:DataGridTextColumn Header=”Amount”

    Binding=”{Binding Amount,

      Converter={StaticResource ShortDecimalConverter}}”/>

  </data:DataGrid.Columns>

</data:DataGrid>

 Set the source using the ItemsSource property.  

private void BindFTSTransactionList()

{

  datagridTransactions.ItemsSource = null;

  datagridTransactions.ItemsSource = ftsTransactionList;

  datagridTransactions.SelectedIndex = -1;

}

Unlike in ASP.NET, you don’t call DataBind.  The reason for this may at first just seem like the framework is saving you from writing more code, but the reality is different.  With WPF / Silverlight, the data is not “binded” from source to display, so much as it is “synchronized”, or “two-way binded”.  This means that any changes to the fields of our data control are reflected automatically back to the source object.  For example, one of our FTSTransaction fields is “Description”.  If the user edits the “Description” field on our datagrid, the “Description” field of the respective FTSTransaction object will automatically have changed.

Conclusion

This post introduced the FTS mini-application, a baseline project demonstrating a common line-of-business scenario.  I’ve highlighted the front-end, which was done in Silverlight 2.0, showing how Silverlight integrates with Windows Communication Foundation for data retrieval and updates.  The next sample featured the Silverlight datagrid, a data-driven control with support for many features, including sorting, and data-templating.

More to come…

UPDATE: A stand-alone release of this application is now available on my domain:

http://www.bryanpanjavan.net/FTS_Silverlight2/FTS_Silverlight2.html

It’s because they always seam to ask the same type of questions.  “We fish here.  Do you know how to fish?”  Or maybe “We fish here using a specific tool.  Have you ever fished using this tool?”  That Bachelor of Science in Computer Science isn’t going to save your life either.

I think we can gain a better understanding when we wind the clock back.  Many college grad developers have a degree in computer science.  Joel Spolsky mentions specifically that curriculums across the country are drastically different.  I was taught in Java in the majority of courses where I actually programmed, and we did nothing more than console applications.  Nothing pretty.  Nothing fancy.  We learned about pointers and recursion.  We learned about simple and complex data types.  We learned about sorting and encryption algorithms.  Is any of this crap useful?  Why didn’t we just dive into Visual Studio 2005 101 like some other institutions?  If it’s so easy to drag and drop a Datagrid onto a page and bind it, why didn’t we just do that?  It’s not about learning how to fish. 

It’s about learning to find food.  Why? Because the water may dry up in the next 5 years and those who know how to find food will be able to move on to the next hunting ground, while those who only knew how to fish will be lost.  The best institutions teach you how to find food.  Not give you a crash course on how to fish.  I guess it wouldn’t be so aggravating, but I’ve seen a lot of middle age folk take a 20 day crash course learning how to drag and drop controls in Visual Studio, and they tend to always win out because they’re older and get to play the “seasoned veteran” card.

It’s actually nostalgic going back and thinking about it now.  School didn’t teach me how to use Visual Studio 2003/2005/2008, or SQL Management Studio.  Come to think of it, the curriculum didn’t spoon feed us on how to use the Java compiler (Eclipse) either!  Because why the hell bother?  If a developer has to take a 6 week course to learn every single tool he’s going to use, he’d never pick things up fast enough.  And that’s the point.  I say when you interview a new hire for the long term (meaning more than 3 months), find out if he knows how to find food.

An old colleague of mine, Chris Harper, who was the recruiter at Software Architects, gave me the best interviewee advice for a young developer.  Think of an example in which you picked something up quickly.  Show them how proactive you are.  Unfortunately trying to explain your computer science fundamentals won’t tell them jack.  The better veteran developers, who know a thing or two about being proactive in this field will get it, and give you the chance you deserve.  The snot-heads will continue to shrug you off because they just went down the list and didn’t check you off as 10+ years veteran in blah…the more I read about these people, the more I conclude you wouldn’t want to work for these companies in the first place.

#1 No Teleporting

The internet is characterized by teleporting from place to place, through hyperlinks.  In the case of the ASP.NET full page post-back, the user teleports to the same place.  An RIA does not teleport, or “screen flash”.  Keep the application to one page, and no post-backs.  This will ensure the ride is smooth and not bumpy.  This is accomplished in Silverlight by default, as your entire application should reside within the Silverlight plugin.

#2 The page is not flat.

An application that looks flat looks like a newspaper – something the user reads, but doesn’t interact with.  Buttons need to not only stand out, but pop out,indicating their clickability.  Use gradient shading to add lighting effects.  Every UI element should be above or below its respective container.  Using gradient shading in XAML is the easiest way to accomplish this in Silverlight.

#3 Don’t be a magician.

User controls and panels should not just appear and dissapear.  Doing so is too similar to a post-back.  Use transition effects like Powerpoint does to create smooth transitions.  For example, fading in / out, sliding in / out, etc.

XAML storyboard animations get this done.  You can fade something in and out by changing the opacity of a layout control.

#4 A reactive app is not a rich app.

A proactive app is.  The application should be alive and always moving in some way.  Some good examples are having a clock or timer, a stock ticker, or following the mouse coordinates.  Hover effects and tool-tips are a must.

Silverlight can do any of the above examples.

There are several corollaries to the above “laws” and I’ll elaborate in the next posting on this subject.

I’m not sure how else to describe this feature / functionality, so I’m calling it the “Data View Content Preview”.  Here’s how it works.  There’s a Data View WebPart on the left side formatted to provide links to the contents of its respective list.  In the middle is the Preview Pane.  When you hover over the items on the Data View WebPart, the Preview Pane (which is really a Content Editor Web Part) shows a preview of the data in the list.

NOTE: The links in your Data View WebPart do NOT have to point directly to the items in the list.  Depending on how you format your XSLT, they can point ANYWHERE.  The focus here is establishing the preview functionality.

First, we start with a custom list:

This is simply a custom list which contains fields relating to a list of Employees within a company or recruiter database.  The fields vary from single text fields to multi-text fields, to pictures.

The items I’ve put into the list:

From this list, we now create a Data View WebPart on our main page.  There are multiple ways to do this, but the way I’m most familiar with is through SharePoint Designer.  Here’s a how-to link:

Create a Data View in SharePoint Designer

Obviously, make sure you use your list as the data source, and be sure and include all parameters.

Go to the page itself, and modify the WebPart.  Click on the button to edit the XSL:

For this particular example, this is what my XSL looked like: 

<xsl:stylesheet xmlns:x=”http://www.w3.org/2001/XMLSchema” xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp” version=”1.0″ exclude-result-prefixes=”xsl msxsl ddwrt” xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime” xmlns:asp=”http://schemas.microsoft.com/ASPNET/20″ xmlns:__designer=”http://schemas.microsoft.com/WebParts/v2/DataView/designer” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:msxsl=”urn:schemas-microsoft-com:xslt” xmlns:SharePoint=”Microsoft.SharePoint.WebControls” xmlns:ddwrt2=”urn:frontpage:internal”>

                        <xsl:output method=”html” indent=”no”/>

                        <xsl:decimal-format NaN=”"/>

                                                                                                                                                <xsl:param name=”dvt_apos”>’</xsl:param>

                                                                                                                                                <xsl:variable name=”dvt_1_automode”>0</xsl:variable>

                                                                                                                                                <xsl:template match=”/”>

                                                                                                                                                                        <xsl:call-template name=”dvt_1″/>

                        </xsl:template>

                                                                                                                                                <xsl:template name=”dvt_1″>

                                                                                                                                                                        <xsl:variable name=”dvt_StyleName”>Table</xsl:variable>

                                                                                                                                                                        <xsl:variable name=”Rows” select=”/dsQueryResponse/Rows/Row”/>

                                                <table border=”0″ width=”100%” cellpadding=”2″ cellspacing=”0″>

                                                                        <tr valign=”top”>

                                                                                                <xsl:if test=”$dvt_1_automode = ’1′” ddwrt:cf_ignore=”1″>

                                                                                                                        <th class=”ms-vh” width=”1%” nowrap=”nowrap”></th>

                                                                                                </xsl:if>

                                                                                                <th class=”ms-vh” nowrap=”nowrap”>Full Name</th>

                                                                        </tr>

                                                                        <xsl:call-template name=”dvt_1.body”>

                                                                                                <xsl:with-param name=”Rows” select=”$Rows”/>

                                                                        </xsl:call-template>

                                                </table>

                        </xsl:template>

                                                                                                                                                <xsl:template name=”dvt_1.body”>

                                                                                                                                                                        <xsl:param name=”Rows”/>

                                                                                                                                                                        <xsl:for-each select=”$Rows”>

                                                                                                                                                                                                <xsl:call-template name=”dvt_1.rowview”/>

                                                </xsl:for-each>

                        </xsl:template>

                                                                                                                                                <xsl:template name=”dvt_1.rowview”>

                                                <tr>

                                                                        <xsl:if test=”position() mod 2 = 1″>

                                                                                                <xsl:attribute name=”class”>ms-alternating</xsl:attribute>

                                                                        </xsl:if>

                                                                        <xsl:if test=”$dvt_1_automode = ’1′” ddwrt:cf_ignore=”1″>

                                                                                                <td class=”ms-vb” width=”1%” nowrap=”nowrap”>

                                                                                                                        <span ddwrt:amkeyfield=”ID” ddwrt:amkeyvalue=”ddwrt:EscapeDelims(string(@ID))” ddwrt:ammode=”view”></span>

                                                                                                </td>

                                                                        </xsl:if>

                                                                        <td class=”ms-vb” style=”width:100%;vertical-align:middle;border:solid 1px gray; ”

                                                                                                                        onmousemove=”javascript:return OpenDataPreviewPane(this);”

                                                                                                                        onmouseout=”javascript:return CloseDataPreviewPane(this);”>

                                                                                                                        <a href=”http://litwareserver/Lists/DataViewContentPreviewEmployeeList/DispForm.aspx?ID={@ID}”

                                                                                                                           style=”width:100%; height:30px; vertical-align:middle;”><xsl:value-of select=”@Title”/></a>

                                                                                                                          <span id=”spanDataViewFullName” style=”display:none;”>

                                                                                                                                               <xsl:value-of select=”@Title”/>

                                                                                                                          </span>

                                                                                                                          <span id=”spanDataViewDescription” style=”display:none;”>

                                                                                                                                               <xsl:value-of select=”@Description” disable-output-escaping=”yes”/>

                                                                                                                          </span>

                                                                                                                          <span id=”spanDataViewEmployeePhoto” style=”display:none;”>

                                                                                                                                               <img border=”0″ src=”{substring-before(@PhotoID, ‘, ‘)}” alt=”{substring-after(@PhotoID, ‘, ‘)}”/>

                                                                                                                          </span>

                                                                                                                          <span id=”spanDataViewExperience” style=”display:none;”>

                                                                                                                                               <xsl:value-of select=”@Experience” disable-output-escaping=”yes”/>

                                                                                                                          </span>

                                                                                                                          <span id=”spanDataViewLinks” style=”display:none;”>

                                                                                                                                               <xsl:value-of select=”@Links” disable-output-escaping=”yes”/>

                                                                                                                          </span>

                                                                        </td>

                                                </tr>

                        </xsl:template>

</xsl:stylesheet>

I highlighted the most important part, the part that actually displays.  In this table cell, what is displayed for each list item is the Full Name field in a hyper link, pointing toward the list item edit page itself.  REMEMBER, this does not have to point to the list item itself.  It can point anywhere.  In this same cell is a series of HTML <span> elements, all containing the remaining values as if they are to be displayed.  But these are purposely hidden using the CSS style DISPLAY property.  These are here for a reason.

So now we have our Data View WebPart on our page:

Now add a Content Editor WebPart to the middle zone of the page.  Here’s the source:

<script type=”text/javascript”>

                                                <!–

                                                                        function GetSpanById(listSpans, strID)

                                                                        {

                                                                                                for (var intCounter = 0; intCounter < listSpans.length; intCounter++)

                                                                                                {

                                                                                                                        if (listSpans[intCounter].id == strID)

                                                                                                                                                return listSpans[intCounter];

                                                                                                }

                                                                                                return null;

                                                                        }

                                                                        function OpenDataPreviewPane(sender)

                                                                        {

                                                                                                var tdParent = sender;

                                                                                                tdParent.className = “ms-itemhover”;

                                                                                                var listSpans = tdParent.getElementsByTagName(“span”);

                                                                                                var spanDataViewFullName= GetSpanById(listSpans, “spanDataViewFullName”);

                                                                                                var spanDataViewDescription= GetSpanById(listSpans, “spanDataViewDescription”);

                                                                                                var spanDataViewEmployeePhoto= GetSpanById(listSpans, “spanDataViewEmployeePhoto”);

                                                                                                var spanDataViewExperience= GetSpanById(listSpans, “spanDataViewExperience”);

                                                                                                var spanDataViewLinks= GetSpanById(listSpans, “spanDataViewLinks”);

                                                                                                var tablePreviewPane = document.getElementById(“tablePreviewPane”);

                                                                                                tablePreviewPane.style.display = “block”;

                                                                                                var spanPreviewPaneFullName = document.getElementById(“spanPreviewPaneFullName”);

                                                                                                spanPreviewPaneFullName.innerHTML = spanDataViewFullName.innerHTML;

                                                                                                var spanPreviewPaneDescription= document.getElementById(“spanPreviewPaneDescription”);

                                                                                                spanPreviewPaneDescription.innerHTML = spanDataViewDescription.innerHTML;

                                                                                                var spanPreviewPaneEmployeePhoto= document.getElementById(“spanPreviewPaneEmployeePhoto”);

                                                                                                spanPreviewPaneEmployeePhoto.innerHTML = spanDataViewEmployeePhoto.innerHTML;

                                                                                                var spanPreviewPaneExperience= document.getElementById(“spanPreviewPaneExperience”);

                                                                                                spanPreviewPaneExperience.innerHTML = spanDataViewExperience.innerHTML;

                                                                                                var spanPreviewPaneLinks= document.getElementById(“spanPreviewPaneLinks”);

                                                                                                spanPreviewPaneLinks.innerHTML = spanDataViewLinks.innerHTML;

                                                                                                return false;

                                                                        }

                                                                        function CloseDataPreviewPane(sender)

                                                                        {

                                                                                                var tdParent = sender;

                                                                                                tdParent.className = “ms-vb”;

                                                                                                return false;

                                                                        }

                                                //–>

                        </script>

                        <table id=”tablePreviewPane” class=”ms-vb” style=”display:none;” cellspacing=”0″>

                                                <tr>

                                                                        <td colspan=”2″ >

                                                                                                <span id=”spanPreviewPaneFullName” style=”width:100%; font-size:large; text-align:center;”>

                                                                                                </span>

                                                                        </td>

                                                </tr>

                                                <tr>

                                                                        <td colspan=”2″>

                                                                                                <span style=”text-decoration:underline;”>Description</span>

                                                                                                <span id=”spanPreviewPaneDescription”>

                                                                                                </span>

                                                                        </td>

                                                </tr>

                                                <tr>

                                                                        <td style=”width:25%;”>

                                                                                                <span id=”spanPreviewPaneEmployeePhoto”>

                                                                                                </span>

                                                                        </td>

                                                                        <td>

                                                                                                <table style=”width:100%;” class=”ms-vb”>

                                                                                                                        <tr>

                                                                                                                                                <td>

                                                                                                                                                                        <span style=”text-decoration:underline;”>Experience</span>

                                                                                                                                                                        <span id=”spanPreviewPaneExperience”>

                                                                                                                                                                        </span>

                                                                                                                                                </td>

                                                                                                                        </tr>

                                                                                                                        <tr>

                                                                                                                                                <td>

                                                                                                                                                                        <span style=”text-decoration:underline;”>Links</span>

                                                                                                                                                                        <span id=”spanPreviewPaneLinks”>

                                                                                                                                                                        </span>

                                                                                                                                                </td>

                                                                                                                        </tr>

                                                                                                </table>

                                                                        </td>

                                                </tr>

                        </table>

It’s a little heavy.  So let’s break down what’s going on.  First we’ll focus on the main table that’s displaying the data.  This <table> element, with an id of “tablePreviewPane” holds our preview data.  Essentially its intention is to display the preview data in this format:

Our main JavaScript function, “OpenDataPreviewPane” takes in the table cell element as its sender.  Remember this particular section in our XSL markup:

<td class=”ms-vb” style=”width:100%;vertical-align:middle;border:solid 1px gray; ”

                onmousemove=”javascript:return OpenDataPreviewPane(this);”

                onmouseout=”javascript:return CloseDataPreviewPane(this);”>

The “onmousemove” event calls the “OpenDataPreviewPane” function, passing itself as the sender.  The “OpenDataPreviewPane” uses the sender argument to traverse the hidden <span> elements that we left hidden earlier.  One by one, the contents of those elements are grabbed and set to the respective places in the Preview Pane, and the sender, which is the table cell, is highlighted.

NOTE: For aesthetics, I set my left WebPart zone to a width of 25%, and my middle WebPart zone to a width of 50%.

A couple of questions may arise regarding this implementation:

Q: Why didn’t you just use web part connections?

A: We want something not only simple in terms of MOSS features, but RICH.  Dropping Content Editor WebParts onto pages is very simple.

Q: Why didn’t you just pass in those parameters as arguments to the JavaScript function?

A: Trying to parse and deal with special characters (ex: single quote) was a nightmare.  This is the entire reason we came up with the “traverse the <span>’s” solution instead.

Q: What happens if I change the theme?  Will the color scheme be off?

A: Try it.  The HTML within the Content Editor part uses SharePoint CSS classes so this shouldn’t be a problem

Problem: SharePoint 2003 could only use Windows Authentication, which made it an ideal portal solution for the corporate intranet.  Not the Internet.  But now thanks to the foundation of ASP.NET 2.0, SharePoint 2007 can use Forms Authentication, aptly described as “pluggable” authentication.  Easier said than done.

Background:  First, a little re-cap on authentication vs. authorization.

Authentication – Identifying users.  A user is authenticated if they are recognized, most commonly by their active directory account (Windows) or within a website’s database (Forms).  As long as there exists an authentication provider, a user can be authenticated.   

Authorization – Specifies what a user is allowed to do.  In other words, what a user is authorized to do.  This can be based on the user’s role (ex: Visitor, Member, Admin), or even configured by their user name.

Solution:  By default, a SharePoint 2007 site collection is configured to use Windows Authentication.  To be more precise, a web site hosting a SharePoint site collection is configured for Windows Authentication.  All site collections under a web site will use the same authentication provider.

1. Create a new web site (a.k.a. web application) that will be configured for Forms Authentication

a. Open SharePoint Central Administration.  Click on the Application Management Tab.

b. Under SharePoint Web Application Managerment, click Create or Extend Web Application.  Click Create a New Web Application.

c. Ensure that Create a new IIS Web Site is selected.  In the Application Pool section, under “Select a security account for the application pool”, select Configurable and choose a User Name and Password.  I recommend using the same as your SharePoint Administrator.  In the Search Server section, choose an appropriate Search Server.  Click OK.

Create New Web Site

2. Create a new site collection under the newly created web site

a. If you’re coming straight from the previous step, you can click on the Create Site Collection link to go straight to the creation page.  Otherwise, you can navigate from the Application Management tab and under SharePoint Site Management, click on Create Site Collection.

b. Ensure that the web application selected at the top of the form is the same that you just created.  Type an appropriate Title and Description.  Choose a template in the Template Selection section.  I recommend Team Site or Blank Site.  Type in the user name in the Primary Site Collection Administrator section.  This won’t matter later because we’ll have to choose another one after switching to Forms Authentication, but for now we need one.  Click OK.

Create Site Collection

3. Create a new provider for Forms Authentication

a. Now that we have created our new web site and site collection, we’re ready to start configuring forms authentication.  First we need a provider to host the forms authenticated users.  This is the provider we’re going to switch to.

b. Locate a folder where you can access the program aspnet_regsql.exe through the command prompt.  You can also click on:  

Start -> All Programs -> Visual Studio 2005/2008 -> Visual Studio Tools -> Visual Studio 2005/2008 Command Prompt

c. Execute the command: aspnet_regsql –E –A all –S DatabaseServerName 

d. This command creates the new database that will act as your provider.  The –E authenticates with your account to execute the command, the –A specifies that you’re adding support for features, and ‘all’ specifies to include all features, including authentication.  Finally, the –S specifies your database server name.

e. You can verify this by checking on your database server for the newly created database: aspnetdb.

4. Configure your provider under your web site

a. Open your web site in Visual Studio 2005 / 2008.  You can NOT open it up through IIS, so open it up through the file system.  To do so, Open Visual Studio 2005 / 2008 and choose File -> Open -> Web Site

b. Choose File System on the left, and navigate to the folder of your web site.  This should be under c:\inetpub\wwwroot\wss\Virtual Directories\<<your web site folder>>.  Click Open.  If you’re using Visual Studio 2008, you’ll get the prompt to upgrade the site to .NET 3.5.  Please say NO.

Open Web Site

c. In order for an ASP.NET site to connect to a SQL Server database, it needs a connection string.  Add a <connectionString> element to your web.config file as a child element of the root <configuration> element:

<connectionStrings>
    <remove name=”AspNetSqlProvider” />
    <add name=”AspNetSqlProvider” connectionString=”Data Source=LITWARESERVER\;Initial Catalog=aspnetdb;Persist Security Info=True;User ID=sa;Password=*****” providerName=”System.Data.SqlClient” />
  </connectionStrings>

d. Add the <membership> element as a child of the <system.web> element.  This element contains the <providers> element, which will contain our new provider.  Our provider will point toward our database through the connectionStringName attribute.  Set the defaultProvider attribute value to our provider, in this case: AspNetSqlMembershipProvider

<membership defaultProvider=”AspNetSqlMembershipProvider”>
      <providers>
        <remove name=”AspNetSqlMembershipProvider” />
        <add name=”AspNetSqlMembershipProvider” connectionStringName=”AspNetSqlProvider” passwordAttemptWindow=”10″ enablePasswordRetrieval=”false” enablePasswordReset=”true” requiresQuestionAndAnswer=”true” applicationName=”/” requiresUniqueEmail=”false” passwordFormat=”Hashed” type=”System.Web.Security.SqlMembershipProvider, System.Web,Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a” />
      </providers>
    </membership>

e. Add the <roleManager> element immediately under the <membership> element.  This element also contains child elements to specify the provider.  In the <roleManager> element, set the enabled attribute value to “true”, and the defaultProvider attribute value to our role provider, in this case: AspNetSqlRoleProvider.

<roleManager enabled=”true” defaultProvider=”AspNetSqlRoleProvider”>
    <providers>
     <remove name=”AspNetSqlRoleProvider” />
     <add name=”AspNetSqlRoleProvider” connectionStringName=”AspNetSqlProvider” applicationName=”/” type=”System.Web.Security.SqlRoleProvider, System.Web,Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a” />
    </providers>
   </roleManager>

f. Your Central Administration site must ALSO be aware of your new provider.  So add the <connectionString> element the <membership> element, and the <roleManager> element to the web.config of your Central Administration site as well.  However, REMOVE the defaultProvider attributes of the <membership> and <roleManager> elements, and remove the enabled attribute of the <roleManager> element.  BE CAREFUL.  Make sure you open the web.config of you central administration site, and not your first SharePoint site (likely to be under port 80).

5. Switch to your new provider and add users to the database

a. Now it’s time to make the switch.  Open the ASP.NET Configuration Tool under Website -> ASP.NET Configuration (look for the icon that looks like the earth and a piece of dynamite next to it). 

b. Under the Security tab, under the Users section, click on Select authentication type.  Select “From the Internet”.  This effectively switches the authentication mode to “Forms”.  Click Done.

c. Now within the same section, click on Create User and follow the steps to create a new user.  I recommend creating at least two.  One of them will be your new Administrator for your SharePoint site.

d. Also use the site configuration tool to add at least one role, and make sure any user you added is place under a role.

e. Exit the configuration tool by closing the browser containing it.  You’ll be prompted with a message indicating that the web.config file has changed.  This is because you changed the authentication type.  Click “Yes” to continue.  You can confirm your change by finding the <authentication> element and the mode attribute value should now be “Forms”.

6. Switch your authentication provider and add the new administrator

a. It’s almost over.  Go to SharePoint Central Administration and go to Authentication providers under Application Security.

b. Your web site (upper right) should be the same one we’ve been working on this whole freakin’ time.  If not, change it.  Under Zone, click Default.

c. In the Authentication Type section, select Forms.  You can choose to enable anonymous access at your discretion.  In the Membership Provider Name section, enter the same membership provider we configured, which in this example is AspNetSqlMembershipProvider.  Click Save.

Switch SharePoint Provider

d. Finally, return to Application Management under Central Administration, and under SharePoint Site Management, click Site collection administrators.

e. Once again, your web site (upper right) should be the same one we’ve been working on.  In the Primary Site Collection Administrator section, enter one of the user names you created in step 5c.  Click on the Check Names icon to the right to verify this user name is valid. 

        i. WARNING:  Many people have had problems at this step.  The message “No exact match was found” appears for the user name they entered.  This could mean that you did not add the <connectionStrings> element and <membership> element to BOTH this web site AND the Central Administrationweb site, or that you made a typo when configuring your web.config.  Verify from step 4 that you proceeded correctly.

Add New Site Administrator

f. Click OK.

7. Log in

a. Finally, go to your site collection and log in as your administrator.  If you cannot log in, return to step 4 and verify that you proceeded correctly.

“Do you know how to change the title bar background for a single web part? (Say..just the Announcement web part alone)”

 A SharePoint developer sometimes cringes at this type of question.  It’s such a simple request.  The client probably expects a very simple solution.  Let’s make some simple assumptions:

This will appear for that ONE web part, no matter what page it’s on. 

For example, if I want the background of my Announcements web part to be green on the default page, I want the background of my Announcements web part page to be green on some other site page that it’s added to.

My client thinks this is easy, so it had better be.

Don’t spend time with some crazy outlandish under-the-box solution, like a custom web part, that you would have to re-deploy sometime later…Let’s think of something that is simple, takes little to no amount of work, and is also flexible (can be applied to potentially other web parts in the future).

Solution:

Let’s look at what we’ve got.   

All web part headers use the Css class: ms-WPHeader from the Theme.css file under their respective theme.  Perhaps you could do a custom theme, and change the background color of the ms-WPHeader class.  However, this will change the background color of ALL web parts, not just the one.  Plus, you’d have to create a custom theme (though the client will probably need one eventually anyway).

If you put an announcement web part on to a page, you can look at the HTML source and find the <td> element for it:

<td title=”Announcements – Use the Announcements list to post messages on the home page of your site.” id=”WebPartTitleWPQ1″ style=”width:100%;”>

You can fixate on that td element with JavaScript and change the background color.  If you want this to happen on every page that has an announcement web part, you place this in the Master Page (default.master).  The master page is under the 12 hive path:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\GLOBAL

MasterPage JavaScript

Bingo.  It’s a banged up solution but it gets the job done quickly and without compiling any code.  The unfortunate thing is that this is technically in-the-box because it required a developer to change the Master Page.

Result

But when we say ONLY ONE web part, it could be just one web part on a single page.  On that note, what you can do is take the same JavaScript and put that into a content editor web part on the same page as your announcements web part.

Using Content Editor Web Part

If you use the content editor web part, make sure you:

- Put the content editor web part BELOW your announcement web part, to make sure that the JavaScript executes AFTER the announcement web part loads

- Clear out the title and border style of the content editor web part so it doesn’t show up to users.

- For this reason I consider the Content Editor web part to be an incredibly powerful web part.  The client may not understand the HTML gibberish that you as a developer put into it, but they get to make the decision whether to keep it on their page or not.  Powerful.