Category: General

Mucking around with Silverlight 2.0 Beta 1

First of all let me say that I’m pretty geeked about Silverlight 2.0 for a number of reasons.  The first is that I’ve always been amazed at the production quality of flash based sites over the years but the whole idea of learning ActionScript made me queasy.  Secondly, because of the isolated nature of the silverlight object you don’t have to worry about browser inconsistencies *cough* css *cough* javascript document object model.  I also like how nicely it integrates into Visual Studio and the fact that it is finally compatible with the C# language.  I’ve been using a beta version of Blend 2.5 for a few weeks now and in general I’m pretty happy with it.

Now I’ve never been a big Design View guy in Visual Studio, mainly because of how it has the tendency of seriously screwing with any markup formatting that you have painstakingly tried to keep consistent. With blend however I actually enjoy using the designer!  It could just be because of the fact that there is no intellisense support yet without importing your solution into Visual Studio, which they made pretty darn simple thankfully (right click solution -> open in visual studio). 

Think you want to try your hand at hand writing your own xaml you say?  Good luck, since any shape not of a primitive nature (circle, square, etc) will make your eyes bleed with complexity.

<Path Height=”56.862″ x:Name=”PointerBox” Width=”56.862″ RenderTransformOrigin=”0.350482881069183,0.354668319225311″ Canvas.Left=”128″ Canvas.Top=”299.274″ Stretch=”Fill” Stroke=”#FF000000″ StrokeThickness=”1″ Data=”M42.572853,0.5 L84.645706,42.572853 L42.572853,84.645706 L0.5,42.572853 L9.6381121,33.434738 L9.6381121,9.994483 L33.078369,9.994483 L42.572853,0.5 z” d:IsHidden=”True”>                                         

 
In all honesty, it’s not all that bad once you understand how the different tags nest within each other.  More often than not, whenever I’m in a bind I’ll switch over to blend design view and with a few clicks it will insert the needed tags for me, and if I’m not mistaken even attempt to optimize the xaml markup!

I’ll be posting more about Blend and Silverlight once I get Live Writer setup on my laptop.

More

CSS Management Techniques

Idealy, your stylesheets should be done with modularity in mind.  It is not uncommon to find a stylesheet file with hundreds if not thousands of lines of text which all contain the same 6-7 css attributes.  I have two solutions for this problem, one using ASP.NET 2.0 and one without.

My main.css Stylesheet (without ASP.NET)

@import url(initial.css);  /* Default your styles across multiple browsers */
@import url(pages/home.css);
@import url(pages/about.css);
@import url(pages/contact.css);
@import url(layout.css);
@import url(fonts.css);
@import url(hacks.css);

Using this method, you only need to include a reference to one stylesheet which imports the rest into your page.  This way if you decide later that you no longer need an about page for example you can remove that line of code which means your about.css file is no longer being downloaded when your page loads up.  Less files to download equals faster page loads.  Note how each stylesheet serves its own unique purpose.  Also note that the order of your css imports are important because of the fact that you can very well overwrite attributes that were defined previously which is why initial.css is first and hacks.css is at the end.

ASP.NET 2.0 Method

ASP.NET 2.0 has had a feature around since the 2005 version of Visual Studio which is called Themes.  Using themes you can style your entire website using Skin files.  These Skin files consist of a subset of asp.net markup that deals with style properties, stylesheets and images..  One advantage of this method is how with a single reference to your theme in the web.config file of your asp.net page you can import all stylesheet files contained within this folder.  Simply put, you can add add as many stylesheet files as you want in any type of folder structure under themes and asp.net will include them in all your pages.  Pretty niftey eh?

More

Bionic Contacts

James bond eat your heart out. A University of Washington researcher has developed a contact lens including circuitry and a matrix of LEDs. They say that this technology is capable of displaying an augmented reality, interacting with mobile devices and gaming among other uses. Take a look at the video to get a full description of this new technology being developed.

More

Creating Templates in Visual Studio

It’s important to be off to a good start when working on the web.  Often, I get requests to moch-up a prototype web template that will be passed off to a developer to begin writing code.  While I enjoy the challenge of coming up with a design from scratch, often times there is a request to have certain features and layout that are similar to a previous web application.  Welcome to Visual Studio Templates.

FIrst things first, lets decide on a layout for our master page. (I choose #24)

http://blog.html.it/layoutgala/

View the source of your chosen layout and grab the <style> content and the <body> content and put it in their respective places.

Step 1

Place the content between <style> and put it in a separate .css file (optional but recommended)

<head runat="server">
    <title>Template</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

Step 2

Copy the contents between <body> and don’t forget to include a <asp:ContentPlaceHolder>, I’ve edited some of the placeholder text here for readability purposes.

<body>
    <form id="form1" runat="server">
        <div id="container">
         <div id="header"><h1>Header</h1></div>
        <div id="wrapper">
        <div id="content">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        </div>
        <div id="navigation">
            <p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler</p>
        </div>
        <div id="extra">
            <p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler</p>
        </div>
        <div id="footer"><p>Footer.</p></div>
        </div>
    </form>
</body>

 

If you’ve been following along, you should have something similar to this.

 

image

Alright, now comes the cool part. If you’re happy with your template, you can now proceed to exporting your template by following these simple steps

  1. Go to: File -> Export Template
  2. Select Project Template
  3. Click Next
  4. You will now have the option to name the template as well as provide a description and icon to display in your New Project window.
  5. Click Finish

You should now see the web site in your “New Web Site” dialog box under the My Templates section.  In case you were curious, what you really did was create a zip package containing the files of your solution and dropping it in the My Documents\Visual Studio 2008\My Exported Templates folder.

 

 image

 

If you would like to learn more about the advanced topics of Visual Studio Templates, start by checking out the resources from MSDN.

http://msdn2.microsoft.com/en-us/library/6db0hwky.aspx

More

AJAX Tips

Some of you may know how to disable ajax updates on the ScriptManager tag directly..

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePartialRendering=”false” />

But did you know that you can also disable ajax for a specific content page?

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    ScriptManager.GetCurrent(this.Page).EnablePartialRendering = false;
}

If you want to find out if the page did an asynchronous postback or not, use this..

protected void Page_Load(object sender, EventArgs e)
{
    if (ScriptManager1.IsInAsyncPostBack)
    {
        Page.Title = "AJAX POSTBACK!";
    }
}

More