WO2004006132A1

WO2004006132A1 - Web page graphical user interface

Info

Publication number: WO2004006132A1
Application number: PCT/SG2003/000160
Authority: WO
Inventors: Chee Keong Ea; Hussain Jawwad; Ganvkar Sanjay; Zeya Kyaw; Tai Wee Quek; Seng Kid Neo; Teik Guan Kuan
Original assignee: Solutions Lab Pte Ltd
Priority date: 2002-07-09
Filing date: 2003-07-09
Publication date: 2004-01-15
Also published as: AU2003253565A1

Abstract

A system for creating and manipulating at least one pagelet included in at least one page in a browser wherein one of said at least one pagelet is a first pagelet and one of said at least one page is a first page, said system including a graphical user interface and an operation means, said graphical user interface being responsive to a user request and being adapted to communicate with said operation means; said operation means including a first means for creating said first pagelet; and a second means for manipulating said first pagelet. A system for holding information for a pagelet included in a page in a browser, said system including a receiving means adapted to receive said information; storing means adapted to store said information in a first section; and an updating means adapted to update the content of said pagelet with said received information stored in said first section. A system for holding information for at least one pagelet included in at least one page in a browser, said system including a receiving means for receiving information; storing means for storing information for at least one pagelet in respective ones of at least one first section respectively associated with each pagelet; an updating means adapted to update the or each pagelet with information stored in said respective first sections. A system for enabling the interactive manipulation of WebPages content accessed using a remote browser, including means for allowing the selection of pagelets, and a graphical user interface allowing the selective arrangement of pagelets, such that the page for a user can be edited and arranged in a form selected by the user.

Description

WEB PAGE GRAPHICAL USER INTERFACE

FIELD OF INVENTION

The present invention relates to improvements in the layout and deliverability of web page content; in particular there is provided a system of dynamically constructing a web page using "pagelets"; caching pages for quick switching of pages and a system for updating pagelets on an individually cached basis. There is also provided a method of achieving the same and a computer program product for implementing the system and method. BACKGROUND ART

Current web pages in the art typically are monolithic in many respects. Generally they are fixed in the content and the 'look and feel' of the page. Some applications allow the user to personalize their browser page by providing separate set up pages to define the content and layout of their page. This is rather restrictive as not only must the user conform to the predefined structure provided, the user is also unable to have multiple pages with their own layout without, typically lots of configuration. Users also do not have the means to dynamically and flexibly change any of the content nor layout of these pages on- the-fly. Browser frames do not allow a re-organisation of the entire browser page to fit seamlessly into a page. Each frame in prior art systems is generally a different browser page with its own controls, scrollbars, etc, and therefore cannot be easily managed as part of the same page layout.

In typical browser system navigation or refreshing, a page requires retrieving content from a web server. In many situations, this is slow because the content needs to be delivered from the server to the browser.

Dynamic Hypertext Markup Language (DHTML) technology allows developers to embed Hypertext Markup Language (HTML) elements within text documents in order to generate dynamic text-based output. This is typically achieved using an HTML document fragment rendered within a DHTML object tag. Current DHTML technology is used in certain websites for personalization of web content. However, this personalization is largely limited to the first page (i.e. the home page) of the user. An update of a DHTML section within the webpage requires the entire webpage to be refreshed and this can be disrupting and time consuming. The DHTML sections are thus mostly used in a very passive manner for merely outlining a section of the content within the page.

It is an object of the present invention to provide a more flexible customisation and construction of website pages via a browser. It is also a further objective of the invention to provide an improved caching system for accessing pages of web content within a site.

SUMMARY OF THE INVENTION

According to a first aspect of the invention there is provided a system for creating and manipulating at least one pagelet included in at least one page in a browser wherein one of said at least one pagelet is a first pagelet and one of said at least one page is a first page, said system including a graphical user interface and an operation means, said graphical user interface being responsive to a user request and being adapted to communicate with said operation means; said operation means including: first means for creating said first pagelet; and second means for manipulating said first pagelet. According to a second aspect of the invention there is provided a system for holding information for a pagelet included in a page in a browser, said system including: receiving means adapted to receive said information; storing means adapted to store said information in a first section; and updating means adapted to update the content of said pagelet with said received information stored in said first section.

