DMX|ZONE
Register Login

Premium Content


Premium Content articles are the very best articles from the world's leading internet technology, subject-matter experts. We have many categories of content below on a wide variety of subjects that have all been commissioned from big name authors.

Explore the Premium Content

DataGrid Filtering using Ajax in ASP.NET 1.1

The advent of Ajax has played a crucial role in the progress of web development. Particularly for ASP.NET 1.x developers who are not able to take advantage of the new Ajax related controls added to the .NET framework 2.0.

It has opened an entirely new way to think about how to design a web page. What had been the tradition for years now has to be revisited. Old habits become called into question, you constantly stop and remind yourself, wait, I don’t have to send the entire page back to the server on each request. It is a bizarre concept in some ways but yet the flexibility of this simple concept has revolutionized internet applications.

Suddenly working with the old ASP.NET 1.x controls seems brand new again as you discover new ways to creatively implement them into your application. A web developer can now think more along the lines of a desktop developer. Your design methodology must be completely different and each WebForm needs to be approached with a different concept in mind.

The purpose of this tutorial is to take a simple example using the very common DataGrid control, and use it in a way that would normally never be considered before the advent of Ajax. Using some sample data from the Northwind SQL demonstration database we will bind a list of Customers to a DataGrid control, and allow the user to filter or search by a particular column for partial string data matches, and rebind the results all in a fraction of a second.

Read More
Kevin Koch
7149

Creative Portfolio: Web Design Presentation

The designer who shows a talent for diverse design problems will want to show that he or she can create a Web project. But, just how much do you need to know about Web design? Is the ability to code important? How important is it to have a wide range of software capabilities? In this article, Linda discusses the impact that Web design can add to your presentation and how to present your skills and talents in this area through your portfolio and in your CV or resume.

The Portfolio Project: Web Design

PORTFOLIO PROJECT: Web Design. As a multi-talented designer with an eye on an Art Director’s position, you want to include Web design projects in your portfolio. You then must decide what type of Web design to include on ONE or TWO PAGES within that portfolio. If you go beyond this, you no longer become a multi-talented designer. You become a Web designer, and you limit your ability to climb the multi-talented career ladder. This project will help you to decide which TWO to THREE screenshots to use in your presentation, and where you can tell the employer or client about the skills that you entertain in this field.

TOOLS: Preferably Dreamweaver for Web design projects. In addition, you’ll need to utilize a sketchbook to show the potential employer or client that you know how to think out a project before you sit down to create the site. Your skills with a sophisticated graphics program, such as Photoshop or CorelDraw will show that you know how to apply projects from these software programs to your Website designs. The ability to work in Flash is very, very helpful.

WHAT YOU’LL ACCOMPLISH: This tutorial will help you to define your skills as a Web designer so that you can make the decision about whether to stick to Web design or to expand your portfolio to include other talents.

Read More
Linda Goin
9817

User Controlled Stylesheets with JavaScript and CSS Part Two

In part one of this tutorial we looked at the HTML and initial CSS required for coding the basic page and the style control panel, and styling them in the desired theme.  In this part we're going to look at extending the CSS to encompass all of the different style choices that visitors could make, as well as the JavaScript that functions as the mechanics behind the page and powers mechanisms like the opening and closing of the style control panel and the actual application of the visitor's choices.

The JavaScript is also going to be used to remember each visitor's style options so that when they return to the site, the choice they have made on their last method are applied again.  Dynamically generated sites often use a database to store this information on the server, but if you don’t have a database-driven site, you can achieve the same functionality using purely client-side techniques.

Beginning the JavaScript

The first thing we need to do is to create a function that controls the opening and closing of the style control panel.  To do this, create the following function in a blank page of your favourite text editor:

function openCpanel() {

  document.getElementById("cpanel").style.display = "block";

}

That's all there is to it.  We're also going to need a very similar function that closes the control panel once the visitor has made their selections:

