Ecommerce and Credit Card Solutions for ACCPAC Advantage

Creating a "Custom Look and Feel" for ICINITI Store

ICINITI Store is an integrated eCommerce ASP.NET application. There are numerous books and information resources widely available on the Internet which will assist the reader in understanding the ASP.NET platform. If you are not already familiar with the ASP.NET platform, then an excellent overview, including tutorials and a wealth of reference material, can be found at http://www.asp.net

Readers familiar with ASP.NET page development know that a typical ASP.NET "Page" is comprised of a set of related files. All of the page files share the same name, and differ in the file extension. The file having the extension ".aspx" contains HTML markup and determines how information is formatted and presented in a browser screen. Another file, having extension ".aspx.cs" or ".aspx.jsl" is referred to as the "Code Behind" file, which implements the programming logic to generate the dynamic page content formatted by the ".aspx" file. ICINITI Store Code Behind pages will have the extension ".aspx.jsl" because they are implemented using the J#.NET programming language.

Anatomy of an ICINITI Store Page

The source markup that generates this sample page is shown below:

<%@ Page language="VJ#"  Inherits="EcommSuite.BasePage" AutoEventWireup="false" %>
<%@ Register TagPrefix="uc1" TagName="ItemPicture" Src="~/UserControls/ItemPicture.ascx" %>
<HTML>
	<HEAD>
	<link rel=stylesheet href="../images/site/default/master.css" />
	</HEAD>
	<body>
	
	<table  border="1">
	<tr>
	<td>
	An ICINITI Store page contains typical HTML markup.
	<br />
	You can embed active components which display product information from 
	the Sage Accpac company database.
	<p />
	This page is composed of a simple HTML table, displaying a product 
	image associated with an inventory item number
	that is passed to the page via an HTML query string. 
	
	<p />The page should be opened with a URL such as <br>
	http://localhost/acmewarehouse/samples/test.aspx?ItemNumber=A1780B
	
	</td><td>
			<uc1:ItemPicture id="ItemPicture1" 
			ItemNumber='<%#param("ItemNumber")%>'
			Width="80"
			Height="80"
			runat="server">
			</uc1:ItemPicture>
			
			</td>
			</tr></table>
			
	</body>
</HTML>

The first thing you will notice about this sample source is that it consists almost entirely of conventional HTML markup. ICINITI Store imposes no restrictions on the HTML you can use to create a page. You are free to use CSS style sheets, DHTML, Macromedia Flash movies, applets, and so forth.

To create an ICINITI Store page, create a conventional HTML page, and save it with the file extension ".aspx". You will also notice the few lines added to the HTML markup that allow this page to operate in the ICINITI Store framework.

The @Page Directive

<%@ Page language="VJ#"  Inherits="EcommSuite.BasePage" AutoEventWireup="false" %>

This page directive links the "aspx" file containing HTML markup with the software functions that provide real time integration with the Sage Accpac company database. These software functions are always implemented in what is referred to as the "Code Behind" file. Pages which display information from the application database utilizing any of the EcommSuite Web User Controls can simply inherit the features of the "EcommSuite.BasePage". The BasePage connects the page to the EcommSuite framework.

The "language" attribute specifies that the application page uses the Visual J#.NET programming language, as required by the EcommSuite framework.

Simple pages that link your HTML markup to information pulled from the application database need only inherit the software features implemented by the EcommSuite.BasePage "Code Behind" file. You can create your own simple pages, or modify the HTML markup of the standard EcommSuite shopping cart application using conventional HTML markup skills.

Advanced pages that must handle data submitted from an HTML form and add transactions to the application database will implement these features in Code Behind files specific to these pages. Developing Code Behind files requires ASP.NET programming skills using the J#.NET programming language, and development tools such as Microsoft VisualStudio.NET.

The @Register Directive

<%@ Register TagPrefix="uc1" TagName="ItemPicture" Src="~/UserControls/ItemPicture.ascx" %>

You must register any of the Web User Controls that your page uses. This directive declares a custom user control having the tag name "ItemPicture". The TagPrefix attribute combines with the TagName attribute to form the HTML element name as shown in the example. Inserting the User Control Into the Page

The Item Picture User Control - A Closer Look

Here is the HTML markup that inserts the Item Picture component into the page.

			<uc1:ItemPicture id="ItemPicture1" 
			ItemNumber='<%#param("ItemNumber")%>'
			Width="80"
			Height="80"
			runat="server">
			</uc1:ItemPicture>

The HTML element name "uc1:ItemPicture" is formed using the TagPrefix and TagName as declared in the @Register directive.
The "id" attribute is a string value that must be unique within the page.
The "runat='server'" attribute must always be present.
The user control has "Width" and "Height" attributes used to scale the HTML image as it appears on the page. In this example, the image size is 80 x 80 pixels.
The "ItemNumber" attribute specifies an item number as it appears in the Sage Accpac inventory system. In this example, the item number is obtained from a query string parameter having the name "ItemNumber" (recall the page URL is "test.aspx?ItemNumber=A1780B" ). The ItemNumber attribute value is "bound" to the query string parameter using the special notation:
```
ItemNumber='<%#param("ItemNumber")%>'
```
The "param()" function is automatically converted by the string value of the "ItemNumber" parameter ('A1780B' in this example) before the page is rendered. This behavior happens automatically as a result of "inheriting" the features of EcommSuite.BasePage as declared in the @Page directive.

When this page is rendered by the ASP.NET framework, the ItemPicture component retrieves product information from the Sage Accpac inventory tables to locate the image file, calculate and display the selling price based on the customer's price list, as well as the quantity on hand.

ICINITI Store User Controls Reference

For a complete reference guide to all of the ICINITI Store user controls currently available, visit
User Controls Reference

Using Macromedia Flash with ASP.NET

We are frequently asked if Macromedia Flash content can be integrated with EcommSuite pages. Keep in mind: EcommSuite.NET imposes no restrictions on the HTML you can use to create a page. You are free to use CSS style sheets, DHTML, Macromedia Flash movies, applets, and so forth. You have the same integration capabilities with ASP.NET as you would have with conventional Active Server Pages. You can find a technical overview of these integration possibilities at the following web site address: http://www.asp101.com/articles/flash/index.asp