According to a third aspect of the invention there is provided a system for holding information for at least one pagelet included in at least one page in a browser, said system including: receiving means for receiving information; storing means for storing information for at least one pagelet in respective ones of at least one first section respectively associated with each pagelet; updating means adapted to update the or each pagelet with information stored in said respective first sections.

According to a fourth aspect of the invention there is provided a system for enabling the interactive manipulation of webpage content accessed using a remote browser, including means for allowing the selection of pagelets, and a graphical user interface allowing the selective arrangement of pagelets, such that the page for a user can be edited and arranged in a form selected by the user.

A pagelet represents a section of content within a webpage that is preferably bounded with Windows-like capabilities. Preferably the abovementioned sections are hidden frames.

Preferred features and aspects of the invention are identified in the appended claims, which claims are hereby made part of the disclosure of the specification. Methods and computer program products are also envisaged.

Further, aspects and characteristics of the invention become apparent from a reading of the specification as a whole, with reference to the drawings.

In preferred forms, the invention provides a system for enabling the interactive manipulation of webpage content including a framework of templates for creating and manipulating webpage content using a graphical user interface, wherein the system largely uses existing browser capabilities. Preferably, the present invention provides a method and product whereby a browser user can use a graphical user interface to define a webpage as required, using multiple pagelets. The user is able to select and arrange pagelets, so that the webpage shows the pagelets of interest in an arrangement suitable to the user.

Advantageously, preferred embodiments of the invention make extensive use of DHTML technology and browser frames. The DHTML sections are "pagelets" in the context of this invention.

Preferred embodiments leverage on existing DHTML support on internet browsers, which allows interactive manipulation of content within a framework. This allows a user to define a variety of webpage contents to be framed into multiple sections within a browser page. One preferred system harnesses the 'pagelets' technology to organize the webpage content and provides a graphical user interface for a user to interactively introduce, remove, move and edit pagelets included in a page. Pagelets within a page may be maximized and minimized according to the user's manipulation. The colour of the pagelet frames can also be edited. Users may then multitask and have multiple pagelet content displayed within a page. This preferred system also allows the content of each pagelet to be updated independently from the other pagelets within the same page. This may be done by streaming live information based on the subject matter of the pagelet content into a frame that acts as a type of cache or manually refreshing the content of the pagelet.

In preferred forms the system allows the user to create multiple pages with independent set of pagelets contained within. The layout and manipulation of each page is independent from another page. In a preferred embodiment, the pagelets within the browser reconfigures themselves automatically with each movement of browser resizing. The pagelets are also able to reconfigure themselves with each change in the layout of the pagelet within a page, for eg. when minimizing and maximizing a pagelet, and also with the change in layout of the page, for eg changing the number of columns of pagelets within a page The system also preferably stores a record of the context of each page. When a user switches to a page, it may thus return to the last context of that page.

Preferably there is provided a system that help to minimise response time for web content information retrieval for a page by only loading a page from the server once through a browser, and then loading subsequent assessments from the browser's cache and hidden sections. Loading information from hidden frames allows independent refreshing. Therefore in preferred embodiments, differing pagelets within the same page and individual pagelets may be refreshed individually. Advantageously, live streaming of information within each pagelet may be supported with the use of current browser technology.

Preferably the pagelets are defined within a DHTML DIV tag or as an iFrame. Support for 'LiveTable' control to manage the display of content or a streaming update of the content in a tabular form is also preferably provided.

In a preferred implementations, the framework provides system templates for management by site administrator, and user templates for creation and management by individual users.

An advantage of the preferred embodiments of the invention is that users are able to independently customize the webpage content, and can define a website to only contain pagelets that are relevant to him and organise the differing pagelets in a manner to best suit him.

Commercially and in preferred forms, new services may be delivered to the browser by showing it as an pagelet to be delivered via the system where users can choose to include within their current pagelet templates.

Preferred embodiments also provide a system for updating and managing these pagelets on an individual basis; a system of building many such pages of pagelets within a web site such that they represent the entire personal view of the site, and a system for navigating between these pages quickly. A pagelet represents a section of the content within a web page that is bounded with Windows-like capabilities.

DESCRIPTION OF DRAWINGS Preferred embodiments of the invention will now be described, by way of example only, with reference to the following drawings wherein:

