Sam Beauvois: general dev, .net and other stuff

First use of Visual Studio 2010 : the installation

Yesterday I received a visual studio 2010 Ultimate edition from work.

I’ve already test the  express edition when it was in beta phase, but it’s not the same …

So, let’s install it !

I install it on a Fujitsu Siemens laptop with 4 GB Ram and a Intel Core 2 Duo processor (2,53 GHz) running  Windows 7 64 bit Ultimate edition.

image

 

Launch the auto run program

image

Loading screen

image

Click Next

image

Read and accept the license terms

image

Choose your installation mode : Full installation (takes more than 6 GB) or Custom installation

image

I choose Custom

image

Select the features you want :

image

(notice that “Microsoft SharePoint Developer Tools” are integrated)

I just don’t want Dotfuscator community to be installed, so I uncheck  it

I keep the rest because I want to test some features

image

Click Install

Installation running :

image

After less than 10 minutes, the installation asked me to restart my computer:

image

image

I click “Restart Now”

 

When restarting, a loading form is showing

image

Then the setup continue

image

After about 45 minutes, the setup is finished

image

You can choose to install the documentation, but I choose to click on the “Finish” button.

 

The installation windows appears :

image

I Click Exit

Visual Studio 2010 is now installed

 

The installation takes me about one hour, and no problem occurred.

Now I can launch the product

image

 

image

 