Read More
Dan Wellman
2363

Ajax Frameworks, Toolkits and Libraries

Using a Web 2.0 approach to building applications like Ajax can create many advantages. Users get to work with more responsive Web applications that are closer to desktop applications than their Web 1.0 counterparts. Users don’t have to wait around for pages to load and everyone’s happy.

Or are they? The advantages of Ajax come with some costs. The Ajax approach relies heavily on JavaScript so developers of these applications need to have strong skills in this area. Developers can be caught out with some very onerous scripting duties. Ensuring that Ajax-style applications work in all major current browsers can be a big task, especially as one of the main components of Ajax, the XMLHttpRequest object, is implemented in two different ways. Add to that a need to support or fail gracefully in older browsers and you’ve given many developers a giant sized headache!

One solution to these cross-browser scripting problems is to use an existing Ajax framework, toolkit or script library. These frameworks hide the code and provide great cross-browser solutions. Some of the commercial products even provide a full development environment.

In this article, I want to cover some of the most popular browser frameworks and script libraries that are available. I won’t cover the frameworks that link to specific server-side technologies or the article would end up being very long indeed!

I also want to walk you through a simple example of how one library, Sarissa, can make scripting a little easier. As with the other Ajax examples that I’ve worked through, you’ll need to run this example through a Web server. On my Windows XP machine, I’ll use IIS (Internet Information Systems) but you could use any other Web server. I tested this example in IE 6 and Firefox 1.5.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Read More
Sas Jacobs
1514

User Controlled Stylesheets with JavaScript and CSS Part One(updated)

A mark of distinction on websites is a facility that allows visitors to change the appearance of the pages they view on your site; personalisation goes a long way. One thing that it is very easy to do is to allow visitors to change things like the font size, the background and border colours or the colour theme in general.  Although some of this functionality, life changing the font size for example, is already a control within the browser that the visitor can set any time they want, it is still useful to have something right there on the page so that the visitor doesn't have to go off hunting through menus to find the setting.  Additionally, creating a single panel containing just the controls to change the visual settings of the site allows you to centralise this feature and make things even easier for your visitors.

Everything we need to do can be done with the use of simple HTML, JavaScript and good old CSS.  We will also be keeping to standards as much as possible, making sure our code is valid and compatible with the most widely used browsers around.  There are several different components that we will need to look at; initially, we'll need a space in which to keep the various style controls, but because this may be a little large, we don’t want it on screen at all times so we'll need a method of opening and closing the control panel.  Secondly we need to look at the method for the actual changing of stylesheets to reflect the choices made by visitors.  Finally, we need to come up with a method of keeping the settings on each page of the site that the visitor moves to, and of storing the choices made so that the same visual settings are applied when they return to the site.  This part will look at the HTML and initial CSS, while the next part will focus on an extension to the CSS, and the JavaScript required for making the page work.

Read More
Dan Wellman
2247

Basic Ajax for Beginners in ASP.NET 1.1

When the .NET framework first emerged a few years ago it was a monumental upgrade in technology for developers, especially those working with current ASP web technology. With a plethora of new features, a true object oriented framework and revolutionary development methodologies developers could create robust applications in a short amount of time in comparison to other available technologies.

Over time, as with any technology, some of the shortcomings of the .NET framework were exposed and it was once again time for change. With the release of the .NET framework 2.0 web development has once again undergone a radical change. Most cutting edge web development today is focused on AJAX and client side functionality in order to create a more desktop like user experience from the web browser.

With some of the costs involved in utilizing the latest technologies some developers are still using the .NET framework 2.0 predecessor: 1.1. Visual Studio is an expensive development tool that not all firms can afford to purchase and are therefore left a small step behind the current technologies.

Fortunately the .NET 1.1 framework is still highly utilized and supported. Because of this there are a lot of companies building support for Ajax style development using .NET 1.1. One such product is called MagicAjax which is an open source library that you can use in your ASP.NET 1.1 projects to implement Ajax functionality.