Fig 1 shows the frame structure of a webpage;

Fig 2 shows the detailed structure of frames with corresponding files;

Fig 3 shows the page tab within the page list frame for accessing a page; Fig 4 shows the creating of a page;

Fig 5 shows the pagelet list;

Fig 6 shows new pagelets being added into a page;

Fig 7 shows streaming update of pagelet content;

Fig 8 shows the removal of a pagelet from a page; Fig 9 shows the editing of pagelets.

DETAILED DESCRIPTION OF DRAWINGS

Referring to figure 1 , the system of the present invention defines the following frame structure in a browser. a) A page list frame 1 , which shows the list of page tabs 4. When a page

12 is added or removed, this frame is reloaded to show the updated list of page tabs 4. These are merely user interface tabs. The actual page is contained in the page container frame 2. In a preferred embodiment, DHTML is used to dynamically add or remove the page tabs 4. This will reduce the number of requests going back to server. b) A page container frame 2, which contains the actual page 12 seen by the user. There are as many such frames 2 as there are pages 12, with each frame 2 uniquely identified by an internal id. The switching of pages 12 is handled by merely manipulating the display and hide of these frames. c) Various hidden frames 3, such as frames to process page request, get live streaming content, get latest pagelet contents etc, are created by setting its height attribute to 0. These hidden frames 3 are designed to do work for the system without affecting the display of the page 12 unless necessary. For example, to update the content of a pagelet 13 independently within the page 12, the content of that pagelet 13 is placed into one of these hidden frames 3. When the content is fully loaded, it is then updated to the DHTML tag representing the display section of the pagelet 13 on the page 12. Details of the hidden frames 3 are as follows: i) 1 frame for general page request, for e.g. "save page". ii) 2 frames to receive streaming update from a content streaming engine, iii) 1 frame to unsubscribe from a content streaming engine if the user closes the browser without logging out properly. This is done by registering a function in the body within this frame as <body onbeforeunload=xxx> where xxx is the function that unsubscribes from the content streaming engine, iv) A number of frames that are used generically by the pagelets 13 to submit requests to the server simultaneously. These are only used by pagelets 13 to subscribe or unsubscribe for streaming data. In fact, the pagelets 13 subscribe or unsubscribe for streaming data through the page container frame 2. This frame contains a function that is the client of the page container frame. This number varies and is typically set to a large number like 20. v) 1 pagelet frame 14 for each pagelet 13. Thus, there are as many frames 14 as there are pagelets 13. Each frame receives the content of the pagelet 13 and calls the page container frame 2 to update the pagelet's content onto the page 12. An example of a content streaming engine is the LiveGiver. LiveGiver uses

HTTP protocol to push streaming content to the browser and is tapped by the pagelet technology to receive streamin gupdates to the pagelets. (ii) and (iii) and (iv) are optional if the LiveGiver streaming product is not used. The actual structure of the frames and the corresponding files that creates them are described in figure 2. It should be understood that the general structure of the frames is not as material as the usage of the frames for the purposes that they are intended for.

The page container frame also contains many common resources that are shared by all pagelets. This is to reduce the load and memory utilization on the browser by not replicating them on each pagelet. Some of the common resources are:

A table component that receives live updates

A user interface component that replaces the JavaScript alert popup, which is not multi-lingual. This component is called MessageBox.

Various user interface components like selection box, etc. developed with DHTML because the standard HTML controls are not manageable. In this example, they appear on top of a DHTML control. Various style sheets used in the system Various common functions accessible to pagelets.

The above resources may even be shared across all pages. An example of the table component that receives live updates is the "LiveTable". ACCESSING A PAGE Referring to figure 3, when a user accesses a page 12 the first time, the system creates a new page container frame 2 to house the page 12. Specifically, it does the following: a) Set the current frame's height to 0 to hide the old page. Call an optional JavaScript (to be provided by the pagelet developer) to process the "deactivate" event of the old page. The deactivate flow is from page list to page container to pagelets. b) Create a new frame for the page 12 and set its height to the maximum to display the new page. The height is defined as equal to total height minus total height of other frames. c) Get from the server the list of pagelets 13 for the page 12. d) Dynamically create both a <DIV> tag and <SCRIPT> tag for each pagelet 13 in the page container frame 2:

