Windows Phone 7 Deve Launch
# Thursday, September 30, 2010

New to Visual Studio 2010?  Did you just install it like me?  Are you still using Visual SourceSafe even though you don’t want to admit it?  It’s OK, I am too.

Are you getting an Unable to Access Database error when you want to fire up an existing project in VSS?

image

VS 2010 defaults to connecting to Team Foundation Server.  To change this go to the Tools menu and select Options.

Check off the select all settings and expand the Source Control tree item.  Change the current source control plug-in to Visual SourceSafe.  It should be happy sailing from here.

image

Now hurry up and replace VSS since it’s coming to end of life mid year 2011 (*slapping self*).

Slapping Self

 

 

There are after all many better alternatives out there.

Happy Coding!

Posted 09.30.2010  #    Comments [0]  | 
# Wednesday, September 29, 2010

Our team is working on a UI facelift for an intranet application that helps drive our internal yearly budgetary process.  During the beginning stages of the development of this effort we hired a new webmaster and we invited him to the effort to help give our UI a nice finish with all the CSS goodness and jQuery goodies.

During this process our webmaster began using some CSS3 magic to make things look nice.  As most good webmasters and designers firefox was used as the start of the design.  For our intranet however, IE is king and we have a mix of IE7 - 8 and they don’t support many CSS3 features.  Our webmaster turned to CSS3Pie.  I had no idea about this little gem and he had just recently come across it.  Download it, write your CSS3 and apply PIE and magically Internet Explorer renders CSS3.

As an example of what it can do, what if you wanted to apply a nice rounded edge to an element.  Fire up VS 2010 and start a new web forms project.  Let’s round the edges of the bottom of the border in the default page.

image

Let’s edit the page element in the site.css to get this going.

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius:  0px 0px 10px 10px;
}

We’ve added three items. The W3C standard for adding a rounded border is border-radius but for backwards compatibility we add the –moz-border-radius for older versions of Firefox and –webkit-border-radius for older versions of Chrome.

Now fire these up in Firefox and Chrome and you will have your rounded corner.  If you are using IE however, no luck.

Firefox sample:

image

Now to make this magic happen in IE we sprinkle in just a dash of CSS3Pie.  After downloading CSS3 Pie add the .htc file to your project and then add the below line to your page element in the site.css file:

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius:  0px 0px 10px 10px;
    behavior: url('./Scripts/PIE.htc');
}

Fire up IE again and CSS3 rounded corners appear thanks to CSS3Pie.

image 

Happy Coding

Posted 09.29.2010  #    Comments [0]  | 
# Wednesday, August 04, 2010

Normally forms don’t have much of a visual queue to the end user showing them where they are on a page.

image

Wouldn’t it be nice though?

image

That just seems like a step in the right direction.  Making this happen is a lot easier than I thought.  Most browsers can handle this with the css pseudo-class selector.  The css to make this happen for all your inputs would look like this:

input:focus
{
    background-color:LightYellow;
    border-color:Red;
    border-style:dotted;
    border-width:2px;
}

Pretty simple.  However, If you are need to support IE7 and lower the css above won’t do anything. IE7 doesn’t respect the focus selector.  Don’t fret. jQuery to the rescue.

if ($.browser.msie && $.browser.version == "7.0") {
    $("input").focus(function() {
        $(this).addClass('FocusFix');
    }).blur(function() {
      $(this).removeClass('FocusFix');
  });
}

Be sure to add the FocusFix class to your css:

input:focus, input.FocusFix
{
    background-color:LightYellow;
    border-color:Red;
    border-style:dotted;
    border-width:2px;
}

That should get you going in IE7.  You might notice though all your input types are doing this even buttons for example.  You can fix this by telling jQuery and css to select on certain types of inputs.

CSS:

input[type="text"]:focus, input[type="password"]:focus
And with jQuery:
if ($.browser.msie && $.browser.version == "7.0") {
  $("input[type='text'], input[type='password']").focus(function() {
      $(this).addClass('FocusFix');
  }).blur(function() {
    $(this).removeClass('FocusFix');
});

I have done all my targeting with the input element. You can just as easily have done this with classes for your elements. In my case, the application is already well underway and it seemed an easier approach to select the input types I wanted. You could also add your textareas easily this way.

Happy Coding!

Posted 08.04.2010  #    Comments [0]  |