AU702331B3 - Navigable computer site - Google Patents

Description

Technical Field This invention concerns a navigable computer site, by which is meant an Internet, Intranet or Extranet site which may be visited and explored.

The invention particularly concerns a dynamic and customisable site which may be suitable for use as a homepage with online shopping facilities.

Summary of the Invention The invention is a navigable computer site for use as a homepage with online shopping facilities, comprising: a merchant interface, not available to customers, at which a set of forms are accessible to a merchant to select predetermined arrangements of ordered information locations, and to enter information concerning the merchant's business and the products or services, or both, which are to be available to customers at respective information locations; a series of menu tables, hidden from both the merchant and the customers, which provide a model of the ordered arrangements of information locations and the functionality with which they are to be displayed on the customer interface, where the series operate to take the predetermined ordered arrangements selected by the merchant and to display them on the customer interface, and where the series operate to take the information entered in the set of forms by the merchant and to automatically populate the respective predetermined locations in the selected ordered arrangements of the customer interface with the information; and 25 a customer interface which, in use, displays the selected arrangements of ordered information locations to be navigated by a customer, and the entered information concerning the merchant's business and the products or services, or both, in order for the customer to find the information concerning the merchant's business and the products or services, or both.

The set of forms accessible to the merchant may be enabled by a set of Lotus Notes forms and their associated views. They enable the merchant to make the necessary entries without the need for any specialist computer skills. This functionality allows the merchant to have control of the site, so that the information and, within limits, its arrangement can be varied at will by the merchant.

N

In an alternative, that has the same advantages, the forms are held at a service provider, and the merchant can access and update the forms directly across the web via a web browser.

The series of menu tables may provide the model of the ordered arrangements in the form of Java applet parameters. This may also enable the product or services information at any location to be selected by a customer for the purpose of indicating a purchase order.

The Java is sufficiently intelligent to calculate the size of menu items and fonts etc from the information given by the merchant about how many items are to be displayed at once.

The customer interface may display an arrangement of spatial ordered locations, in which case it may operate to react to a pointer, moved by a customer's manipulation of a pointing device, to superimpose respective 15 second locations next to a visible first location labelled with entered S* 15 information, when the pointer moves over that visible first location. The second locations may be labelled with entered information related to the subject matter of the label at the first location.

The interface may react to subsequent movement of the pointer into visible second locations to superimpose respective third locations next to a second location, when the pointer moves over that visible second location.

The third locations may also be labelled with entered information related to the subject matter of the label at the second location.

This process may continue until an item is selected by clicking, at 2 which point a link is activated to the item in question. Alternatively, 25 clicking could indicate a purchase is to be made. Right clicking could cancel the purchase.

The locations may be activated in some way when the pointer movers over them, such as by highlighting or changing colour. Alternatively, or additionally, the locations may display entered information.

The ordered arrangement of the locations in the user interface may provide a densely packed information in a readily understandable form. If the interface contains a themescape, the user may be able to intuitively move to regions that are of current interest without the necessity of analysing words or data. The automatic activation of locations as the pointer travels across the themescape provides interest to the user, and the hierarchical arrangement also allows for a rapid movement of the pointer into succeeding levels of information.

Locations may contain sound and animation clips associated with various elements to add realism and assist with navigation.

The customer interface may display temporally ordered locations, in which the display of information at locations succeeds one after another. An example is a scrolling news area of the customer interface, which may show news, headlines or alert information either related to the entered information or to other applications. Alternatively a slideshow, billboards, or flipping billboards, may be incorporated into the interface for advertising or other purposes.