The <DIV> tag displays the content of the pagelet 13 onto the page 12. The <SCRIPT> tag stores the pagelet's JavaScript functions. e) Dynamically create the hidden frames 3, one for each pagelet 13. f) Load each pagelet 13: Set the content of the <SCRIPT> to the URL of the pagelet's JavaScript file.

Set the content (i.e. the SRC attribute) of the pagelet's hidden frame to the pagelet's URL so that the content is loaded into the frame.

When the content is loaded, update the <DIV> tag in the page container. This is a preferred means to allow updating the pagelet 13 independently from another pagelet 13 within the same page 12.

When the <SCRIPT> tag is loaded, call a JavaScript function to process the "on load" event of the pagelet 13. This is provided that the pagelet 13 has registered this event to the framework. The content of the JavaScript function is left to the pagelet developer, e.g. to subscribe to LiveGiver for streaming update. The framework will not load in the contents of the pagelet 13 if the pagelet 13 is minimized. The framework will only load in the contents of the pagelet 13 if the user maximizes the pagelet 13 subsequently.

When the user accesses the same page 12 subsequently, switching to the page 12 is merely steps (a) and (b), but this time the framework will not create a new frame but set its height to the maximum, followed by a call to an optional

JavaScript to process the "activate" event of the new page. This is important to allowing the fast switching of pages within the system by displaying or hiding the relevant page container frames without sending the request back to the web server. This improves response time substantially because the action is simulated locally. Furthermore, it reduces network traffic and load on the web server. CREATING A PAGE Referring to figure 4, when a user creates a new page 12, the system does the following:

Create a new page container frame 2 to house the new page 12.

Hide the old page by setting the old page container frame's height to 0.

Display the new page by setting the new page container frame's height to the maximum, which is equal to total height minus total height of other frames.

In the new page container frame 2, define a new HTML table to prepare for the loading of pagelets 13. This table has only 1 row with as many columns as the page 12 is configured for.

In each column, define 1 <DIV> tag with a unique id as the reference point to calculate the position of new pagelets 13 in the column easily. PAGELET LIST

Referring to figure 5, the system gets the list of pagelets 6 accessible for the user's role when the page 12 is first created or loaded. To manipulate the pagelets 13, a drag-and -drop function is used. The drag-and-drop effect is done as follows:

At the bottom of the pagelet list 6 is a <DIV> tag which is hidden (the display attribute is set to "none").

When a mouse is clicked on a specific item in the list, that <DIV> tag is set to the cursor position, with the content updated to reflect the name of the pagelet 13 that is selected.

When the mouse moves, the X,Y position of the <DIV> tag is changed accordingly

When the mouse is released, the event is trapped and the "Add Pagelet" steps are executed. ADDING PAGELETS

Referring now to figure 6, from the X, Y position of the mouse cursor, the system calculates the respective row and column to add the pagelet 13 to. It then does the following: Define a new hidden frame 2 to receive updates for the pagelet 13. This is vital to updating the content of the pagelet 13 independently from other pagelets.

Define a new <DIV> tag at the row and column that the pagelet 13 is to be added to. This <DIV> tag has a unique id representing the instance of the pagelet 13. Within this <DIV> tag, define additional <DIV> tags: o One <DIV> tag for the title. It contains the pagelet description and the icons to minimize, edit and close pagelet. This <DIV> tag changes color when the cursor is over it. o One <DIV> tag to display the content of the pagelet. Load the pagelet 13.

It is noted that a plurality of pagelets can be added into the page 12 and the same pagelet 13 can be added multiple times. Each pagelet 13 is independent from another and has its own <DIV> tag and id. This is accomplished by prefixing the pagelet's JavaScript functions, objects and variables with a unique id.

STREAMING UPDATE OF PAGELET CONTENT

Referring to figure 7, the streaming update mechanism allows live streaming of information to the pagelets 13. Streaming of information to the pagelets 13 can be done via hidden sections in a webpage. In a preferred embodiment, it is done using a content streaming engine called LiveGiver. LiveGiver is actually independent of the pagelet system. However, the pagelet system incorporates additional constructs to enable the pagelets 13 to work easily with LiveGiver.