Read More
Kevin Koch
6710

Creative Portfolio: Billboards – A Connection to Website Design

Perhaps you never realized that there’s a connection between billboard and Website design. The layouts are similar in some instances, and the execution of the elements and principles of design contained within these two mediums is identical. In addition, viewers scan rather than read billboards and Websites, so these two mediums present a similar design problem: How to get the reader absorb your material in a limited time. This article presents the fourth project in this portfolio series where Linda leads you through these design issues in the creation of a billboard sample for your diversified portfolio.

The Portfolio Project: Billboard Design

PORTFOLIO PROJECT: Billboard Design. Billboards can be blights on a landscape, but continue to present a valid marketing medium for many industries in what is known as “outdoor advertising.” This design project is a perfect study for Website designers, as it forces the designer to consider how a reader scans a message while whizzing down a highway, similar to how a reader scans a Webpage while surfing the Internet (Al Gore would love this analogy).

TOOLS: Any computer graphics program that allows you to produce image files; sketchbook and notebook for concepts; list of elements and principles of design (a list of principles of design is included at the end of this article); a basic knowledge of colour schemes and typeface design.

WHAT YOU’LL ACCOMPLISH: This tutorial will encourage you to think creatively and analytically about merging type and images in an oversized format, a design problem that increases your ability to think and work minimally in a medium where viewers have a limited time frame in which to view your message.

Read More
Linda Goin
6329

Web 2.0 Design Patterns

If you’ve been following through this series of articles, you will have learned a lot about Web 2.0 and in particular, about Flash and the Ajax approach to building Web applications. Now it’s time to look at a bit of background information, in particular, one design pattern that often underlies Web 2.0 approaches.

Design patterns are useful because they give us a way to structure applications to make sure that they are efficient. They provide solutions to common development problems. Instead of focusing on the code itself, design patterns focus on the overall architecture of the application using Object-Oriented approaches.

Design patterns are a hot topic and you’ll find much written on the Web about them. You might notice that there is not always agreement among the authors! Some common design patterns include:

  • Observer
  • Singleton
  • Decorator
  • MVC (Model-View-Controller)

Within Web development, the MVC pattern is a very popular for building applications as it represents a way to separate different components of the application. In particular, it separates out the presentation layer from the data powering an application; something that most developers would agree is a good idea. In this article, I want to look at how the MVC pattern might apply in Web 2.0 approaches to building Web applications.

Read More
Sas Jacobs
5409

Returning Values from Stored Procedures in ASP.NET

When developing larger scale applications it is quite likely that at some point you’ll be working with Microsoft’s SQL Server. Being the enterprise database server of choice for Microsoft based applications odds are you’ll be using either it or MS Access for smaller applications.

During the initial phases of your application framework design you’ll need to decide some best practices and patterns you want to implement when talking back and forth between SQL Server. This is usually where you decide if you’ll be placing all SQL syntax logic into stored procedures or embed them into your application’s code.

Stored procedures are often the method of choice since they have several advantages. The main advantage is that your SQL syntax is not encapsulated in application code. A simple change to some SQL syntax will mean a recompile and redeployment which is an unnecessary procedure when all you want to do is change some simple SQL statement.

Another advantage is speed. In addition to being able to deploy your SQL logic separately from your application code SQL Server can cache and optimize the commonly used and executed stored procedures which will improve your database transaction performance.

If you decide to take the stored procedure route it won’t be long before you encounter 2 common requirements in your application’s database layer. The first requirement usually arises from your GUI developers when they ask you how they can select an item right away after it is created. In other words, give me the primary key from the table where the object was just created.

Read More
Kevin Koch
3920

Creative Portfolio: Overlooked Design Possibility – Postal Stamps