Brief Description of the Drawings An example of the invention will now be described with reference to 15 the accompanying drawings, in which: SFigure 1 is a screen dump showing an example of part of a merchant page where the merchant enters details about the business; Figure 2 is a screen dump showing an example of another part of the merchant page of Figure 1; Figure 3 is a screen dump showing an example of another part of the merchant page of Figure 1 where the merchant enters details of products; Figure 4 is a screen dump of an alternative view to the Figure 3 view, categorised by supplier; Figure 5 is a screen dump showing an example of another part of the S: 25 merchant page of Figure 1 where the merchant adds or updates products; Figure 6 is a screen dump showing the design of ActiveMap specials and an ActiveMap ticker; Figure 7 is a screen dump showing an example of the code for converting menus into a URL; Figure 8 is a screen dump of a customer page before navigation comnmences; Figure 9 is a screen dump of a customer page after the mouse has activated a menu item; Figure 10 is a screen dump of a customer page after the mouse has activated a sub-menu item; Figure 11 is a screen dump of a customer page after a third layer menu has been activated; Figure 12 is a screen dump of a customer page after an item has been selected from the third order menu; and Figure 13 is a screen dump of a customer page showing more information about the product selected in Figure 7.

The same reference numerals have been used throughout the Figures to refer to corresponding features.

Best Modes for Carrying Out the Invention In this example of the invention there are three key software components: The merchant interface, comprising the forms and views used by the S"merchant to manage a sales catalogue running under Lotus Notes.

The series of menu tables that use Java applet parameters and views o orunning on a Lotus Domino server, to download the catalogue and a graphical toolkit.

The user interface comprising the "ActiveMap" applet which presents the catalogue, using the graphical toolkit, in a format which is easy to navigate.

This implementation of "ActiveMap" enables a merchant to create and manage a shopping catalogue on the Internet and allows Internet users to easily select items to buy or learn more about them. The merchant only needs to use an intuitive set of Lotus Notes forms to record information about the products, whilst the user only needs the ability to move a mouse around a screen to browse and select items.

Merchant Interface Lotus Domino allows a programmer to create a database of forms holding the information the user wants in a manner unIderstandable to them.

Figures 1 and 2 are the forms used by a merchant to enter details of the company and some of the details of the arrangements of fixed and hierarchical information.

Figure 3 is a view of products. The merchant can click on [New Product] or [Edit Product] (The left-hand block shows information which will not always be displayed.). The right hand block shows categorised 6 products to provide merchants with an easy way of maintaining their site.

Another useful view, categorised by Supplier, is shown in Figure 4 below: When a product is entered or edited, it is managed through a Notes form which would typically look like figure When saved, the product name will automatically become the label on the appropriate Web page menus and tickers, and on the Web page title for that product. The product code field allows another way to find a specific product. The image is used in the optional slide show and on the Web page of the relevant product.

The menu field specifies where the product will appear within the menu hierarchy, both in the web site, "ActiveMap" and in Figure In this example it is "Other\Pharmacy\Footcare". This menu is generated automatically when the form is saved with the code in Code Extract 1, which is written in LotusScript: o Sub Querys ave (Source As Notes uidoc ument, Continue As Variant) Dim doc As NotesDocument Set doc sourcedocument doc.menuld getMenuld (doc. menu(O)) convert doc.rnenu into a unique internal representation (id) Function getMenuld$ (key$) Dim session As New NotesSession Dim db As NotesDatabase Dim view As NotesView Dim menu As NotesDocument Set db session. currentDatabase Set view db.getView(" (M~enus)") Set menu view. getDocumentByKey(key$) If Not menu Is Nothing Then getMenuld$ menudid(O)'if the menu document exists use its id...