To receive streaming update from LiveGiver, 2 frames are needed. One frame is connected to LiveGiver.

The other frame is provided to swap with the first frame 7 when the first frame's memory usage exceeds a specific limit. The swapping algorithm is based on the following: o When a streaming update comes in to the first frame 7 (i.e. receiving frame), the size of the data is added to the size captured thus far. o When this size exceeds a predefined limit (e.g. 1 MB), the receiving frame submits to LiveGiver to swap the connection to the 2^nd frame. o It then loads in a blank page to clear the first frame's memory. It is noted that without this feature, the system will run out of memory after a period of time. This period depends on the amount of streaming data coming in. This process repeats with the 2^nd frame now receiving the updates. It then monitors its memory size before swapping over to the 1^st frame. This process repeats continuously while there is streaming updates. When a streaming update arrives,

It contains the JavaScript function of the pagelet 13 that subscribed to the content.

Specifically, the JavaScript function name is same for all the streaming update, which is defined in a properties file. However, one of the parameter of this JavaScript function is another JavaScript function to be provided by a pagelet 13. This JavaScript function is called.

Within this function, the processing of the streaming content is left to the pagelet developer. At the end of the processing, the developer updates the pagelet content to the page 12 by setting the pagelet's <DIV> tag (<DIV>.innerHTML or innerText) to the new content. REMOVING PAGELETS

Referring to figure 8. The user removes a pagelet 13 interactively by clicking on the pagelet icon 8 provided on the page content frame. The system does the following actions:

Set the hidden frame 3 of the pagelet 13 to a blank page to release the pagelet's resources.

Set the pagelet's <DIV> tag to an empty string so that the pagelet 13 disappears from the page 12. Call an optional JavaScript function (to be provided by the pagelet developer) to do any cleanup. MOVING PAGELETS

A user moves a pagelet 13 by clicking on the pagelet title bar, and using a mouse to drag and release it over the new location.

The system performs the following: Trap the mouse release event.

From x,y position of the mouse cursor, calculate the respective row, column of the new location.

Remove <DIV> tag of the pagelet from old position

Insert <DIV> tag for the pagelet into the new position. MINIMIZING PAGELETS

A user minimizes a pagelet 13 interactively by clicking on the pagelet icon whereby the system performs the following:

Change the "display" property of the pagelet's <DIV> tag to "none" to hide its contents. Update the pagelet's title <DIV> tag with a new "maximize" icon.

Call an optional JavaScript function (to be provided by the developer). The content of this function is left to the pagelet developer. It could, for example, unsubscribe the streaming data. MAXIMIZING PAGELETS User maximizes a pagelet 13 interactively by clicking on the pagelet icon.

The system performs a similar series of steps as in minimizing pagelets 13 with some differences:

Change the "display" property of pagelet's <DIV> tag to "block" to display the pagelet's contents. Change the pagelet's title <DIV> tag with a new "minimize" icon.

Call an optional JavaScript function (to be provided by the developer). The content of this function is left to the pagelet developer. It could, for example, subscribe the streaming data. EDITING PAGELETS Referring now to figure 9, by clicking on the edit pagelet icon 9, the system brings up an HTML page that shows the colors, columns plus other editable attributes specified by the pagelet developer. When the edit settings are saved, the system submits the new settings to the pagelet's hidden frame so that the pagelet content is updated. REMOVING A PAGE

Referring to figure 10, the system of the present invention removes a page 12 by manipulating its page container frame 2:

Set page container frame 2 to a blank page to release the page's resources.

Reload the page list frame so that the page 12 is not shown. In a preferred embodiment, DHTML is used to dynamically add or remove the page tabs. This will reduce the number of requests going back to server.

It is to be appreciated that the page 12 is not removed unless the users log into the system again. This reduces complexity to remove a frame interactively. MODIFYING A PAGE

Referring to figure 11 , the system of the present invention allows the user to change the layout of the page 12, e.g. the number of columns in the page 12, the width of the column, etc. When the layout of the page 12 changes, the system forces a reload of the page, changing the layout of the page 12. SYSTEM SUPPORT

