Click here to Skip to main content
12,250,327 members (52,815 online)
Click here to Skip to main content
Articles » Web Development » Ajax » Atlas » Downloads

Stats

1.2M views
7.7K downloads
1.1K bookmarked
Posted

Build a Google IG like AJAX Start Page in 7 days using ASP.NET AJAX and .NET 3.0

, 10 Mar 2010 CPOL
Build a Start Page similar to Google IG in 7 nights using ASP.NET AJAX, .NET 3.0, LINQ, DLinq, and XLinq.
src
bin
AjaxControlToolkit.dll
CustomDragDrop
Dashboard
App_Code
App_Data
App_Themes
Default
google.gif
HeaderBack.PNG
Logo.png
max_blue.gif
max_blue_highlight.gif
min_blue.gif
min_blue_highlight.gif
x_blue.gif
x_blue_highlight.gif
Bin
AjaxControlToolkit.dll
CSharp3CodeDomProvider.dll
Global.asax
indicator.gif
vwd.webinfo
Widgets
FlickrIcon.gif
rss.gif
DashboardBusiness
Activities
CreateDeafultWidgetsOnPageActivity.rules
DashboardBusiness.csproj.user
NewUserSetupWorkflow.rules
Properties
UserVisitWorkflow.rules
DashboardData
Properties
Dashboard.bak
Create Start page
=================

1. Create a unique user
2. Setup profile that it is not the first visit
3. Create 2 default pages
4. Fill up first page with some default widgets
5. Render the first page.

Second visit
============

1. Get the current user from cookie
2. Load the pages of the user
3. Load current page widgets
4. Render the page


Login
=====

1. Authenticate user
2. Get the pages of the user
3. Render pages
4. Get the current page
5. Get widgets on the current page
6. Render the widgets

Register
========

1. Get user name and password
2. Change the user name of the current user and set the password

Add New Page
=============

1. Create a new page for the user
2. Setup default properties for the page
3. Create default widgets

Select a page
=============

1. Set page as current page
2. Show the tab as highlighted
3. The page name becomes clickable. Clicking on it again toggles the edit mode.
4. Show a cross link which can delete the page

Delete a page
=============

1. Remove the page and all the widgets on the page
2. Decrease page order number which are after the deleted page

Add new Widget
==============

1. Create an instance of the widget
2. place the widget on the top of middle column
3. Push all widgets on the column one row downward

Delete a widget
===============

1. Delete an instance of widget
2. Push all widgets on that column one row upward.

Drag & drop widget
==================

1. Update widget positions on source column
2. Update widget positions on the destination column

Drag & Drop page
================
1. Update current page order numbers


Preparations
============

Widgets
=======
IsDefault = true - Create the widgets on the first page as default


1. Add IsDefault column on Widgets
2. Convert page bar to user control
3. Introduce events on page bar user control
4. Enhance page bar to support for clicking on a page, raising event, making a page active and editable on another click. Show delete button.
5. Load and renders widgets of a page via workflow
6. Drag & Drop support with web service callback
7. Show "Add new widget" panel which renders the list of widgets
8. Allow user to check mark widgets user want to add and then add the widgets on the page
9. Delete and reposition widgets on the page
10. Minimize and maximize widget on page and save state of widget

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Omar Al Zabir
Architect BT, UK (ex British Telecom)
United Kingdom United Kingdom

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160426.1 | Last Updated 10 Mar 2010
Article Copyright 2007 by Omar Al Zabir
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid