Doloto

Doloto

Meant for Web 2.0 Apps that use a lot of JavaScript, Doloto will speed up the download time of all the JavaScript by basically removing anything that isn’t initially needed and replacing it with stubs. It will then download in the background or wait until it is first called. The result, a seemingly much faster Web App for the user.

For more info have a look at the Doloto page on Microsofts Research site or head over to the download page on MSDN.

Advertisements

Browser Testing IE Versions

Anyone in Web development knows that they should be testing their products on all browsers including different versions, which presents a problem when your only using the one PC. Programs like Multiple IE aren’t great and often you can find yourself trying to fix a problem that doesn’t actually exist on the proper version.

The best solution is the have virtual machines running on your own machine, but these take time to set up and most developers tend to have little time to spare as it is. Well thankfully if you want to test Internet Explorer you don’t have to set the virtual machine up yourself, just head to the following address and you can download one from Microsoft’s site. Save the address as you will have to keep downloading it every 3 months due to them building in a time bomb as it is essentially a free OS.

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

The second option also from Microsoft is Super Preview that is planned to be part of their Expression package. Currently it’s only at the Beta stage but it if you enter an address it will give you a side by side comparison of a page in IE 6/7/8, plus its free. The full version when it’s ready is meant to have support for all the popular browsers (but then you will have to pay for it to). However it is also limited to just being a preview so as far as testing all your JavaScript functions goes, you still need your virtual machines for that.

Super Preview

Introduction to Real Time Search

The Real Time Search this article relates to is a dll that comes included in the Web Client Software Factory one of Microsoft’s patterns and practices downloads. What it can do and what this example will demonstrate is adding the ability cause a post back that will refresh an update panel as the users types into a search box. This can give a great effect and make a web app really user friendly in scenarios like searching photo’s, emails or any general list.

First late me state though that this is in no way the most optimal way program. In most scenarios you could built a better result using something like JSON as their will be a lot less data transfer, which is also a general reason to avoid update panels. However this is also very quick and very easy to implement, not to mention if you’ve ever used update panels before you already know 90% of what’s needed. This can also only work in situations where you have a good search that is going to return the result quickly, rather than leaving the user sitting there trying to work out why nothing’s happening and where the search button has gone.

Implementing Real Time Search

For this example I will be filtering a table from a DB based on the search criteria and refreshing a Grid View with the results. I will be using a normal C# Web Site project with the Adventure Works sample DB from Microsoft. DB connection will be done using LINQ to EntityFramework, however there is no need to use this it is just my preference for the example.

First off set up you’re website and db and make sure both are working with no problems. As results will be displayed in an Update Panel, get one of these along with a script manager added to your page, so it looks something like this:

<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate></ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

Next let’s get the search working in the normal method, so I’m going to create my Entity Model and add a textbox and gridview to show the results. Again you can connect and show your results however you want. You should now have something like this in your aspx file:

<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>

<
asp:TextBox ID=”txtSearch” runat=”server” OnTextChanged=”TextChanged” Text=””></asp:TextBox>

<
asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>

<
asp:LinqDataSource ID=”LinqDataSource1″ runat=”server” onselecting=”LinqDataSource1_Selecting”>
</asp:LinqDataSource>

<
asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False” DataSourceID=”LinqDataSource1″>
<Columns>
<asp:BoundField DataField=”ProductID” HeaderText=”ProductID”
ReadOnly=”True” SortExpression=”ProductID” />
<asp:BoundField DataField=”Name” HeaderText=”Name”
ReadOnly=”True” SortExpression=”Name” />
<asp:BoundField DataField=”ProductNumber” HeaderText=”ProductNumber” ReadOnly=”True” SortExpression=”ProductNumber” />
<asp:BoundField DataField=”Color” HeaderText=”Color”
ReadOnly=”True” SortExpression=”Color” />
<asp:BoundField DataField=”SafetyStockLevel” HeaderText=”SafetyStockLevel”
ReadOnly=”True” SortExpression=”SafetyStockLevel” />
<asp:BoundField DataField=”ReorderPoint” HeaderText=”ReorderPoint”
ReadOnly=”True” SortExpression=”ReorderPoint” />
</Columns>
</asp:GridView>
</ContentTemplate>

</asp:UpdatePanel>
</div>
</form>

And this in your code behind:


protected void LinqDataSource1_Selecting(object sender, LinqDataSourceSelectEventArgs e)
{
Model.AdventureWorks2008Entities AdventureWorkds = new Model.AdventureWorks2008Entities();
var products = from p in AdventureWorkds.Product
where p.Name.Contains(txtSearch.Text)
select p;
e.Result = products;
}

Next its time to add the Real Time Search. Make sure you have the dll downloaded (you may need to compile the download to get it) and add it to your bin folder. Add the following to your page in the relevant places:

<%@ Register Assembly=”RealTimeSearch” Namespace=”RealTimeSearch” TagPrefix=”cc1″ %>

<cc1:RealTimeSearchMonitor ID=”RealTimeSearchMonitor1″ runat=”server” AssociatedUpdatePanelID=”UpdatePanel1″>
<ControlsToMonitor>
<cc1:ControlMonitorParameter EventName=”TextChanged” TargetID=”txtSearch” />
</ControlsToMonitor>
</cc1:RealTimeSearchMonitor>

Important things to notice here are the AssociatedUpdatePanelId which tells the control what it has to refresh and the controls to monitor section which sets what the control to watch is called and the event name that will be fired when the post back is created. You will now need to corresponding control in your code behind like so:

protected void TextChanged(object sender, EventArgs e)
{
GridView1.DataBind();
}

Run the site and  you should find that the grid view now updates as you type (all be it with a slight delay).

To improve you can add other controls like update progress to show something happening which will help with any delays in displaying the results.

Visual Studio 2010 – Snippet Support

This week I have been playing around with the Beta 1 of Visual Studio 2010 and one thing I have to say I like is the new Snippet Support. We’re all used to using it’s InteliSense support allowing us to only type <aso:Bu and then hit space if we wanted to add a .NET button control to the page, but Snippets takes that a step further. Have a look at this example of adding a MultiView control to the page.

Adding A MultiView Control

The normal method would be to type <asp:Multi and then hit space to complete the word, followed by adding an ID, runat etc. All of which would be made easier with the current InteliSense support. Now though you can just type <mu and the Multiview snippet will be highlighted.

Hit tab and the word will be completed as below.

Hit tab again though and all the other stuff you were about to type is entered for you.

An auto ID is given, the runat and activeviewindex properties are also written for you along with the first view automatically added.

Snippet support isn’t just limited to .NET controls either, it will also work with HTML markup and JavaScipt.

HTML Example

In this HTML example of an “A” tag you can see as simple as an “A” tag may be, snippets can save you time even here by automatically writing the whole thing, and then recognising that you will want to change the values of the two sections and thus makes that even easier by then letting you tab between the two sections.

So there you have it, we can now all wonder how we ever survived having to write the first couple of letters of each word, when really all we ever needed to do was write the first couple of letters of the main tag and have the rest written for us.