Besides the normal <DIV> support for the pagelet 13, the system allows an administrator to define a pagelet 13 based on iFrame. The iFrame has the added advantages that its content comes from any URL of any site and it is completely independent of the server-side scripting language. However, the display layout of the iFrame is harder to manage. It may also not be able to share some of the common resources in the page container. The iFrame pagelet is defined as another <iFrame> tag contained within the existing pagelet <DIV> tag:

<DIV id={unique pagelet id content }...> <l FRAME name={unique id} ...> ...actual content of URL defined for iFrame ... </IFRAME>

</DIV> LIVE TABLE CELLS

Another feature within the pagelet is the efficiency in maintaining the updates to the pagelet. In a typical user interface, an updated table cell in a LiveTable component within a pagelet is highlighted in a different color (e.g. setting the background to green) for a few seconds. It then reverts back to its original color after that. To do that, the pagelet includes additional processing to track each table cell that is updated:

When a cell is updated, its id is kept in a dictionary object maintained within the page container. This id contains a counter that is set to a specific number representing the number of seconds for the highlighted color to be active. A timer is registered with the page container frame (using the setlnterval function). This timer is triggered every second.

When the timer is triggered, it calls a function that traverses through the dictionary and decreases the counter. If a cell's counter is 0, the cell's color is reset to its original and is removed from the dictionary. This step is repeated for every cell in the dictionary.

When the number of cells in the dictionary is 0, the timer is stopped so that no additional processing load is incurred in the browser.

The following is a summary of a typical user flow and the consequent actions from the system. Details are provided in the sections below.

pagelets. ^■ For general processing.

For a user accessing the home page, he is not yet logged in and is merely identified as a user with a "GUEST" role. Consequently, the system will only display the list of page tabs for a "GUEST". It also creates a frame to load the first page. This page, in turn, loads the necessary pagelets configured for it.

The above pages are termed system pages because they are pre-configured for a specific role (in this case, "GUEST") and cannot be changed. System pages allow a user to quickly access the site based on the organization's perceived preferred layout for the role. This, of course, can be changed once a user logs in and replicates one or more system pages for his own.

User clicks on Accessing a page is done via frames. As the user is the 2^nd page accessing the 2^nd page for the first time, its frame is not yet of the home created. The system creates a new frame for the 2^nd page page. and closes the first frame -effectively switching to the new page.

User logs in. Similar to step 1 , the system creates the necessary frames for the logged-in user. However, the list of pages now shown is different. It includes:

^■ system pages allowed for the user role

^■ user's own pages.

In the beginning, there are no user pages.

User creates System creates a new frame to house the new page. The old his own page. frame is hidden and the new frame is shown, effectively switching the user to the new page. The new frame is a blank

pagelet's <DIV> tag to an empty string so that the pagelet disappears from the page

User moves This is done by merely placing the pagelet's <DIV> tag at the pagelet to a new location. Specifically, the system calculates the new new position. mouse position. It removes the <DIV> tag from the old position and recreates a new <DIV> tag at the new position.

User This is merely changing the display attribute of the pagelet's minimizes a <DIV> tag to "none" so that the content disappears. pagelet.

User Same as step 11 , but it now sets the display attribute of the maximizes a pagelet's <DIV> tag to "block" so that the content appears. pagelet that was previously minimized.

User edits a System pops up the configuration page. When settings are pagelet saved, the pagelet is reloaded with the new settings as done configuration. in Step 1.

User creates The same system actions for Step 4,5,6 are repeated. another new page. User drags and drops pagelets into the new page.

User removes System removes a page by manipulating the frame. It sets a page. the frame of the deleted page to a blank page to release its

It is to be noted that the forgoing discussion pertaining to embodiments of the invention is not intended to restrict the scope of the invention defined in the appended claims. In the claims, means plus function clauses are intended to cover the structures described herein as performing the recited function and not only structural equivalents but also equivalent structures. All additional embodiments, modifications and applications obvious to those skill in art are thus included within the spirit and scope of the invention as defined by the claims.

Claims

CLAIMS:

1. A system for creating and manipulating at least one pagelet included in at least one page in a browser wherein one of said at least one pagelet is a first pagelet and one of said at least one page is a first page, said system including a graphical user interface and an operation means, said graphical user interface being responsive to a user request and being adapted to communicate with said operation means; said operation means including: first means for creating said first pagelet; and second means for manipulating said first pagelet.

2. A system according to claim 1 wherein said operation means includes third means for creating said first page.

