Thursday, February 19, 2009

How to Enable Silver light Debugging


If we try to add a new silver light project to a solution, then Visual studio prompts with the following dialogue box.



So that we can enable debugging on this newly created silver light application. However if we wanted to add an existing silver light application to a solution which contains a website project then we have to explicitly enable debugging on this silver light application, otherwise Visual studio wont debug this silver light application, when we set the Web application as the start up project.


To enable debugging on this newly added existing silver light project.
1) In solution Explorer, Right click on the Web Project and select ‘Property Pages’ .Here is the screen shot to select ‘Property Pages’



2) In ‘Property pages’ Window in ‘Start Options’ , make sure that the check boxes ‘ASP.NET’ and ‘Silverlight ‘ both are selected.



3) Select ‘Silverlight Application’ then Click on the ‘Add’ button, it will open the following window. Select the check box ‘Enable Silverlight Debugging’ then press ‘Apply’ then ‘Ok’.


Tuesday, February 03, 2009

CSS: Shared Classes

CSS: Shared Classes

Summary: You can group styles common to different rules into their own classes to save repeating yourself. By applying multiple classes to one element in CSS you can modularize your code to help optimize your style sheets.

You can group styles common to different rules into their own classes to save repeating yourself. CSS2-compliant browsers can reference multiple classes within individual elements.

For example:

<div id="nav" class="nav center">...</div>

This ability to reference multiple classes gives authors newfound options when styling their content. For elements that share the same styles (text-align:center for example), you can group these shared styles into one shared class. So this:

<style type="text/css">

.nav{color:red; text-align:center;}

.main{color:#000; text-align:center;}

</style>

...

<div id="nav" class="nav">...</div>

<div id="main" class="main">...</div>

Becomes this after grouping the common center style into one shared class:

<style type="text/css">

.nav{color:red;}

.main{color:#000;}

.ctr{text-align:center;}

</style>

...

<div id="nav" class="nav ctr">...</div>

<div id="main" class="main ctr">...</div>

The third .ctr class groups the common styles (in this case the center declaration) into a class now shared by two elements. The additional class saves space by eliminating redundant common declarations, which can add up for larger style sheets. In effect, you are normalizing your CSS.

Here is a small example about styles with classes and Id.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Shared Classes</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body {

width: 40em;

font-family: Arial, Helvetica, sans-serif;

}

h1 {

font-size: 1.5em;

}

h2 {

font-size: 1.2em;

margin-top: 40px;

}

h3 {

font-size: 1.0em;

font-weight: bold;

}

h4 {

text-transform: uppercase;

font-size: 1.0em;

}

/*----these are the test classes and ids----*/

.orange {

color: orange;

}

.bold {

font-weight: bold;

}

#boldness {

font-weight: bold;

}

.orangegrouped.boldgrouped {

color:orange;

font-weight: bold;

}

#boldgroup.orangegroup {

color: orange;

font-weight: bold;

}

</style>

</head>

<body>

<h1>Applying multiple styles to HTML elements</h1>

<h2>Case I: Two separate classes applied to one element</h2>

<p class="orange bold">This text should be orange and bold. Two classes are applied to the <p> tag, "orange"

and "bold."</p>

<h2>Case II: A class and an ID applied to one element</h2>

<p class="orange" id="boldness">This text should be orange and bold. The <p> tag has the class "orange"

applied to it, and is assigned the id "boldness."</p>

<h2>case III: Two grouped classes applied to one element</h2>

<p class="orangegrouped boldgrouped">This text should be orange and bold. Two classes are applied to the <p>

tag, "orangegrouped" and "boldgrouped", which are defined together in the CSS.</p>

<h2>Case IV: Two grouped classes applied to one element in the opposite order</h2>

<p class="boldgrouped orangegrouped">This text should be orange and bold. Two classes are applied to the <p>

tag, "orangegrouped" and "boldgrouped", which are defined together in the CSS but in

the opposite order than they are applied in the <p> tag.</p>

<h2>Case V: A class and an ID grouped and applied to one element</h2>

<p class="orangegroup" id="boldgroup">This text should be orange and bold. The <p> tag has the class "orangegroup"

as well as the id "boldgroup" applied to it, which are defined together in the CSS.</p>

</body>

</html>

Conclusions

Netscape 4.x for Windows and Mac cannot support the application of multiple classes to a single element. It results in ignoring all classes. (Cases I, III, IV) It can, however, understand the application of a class and an id to a single element. (Case II) This technique only works, however, if the class and id are defined separately in the style sheet, not grouped together. (Test Case V)

Internet Explorer 4.x for Windows cannot support the application of multiple classes to a single element. It results in ignoring all classes. (Cases I, III, IV) It can, however, understand the application of a class and an id to a single element. (Case II) This technique works even if the class and id are grouped together in the style sheet, not defined separately. (Test Case V) In this respect IE 4.x differs from NN 4.x.