This article presents the third project in this portfolio series, a look at postal stamp designs that – unlike an enlarged poster format – challenges your skills at merging type and image elements in a small print format. Linda explains how to convey pertinent messages within this format, and shows how limitations provided by this small space can help you to view all your projects in a new light. You’ll need to conduct research and work on conceptual design before you create your postal stamp project, a portfolio creation that could include an accompanying poster and flyer. Additionally, you must be familiar with the colour wheel.

The Portfolio Project: Postal Stamp Design

PORTFOLIO PROJECT: Postal Stamp Design. Postal stamps are often overlooked as a portfolio element, as it seems that everyone these days communicates by email. But, your skills with type and images on a small format can show a client or prospective employer that you are adept with detailed work. With the online debut of such venues like Photo Stamps and Zazzle, you can use this format to add extra business to your growing clientele base as well.

TOOLS: Any computer graphics program that allows you to produce image files; sketchbook and notebook for concepts; colour wheel; list of elements and principles of design (a list of elements of design is included at the end of this article).

WHAT YOU’LL ACCOMPLISH: This tutorial will encourage you to think creatively and analytically about merging type and images in a miniscule format, a design problem that increases your ability to think and work minimally with all your projects.

Read More
Linda Goin
3373

Ajax Case Study: Real Estate Listings – Part 3

Welcome to the final part of this three part series of articles that works through an Ajax application case study. In this case study, we’ve been building a simple application to display real estate listing using an Ajax approach. This style of application allows data to be refreshed in a Web page without reloading the entire page. In this article, you’ll see how we can completely change the page content without a reload.

In the second part of the article we:

  • Loaded the XML and XSLT documents containing the list of properties for sale
  • Created handler functions to process the loaded documents
  • Applied the XSLT transformation in two different ways and displayed the transformed content
  • Added a JavaScript function call to the stylesheet

In this article, we’ll finish off the application by:

  • Understanding the new XML and XSLT files
  • Displaying individual property details
  • Adding a back link
  • Adding dynamic sorting to the list

You need to have completed parts 1 and 2 of the series so that part 3 will make sense. As before, I’ve assumed you’ve got an understanding of XML and some of the basics of the Ajax approach.

 

    Read More
    Sas Jacobs
    1128

    Synchronous Randomization with JavaScript Arrays

    The random number methods of Math object have been present in JavaScript for ever and have been put to good use time and time again in all manner of scenarios.  One thing that the random method can easily do is display a random image on, say, your homepage.  It may sound like a small thing but this randomization can be put to incredibly good use with just a little bit of planning and an easy bit of JavaScript.  This one-part article will discuss the use of a multidimensional array and a basic randomization script to create a section of a page that randomly displays a series of images, complete with synchronous roll-overs, links and captions.  This could be a useful addition to any site and provide a visual incentive for visitors to select products from a clearance or special offer section of your online store for example.  Best of all, the code is compact, minimal and entirely client-side so if you don't have full access to server-side script languages on your web-hosts server, you can still implement it.

    A lot of people, especially those new to JavaScript coding, shy away from arrays thinking them complex and unnecessary.  For multidimensional arrays that fear is cubed.  But arrays of any kind are the cornerstones of many of the most useful applications of JavaScript, and have featured in one way or another in most of my previous articles.  In addition to a solitary text editor, you'll also need a stock of images to make the resulting page work.  I've included the images that I've used in this tutorial to save you the hassle of finding and formatting images of your own.  Feel free to use them in any context as they are free from copyright or royalty restrictions.

    As a web developer, you'll often need to use graphics or photos in your pages.  Finding a ready supply of images to satisfy your unending need used to be a real problem, but thankfully you can now use the excellent Yotophoto (http://yotophoto.com), which is the first search engine dedicated solely to allowing you to search a huge index of completely free images.

    Read More
    Dan Wellman
    1484
    Newer articles Older articles
    Currency:
    Company Info
    Payment & Pricing
    Legal Notices
    Guides
    Copyright © 2001-2025 Dynamic Zones International B.V., All Rights Reserved.