Else Dim jW.otherwise create a new menu document 0 Do j0o= Instr(i% 1, key$, If j% 0 Then Exit Do i% a Loop Set menu New NotesDocument(db) menu.form "Menu" menu.menu key$ If io'o 0 Then menu.nienuld getMenuld$ (Left$ (key$, i% 'This menu document must be linked to be linked to its parent' s id End If menu. save True, True view, refresh Set menu view. getDocumentByKey(key$) menudid menu.noteld getlvenuld$ menu.noteld menu.save True, True End If End Function Code Extract 1 In Code Extract 1, a series of menu documents, hidden from both merchant and user, provides a model of the menu hierarchy for consumption by the web sit "ActiveMap". A product document is given the id of its menu document, and each menu document has a further id of its super menu.

This allows the view called "(ActiveMap)" in Code Extract 2 below to show each menu and sub menu as a line item: 2106-Kelloggs Corn Flakes 55 og-test\Sllop.nsf/(AllProducts)/O6EB lB38 3BDCOB4D4A HotSpo-Grocerf 20FE-Breakfast foods-+ 2 10 2 2102-Regular+2106 2 106-Kelloggs Corn Flakes 25 Og-test\Shop.nsf/(AllProducts)/1405 8 Dl13C72 75E44A2! ±20FE-Fislf+210E 210E-Tinnied 2112 2112 -Salmon-+2116 21 16-Captain Salmon Pink Fancy lo5g-test\Shop.nsf/(AllProdUctS)/6 783668 16EF195A +210E-Frozeif±211E +211E-Fingers>+2122 212 2-Birds Eye Fish Fingers lkg-test\Shop.nsf/(AllProducts)/DA9F39 36080DB6 794A2 HotSpot-Othief ±21 2A 212A-Pharmacy> 212E 2 12EFotare> 2 13 2 213 2-Scholl Powdor Foot loog-test\Sliop.nsf/(AllProducts)/CD7A83C,8894BF5 74A25 Code Extract 2 To explain how "ActiveMap" interprets menus, see how "Other" is displayed as a hotspot four lines from the bottom of Code Extract 2. The suffice "+212A" refers to the "Pharmacy" sub menu below that, and so on to the "Sholl Powder Foot 100g", which has a Notes URL to the actual page.

9 This "(ActiveMap)" view uses the formulae in Code Extract 3, below, to achieve this effect: Selection Formula SELECT form "Menu":"Product" Column Formula Ibl @RightBack(menu; @If(form= "Menu"; @If(menuld "HotSpot";menuId) @If(lbl= "";menu;lbl) id; Menuld Product @Subset(@DbName; "/(AllProducts)/" @Text(@DocumentUniqueID) "?Open") 5 Code Extract 3 Notice how the first line of the column formula extracts the right hand S" most name of the menu for a label in the sub menu (lbl @RightBack(menu; 10 The "Menu" forms, which are internally generated by Code Extract 1 above, are handled in line 3 of the column formula: Menu menuld refers to menu id via text Ibl giving the effect of the second last line in Code Extract 2. Line 4 shows how the product is attached to a menu menuld and how its URL is generated as per the last line in Code Extract 2.

Using a similar formula, the views ActiveMapSpecials and ActiveMapTicker provide information in a similar format. Note the complex formula in both to determine if a product is on special, as shown in Figure 6.

The Java Applet Parameters A Domino server on the internet can have hidden views which comply with the formats of menu items. If the user does not own a Domino server on the internet, they can replicate their content to a suitable service provider via a dialup modem. Alternatively the merchant view can be accessed and updated using a browser.

The class files for "ActiveMap" are embedded into a Lotus Notes page that is designated in Notes to be the home page for the site. In the embedding a number of parameters are required. A series of these parameters are "menu", "menu2" and "menu3" which will link to the views "ActiveMap", "ActiveMapSpecials" and "ActiveMapTicker" respectively. So that they can be read from a Web browser, they must be converted into a URL. The code shown in figure 7.

This code defines a web page with the first 1000 items in the "ActiveMap" view. This number will be parameterised in the future.

The Customer Interface or "ActiveMap" Applet The ActiveMap applet is composed of several different ActiveComponents. This allows the various parts of the applet, such as the menus, ticker, news, etc to inherit common behaviours (via Java inheritance). See Code Extract 4 which generates an ActiveMenu" on the user interface: :e import java.awt.*; Provides a component which can run in an ActiveMap. Methods are overridden to allow super-class instances to be moved dynamically by ActiveMap.

@author Maurice Maneschi, Online Sales @version public abstract class ActiveComponent The ActiveMap which this component moves on.

@see ActiveMap protected ActiveMap map; Font font; Color foreground, background; public Rectangle bounds; long nextAction; //next timer event ActiveComponent nextScheduled null; S• public boolean visible false; public boolean hasShadow false; 99 import java.awt.*; import java.net.*; import java.io.*; import java.util.*; This class is a dynamic region of the map in the form of a menu.

Each menu item links to either a further ActiveMenu or a URL. If it links to a URL, the user must click it to get the page. If it links to another ActiveMap, the user needs only move the mouse over it.

class ActiveMenu extends ActiveComponent private final String version "ActiveMenu Code Extract 4 12 Each class of component is initialised as the applet starts, as shown in Code Extract 5, below: if (!initialised) initialise the Active Component sub-classes String components; if ((components getParameter("components")) null) throw new Exception("Parameter classes is required!"); else StringTokenizer st new StringTokenizer(components, String name null; while (st.hasMoreTokens() initialising one instance causes all required instances to initialise try ActiveComponent c (ActiveComponent) Class.forName(name st.nextToken()).newInstance(); c.init(this); catch (Exception e) System.err.println("Failed to initialise name); e.printStackTrace(); .4 initialised true; Code Extract Notice in line 4 of Code Extract 5 that the ActiveComponents to be initialised is dependant on the parameter "components". This parameter is generated within Lotus Notes on the basis of what the merchant selected.

Thus specialist ActiveComponents can be designed for different purposes.

Typically, components will be set to "ActiveMenu;ActiveTicker;ActiveSlideShow".

The 13th line in Code Extract 5 calls the init(ActiveMap map) method.

Every ActiveComponent child must implement this method. For ActiveMenu, this causes a number of parameters to be read. Mostly these 13 parameters set colours and fonts. However, Code Extract 6 shows how the parameters "menu", "menu2" and "menu3" are processed: a. a. a a a. a a a 14 menuURb new URL(map.getCodeBaseo, param); InputStream cain menuURL.openStroamo; data new DatalniputStream(new BuffcrodlnpntStreain(conn)); while (line =data. readLineo) null) I if (line. charA(O) continue; /ignore H-TML StringTokenizer st new StringTokenizer(line, try{ String key st.nextTokeno; String text st.nextTokeno; String link st.nextTokenQ; line String sidelvenu niull; boolean isHotSpot key.charAt(O) Ideal with [ildas in a URL string while (st.hasMoreTokenso) I if (sideMenxi n ull){ link I+ sideMenu; sideMenu st.nextTokenQ; //Line if (!isl-JotSpot sideMeu null) link sidel\/enu; URL uri null; Activelvenu menu null; S.....Object linkTo; if (link. charAt(O) url new URL(rnap.getCodeBaseo, link); linkTo url; }else linkTo =getMenu(link, map); Lino if (!isHotSpot){ This is a menu ActiveMenu mainMenu getMenu(key, map); inainMenu.add(Ioxt, linkTo); I else f The key contains the rectangle for the hot spot st now StringTokenizer(key,...); mnt new it[4]; /Lino for (int j=O0; j r. lenigth; j r[j] map.intToken(st); /If the label runs over several lines, it is separated by Ivertical bars String label[] null; if (text.longth() 1) 1 st new StringTokenizer(text," I) label new String[ st. countTokeilsU]; i 0; while (st.hasMoreTokensU) Line label[i+ st.nextTokenoI; Icreate and initialise the hot spot *Ac tiveHo LSpoi L i new ActiveHotSpotL(inap); h.foreground textColour; h*on font[L-EADJNG]; h.hilioFonl fonL[HILITE]; hi.reshape(r[0], I/Line h.sideMenu sideMenu.equals(SIDE MENU); h.setLink(label, linkTo); h. show(); HI set the colour etc. of the menu (if any) (menu =null) I ienu.font fout[1TEM]; menu. foreground inenuColour; Line catch (MalformedURLException e) I System. err. println("Invalid URL in line e); I catch (NoSuchEleineitExceptiou e) f Sys Lem. err. println("Failed to parse line e); I catch (Exception e) I Systemn.err. println("Unexpectled error with line); e.printStackTraceo; Thread.yieldo; Code Extract 6 The first three lines convert the ActiveMap menus, as shown in Code Extract 2, into a Java DataInputStream. Thus the menus are now available for ActiveMap to convert into its Java model of the menu hierarchy. To see how this is done, notice how lines 8 through 10 read the three parts: key=MenuId, text=Label, link=another menuID or a URL. Contrast this to how the parts were put together in Code Extract 3. Lines 14 21 can be ignored as they deal with the unfortunate case where a URL contains tildas.

Lotus Notes does not generate URLs with tildas.

In lines 23 through to 31 the code handles the possibility that the variable link may refer to another menu or a URL. The final Java ActiveMenu or URL object are stored in the same variable. This will allow each to define their own behaviour when the mouse moves over them or Sthey are clicked on.

15 Note too, the function getMenu( on lines 30 and 35. This function either finds the menu with the given id (perhaps or creates one with that id. This allows us to handle the case illustrated in Code Extract 2 where line 1 defines an item in menu +2106 whilst line 4 is processed later by Java) defines where the menu +2106 belongs.

Lines 33 to 36 handle the case where the left hand menu id is another menu. The remainder of the code is a tedious handling of an ActiveHotSpot.

The rectangular co-ordinates of an ActiveHotspot are not shown in Code Extract 2, they are computed within Notes.

Once the code in Code Extract 6 has run through, all the menus and 25 links in the ActiveMenu Lotus Notes view are stored in the applet as ActiveMenu and ActiveHotSpot objects. The code is then repeated for the menu2 and menu3 parameters.

Figures 8 to 13 show how the customer interface responds as a customer browses it.

A Java applet is written which "folds up" web links into pop-up menus.

The applet is given a graphical background for presentation effect, this enables a user to navigate a series of web pages from a single, legible web page without scrolling ActiveMap displays itself immediately it is downloaded. The information items are read from URLs provided as parameters in the background. They are added to the ActiveMap as the user is using it. This 17 causes the side effect that sometimes a user can return to a menu and find more items. Each item is encoded in a line of text in the form where-label-link such that: where is "x,y,width,height" when the item is a hot spot where is "+menu name" when the item belongs to ActiveMenu "menu name" label is the text to display for the item (or on the ActiveMap for a hotspot) label can contain for hotspots to indicate a hotspot label on several lines link is a URL http://www.onlinesales.com.au) if the hotspot/item refers to a web page link is "+menu name" if the hotspot/item refers to the ActiveMenu "menu name" Each ActiveMap menu is drawn with a raised bevel to make it look Sthree dimensional. Menus cover each other in the reverse order of their appearance, that is the latest on top. Menus draw a drop shadow three pixels wide to the right and bottom over whatever they cover. When a menu "expects" its submenus to appear to the left, it will draw left arrows, and vice versa. When a hot spot has no text, its menus appear centred over the hotspot. An option allows hotspots to display menus on the side rather than above or below. This requires an ActiveHotspot to use the ActiveMenu's fitMe( routine. Every colour and every font are set from a Java parameter to ::let the customer get special effects. Submenus have a different background colour from their parents.

A block of code is written which tracks where the mouse is at all times. If the mouse is over a hot-spot, a pop-up menu is drawn as close as 25 practicable to the mouse pointer. If the menu has too many items for one column, it is broken into several columns. If the mouse moves over an item, that item is redrawn with foreground and background reversed. When the mouse leaves the hotspot or the pop-up menu, the pop-up menu disappears.

If the mouse click is made in the menu, the web page referred to by the item the mouse is over is displayed.

A Java object called ActiveComponent is created, which interacts with the ActiveMap applet to decide which is on top, so as to be sure which menus will be on top and which will be underneath. It has most of the behaviours of a Java Component, so can be used easily.

An ActiveMenu item refers to either a URL or another ActiveMenu. If it refers to an ActiveMenu, when the mouse is over it, the relevant 18 ActiveMenu is drawn over everything else, either to the right or left of the item. Moving the mouse off the item or its submenu causes the submenu to be hidden. Menu items are drawn a bit wider to make room for a graphic of an arrow to indicate which menu items have sub-menus.

A routine called "fitMe" allows an ActiveMenu to ask either its super menu or its hotspot where it should be placed. For hotspot parents, it tries below first and above second to see if it fits. If neither work, it is placed below and shuffled around until it is fully on the screen (if possible). For ActiveMenu parents, it tries the same direction the parent used first, and the other second. It also is shuffled if it doesn't fit either.

All mouse events are handled centrally by ActiveMap. Once an ActiveComponent has the mouse, it has preference over it. As an exception, a Hotspot without text has its menu centred, and it will pretend it has lost Sthe mouse when it moves over that menu.

15 When the mouse leaves an ActiveComponent, it is told of this. If the ActiveComponent is an ActiveMenu, it then asks each of its displayed sub menus and all their submenus if they have the mouse. If one does, there is not change. If none do, the menu will hide itself and all its submenus.

After the ActiveComponent is told it has lost the mouse, ActiveMap checks each of the other components, top first if they have the mouse. If they do, they are told of this, which may cause more menus to be displayed.

Otherwise, ActiveMap waits for the mouse to move over another ActiveComponent such as a hot spot.

An ActiveComponent may be created with a list of news items. It 25 always remains underneath ActiveMenus. These items are read from an ActiveMenu. Clicking on an item brings up a text window with the news displayed. Alternatively, clicking can indicate a purchase is to be made; one click to buy one, two clicks to buy two. Some other action could cancel a purchase such as a right click.

An ActiveComponent may be created with a timer routine. It always remains underneath ActiveMenus. As the timer ticks, the ActiveComponent is redrawn with the text moved along. These items are read from an ActiveMenu. Clicking on an item shows the appropriate web page.

In a slideshow, each slide becomes an ActiveComponent with an image and a URL when clicked. A timer routine is written which displays and hides each slide according to its parameters. These parameters are read 19 from a URL parameter referring to a text file. The parameters are x and y offsets, delay, period and display time.

It will be appreciated by persons skilled in the art that numerous variations and/or modifications may be made to the invention as shown in the specific embodiments without departing from the spirit or scope of the invention as broadly described. The present embodiments are, therefore, to be considered in all respects as illustrative and not restrictive.

0:9 Vi 9.

9* 9 *99 S 9 o, 9999* 9* 9 THE CLAIMS DEFINING THE INVENTION ARE AS FOLLOWS:- 1. A navigable computer site for use as a homepage with online shopping facilities, comprising: a merchant interface, not available to customers, at which a set of forms are accessible to a merchant to select predetermined arrangements of ordered information locations, and to enter information concerning the merchant's business and the products or services, or both, which are to be available to customers at respective information locations; a series of menu tables, hidden from both the merchant and the customers, which provide a model of the ordered arrangements of oo information locations and the functionality with which they are to be displayed on the customer interface, where the series operate to take the .o 15 predetermined ordered arrangements selected by the merchant and to ~display them on the customer interface, and where the series operate to take the information entered in the set of forms by the merchant and to automatically populate the respective predetermined locations in the selected ordered arrangements of the customer interface with the information; and a customer interface to display the selected arrangements of ordered ~information locations to be navigated by a customer, and the entered information concerning the merchant's business and the products or services, or both, in order for the customer to find the information :25 concerning the merchant's business and the products or services, or both.

2. A navigable computer site according to claim 1, where the set of forms accessible to the merchant is enabled by a set of Lotus Notes forms and their associated views.

Claims (1)

1. 3. A navigable computer site according to claim lor 2, where the series of menu tables provide the model of the ordered arrangements in the form of Java applet parameters. DATED this 26th Day of June 1998 ONLINE SALES LIMITED Patent Attorneys for the Applicant: F B RICE CO oo.. o CC C C o «e S C r. o* ABSTRACT This invention concerns a navigable computer site, by which is meant an Internet, Intranet or Extranet site which may be visited and explored. The invention particularly concerns a dynamic and customisable site which may be suitable for use as a homepage with online shopping facilities. The site includes a merchant interface, not available to customers, at which a set of forms are accessible to a merchant to enter information concerning their products or services. A series of menu tables, hidden from both the merchant and the customers, which provide a model which is automatically populated with the information. Finally, a customer interface displays the populated model so that it can be navigated by a customer, in order to find the merchant's information. 'e S.. 0 B