3. A system according to claim 1 or 2 wherein the or each said at least one pagelet is included in a respective page of said at least one page.

4. A system according to claim 1 , 2 or 3 wherein said second means includes: means for minimizing said first pagelet; means for maximizing said first pagelet; and means for changing a visual appearance of said pagelet.

5. A system according to any one of claims 1 to 4 wherein said operation means includes means for displaying on a display a list of pagelet content categories in response to a user request to create said first pagelet.

6. A system according to any one of claims 1 to 5 wherein said first pagelet is created in response to a drag and drop create request.

7. A system according to any one of the preceding claims wherein the second means includes organising means adapted to organise the or each said at least one pagelet in the said at least one page.

8. A system according to claim 7 wherein said organising means is adapted to organise said at least one pagelet into columns.

9. A system according to any one of claims 1 to 8 wherein the or each said at least one page is in a corresponding frame.

10. A system according to any one of claims 1 to 9 wherein said operation means includes a hiding means for hiding one of said at least one page and a selecting means for selecting any one of said at least one page.

11. A system according to claim 10 wherein said graphical user interface is adapted to communicate with said selecting means by way of a page list in a frame in said display.

12. A system according to claim 10 or 11 wherein said graphical user interface is responsive to a user request to select a second page when said first page is selected and adapted to communicate said request to said selecting means and said hiding means so that said first page is hidden and said second page is displayed.

13. A system according to any one of claims 1 to 12 wherein said operation means including saving means for saving a context of said first page.

14. A system according to claim 13 wherein said context includes a visual appearance of said first page.

15. A system for holding information for a pagelet included in a page in a browser, said system including: receiving means adapted to receive said information; storing means adapted to store said information in a first section; and updating means adapted to update the content of said pagelet with said received information stored in said first section.

16. A system according to claim 15 wherein said first section is hidden.

17. A system according to claim 15 or 16 further including means for directing said storing means to store said information in a second section when said first section receives a predetermined amount of said information and means adapted to direct said updating means to update said pagelet with said received information stored in said second section.

18. A system according to claim 17 wherein said second section is hidden.

19. A system according to claim 17 or 18 wherein said first section is emptied when said is predetermined amount is reached.

20. A system according to claim 19 wherein said means for directing is adapted to direct said storing means to store said information in said first section when said second section receives a predetermined amount of said information and means adapted to direct said updating means to update said pagelet with said received information stored in said first section.

21. A system according to anyone of claims 15 to 20 wherein said first section is a frame.

22. A system according to anyone of claims 15 to 21 wherein said second section is a frame.

23. A system according to claim 21 or 22 wherein said frames are hidden.

24. A system for holding information for at least one pagelet included in at least one page in a browser, said system including: receiving means for receiving information; storing means for storing information for at least one pagelet in respective ones of at least one first section respectively associated with each pagelet; updating means adapted to update the or each pagelet with information stored in said respective first sections.

25. A system as claimed in claim 24 wherein said updating means is adapted to update each of said at least one pagelet on an independent basis.

26. A system according to claim 24 or 25 wherein the receiving means is adapted to store information in a respective second section when a respective first section reaches a predetermined limit and further adapted to clear the contents stored by said respective first section.

27. A system according to claim 24 to 26 wherein said sections are hidden frames.

28. A system according to claim 1 to 26 further including at least one hidden frame adapted to receive requests from said pagelets.

29. A system as claimed in claim 26 wherein said receiving means is adapted to store information in said respective first frame when said respective second frame reaches said predetermined limit and is further adapted to clear the contents of said second frame.

30. A system for enabling the interactive manipulation of webpage content accessed using a remote browser, including means for allowing the selection of pagelets, and a graphical user interface allowing the selective arrangement of pagelets, such that the page for a user can be edited and arranged in a form selected by the user.

31. A system according to claim 30 wherein the user may define multiple pages of pagelets.

32. A system according to claim 30 or claim 31 wherein each pagelet may be updated independently of other pagelets on the same page.

33. A system according to claim 30 wherein the means for selective arrangement uses templates to arrange the pagelets.

34. A system according to claim 30, wherein the system is adapted to store data indicative of the context of a page, so that when the user returns to the page, the page is displayed in the saved context.