How to build a Simple IE8 Accelerator

How to build a Simple IE8 Accelerator

This post is a step by step guide for building IE8 Accelerators.

A Short Introduction to IE8 Accelerators

Accelerators are used to make the user more productive while surfing the net, by:

1. Speeding up the process of getting additional information about a meaningful string (address, stock quote, a product, a twitter account name, etc). In this sample

2. Allowing user to perform a quick action on a selected text.

From a technical perspective, Accelerators define 2 actions: Preview and Execute. When the user selects some text and hover over an accelerator, the Preview action is being performed - the selected text is sent to a defined url, that returns a 320x240 web page with a preview of the data.
When the user clicks the Accelerator, the Execute action is performed and the browser navigates to a page passing it the selected text as a parameter.

To build IE8 Accelerators, we have several steps to do:

1. Building an Accelerator Page
2. Defining the Accelerator OpenService Xml
3. Registering the Accelerator with IE8
4. Using the Accelerator

To make sure this guide is generic enough for every Accelerator you may think of and not just for Twitter profiles, I am leaving the twitter logic to the last part of this post.

1. Building an Accelerator Page

Create a new ASP.Net Web Application in Visual Studio 2008 or open an existing one.

Add a new Web Form for the Accelerator Preview. In the page code behind, extract the query string parameters write them to the Response object:

Test the page: Navigate to the accelerator’s url, and add several parameters. For example:

http://localhost:16319/ShowTwitterUser.aspx?data1=guy&data2=burstein

Defining the Accelerator OpenService Xml

In order to register the Accelerator with a user’s browser, we have to create an xml file with the details of the Accelerator.

Add an Xml file to the web application that defines the Accelerators metadata required by the browser.

Few things to notice in the Accelerator Xml:

1. There is some meta data about the accelerator such as homepage Url and the display name and icon.

2. The Activity node defines a category to which this accelerator belongs to. There are some default categories like Map, Translate, Blog etc, but users can manage their categories using the Manage Add-ons Dialog.

3. As described earlier, the accelerator defines 2 actions, preview and execute, each defines a Url to call to when clicked / previewed, and several parameters to pass to the target page.

Register the Accelerator with the User’s Browser

In a page of your chose (for example Default.aspx) add a button that registers the accelerator when clicked:

When the user clicks on the above button, a dialog pops us asking his permission to add this accelerator to his browser, and whether to make it the default accelerator in its category.

Using the Accelerator

After the user has added the accelerator to his browser he can start using it. Select some text and the accelerator box will appear next to it. Click on it add hover over the new accelerator. This should make an HTTP request to the accelerator page passing it the text you have selected.

If you click on the accelerator, IE8 will open the target page in a new tab passing it the selected text and additional information as defined in the accelerator xml.

Summary

In this pot I took the steps needed to build an accelerator. You can follow them you build your own accelerators and add additional logic to provide more interaction with your uses.

Enjoy!

חיפוש מוצרים באתר זאפ עם Internet Explorer 8

Getting Started with jQuery in Visual Studio 2008

Getting Started with jQuery in Visual Studio 2008

In this post I’ll talk about adding jQuery IntellSense in Visual Studio 2008, and how to add jQuery to a simple Web Application inside Visual Studio 2008.

jQuery IntelliSense in Visual Studio 2008 - KB946581

In order to use jQuery in Visual Studio 2008 with IntelliSence a hotfix for Visual Studio 2008 must be installed:

1. Download the hotfix from Connect
2. Run the executable and extract its contents to a folder in your hard drive.
3. Make sure all instances of Visual Studio 2008 are closed, and run VS90-KB946581.exe from the above folder.

Download the Latest jQuery Library + Documentation

To use jQuery in Visual Studio 2008, and enjoy its IntelliSense, you should download 2 javascript files. One contains the actual jQuery library, and the second contains the library with documentation for Visual Studio 2008 to display its IntelliSense.

1. Go to jQuery Official Download Page
2. Scroll down and find the Current Release section.
3. Download the Uncompressed version (jquery-1.2.6.js) and the documentation for Visual Studio (jquery-1.2.6-vsdoc.js).

Using jQuery in a Visual Studio 2008 Web Application

In a new Web Application or inside an existing one, add the jQuery scripts into a certain folder.

In a web page (or a master page), add a reference to the jQuery library:

Then, in any javascript function you can start using jQuery functions and enjoy the IntelliSense in Visual Studio 2008.

A Simple Example of Using jQuery Functions

For example, Assuming that you have a page with the following content in it:

This form contains a single textbox followed by a button.

The handleButtonClick() function handles the button onclick event.

The way jQuery works is by selecting DOM elements and then doing something with them, such as executing a function or applying some properties. For example:

The above method uses the selector function $ to select DOM elements (in this case – a single element with id = txtName) and to apply a style property of a red border. Running this page and clicking the button results in this output:

Summary

In this post I talked about the steps you should follow in order to use jQuery in Visual Studio 2008 with InstelliSense support. Then, we used jQuery in a simple web application.