I choose my default environment settings (I used to choose Visual C# Development settings so I pick this one).

image

I Click on “Start Visual Studio”

First time loading form

image

 

Visual studio is up and running

image

 

Help and documentation are on the start page:

A What’s new section is available on the start page :

Some other links are available :

  • Creating application with Visual Studio
  • Extending Visual Studio
  • Community and Learning Resources

 

Some resources for Windows, Web, Cloud, Office,SharePoint and Data development are accessible too.

 

Next step : migration of a Visual studio 2008 solution !

Use ASP.NET Validators with the SharePoint:DateTimeControl

If you want to use asp.net validation system with the SharePoint’s DateTimeControl, the first thing you need to know is that this control is “just” a wrapper around simple ASP.NET controls (textbox, dropdownlist).

If you want to set the ControlToValidate property of an ASP.NET validator to the DateTimeControl’s ID, it will throw an error!
As you can guess, you have to target the controls inside the DateTimeControl.

Since the DateTimeControl set the name of the controls programmatically, you can retrieve the id of the control:

  • Textbox date: DateTimeControl.ID +”Date”
  • Dropdownlist hours: DateTimeControl.ID +”DateHours”
  • Dropdownlist minutes: DateTimeControl.ID +”DateMinutes”

Example:

If you use the SharePoint:DateTimeControl with the TimeOnly property set to “true”


<SharePoint:DateTimeControl runat="server" ID="TheTime" TimeOnly="true"/>

You’ll have two dropdownlists, one for the hours and one for the minutes
The DateTimeControl set the name:

Dropdownlist hours: DateTimeControl.ID +”DateHours”

Html will be:

<select name="ctl00$PlaceHolderMain$ctl07$ctl02$TheTime$TheTimeDateHours" id="ctl00_PlaceHolderMain_ctl07_ctl02_TheTime_TheTimeDateHours" dir="ltr">
 <option value="00:">00:</option>
 <option value="01:">01:</option>
 <option value="02:">02:</option>
 <option value="03:">03:</option>
 <option value="04:">04:</option>
 <option value="05:">05:</option>
 <option value="06:">06:</option>
 <option value="07:">07:</option>
 <option value="08:">08:</option>
 <option value="09:">09:</option>
 <option value="10:">10:</option>
 <option value="11:">11:</option>
 <option value="12:">12:</option>
 <option value="13:">13:</option>
 <option value="14:">14:</option>
 <option value="15:">15:</option>
 <option value="16:">16:</option>
 <option value="17:">17:</option>
 <option value="18:">18:</option>
 <option value="19:">19:</option>
 <option value="20:">20:</option>
 <option value="21:">21:</option>
 <option value="22:">22:</option>
 <option value="23:">23:</option>
</select>

Dropdownlist minutes: DateTimeControl.ID +”DateMinutes”
Html will be:

<select name="ctl00$PlaceHolderMain$ctl07$ctl02$TheTime$TheTimeDateMinutes" id="ctl00_PlaceHolderMain_ctl07_ctl02_TheTime_TheTimeDateMinutes" dir="ltr">
 <option value="00">00</option>
 <option value="05">05</option>
 <option value="10">10</option>
 <option value="15">15</option>
 <option value="20">20</option>
 <option value="25">25</option>
 <option value="30">30</option>
 <option value="35">35</option>
 <option value="40">40</option>
 <option value="45">45</option>
 <option value="50">50</option>
 <option value="55">55</option>
</select>

So you can retrieve the ASP.NET controls by using :

  • For the date: TheTime$TheTimeDate
  • For the hours: TheTime$TheTimeDateHours
  • For the minutes: TheTime$TheTimeDateMinutes

Real case example:

I have two DateTimeControl, one named TheStartTime and one other named TheEndTime,

I want to validate that the end time is not before the start time.

So I’ll use the ASP.NET comparevalidator validator to compare the hours:

<asp:CompareValidator id="valDate" runat="server" ControlToValidate="TheEndTime$TheEndTimeDateHours" ControlToCompare="TheStartTime$TheStartTimeDateHours"
 Type="Integer"
 Operator="GreaterThanEqual"
 ErrorMessage="The end time must be greater than the start time">
 </asp:CompareValidator >

Now, if you want to validate both hours and minutes, one option is to add an “asp:CustomValidator” and check conditions server side :
Markup:

<asp:CustomValidator runat="server" ID="EndTimeMustBeLaterThanStartTimeCustomValidator"
EnableClientScript="false" ErrorMessage="Start time must be before end time"/>

Before the action, validate:

if (!IsEndTimeLaterThanStartTime())
{
 EndTimeMustBeLaterThanStartTimeCustomValidator.IsValid = false;
 return;
}

Validation method:


private bool IsEndTimeLaterThanStartTime()
{
 // retrieve the DropDownList
 DropDownList startHours = TheStartTime.FindControl("TheStartTimeDateHours") as DropDownList;
 DropDownList endHours = TheEndTime.FindControl("TheEndTimeDateHours") as DropDownList;

 // prevent from errors
 if (startHours == null ||
 endHours == null ||
 string.IsNullOrEmpty(startHours.SelectedValue) ||
 string.IsNullOrEmpty(endHours.SelectedValue))
 {
 return; // dont' do anything
 }

// the hour value is "00:"
 int startHour = Convert.ToInt32(startHours.SelectedValue.Replace(":",""));
 int endHour = Convert.ToInt32(endHours.SelectedValue.Replace(":", ""));
 if (endHour < startHour)
 {
 args.IsValid = false;
 }
 else
 {

 if (endHour == startHour)
 {
 // check the minutes
 DropDownList startMinutes = TheStartTime.FindControl("TheStartTimeDateMinutes") as DropDownList;
 DropDownList endMinutes = TheEndTime.FindControl("TheEndTimeDateMinutes") as DropDownList;
 // prevent from errors
 if (startMinutes == null ||
 endMinutes == null ||
 string.IsNullOrEmpty(startMinutes.SelectedValue) ||
 string.IsNullOrEmpty(endMinutes.SelectedValue))
 {
 return; // dont' do anything
 }

 int startMinute = Convert.ToInt32(startMinutes.SelectedValue);
 int endMinute = Convert.ToInt32(endMinutes.SelectedValue);

 if (endHour <= startMinute)
 args.IsValid = false;

 }
 }

 args.IsValid = true;

 }

You can also validate the Date himself if you choose to display it,
you can make a client side validation if you know javascript,
you can do everything like in “classic” ASP.NET.

CSS Mixer

CSSmixer128 Css mixer is a tool I’ve developped in C# winforms, .NET framework 3.5

You can use it to improve you ASP.NET Themes or your CSS files for all your web projects.

If you have many css files linked to a page, you can group them in a single file with CSS Mixer.

You can also minify CSS files to save the bandwith.

 

To use it, open a folder containing CSS files,

cssmixer_screenshot

choose an action (simple combine, or combine and minify) then click Save as …

cssmixer_screenshot2

Download the last version of CSS Mixer on codeplex.

I hope you’ll find it usefull. please give me feedback on it

Get the parent Folder for a SPListItem

To retrieve the parent folder

my extension method


public static SPFolder GetParentFolder(this SPListItem spListItem)

{

if (spListItem == null)

return null;

SPFile spFile = spListItem.Web.GetFile(spListItem.Url);

if (spFile == null)

return null;

return spFile.ParentFolder;

}

Use


SPFolder parentFolder = sPListItem.GetParentFolder();

if (parentFolder != null)

{

// do some stuffs..

}
public static SPFolder GetParentFolder(this SPListItem spListItem)
{
if (spListItem == null)
return null;
SPFile spFile = spListItem.Web.GetFile(spListItem.Url);
if (spFile == null)
return null;
return spFile.ParentFolder;
}[/csharp]

How to build a “visible on hover” action menu with CSS?

In my previous post I explain a way to build a “visible on hover” menu using jQuery.

Now, I’ll explain you how to do that without javascript, using only CSS.

First, built the web page and a CSS file


<html>
 <head>
 <title>Sam Beauvois | CSS on hover menu</title>
 <link href="demo.css" type="text/css" rel="stylesheet" />
 </head>

 <body>
 <h2>Visible on hover with CSS demo.<h2>
 <h3>Please put you mouse hover the following texts</h3>

 <div>
 Demo 1
 <div>
 <a href="#">action 1</a> | <a href="#">action 2</a> | <a href="#">action 3</a>
 </div>
 </div>

</body>

20100207_visibleOnHover_CSS_1Then add a class to the container and content divs

</pre>
<div class="hidden_action_container">
Demo 1
<div class="hidden_action">
<a href="#">action 1</a> | <a href="#">action 2</a> | <a href="#">action 3</a>
</div>
</div>
<pre>

And define the classes in the CSS file :


.hidden_action_container .hidden_action
{
 display: none;
}
.hidden_action_container:hover .hidden_action
{
 display:inline;
}

note the class declaration :

.hidden_action_container:hover .hidden_action

20100207_visibleOnHover_CSS_2
Now it’s functionnal,

Add a style to make it nicer :

.hidden_action_container
{
 padding : 15px 15px 15px 15px;
 background-color: #DDDDDD;
 border-style:solid;
 border-color:#EEEEEE;
 height:50px;
}

.hidden_action_container .hidden_action a
{
 color:#999999;
 font-size: 20px;
 font-weight:bolder;
}

.hidden_action_container .hidden_action
{
 display: none;
}
.hidden_action_container:hover .hidden_action
{
 display:inline;
}

20100207_visibleOnHover_CSS_3You can see the online demo here : http://www.sambeauvois.be/Demos/CSS/VisibleOnHover/demo.html