So why do we need this new dynamic interactive technology?
The World Wide Web in general is forever increasing and new technology is being developed all the time. This technology allows the user on the web to create new things that have never been seen in the web before. People love the thought of new ideas, especially companies that can capture the customer’s eye. Interaction in any form is always a great advantage as its something that we do in everyday life. So why not on the web?
Applications such as web parts are being created which you will see later on in this report that allow the user to move parts of the page and contain applications within parts of the page that can be interactive and allow the user to modify their web experience. Web parts are a good source of interaction in the .net framework allowing asp.net parts and components to be integrated into them.
These give the user the feel of an application on the web rather than a standalone HTML page. This could be one of the main reasons for the technology, to give the public the use of new heights on the web. Interaction will provide a new experience in all types of industry and give companies the edge on their competitors. It also allows the user to work with the web site to create a uniqueness of their own.
Websites are becoming forever more interactive, allowing children to play and learn from websites, allowing adults to socialise with friends on sites which allow parts of the site to be closed on the users discretion. All of these ideas are interaction. But with this interaction comes a lot more data that needs to be processed through the server. This processing power that is needed means that the server must be able support these type of sites. Because of the large sites contains a lot more complex technology, it drops the responsiveness of the site. For the user this means that when the site is refreshed every time a user clicks one of the parts the whole web page would refresh. Ajax for example overcomes this by making requests to the server and makes the web page much more responsiveness. This is needed due to the demand for interactivity within web applications. Higher responsiveness gives the owner of the site the chance to develop larger more complex web applications combining interactions of heights that have not been seen before.
The use of Ajax and web parts in the .net environment will give the user the sense of interaction and responsiveness because of the tools used to create it. This report will show a few of these examples along the way of building an interactive web application.
- Interactive Web Application using ajax.net and web parts
As explained previous this site is designed based around a sports company that deals with charity football games. The idea of the applications is to make a user friendly application which enables ease of access for the user around the web site as well a fully functional interactive responsive applications which work fast on the sever and provides a number of controls for the user.
Requirements
- A visually appealing web site possibly implemented as a template using HTML/CSS.
- The use of Ajax.net to create effective responsive web parts/panels
- The incorporation of the AjaxControlToolkit’s tools into the site
- Implement the use of Ajax.Net components to improve the usability of the applications
- Display information such as football results on the page in a web portal from an SQL database
- Where appropriate try to implement the following components: Animated, drag gable, collapsible panels and other components for form handling.
3.1 The application
Using the Ajax control toolkit within the visual studio 2008, .net 3.5 framework environment the following application was built.
It contains different samples of what the tool kit contains using Ajax. The site is based around a ‘charity football’ based site but could be created around any type of environment to help in increasing usability in interaction and responsiveness to the server.
The site
Design
This is the design that is hoping to be achieved in the implementation of the site.
Figure 1: Design Of Site
The design above will allow the application to become interactive to the user. The following now shows what had been created.
Software used in created this application will be:
Visual Studio 2008 – Development environment
AjaxControlToolKit – An add on for the asp.net framework
Figure 2: Finished Application
The template to the site has been created using standard web design; it started out as an HTML page which was then placed into a web form in visual studio to allow the active server pages to be used.
It holds a Cascading Style Sheet which is called ‘portal.css’ which can be found in the ‘images folder’ this file specifies all the parameters for the actual layout of the images that have been created using fireworks for the layout. These images are also in the image file and have been sliced for the web site. The styles in the CSS are then called in specific ‘Div’ tags around the web form. This created the template for the Ajax elements.
Figure 3: Structure of images
There is also a style sheet used called ‘StyleSheet.css’, these are the styles which are used in changing the appearance of the asp.net elements and the panels which are implemented onto the web form.
The Ajax that was implemented into this site was really to show the use of the Ajax control toolkit and how this outside library of files could be very useful in the creation of an interactive web application.
What was considered in this report was to create a ‘portal’ which has been shown in the design and the final result. A portal is a section of a site which provides access to other information. This could have been done with the use of RSS news feeders for example but what was to be achieved by this application was one to show the use of various Ajax elements providing the user with more interaction to their page.
The Div tags in the web form sectioned the application into three main parts, a left, right and middle section providing a content wrap. There are controls known as web parts.
‘ASP.NET Web Parts controls are an integrated set of controls for creating Web sites that enable end users to modify the content, appearance, and behaviour of Web pages directly in a browser. The topics in this section provide information on what Web Parts are, how they work, and how to use them to create user-customizable ASP.NET Web pages.’[]
These web parts seemed like a good area to start in the implementation of interactivity. They are used to allow the user to modify the content of a site. What were designed in this example were three different panels in which there are different ‘webpartzones’ and within their ‘zone templates’ are different asp components such as labels and also components from the toolkit which will be looked at further on in the report. These Zones enable the components created in the zone to be immediately turned into web parts and are then drag gable between the three areas. They can also be closed or minimized to allow the user to see what they would want to see on the site and where. This gives the user a huge amount of interactivity.
Figure 4: Left panel and web part zone
<asp:Panel ID="leftpanel" runat="server" Style="float: left;">
<asp:WebPartZone ID="Zone1" HeaderText="Left Zone" runat="server" BorderColor="#CCCCCC"
Font-Names="Verdana" Padding="6">
The above shows a code snippet of the left asp:panel and the web part zone that was implemented inside it. An amount of properties were set to create the panel and zone visually appealing to the user and then within the web part zone a zone template was defined:
<ZoneTemplate>
</ZoneTemplate>
Inside this template the asp.net components were added and other toolkit elements to become web parts. They could then freely move around the page when the editor zone is open.
Different Components used within the application
A number of different components were used from the ajax/asp.net framework:
- Firstly panels were looked at – They were placed within web parts to allow them to become draggable into zones
Figure5: Drag Panel
- An accordion panel was placed in the middle of the zone. This created space for the user enabling text/images – even database’ to be inserted within the panel and closed until the user wanted it open. A set of properties were set to make it visually more appealing and animated.
Figure6: Accordion Panel
A number of asp.net components have been used to create web parts such as:
Labels: <asp:Label ID="ImageLabel1" runat="server" />
Hyperlinks: <asp:HyperLink ID="link1" runat="server" NavigateUrl="http://www.julianmoruzzi.com" target="_blank"
Aswell as these other asp components such as buttons etc have been used with the web parts and ajax.net components
Database’
A number of databases have been implemented into the portal. The main reason for this was to show the simple use of the ‘SqlDataSource’ in visual studio and how by creating the database in a web user control the part can be easily placed in a panel.
The first database is in the ‘Football.ascx’ web user control: -
Figure 7: Databases
This web user control is then implemented into one of the zones on the main web form :
<%@ Register Src="Football.ascx" TagName="Football" TagPrefix="uc1" %>
<uc1:Football ID="Football" title="Results" runat="server" />
The same is then done for the other two tables that have been created from the database people.mdb :
<%@ Register Src="player.ascx" TagName="player" TagPrefix="uc2" %>
<%@ Register Src="linktable.ascx" TagName="linktable" TagPrefix="uc3" %>
<uc2:player ID="Player" title="Players" runat="server" />
<uc3:linktable ID="linktable" title="Contact Details" runat="server" />
These grid views are also created in the web user controls and one is a simple table and the ‘linktable’ are two tables in the ‘people’ database combined.
Figure 8: Combined Database
The results when the web user controls are then implemented into the zones in each section are :
Figure 9: Databases Running
There are other components outside the web parts to show how some of the data used can be retrieved from outside the file and implemented to the div tags rather than inside the web panels.
The first Ajax component that was created outside the panels was a way of posting back images in a random order to provide a visual effect on the screen of 3 images. This was placed in its own update panel and triggered by a timer: -
Figure 10 : Timer Control
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:Image ID="image1" ImageUrl="./images/banner/banner1.gif" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" />
</Triggers>
</asp:UpdatePanel>
A timer was added to the page to allow the images to cycle:
Protected Sub timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles timer1.Tick
Dim rnd As Integer
rnd = New Random().Next(1, 4)
image1.ImageUrl = "./images/banner/banner" & rnd & ".gif"
End Sub
A pop up panel was also created to change an area of the screens ‘Styles’
Figure 11: Style Changer
The code for this was mostly created using CSS and can be found in the images folder. It is another use of a panel to show how they could be used in different ways. This one changes the background of the image behind the text.
Slideshow
A slideshow has also been placed on the page, this time in the web part zone:
Figure12:Slideshow + Code
This slideshow works off a ‘webservice’ calling the images as slides from another folder called ‘SlideShow’ which is again in the images folder.
A slide show extender on the panel calls upon the service:-
<cc1:SlideShowExtender ID="Slideshow_SlideShowExtender" runat="server"
Enabled="True"
TargetControlID="SlideShow"
SlideShowServicePath="SlidesService.asmx" ---- Here
SlideShowServiceMethod="GetSlides"
AutoPlay="true"
ImageDescriptionLabelID="ImageLabel1"
NextButtonID="Nextbtn"
PlayButtonID="Playbtn" PlayButtonText="Play"
StopButtonText="Stop"
PreviousButtonID="Prevbtn">
</cc1:SlideShowExtender>
4. Conclusion
From what is looked at in this web application it can be seen that each of the requirements that were previously put forward were met. In particular:-
- The application provided a deep integration of interaction between the web and the user making the web site seem more like a windows based application rather than a web site.
- Amounts of Ajax were written into the application and from them it can be seen that the responsiveness of the web page was increased when only certain parts of the site were being updated rather than it as a whole.
If time constraints weren’t an issue further implementation could provide a deeper integration of Ajax into the site as well structuring the application more fairly enabling space between the panels. But due to the limited time a good representation of Ajax.net/Web parts as well as Asp.net components was show.
Bibliography
[1] - , accessed 26/05/08
[2] - , accessed 26/05/08
[3] - , accessed 26/05/08
[4] - , accessed 26/05/08
[5] - , acceded 26/05/08
