US 2004/0177327 A1Application
System and process for delivering and rendering scalable web pages
Publication Date:2004-09-09
•63 Claims
•3 Drawing Sheets
Abstract
A system and process for displaying and redisplaying an HTML document that conforms to the limitations of a viewer's browser. The system comprises a browser, a script, and a document object model (DOM). The script comprises a data structure and an interpretation code. The DOM is a document model representing a Web page's elements, such as text, images, URL links, etc. The process includes using the script to create a document data structure that describes the essential information in the document and using the interpretation code to interpret the data structure in a fashion that allows it to manipulate the DOM for the purpose of rendering the document in the browser. The data structure can be modified and the corresponding HTML can be subsequently regenerated in response to user events so that after initially being created, the document can be updated to reflect changes to the viewer's browser. if the viewer resizes the browser, the page elements can be automatically resized.
Metadata
Inventor
- Robert Kieffer
Application Information
Application Number:US 10/203,044
Filing Date:2003-08-23
Priority Date:2000-02-04
Patent Drawings (3 sheets)
Description
Copyright Notice
[0001] A portion of the disclosure of this patent document contains material that is subject to copyright protection. The copyright owner has no objection to the facsimile reproduction by anyone of the patent document or the patent disclosure, as it appears in the Patent and Trademark Office file or records, but otherwise reserves all copyright rights whatsoever.
Background of the Invention
[0002] 1. Technical Field
[0003] The invention relates generally to the Internet communication technology. More particularly, the invention relates to a system and method for delivering and rendering scalable Web pages.
[0004] 2. Background of the Invention
[0005] Authors of World Wide Web (WWW) documents all share a common and frustrating problem: the viewers of their documents have highly diverse viewing environmentsespecially with regard to the physical dimensions of the window a document is displayed in. This is problematic, especially if authors desire to produce documents with specific layout requirements. Hypertext Markup Language (HTML), the document format for WWW, provides very little in the way of scalable page elements. Many elements, text in particular, are fixed at specific sizes. When viewed on browsers with a large display resolution, text appears quite small when compared to displays with low resolution. Furthermore, even those elements that support some form of scaling are difficult to control because of the rudimentary manner in which the scaling support is provided. All this makes development of a consistent layout for WWW documents rather difficult.
[0006] One way for a document author to combat this problem is through the use of dynamic scripting languages such as JavaScript. These languages provide a way to detect information about a viewer's environment and modify the document accordingly. Unfortunately, the native document object code (DOM) provided by these languages is rather problematic. In the case of Netscape Navigator 4, not all of the page elements are accessible. Many elements are write-only or read-only, making it impossible to use the native structure as a reliable place to store document information.
[0007] Conversely, Internet Explorer (4 & 5) has a DOM that can be, at times, overly complex, making it difficult to constrain the degree to which a document should be modified.
[0008] Adding to the WWW author's problem is the fact that the DOMs used by Netscape Navigator and Internet Explorer are dramatically different in nature. Supporting both browsers requires the development of different scripts that can interact with the individual DOMs.
[0009] What is desired is to develop a browser independent document data structure which enable page authors to freely access and modify all relevant aspects of the document without having to worry about limitations of the browser DOMs.
Summary of the Invention
[0010] The invention provides a system and process for displaying and redisplaying an HTML document that conforms to the limitations of a viewer's browser. The system comprises a browser, a script, and a document object model (DOM).
[0011] The script comprises a document data structure and an interpretation code. In the preferred embodiment of this invention, the document data structure is a slide presentation data structure designed for the system. The DOM is a document model representing a Web page's elements, such as text, images, URL links, etc.
[0012] Using this system, instead of creating an HTML document, a Web author creates his document that consists of the script. This script, when executed, creates a document data structure that describes the essential information in the document. The interpretation code interprets the data structure in a fashion that allows it to manipulate the DOM for the purpose of rendering the document in the browser.
[0013] By having the Web server provide the viewer's browser with a document data structure, instead of an HTML rendition of the document, the HTML for the document can be generated at a time when the browser information needed to create a properly sized document is available, thus allowing all features of the document to be sized accordingly. Furthermore, the data structure can be modified and the corresponding HTML can be subsequently regenerated in response to user events so that after initially being created, the document can be updated to reflect changes to the viewer's browser. For example, if the viewer resizes the browser, the page elements can be automatically resized.
[0014] By creating a browser independent data structure, the page author can freely access and modify all relevant aspects of the document without having to worry about limitations of browser DOMs. This browser independence also allows the author to develop a single script for interpreting the structure, rather than the two or more required for interpreting the different browser DOMs.
Brief Description of the Drawings
[0015] FIG. 1 is block diagram illustrating a system for displaying and redisplaying an HTML document that conforms to the limitations of a viewer's browser; and
[0016] FIG. 2 is block diagram showing the hierarchical structure of a document data structure according to the invention.
Detailed Description of the Invention
[0017] Referring to FIG. 1 , a system 100 for displaying and redisplaying an HTML document that conforms to the limitations of a viewer's browser comprises a browser 110, a DHTML document object model (DOM) 120 and a script 130.
[0018] The browser 110 may be any kind of Web browser that supports a scripting language with some means of modifying the contents of displayed web pages (also known as the browser Document Object Model).
[0019] The DHTML DOM 120 is a document model representing a Web page's elements, such as text, images, URL links, and the like.
[0020] The script 130 comprises a document data structure 140 and an interpretation code 150. The script is some combination of inline script (script included in the source HTML of a web page document) and script files referenced by the web page document. In the preferred embodiment of this invention, the document data structure 140 is a slide presentation data structure designed for this system. The hierarchical structure of said document data structure 140 is illustrated in FIG. 2 and Tables 1-8.
[0021] Using this system, instead of creating an HTML document, a Web author creates his document that consists of the script 130. This script, when executed, creates a document data structure 140 that describes the essential information in the document. The interpretation code 150 interprets the document data structure 140 in a fashion that allows it to manipulate the DHTML DOM 120 for the purpose of rendering the document in the browser.
[0022] The process to create a document data structure comprises the steps of:
[0023] 1. Using a web server to respond to a viewer's browser's request for a document;
[0024] 2. Retrieving or creating the content of the document in an appropriate fashion (Examples of this would be reading the document from a file on from a computer hard drive, querying a database for information, or using an algorithm to compute the content);
[0025] 3. Translating the document content into a valid block of script code that, when executed by the viewer's browser, has the result of creating a data structure that can be accessed or manipulated;
[0026] 4. Embedding the script code into the HTML document returned to the client; and
[0027] 5. In the viewer's browser, executing the script block (this is typically automatically done by the browser).
[0028] Once the document data structure has been created, it can optionally perform any necessary data validation. This step, while not required, is frequently desirable to further format, validate, or optimize the data structure provided by the web server.
[0029] The Step 5 of the above process comprises the sub-steps of:
[0030] a. Setting the background color;
[0031] b. Creating a slide layer for presentation;
[0032] c. Enabling the display of said slide layer;
[0033] d. Initializing the address of said presentation and said slide;
[0034] e. Initializing various slide elements inside said slide;
[0035] f. Setting up the resize handler, and
[0036] g. Rendering said slide into HTML and displaying said presentation in said browser.
[0037] When the slide elements are text entities, the sub-step (e) of the above process comprises of the sub-sub-steps:
[0038] (aa) Setting up address for said text entities;
[0039] (ab) Creating a layer for said text entities; and
[0040] (ac) Enabling the display of said layer.
[0041] When said slide elements are image entities, the sub-step (e) comprises the sub-sub-steps:
[0042] (ba) Setting up address for said image entities;
[0043] (bb) Creating a layer for said image entities; and
[0044] (bc) Enabling the display of said layer.
[0045] When said slide elements are outline entities, the sub-step (e) comprises the sub-sub-steps:
[0046] (ca) Setting up address for said outline entities; and
[0047] (cb) Initializing outline nodes for said outline entities.
[0048] The sub-step (g) of the above process comprises sub-sub-steps of:
[0049] (da) Getting the client screen sizes;
[0050] (db) Setting the clipping region of said slide layer;
[0051] (dc) Rendering various slide elements inside said slide; and
[0052] (de) Flushing the output to said layer.
[0053] In the sub-step (g), when slide elements are text entities, the sub-sub-step (dc) comprises of the sub-sub-sub-steps:
[0054] (a1) Setting layer color and alignment;
[0055] (a2) Generating the text to be displayed;
[0056] (a3) Writing the URL start tag;
[0057] (a4) Writing the style and said text; and
[0058] (a5) Writing the URL end tag.
[0059] In the sub-step (g), when slide elements are image entities, the sub-sub-step (dc) comprises of the sub-sub-sub-steps:
[0060] (b1) Setting layer background color;
[0061] (b2) Wring empty content string if slide is editable;
[0062] (b3) Getting the URL of image source;
[0063] (b4) Writing the URL start tag;
[0064] (b5) Rendering said image; and
[0065] (b6) Writing the URL end tag.
[0066] In the sub-step (g), when slide elements are outline entities, the sub-sub-step (dc) comprises of the sub-sub-sub-steps:
[0067] (c1) Setting up default properties;
[0068] (c2) Creating and initializing a rendering context;
[0069] (c3) Setting origin and available width;
[0070] (c4) Rendering outline nodes with said rendering context; and
[0071] (c5) Hiding unused layers.
[0072] The process to interpret the document data structure comprises the steps of:
[0073] 1. Identifying objects in the document data structure, which is served up by the web server, that need to be rendered in the viewer's browser;
[0074] 2. Locating or creating the elements of the browser DOM that are used for rendering the document;
[0075] 3. Applying any transformations or other changes needed to accommodate the viewer's specific browser configuration to the DOM element or the document data structure;
[0076] 4. Generating HTML needed to render said objects; and
[0077] 5. Applying that HTML into the DOM elements, causing it to be displayed in the browser.
[0078] The Step 3 of the above process comprises the sub-steps of:
[0079] a. Setting the background color;
[0080] b. Creating a slide layer for presentation;
[0081] c. Enabling the display of said slide layer;
[0082] d. Initializing the address of said presentation and said slide;
[0083] e. Initializing various slide elements inside said slide; and
[0084] f. Setting up the resize handler.
[0085] When the slide elements are text entities, the sub-step (e) of the above process comprises of the sub-sub-steps:
[0086] (aa) Setting up address for said text entities;
[0087] (ab) Creating a layer for said text entities; and
[0088] (ac) Enabling the display of said layer.
[0089] When said slide elements are image entities, the sub-step (e) comprises the sub-sub-steps:
[0090] (ba) Setting up address for said image entities;
[0091] (bb) Creating a layer for said image entities; and
[0092] (bc) Enabling the display of said layer.
[0093] When said slide elements are outline entities, the sub-step (e) comprises the sub-sub-steps:
[0094] (ca) Setting up address for said outline entities; and
[0095] (cb) Initializing outline nodes for said outline entities.
[0096] The Step 4 of the above process comprises the sub-steps of:
[0097] (da) Getting the client screen sizes;
[0098] (db) Setting the clipping region of said slide layer;
[0099] (dc) Rendering various slide elements inside said slide; and
[0100] (de) Flushing the output to said layer.
[0101] When slide elements are text entities, the sub-step (dc) under Step 4 comprises of the sub-sub-steps:
[0102] (a1) Setting layer color and alignment;
[0103] (a2) Generating the text to be displayed;
[0104] (a3) Writing the URL start tag;
[0105] (a4) Writing the style and said text; and
[0106] (a5) Writing the URL end tag.
[0107] When slide elements are image entities, the sub-step (dc) under Step 4 comprises of the sub-sub-steps:
[0108] (b1) Setting layer background color;
[0109] (b2) Wring empty content string if slide is editable;
[0110] (b3) Getting the URL of image source;
[0111] (b4) Writing the URL start tag;
[0112] (b5) Rendering said image; and
[0113] (b6) Writing the URL end tag.
[0114] When slide elements are outline entities, the sub-step (do) under Step 4 comprises of the sub-sub-steps:
[0115] (c1) Setting up default properties;
[0116] (c2) Creating and initializing a rendering context;
[0117] (c3) Setting origin and available width;
[0118] (c4) Rendering outline nodes with said rendering context, and
[0119] (c5) Hiding unused layers.
[0120] By having the Web server provide the viewer's browser with a document data structurea data structure that describes a document, instead of an HTML rendition of the document, the HTML for the document can be generated at a time when the browser information needed to create a properly sized document is available, thus allowing all features of the document to be sized accordingly. Furthermore, the data structure can be modified (and the corresponding HTML subsequently regenerated) in response to user events so that after initially being created, the document can be updated to reflect changes to the viewer's browser. For example, if the viewer resizes the browser, the page elements can be automatically resized.
[0121] Therefore, by creating a browser independent data structure, the page author can freely access and modify all relevant aspects of the document without having to worry about limitations of browser DOMs. This browser independence also allows the author to develop a single script for interpreting the structure, rather than the two (or more) required for interpreting the different browser DOMs.
[0122] A side benefit of this is that author-defined data structure can be optimized to include only the most essential information. This makes them much smaller than the equivalent HTML, which may help transmission times, especially over low bandwidth communication lines.
[0123] The document data structure and the interpretation code may be contained in a single file. This makes transport and portability easier, but requires the interpretation code be sent with each document.
[0124] The distinction between the document data structure and the interpretation code is essentially one of state vs. behavior. The document data represents the state needed to display a document, with little or no associated behavior.
[0125] The interpretation code provides the behavior needed for understanding a document data structure and creating an HTML representation of it. The interpretation code may be separated out from the document data structure code. This is expected to be the more attractive solution since it allows browsers to cache the interpretation code for later use on another, similar document.
[0126] FIG. 2 is a block diagram which shows a hierarchical structure of the document data structure 140. The first layer is SXPresentation 200, which is the root object of the presentation data structure. It contains an array of SXSlides which are at the second layer.
[0127] SXSlide 210 is an object representing a single slide in a presentation. It contains any number of SXContentEntities 220 which are at the third layer.
[0128] SXContentEntity 220 is an abstract representation for one of a number of different types of slide elements. These types include: SXText 230, SXOutline 240 and SXImage 250.
[0129] The SXOutline 240 may, in turn, contain other sub-outlines 260.
[0130] Each of these entities in the presentation data structure has a variety of properties associated with it, which are described in the following tables.
[0131] This system supports a limited token replacement functionality. Table 1 contains (1) the recognized tokens, (2) the scope in which replacement occurs, and (3) the value with which they are replaced.
| TABLE 1 | ||
|---|---|---|
| Token Replacement | ||
| Token | Scope | Value |
| % SlideNumber % | SlideNumber | The index of the current slide |
| (SXText) | (starting with 1). | |
| % SlideCount % | SlideNumber | The total number of slides in |
| (SXText) | the presentation. | |
[0132] Additional tokens should use the %TokenName% notation.
[0133] Token replacement is done using an exact string match methodonly text that exactly matches the token, including the surrounding % characters will be replaced. However, there is currently no way to escape the % character so, for example, there is no way to have the string %SlideNumber% appear in a SlideNumber element.
[0134] Table 2 through Table 8 list a type for the different properties. This type describes the semantic type of the object, not necessarily the data type, e.g. the zindex property, which is listed as being of type integer, is contained in a string data type. The type fields are listed in Table 2.
| TABLE 2 | |
|---|---|
| Type Fields | |
| string | A value containing any valid alpha-numeric characters. |
| In javascript, the / and n characters should | |
| be escaped. | |
| integer | An integer value (e.g. (1234 or 1234) |
| float | A floating point value (e.g. 1.234 or 1.234). |
| Typically exponential notation is not used (and is not | |
| guaranteed to be supported). | |
| color | An HTML style color value. This can be a color name, |
| but is more often the color code in RRGGBB notation. | |
| array | An ordered collection of objects |
| hashmap | A mapped collection of objects |
[0135]
| TABLE 3 | ||
|---|---|---|
| SXPresentation | ||
| Attribute | Type | Description |
| currentSlideIndex | Integer | The index of the current slide in the |
| presentation. | ||
| This is the true index of the slide | ||
| in the presentation. | ||
| isSample | Boolean | This is true for sample presentations |
| isStyle | Boolean | This is true for style presentations |
| isTemplate | Boolean | This is true for template presentations |
| presentationID | Integer | The database id of the presentation |
| slideCount | Integer | The total number of slides in the |
| presentation. | ||
| slides | Array | The array of slides that make up the |
| presentation. | ||
| Note: This array is not guaranteed to | ||
| be completely populated by all the | ||
| slides in a presentation. Typically it | ||
| will contain only a single object (at | ||
| index 0). The true index of the slide | ||
| can be found in the currentSlideIndex | ||
| property. | ||
| slideTitles | Array | An array of strings that contain the |
| titles of each slide in the presentation. | ||
| The title of the current slide can be | ||
| found in slideTitles currentSlideIndex | ||
| type | String | Value: |
| com.iamaze.presentation.SXPresentation | ||
[0136]
| TABLE 4 | ||
|---|---|---|
| SXSlide | ||
| Attribute | Type | Description |
| contentEntities | Hashmap | The set of SXContentEntities that comprise |
| the slide content | ||
| effect | String | The type of effect to use when showing the |
| slide. | ||
| Values: | ||
| swoosh-left: Slide elements slide in from | ||
| the right | ||
| swoosh-right: Slide elements slide in from | ||
| the left | ||
| swoosh-up: Slide elements slide in from the | ||
| bottom | ||
| swoosh-down: Slide elements slide in from | ||
| the top | ||
| flash: Slide elements flash briefly. | ||
| (Currently only the title and outline | ||
| elements exhibit this effect) | ||
| build: Slide elements reveal progressively | ||
| on each mouse click. (Currently only outline | ||
| elements are revealed in this way - one top | ||
| level element per click.) | ||
| layoutName | string | The name of the layout this presentation is |
| based on. | ||
| notes | string | User supplied notes for the slide (Currently |
| not used for anything interesting.) | ||
| title | string | The title of the slide. |
| type | string | Value: com.iamaze.presentation.SXSlide |
[0137]
| TABLE 5 | ||
|---|---|---|
| Abstract SXContentEntity | ||
| Attribute | Type | Description |
| top | string | These values define the rect occupied by |
| left | string | the entity |
| width | string | |
| height | string | |
| type | string | The type of the object - this is actually |
| the complete java path name of the | ||
| SXPersistentContentEntity subclass that is | ||
| responsible for storing the entity | ||
| Values: | ||
| com.iamaze.presentation.contenttype.SXText | ||
| com.iamaze.presentation.contenttype.SXOutline | ||
| com.iamaze.presentation.contenttype.SXImage | ||
| name | string | The name of the element |
| Values: The name Background is reserved for | ||
| the background element of the slide. | ||
| zIndex | integer | The z-ordering of the layer elements in the |
| slide. The Background element is always at | ||
| index 0 (the bottom). | ||
[0138]
| TABLE 6 | ||
|---|---|---|
| SXText which inherits all the attributes | ||
| of Abstract SXContentEntity | ||
| Attribute | Type | Description |
| fontSize | integer | Font point size |
| color | color | Text color |
| backgroundColor | color | Background color |
| fontFamily | string | Font family |
| fontWeight | string | Font weight |
| Values: bold | ||
| align | string | Horizontal alignment |
| Values: left, center, right | ||
| text | string | Content of the entity |
| verticalAlign | string | Vertical alignment |
| Values: top, middle, bottom | ||
| url | string | URL to navigate to when clicked on |
| during playback | ||
| Note: If no preceeding / or protocol | ||
| (e.g. http://, http:// is | ||
| prepended.) | ||
| fontStyle | string | Font style |
| Values: italic | ||
[0139]
| TABLE 7 | ||
|---|---|---|
| SXOutline Entity which inherits all the attributes of SXText | ||
| Attribute | Type | Description |
| align | string | Ignored in SXOutline entities |
| verticalAlign | string | Ignored in SXOutline entities |
| nodeBulletType | string | Type of bullet |
| Values: text-symbol, text-letter-lower, | ||
| text-letter-upper, text-number-plain, | ||
| text-number-nested, text-roman-lower, | ||
| text-roman-upper, image | ||
| Note: The image and text-number-nested | ||
| types are deprecated (Uwe, you don't | ||
| need to support these types) | ||
| nodeBulletValue | string | The value specifying how the bullet |
| should look. This is interpreted | ||
| differently depending on the type | ||
| specified in nodeBulletType, as follows: | ||
| text-symbol: The value is the decimal | ||
| value of the Unicode character to | ||
| display. A null value here is an error. | ||
| text-letter-lower/upper, | ||
| text-number-plain/nested, and | ||
| text-roman-lower/upper: The value is | ||
| the index into the respective sequence. | ||
| The values 0, 1, 2 correspond to the | ||
| following (with subsequent values | ||
| following logically) | ||
| text-letter-lower/upper: | ||
| a, b, c/A, B, C | ||
| text-number-plain/nested: | ||
| 1, 2, 3/(deprecated) | ||
| text-roman-lower/upper: | ||
| i, ii, iii/I, II, III | ||
| Note that these are sequential bullets. | ||
| If no value is specified, they will | ||
| automatically use the previous index | ||
| 1. If the bullet is the first bullet | ||
| in the nodes array, it's index defaults | ||
| to 0. | ||
| nodes | array | Array of SXOutlines that are the |
| children of this outline | ||
[0140]
| TABLE 8 | ||
|---|---|---|
| SXImage which inherits all the attributes | ||
| of Abstract SXContentEntity | ||
| Attribute | Type | Description |
| align | string | Horizontal alignment |
| Values: left, center, right | ||
| backgroundColor | color | |
| scale | string | The scaling mode to use when displaying |
| the image | ||
| Values: | ||
| fit: The image is scaled to fit exactly | ||
| within the bounds | ||
| width: The image is scaled, retaining | ||
| the aspect ratio, so the width of the | ||
| image fits exactly in the bounds. | ||
| height: The image is scaled, retaining | ||
| the aspect ratio, so the height of the | ||
| image fits exactly in the bounds. | ||
| tile: The image is tiled at it's native | ||
| size to exactly fill the image bounds. | ||
| (The tiling origin is in the upper left | ||
| corner.) | ||
| Note: For width and height scaling, the | ||
| image is not clipped in the event it | ||
| overflows the image bounds. | ||
| src | string | The URL of the image to display in this |
| entity | ||
| url | string | URL to navigate to when clicked on during |
| playback | ||
| Note: If no preceeding / or protocol | ||
| (e.g. http://, http:// is prepended.) | ||
| verticalAlign | string | Vertical alignment |
| Values: top, middle, bottom | ||
[0141] In this system a SXImage entity that has the name Background is treated specially. This content entity describes the background of a slide and is treated in the following ways:
[0142] Its bounds always correspond exactly to the bounds of the slide.
[0143] Its z-index is always set to zero (0).
[0144] Table 9 is a fragment of JavaScript illustrating what a document data structure looks like. In this sample, the document is a slide from a presentation document. Table 10 is a JavaScript that interprets the data structure for the slide. Table 11 is a JavaScript that interprets the data structure for an outline. Table 12 is the Java source code used by the web server to convert an arbitrary hashmap (as retrieved from a database) into a JavaScript data structure in the viewers browser.
| TABLE 9 | |
|---|---|
| JavaScript for a slide from a presentation document | |
| var presentation | |
| type:com.iamaze.presentation.SXPresentation, | |
| isStyle:false, | |
| presentationID:com.iamaze.presentation.SXPresentation_931181, | |
| isTemplate:false, | |
| currentSlideIndex:5, | |
| slideCount:7, | |
| slides: | |
| contentEntities: | |
| Subtitle1: | |
| fontSize:28, | |
| top:13%, | |
| width:60%, | |
| color:FF9933, | |
| backgroundColor:null, | |
| fontFamily:null, | |
| fontWeight:null, | |
| height:6%, | |
| align:center, | |
| text:As anywhere, street vendors abound, | |
| verticalAlign:top, | |
| url:null, | |
| fontStyle:italic, | |
| left:37%, | |
| zIndex:6, | |
| type:com.iamaze.presentation.contenttype.SXText, | |
| name:Subtitle1 | |
| , | |
| Outline1: | |
| fontSize:null, | |
| top:20%, | |
| width:36%, | |
| color:null, | |
| backgroundColor:null, | |
| fontFamily:null, | |
| fontWeight:null, | |
| height:66%, | |
| align:null, | |
| nodeBulletType:null, | |
| text:null, | |
| verticalAlign:null, | |
| url:null, | |
| fontStyle:null, | |
| nodeBulletValue:null, | |
| nodes: | |
| fontSize:28, | |
| top:null, | |
| width:null, | |
| color:333300, | |
| backgroundColor:null, | |
| fontFamily:Georgia, Times New Roman, Times, | |
| serif, | |
| fontWeight:null, | |
| height:null, | |
| align:null, | |
| nodeBulletType:text-symbol, | |
| text:The Island of Nax, | |
| verticalAlign:null, | |
| url:null, | |
| fontStyle:null, | |
| nodeBulletValue:8226, | |
| nodes:null, | |
| left:null, | |
| zIndex:null, | |
| type:com.iamaze.presentation.contenttype.SXOutline, | |
| name:null | |
| , | |
| fontSize:28, | |
| top:null, | |
| width:null, | |
| color:333300, | |
| backgroundColor:null, | |
| fontFamily:Georgia, Times New Roman, Times, | |
| serif, | |
| fontWeight:null, | |
| height:null, | |
| align:null, | |
| nodeBulletType:text-symbol, | |
| text:When in the Islands, seafood is a must. | |
| You can't find any fresher or more delicious octopus anywhere., | |
| verticalAlign:null, | |
| url:null, | |
| fontStyle:null, | |
| nodeBulletValue:8226, | |
| nodes:null, | |
| left:null, | |
| zIndex:null, | |
| type:com.iamaze.presentation.contenttype.SXOutline, | |
| name:null | |
| , | |
| left:50%, | |
| zIndex:7, | |
| type:com.iamaze.presentation.contenttype.SXOutline, | |
| name:Outline1 | |
| , | |
| StyleImage1: | |
| scale:null, | |
| top:0, | |
| width:3%, | |
| backgroundColor:9966CC, | |
| height:100%, | |
| align:center, | |
| verticalAlign:middle, | |
| url:null, | |
| src:null, | |
| left:0, | |
| zIndex:7, | |
| type:com.iamaze.presentation.contenttype.SXImage, | |
| name:StyleImage1 | |
| , | |
| Title1: | |
| fontSize:27, | |
| top:5%, | |
| width:90%, | |
| color:333300, | |
| backgroundColor:null, | |
| fontFamily:Georgia, Times New Roman, Times, serif, | |
| fontWeight:bold, | |
| height:10%, | |
| align:center, | |
| text:Octopii Vendors, | |
| verticalAlign:center, | |
| url:null, | |
| fontStyle:null, | |
| left:5%, | |
| zIndex:6, | |
| type:com.iamaze.presentation.contenttype.SXText, | |
| name:Title1 | |
| , | |
| Background: | |
| scale:fit, | |
| top:null, | |
| width:null, | |
| backgroundColor:null, | |
| height:null, | |
| align:center, | |
| verticalAlign:middle, | |
| url:null, | |
| src:/images/backgrounds-large/Waterlilies- | |
| 1024x768_7.jpg, | |
| left:null, | |
| zIndex:1, | |
| type:com.iamaze.presentation.contenttype.SXImage, | |
| name:Background | |
| , | |
| Image1: | |
| scale:width, | |
| top:20%, | |
| width:36%, | |
| backgroundColor:null, | |
| height:66%, | |
| align:right, | |
| verticalAlign:top, | |
| url:null, | |
| src:/images/samples/NaxOctopi.jpg, | |
| left:10%, | |
| zIndex:8, | |
| type:com.iamaze.presentation.contenttype.SXImage, | |
| name:Image1 | |
| , | |
| effect:null, | |
| layoutName:1Outline1Image2, | |
| notes:null, | |
| title:Octopii Vendors, | |
| _old_contentEntities:null, | |
| type:com.iamaze.presentation.SXSlide | |
| , | |
| slideTitles: | |
| <Travel Destination goes here>, | |
| <A Title for Photos Below>, | |
| <Add a Title for the Images>, | |
| <Third Destination Goes Here>, | |
| The Whitewashes of Greece, | |
| Octopii Vendors, | |
| Next stop, IndonesiannTil then...n-Rosie | |
| , | |
| isSample:false | |
| ; | |
[0145]
| TABLE 11 | |
|---|---|
| JavaScript that interprets the document data structure for an outline | |
| function CXOutline() ; | |
| CXOutline.version 1; | |
| CXOutline.name Outline; | |
| CXSystem.registerLibrary(CXOutline); | |
| /**************************/ | |
| // | |
| // Global vars | |
| // | |
| // Default text to show when a node has no text | |
| var DEFAULT_OUTLINE_STRING Empty outline item; | |
| // Constant's for the type of bullet | |
| var BULLET_TEXT | text; |
| var BULLET_IMAGE | image; |
| // RWK - It's important for these to start with the BULLET_TEXT | |
| // string since we do startsWith() comparisons on them. | |
| var BULLET_SYMBOL | text-symbol; |
| var BULLET_LETTER_LOWER | text-letter-lower; |
| var BULLET_LETTER_UPPER | text-letter-upper; |
| var BULLET_NUMBER_PLAIN | text-number-plain; |
| var BULLET_NUMBER_NESTED | text-number-nested; |
| var BULLET_ROMAN_LOWER | text-roman-lower; |
| var BULLET_ROMAN_UPPER | text-roman-upper; |
| // Common symbol bullet characters | |
| var SYMBOL_DASH 8211; | |
| var SYMBOL_DOT 8226; | |
| /* | |
| * Initialize an outline | |
| */ | |
| function initOutline(aNode) | |
| // Init the layers array for outline nodes | |
| aNode._nodeLayers new Array(); | |
| // Init the root node and all subnodes | |
| aNode._parentNode null; | |
| aNode._rootNode aNode; | |
| aNode._level 0; | |
| if ((aNode.nodes null) && (aNode.nodes.length > 0)) | |
| outlineInitNode(aNode); | |
| outlineCacheAddress(aNode); | |
| else if (slideIsEditable) | |
| // If the root node has no nodes, create a placeholder | |
| // so the user has something to click on when editing. | |
| var newNode new Object(); | |
| aNode.nodes new Array(); | |
| aNode.nodes.addObject(newNode); | |
| aNode.nodeBulletType BULLET_SYMBOL; | |
| aNode.nodeBulletValue SYMBOL_DOT; | |
| outlineInitNode(aNode); | |
| outlineCacheAddress(aNode); | |
| // Set the address to null to mark this as a placeholder node | |
| newNode._address null; | |
| // make the height match the nodes | |
| aNode._rootNode.dirtyHeight true; | |
| /* | |
| * Recursively initialize outline nodes. | |
| * | |
| * - Set the type of each node to OUTLINE_CLASS | |
| * - Set the root node of each node. | |
| * - Set the parent of each node. | |
| * - Enumerate through the nodes of an outline and name the node | |
| after | |
| * it's node location. | |
| */ | |
| function outlineInitNode(aNode) | |
| // Error check | |
| if (aNode.nodes null) return; | |
| // Enumerate through each node | |
| for (var i 0; i < aNode.nodes.length; i) | |
| var myNode aNode.nodesi; | |
| myNode.type OUTLINE_CLASS; | |
| myNode._name aNode._name : i; | |
| myNode._parentNode aNode; | |
| myNode._rootNode aNode._rootNode; | |
| myNode._level aNode._level 1; | |
| myNode._subtype aNode._subtype; | |
| if ((myNode.nodes null) && (myNode.nodes.length > 0)) | |
| // If we didn't just create one, than initialize the node | |
| outlineInitNode(myNode); | |
| /* | |
| * Cache the address of each outline node | |
| */ | |
| function outlineCacheAddress(aNode) | |
| // Error check | |
| if (aNode.nodes null) return; | |
| // Enumerate through each node | |
| for (var i 0; i < aNode.nodes.length; i) | |
| var myNode aNode.nodesi; | |
| myNode._address aNode._address .nodes i ; | |
| if ((myNode.nodes null) && (myNode.nodes.length > 0)) | |
| // If we didn't just create one, than initialize the node | |
| outlineCacheAddress(myNode); | |
| // | |
| // Outline rendering | |
| // | |
| /* | |
| * Write outline content | |
| * | |
| * Outlines are implemented by rendering each node in it's own layer. | |
| * For convenience, the layers are stored in the _nodeLayers array | |
| within | |
| * the root node, which is initialized in the initSlide() method. | |
| */ | |
| function renderOutline(aLayer, aContent, aBounds, isMove) | |
| // Set up some default properties | |
| aContent.verticalSpacing 8; | |
| aContent.indentSpacing 45; | |
| aContent.heightInPixels 0; // (we'll total this up) | |
| // Create the render context and init it | |
| var myContext new Object(); | |
| // Set the origin and available width | |
| myContext.left aBounds.left; | |
| myContext.top aBounds.top; | |
| myContext.width aBounds.width; | |
| myContext.zIndex aBounds.zIndex; | |
| myContext.indentSpacing aContent.indentSpacing; | |
| myContext.verticalSpacing aContent.verticalSpacing; | |
| // Set the layers information | |
| myContext.nextLayerIndex 0; | |
| // Set the properties | |
| myContext.nodeBulletPrefix null; | |
| myContext.nextBulletValue 1; | |
| // Set the effects information | |
| myContext.effectStartTime 0; | |
| // Error check - Just return if there're no nodes | |
| // PENDING(RWK) - Hmm. Not 100% sure why I put this here. | |
| if (aContent.nodes null) return; | |
| // Render the nodes | |
| renderOutlineNodes(aContent, myContext, (isMove) false : | |
| true); | |
| // Hide any unused layers | |
| while (myContext.nextLayerIndex < aContent._nodeLayers.length) | |
| aContent._nodeLayersmyContext.nextLayerIndex.hide(); | |
| if (slideIsEditable) | |
| if (ns4) setRolloverEvents(true); | |
| if (aContent.dirtyHeight false) | |
| aContent.height | |
| Math.round((aContent.heightInPixels/ | |
| (slideLayer.getAbsoluteBounds()).height) * | |
| 100).toString() | |
| %; | |
| aContent.dirtyHeight false; | |
| /* | |
| * Create an outline node | |
| */ | |
| function renderOutlineNodes(anOutline, aContext, isMove) | |
| var myLayers anOutline._rootNode._nodeLayers; | |
| // Enumerate through the node list | |
| for (var i 0; i < anOutline.nodes.length; i) | |
| var myNode anOutline.nodesi; | |
| var myLayer null; | |
| // Create a new layer if needed | |
| if (aContext.nextLayerIndex > myLayers.length) | |
| myLayer newNamedLayer( | |
| anOutline._name myLayers.length, | |
| slideLayer.layer); | |
| myLayers.addObject(myLayer); | |
| // Turn off wrapInTable (we create our own table) and set | |
| // the alignment | |
| myLayer.setWrapInTable(false); | |
| myLayer.setVerticalAlign(top); | |
| else | |
| // Recycle an existing layer | |
| myLayer myLayersaContext.nextLayerIndex; | |
| // PENDING(RWK) - Really ugly workaround to make sure we | |
| don't lose the | |
| // style information when rendering to the layer | |
| if (ns4 && (isMove)) myLayer.doLayerHack(); | |
| // Set the association between content and layer | |
| // | |
| // We do this here for outlines rather than in initSlide() | |
| // because, unlike other elements, nodes may switch layers | |
| // (this happens if a node is added, deleted, or moved during | |
| // editing). | |
| myLayer._content myNode; | |
| myNode._layer myLayer; | |
| // Set the bounds - Make the height tiny so the content will | |
| push | |
| // the layer to the proper height. | |
| myLayer.setSize(aContext.width, 0); | |
| myLayer.setOrigin(aContext.left, aContext.top); | |
| if ((isMove)) //PENDING(HJK) weird indenting for diffs | |
| // Set the background color of the layer | |
| myLayer.setBackgroundColor(myNode.backgroundColor); | |
| // Write the table tag for the layer | |
| myLayer.write(myLayer.tableTag()); | |
| myLayer.write(<tr>); | |
| // Write the outline node | |
| var myType myNode.nodeBulletType; | |
| var myPadding null; | |
| // Write out the bullet cell | |
| if (myType null) | |
| // Render the bullet cell | |
| myLayer.write(<td valigntop width1px>); | |
| if (myType.startsWith(BULLET_TEXT)) | |
| var myText null; | |
| // Write the text style | |
| writeTextStyle(myLayer, myNode); | |
| // Determine the prefix string | |
| var myPadding . ; | |
| var myValue (myNode.nodeBulletValue null) | |
| aContext.nextBulletValue : | |
| myNode.nodeBulletValue; | |
| if (myType BULLET_SYMBOL) | |
| myText & myValue ;; | |
| myPadding ; | |
| else if (myType BULLET_LETTER_LOWER) | |
| myText toLetter(myValue, false); | |
| else if (myType BULLET_LETTER_UPPER) | |
| myText toLetter(myValue, true); | |
| else if (myType BULLET_NUMBER_PLAIN) | |
| myText myValue; | |
| else if (myType BULLET_NUMBER_NESTED) | |
| myText (aContext.nodeBulletPrefix null) | |
| (aContext.nodeBulletPrefix . | |
| myValue) : | |
| myValue; | |
| else if (myType BULLET_ROMAN_LOWER) | |
| myText toRoman(myValue, false); | |
| else if (myType BULLET_ROMAN_UPPER) | |
| myText toRoman(myValue, true); | |
| else | |
| warning(Unrecognized bullet type: | |
| myType); | |
| myLayer.write(myText); | |
| myLayer.write(</font>); | |
| aContext.nextBulletValue myValue 1; | |
| else if (myType BULLET_IMAGE) | |
| // PENDING(RWK) - Remove this block once all outlines have had | |
| the image bullets removed | |
| var myValue myNode.nodeBulletValue; | |
| if (myNode.fontSize null) | |
| myLayer.write(<img height | |
| adjust(myNode.fontSize*.8) px | |
| src myValue | |
| > ); | |
| else | |
| myLayer.write(<img src myValue >); | |
| aContext.nextBulletValue 1; | |
| // PENDING(RWK) - End of block to remove | |
| myLayer.write(</td>); | |
| else | |
| aContext.nextBulletValue 1; | |
| // Write out the padding cell | |
| if (myPadding) | |
| myLayer.write(<td valigntop width1px>); | |
| writeTextStyle(myLayer, myNode); | |
| myLayer.write(myPadding); | |
| myLayer.write(</font></td>); | |
| // Use default text if we're editing and the text is | |
| empty | |
| var myText myNode.text; | |
| if (slideIsEditable && (myText)) myText | |
| DEFAULT_OUTLINE_STRING; | |
| // Write out the text cell | |
| myLayer.write(<td valigntop width99%>); | |
| if (myText) | |
| // Write the url start tag | |
| if (myNode.url) | |
| myLayer.write(startLinkTag(myNode.url)); | |
| // Write the text | |
| writeTextStyle(myLayer, myNode); | |
| myLayer.write(myText.escapeForHTML()); | |
| myLayer.write(</font>); | |
| // Write the url end tag | |
| if (myNode.url) myLayer.write(endLinkTag()); | |
| // Close up | |
| myLayer.write(myLayer.tableCloseTags()); | |
| myLayer.flush(); | |
| // Show the layer and offset the context by the size of | |
| the layer | |
| myLayer.style.zIndex aContext.zIndex; | |
| myLayer.show(); | |
| // Prepare the context for the next node | |
| aContext.top myLayer.getHeight() | |
| adjust(aContext.verticalSpacing); | |
| anOutline._rootNode.heightInPixels myLayer.getHeight() | |
| adjust(aContext.verticalSpacing); | |
| aContext.nextLayerIndex; | |
| // Render any subnodes | |
| if ((myNode.nodes null) && (myNode.nodes.length > 0)) | |
| // Store the context | |
| var subContext objectCopy(aContext); | |
| subContext.nextBulletValue 1; | |
| subContext.nodeBulletPrefix myText; | |
| // Configure the context for the subnodes | |
| var myIndent adjust(subContext.indentSpacing); | |
| subContext.left myIndent; | |
| subContext.width myIndent; | |
| if (myNode.nodeBulletType null) | |
| subContext.nodeBulletType myNode.nodeBulletType; | |
| if (myNode.indentSpacing null) | |
| subContext.indentSpacing myNode.indentSpacing; | |
| if (myNode.verticalSpacing null) | |
| subContext.verticalSpacing myNode.indentSpacing; | |
| // Render the subnodes | |
| renderOutlineNodes(myNode, subContext, isMove); | |
| // Get interesting stuff from the subContext | |
| aContext.nextLayerIndex subContext.nextLayerIndex; | |
| //aContext.effectStartTime subContext.effectStartTime; | |
| aContext.top subContext.top; | |
| /* | |
| * Utility for finding the firstnode, given any node | |
| */ | |
| function firstNode(aNode) | |
| if (aNode null aNode._rootNode null) | |
| return null; | |
| return aNode._rootNode.nodes0; | |
| // | |
| // Bulleting conversion utilities | |
| // | |
| /* | |
| * Convert a number to it's roman numeral equivalent | |
| * PENDING(RWK) - This method probably wants to live somewhere else | |
| */ | |
| var romanData 1000,1000, M, 900,100, C, 500, | |
| 500, D, 400,100, C, 100,100, C, 90,10, X, 50, | |
| 50, L, 40,10, X, 10,10, X, 9,1, I, 5,5, V, 4,1, I, 1, | |
| 1, I; | |
| function toRoman(aVal, isUppercase) | |
| var romanString ; | |
| while (aval > 0) | |
| for (var i 0; i < romanData.length; i) | |
| if (aVal > romanDatai0) | |
| aVal romanDatai1; | |
| romanString romanDatai2; | |
| break; | |
| return isUppercase romanString : romanString.toLowerCase(); | |
| function toLetter(aVal, isUppercase) | |
| return String.fromCharCode((isUppercase 64 : 96) (((aVal1) % | |
| 26) 1)); | |
[0146]
| TABLE 12 | ||
|---|---|---|
| Java code for creating the JavaScript data structure of a document. | ||
| package com.andgit.util; | ||
| import java.util.Collection; | ||
| import java.util.Iterator; | ||
| import java.util.Map; | ||
| /** | ||
| * This class helps to create JavaScript from other data structures. | ||
| */ | ||
| public class SXJavaScript | ||
| // | ||
| // STATIC METHODS | ||
| // | ||
| /** | ||
| * Puts a backslash () character in front of all characters | ||
| that | ||
| * need to be escaped in JavaScript strings, so that they are | ||
| not | ||
| * interpreted specially by the JavaScript interpreter. | ||
| * | ||
| * Currently that set of characters is: | ||
| * > | ||
| * > | ||
| * backspace > b | ||
| * form-feed > f | ||
| * newline > n | ||
| * Carriage return > r | ||
| * tab > t | ||
| */ | ||
| static public String escapeSpecialCharacters(String baseString) | ||
| // NOTE: Adding this method did not seem to effect our | ||
| // pages-per-second timing, so I don't think it's a problem. | ||
| // If it does show up as a problem in future performance tests, | ||
| // however, it can be implemented differently (e.g. with lookup | ||
| // tables), though it will be harder to read/debug/add to. | ||
| // > | ||
| baseString SXString.replaceSubstring(baseString, , | ||
| ); | ||
| // We now need to escape all quote () characters and | ||
| // some other characters, according to the JavaScript spec. | ||
| // > | ||
| baseString SXString.replaceSubstring(baseString, , ); | ||
| // backspace > b | ||
| baseString SXString.replaceSubstring(baseString, b, | ||
| b); | ||
| // form-feed > f | ||
| baseString SXString.replaceSubstring(baseString, f, | ||
| f); | ||
| // newline > n | ||
| baseString SXString.replaceSubstring(baseString, n, | ||
| n); | ||
| // Carriage return > r | ||
| baseString SXString.replaceSubstring(baseString, r, | ||
| r); | ||
| // tab > t | ||
| baseString SXString.replaceSubstring(baseString, t, | ||
| t); | ||
| return baseString; | ||
| /** | ||
| * Takes in a table of key/value pairs representing attribute | ||
| names and | ||
| * attribute values. | ||
| * The keys in this table must be of type String. | ||
| * The values may be of type: | ||
| * | ||
| * | String, Integer, Collection, or null | |
| * | ||
| * - If the value is of type Collection, it should be a | ||
| Collection | ||
| * of SXContentEntity type objects, so that it will generate the | ||
| * appropriate textual description when its toString() method | ||
| gets called. | ||
| * Collections will be translated into a JavaScript array. | ||
| * | ||
| * - If the value is of type Integer, and the value of the | ||
| Integer is | ||
| * 1, the value null (without quotes) will be written to the | ||
| JavaScript. | ||
| * | ||
| * If objectToRepresent is a Map, and there is a key in the named | ||
| name, then | ||
| * its value will be used to label that block of data, so given: | ||
| * name Outline1, and key value pairs for width, height, top | ||
| * and left, produces the following JavaScript output: | ||
| * | ||
| * Outline1: | ||
| * | width:92, | |
| * | height:18, | |
| * | top:4, | |
| * | left:4 | |
| * | ||
| * | ||
| * If quoteNumericValues is true, then the output will look | ||
| like this: | ||
| * Outline1: | ||
| * | width:92, | |
| * | height:18, | |
| * | top:4, | |
| * | left:4 | |
| * | ||
| * NOTE, however, that if numeric values aren't quoted, then | ||
| string | ||
| * fields which have only numeric values, such as Title (on | ||
| SXText) | ||
| * field with a value of 3, will be sent down unquoted, which | ||
| then | ||
| * causes JavaScript errors. | ||
| * Nevertheless, this means that some values, like slideID will | ||
| be | ||
| * sent down quoted, and will be interpretted as strings during | ||
| * arithmetic operations on the client, e.g. . | ||
| * The client, therefore, should validate what | ||
| * it *knows* to be numeric fields, and re-assign them the | ||
| numeric | ||
| * value of their string. This is the lesser of two evils (the | ||
| server | ||
| * knowing about types, vs. the client knowing about types). | ||
| * This whole dilemma is one of the few | ||
| * drawbacks of our typeless system. | ||
| * (the typing knowledge <b>could</b> actually be done on the | ||
| server-side | ||
| * via the classmaps, which SXPersistentPropertyHolder already | ||
| knows | ||
| * about, but the client needs to do field-by-field validation | ||
| * anyway, for debugging purposes, so we might as well let the | ||
| * client validate/massage their DOM) | ||
| * | ||
| * NOTE, also, that if the value associated with a key in a Map | ||
| * or Collection is not of type String, or is null, | ||
| * the value will <b>not</b> be quoted, regardless of the value | ||
| of | ||
| * quoteNumericValues. | ||
| * | ||
| * There will <B>not</B> be a final carriagereturn after the | ||
| final | ||
| * closing bracket (). | ||
| */ | ||
| static public SXIndentedStringBuffer | ||
| getJavaScriptRepresentationOfData(SXIndentedStringBuffer | ||
| indentBuffer, Object objectToRepresent, boolean quoteNumericValues) | ||
| if (objectToRepresent null) | ||
| Object aValue null; | ||
| boolean objectIsMap objectToRepresent instanceof Map; | ||
| boolean objectIsCollection objectIsMap && | ||
| objectToRepresent instanceof Collection; | ||
| // SOME KIND OF DATA CONTAINER... ITERATE OVER IT AND | ||
| CALL BACK RECURSIVELY. | ||
| if objectIsMap objectIsCollection) | ||
| String containerEncloserStartCharacter null; | ||
| String containerEncloserEndCharacter null; | ||
| Iterator anIterator; | ||
| boolean hasMoreElements; | ||
| boolean firstTime true; | ||
| // DO THIS STUFF ONCE, BEFORE PROCESSING THE CONTAINER | ||
| ELEMENTS | ||
| if (objectIsMap) | ||
| anIterator | ||
| ((Map)objectToRepresent).keySet().iterator(); | ||
| containerEncloserStartCharacter ; | ||
| containerEncloserEndCharacter ; | ||
| else | ||
| anIterator | ||
| ((Collection)objectToRepresent).iterator(); | ||
| containerEncloserStartCharacter ; | ||
| containerEncloserEndCharacter ; | ||
| indentBuffer.println(containerEncloserStartCharacter); | ||
| indentBuffer.indent(); | ||
| hasMoreElements anIterator.hasNext(); | ||
| while (hasMoreElements) | ||
| // DO THIS STUFF FOR EACH CONTAINER ELEMENT | ||
| if (firstTime) | ||
| indentBuffer.println(,); // Put a comma after the | ||
| item prior to us | ||
| else | ||
| firstTime false; | ||
| if (objectIsMap) | ||
| String aKey (String)(anIt erator.next()); | ||
| indentBuffer.print(aKey); | ||
| aValue ((Map)objectToRepresent).get(aKey); | ||
| indentBuffer.print(:); | ||
| else | ||
| // We must be a Collection... | ||
| aValue anIterator.next(); | ||
| // Now, let's call this method recursively on | ||
| value... | ||
| SXJavaScript.getJavaScriptRepresentationOfData(indentBuffer, aValue, | ||
| quoteNumericValues); | ||
| hasMoreElements anIterator.hasNext(); | ||
| // DO THIS STUFF ONCE, AFTER PROCESSING THE CONTAINER | ||
| ELEMENTS | ||
| indentBuffer.outdent(); | ||
| indentBuffer.println(); | ||
| indentBuffer.print(containerEncloserEnd Character); | ||
| // SXJavaScriptProducer... LET IT RE-CALL US WITH THE | ||
| HASHMAP IT WANTS SAVED | ||
| else if (objectToRepresent instanceof | ||
| SXJavaScriptProducer) | ||
| ((SXJavaScriptProducer)objectToRepresent).getJavaScriptRepresentation | ||
| (indentBuffer); | ||
| // FLAT, LEAF-NODE VALUE... JUST WRITE IT OUT... | ||
| else | ||
| boolean objectIsInteger false; // PENDING(kbern): see | ||
| below | ||
| boolean objectIsString objectToRepresent instanceof | ||
| String; | ||
| boolean quoteThisValue true;//PENDING(kbern) was false; | ||
| see below | ||
| /****** | ||
| PENDING(kbern): converting to number is no longer | ||
| desirable Note that this causes problems with | ||
| strings | ||
| that are integers AND have leading zeros, e.g. the | ||
| RGB color 002233 becomes 2233. | ||
| if (objectIsString) | ||
| try | ||
| objectToRepresent new | ||
| Integer((String)objectToRepresent); | ||
| catch (NumberFormatException anException) | ||
| // Quote non-numeric Strings if they're not empty | ||
| (though | ||
| // that case is caught in the previous else if | ||
| clause). | ||
| quoteThisValue true; | ||
| ********/ | ||
| objectIsInteger objectToRepresent instanceof Integer; | ||
| if (objectIsInteger) | ||
| if (((Integer)objectToRepresent).intValue() 1) | ||
| aValue null; | ||
| if (quoteNumericValues) | ||
| quoteThisValue true; | ||
| else if (objectToRepresent instanceof Boolean) | ||
| quoteThisValue false; // booleans are never quoted | ||
| String objectToRepresentString | ||
| objectToRepresent.toString(); | ||
| if (quoteThisValue) | ||
| indentBuffer.print(); | ||
| objectToRepresentString | ||
| SXJavaScript.escapeSpecialCharacters(objectToRepresentString); | ||
| indentBuffer.print(objectToRepresentString); | ||
| if (quoteThisValue) | ||
| indentBuffer.print(); | ||
| else | ||
| indentBuffer.print(null); | ||
| return indentBuffer; | ||
[0147] It is assumed that the content of a browser's web page is HTML. However, this needs not be true since more advanced browsers are capable of displaying other formats, most noteably, eXtensible Markup Language (XML). Therefore, the process described herein also fits other browser document formats and thus the HTML format is actually not a requirement for the process.
[0148] Although the invention is described herein with reference to the preferred embodiment, one skilled in the art will readily appreciate that other applications may be substituted for those set forth herein without departing from the spirit and scope of the invention.
[0149] Accordingly, the invention should only be limited by the Claims included below.
Claims
1. A system for delivering and rendering scalable Web pages, said system comprising:
a browser;
a script, which is associated with an interpretation code; and
a document object model;
wherein said script, when executed, creates a data structure that describes a document created by a page author; and
wherein said interpretation code interprets said data structure in a fashion that allows said data structure manipulate said document object model for the purpose of rendering said document to said browser.
2. The system of claim 1, wherein said browser may be any kind of Web browser that supports a scripting language with a means of modifying the contents of the displayed Web pages.
3. The system of claim 1, wherein said data structure can be optimized to include only the essential information of said document.
4. The system of claim 1, wherein said data structure and said interpretation code may be contained in a single file.
5. The system of claim 1, wherein said data structure may be separated out from said interpretation code.
6. The system of claim 1, wherein said data structure comprises:
a root object;
wherein said root object comprises an array of slides and each said slide is an object representing a single slide in a presentation; and
wherein each said slide comprises a plurality of content entities and each said content entity has a variety of properties.
7. The system of claim 6, wherein said root object further comprises:
an array of strings that contains the titles of each said slide in said presentation.
8. The system of claim 6, wherein said root object further comprises:
a first attribute, which is an index of the current slide in said presentation;
a second attribute, which is true for sample presentations;
a third attribute, which is true for style presentations;
a fourth attribute, which is true for template presentations;
a fifth attribute, which indicates the database ID of said presentation;
a sixth attribute, which indicates the total number of slides in said presentation; and
a seventh attribute, which indicates the type to which said object belongs.
9. The system of claim 6, wherein each said slide further comprises:
a first attribute, which indicates the type of effect to use when showing said slide;
a second attribute, which indicates the name of the layout that said presentation is based on;
a third attribute, which is a set of user supplied notes for said slide;
a fourth attribute, which indicates the title of said slide; and
a fifth attribute, which indicates the type to which said slide belongs.
10. The system of claim 9, wherein said first attribute comprises:
a first value, which is a set of slide elements to slide in from the right;
a second value, which is a set of slide elements to slide in from the left;
a third value, which is a set of slide elements to slide in from the bottom;
a fourth value, which is a set of slide elements to indicate slide in from the top;
a fifth value, which is a set of slide elements to flash briefly; and
a sixth value, which is a set of slide elements that reveals progressively on each mouse click.
11. The system of claim 6, wherein said content entities comprise:
a text entity;
an outline entity;
and an image entity;
wherein each said content entity comprises:
a plurality of attributes which collectively define the rectangle occupied by each said content entity;
an attribute to store each said content entity;
an attribute to indicate the name of each said content entity; and
an attribute to indicate the z-ordering of the layer entities in said slide.
12. The system of claim 11, wherein said text entity further comprises:
an attribute to define font point size;
an attribute to define font style;
an attribute to define font family;
an attribute to define font weight;
an attribute to define text color;
an attribute to define background color;
an attribute to define horizontal alignment;
an attribute to define vertical alignment; and
an attribute to define URL to navigate.
13. The system of claim 11, wherein said outline entity inherits all the attributes of said text entity and further comprises:
an attribute to define the type of bullet;
an attribute to define the value specifying how said bullet should look like; and
an attribute to define an array of sub-outlines.
14. The system of claim 11, wherein said image entity further comprises:
an attribute to define horizontal alignment;
an attribute to define background color;
an attribute to define the scaling mode to use when displaying said image;
an attribute to define URL of the image to display;
an attribute to define URL to navigate; and
an attribute to define vertical alignment.
15. The system of claim 14, wherein said attribute to define the scaling mode to use when displaying said image comprises:
a fit value, with which said image is scaled to fit exactly within the bounds of said slide;
a width value, with which said image is scaled, retaining the aspect ratio, so that the width of said image fits exactly in the bounds of said slide;
a height value, with which said image is scaled, retaining the aspect ratio, so that the height of said image fits exactly in the bounds of said slide; and
a tile value, with which said image is tiled at said image's native size to exactly fill the image bounds.
16. The system of claim 14, wherein said image entity comprises a background element, and wherein said background element always keeps its bounds corresponding to the bounds of said slide;
17. The system of claim 16, wherein said background element always maintains its z-index at zero.
18. A process for delivering and rendering scalable Web pages, said process comprises the steps of:
creating, by executing a script, a data structure that describes a document;
interpreting, by an interpretation code, said data structure in a fashion that allows said data structure to manipulate a document object model for the purpose of rendering said document to a browser;
wherein said document is automatically updated to reflect changes to said browser whenever said browser is resized.
19. The process of claim 18, wherein said data structure can be optimized to include only the essential information of said document.
20. The process of claim 18, wherein said data structure and said interpretation code may be contained in a single file.
21. The process of claim 18, wherein said data structure maybe separated out from said interpretation code.
22. A process for creating a document data structure includes the steps of:
using a web server to respond to a viewer's browser's request for a document;
retrieving or creating the content of said document in an appropriate fashion;
translating the content of said document into a block of script code;
embedding said script code into an HTML document which is returned to the viewer; and
in the viewer's browser, executing said block of script code.
23. The process of claim 22 and further comprising the step of:
performing, by said data structure, any necessary data validation.
24. The process of claim 22, wherein said step of executing a block of script code comprises the sub-steps of:
setting the background color;
creating a slide layer for presentation;
enabling the display of said slide layer;
initializing the address of said presentation and said slide;
initializing various slide elements inside said slide;
setting up the resize handler, and
rendering said slide into HTML and displaying said presentation in said browser.
25. The process of claim 22, wherein one or more said slide elements are text entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises,
setting up address for said text entities;
creating a layer for said text entities; and
enabling the display of said layer.
26. The process of claim 22, wherein one or more said slide elements are image entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:
setting up address for said image entities;
creating a layer for said image entities; and
enabling the display of said layer.
27. The process of claim 22, wherein one or more said slide elements are outline entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises the sub-sub-steps of:
setting up address for said outline entities; and
initializing outline nodes for said outline entities.
28. The process of claim 22, wherein said sub-step of rendering said slide into HTML and displaying said presentation in said browser further comprises the sub-sub-steps of:
getting the client screen sizes;
setting the clipping region of said slide layer;
rendering various slide elements inside said slide; and
flushing the output to said layer.
29. The process of claim 28, wherein one or more slide elements are text entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:
setting layer color and alignment;
generating the text to be displayed;
writing the URL start tag;
writing the style and said text; and
writing the URL end tag.
30. The process of claim 28 wherein one or more slide elements are image entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:
setting layer background color;
wring empty content string if slide is editable;
getting the URL of image source;
writing the URL start tag;
rendering said image; and
writing the URL end tag.
31. The process of claim 28, wherein one or more slide elements are outline entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:
setting up default properties;
creating and initializing a rendering context;
setting origin and available width;
rendering outline nodes with said rendering context; and
hiding unused layers.
32. A process for interpreting a document data structure, said process comprises the steps of:
identifying objects in said document data structure that needs to be rendered in the viewer's browser.
locating or creating the elements of the browser document object model, wherein said elements are used for rendering said document;
applying any transformations or other changes needed to accommodate the viewer's specific browser configuration to the elements of the browser document object model or the document data structure;
generating HTML needed to render said objects; and
applying said HTML into the elements of the browser document object model so that said document is displayed in said browser.
33. The process of claim 32, wherein said step of applying any transformations or other changes comprises the sub-steps of:
setting the background color;
creating a slide layer for presentation;
enabling the display of said slide layer;
initializing the address of said presentation and said slide;
initializing various slide elements inside said slide; and
setting up the resize handler.
34. The process of claim 33, wherein one or more said slide elements are text entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:
setting up address for said text entities;
creating a layer for said text entities; and
enabling the display of said layer.
35. The process of claim 33, wherein one or more said slide elements are image entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:
setting up address for said image entities;
creating a layer for said image entities; and
enabling the display of said layer.
36. The process of claim 33, wherein one or more said slide elements are outline entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises the sub-sub-steps of:
setting up address for said outline entities; and
initializing outline nodes for said outline entities.
37. The process of claim 32, wherein said step of generating HTML needed to render said objects comprises the sub-steps of:
getting the client screen sizes;
setting the clipping region of said slide layer;
rendering various slide elements inside said slide; and
flushing the output to said layer.
38. The process of claim 37, wherein one or more slide elements are text entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:
setting layer color and alignment;
generating the text to be displayed;
writing the URL start tag;
writing the style and said text; and
writing the URL end tag.
39. The process of claim 37 wherein one or more slide elements are image entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:
setting layer background color;
wring empty content string if slide is editable;
getting the URL of image source;
writing the URL start tag;
rendering said image; and
writing the URL end tag.
40. The process of 37, wherein one or more slide elements are outline entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:
setting up default properties;
creating and initializing a rendering context;
setting origin and available width;
rendering outline nodes with said rendering context; and
hiding unused layers.
41. A method for delivering and rendering scalable Web pages, said method comprises the steps of:
creating, by executing a script, a data structure that describes a document;
interpreting, by an interpretation code, said data structure in a fashion that allows said data structure to manipulate a document object model for the purpose of rendering said document to a browser;
wherein said document is automatically updated to reflect changes to said browser whenever said browser is resized.
42. The method of claim 41, wherein said data structure can be optimized to include only the essential information of said document.
43. The method of claim 41, wherein said data structure and said interpretation code may be contained in a single file.
44. The method of claim 41, wherein said data structure may be separated out from said interpretation code.
45. A method for creating a document data structure includes the steps of:
using a web server to respond to a viewer's browser's request for a document;
retrieving or creating the content of said document in an appropriate fashion;
translating the content of said document into a block of script code;
embedding said script code into an HTML document which is returned to the viewer; and
in the viewer's browser, executing said block of script code.
46. The method of claim 45 and further comprising the step of:
performing, by said data structure, any necessary data validation.
47. The method of claim 45, wherein said step of executing a block of script code comprises the sub-steps of:
setting the background color;
creating a slide layer for presentation;
is enabling the display of said slide layer;
initializing the address of said presentation and said slide;
initializing various slide elements inside said slide;
setting up the resize handler, and
rendering said slide into HTML and displaying said presentation in said browser.
48. The method of claim 45, wherein one or more said slide elements are text entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:
setting up address for said text entities;
creating a layer for said text entities; and
enabling the display of said layer.
49. The method of claim 45, wherein one or more said slide elements are image entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:
setting up address for said image entities;
creating a layer for said image entities; and
enabling the display of said layer.
50. The method of claim 47, wherein one or more said slide elements are outline entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises the sub-sub-steps of:
setting up address for said outline entities; and
initializing outline nodes for said outline entities.
51. The method of claim 47, wherein said sub-step of rendering said slide into HTML and displaying said presentation in said browser further comprises the sub-sub-steps of:
getting the client screen sizes;
setting the clipping region of said slide layer;
rendering various slide elements inside said slide; and
flushing the output to said layer.
52. The method of claim 51, wherein one or more slide elements are text entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:
setting layer color and alignment;
generating the text to be displayed;
writing the URL start tag;
writing the style and said text; and
writing the URL end tag.
53. The method of claim 51 wherein one or more slide elements are image entities, and wherein said sub-sub step of rendering. various slide elements inside said slide comprises the sub-sub-sub-steps of:
setting layer background color;
wring empty content string if slide is editable;
getting the URL of image source;
writing the URL start tag;
rendering said image; and
writing the URL end tag.
54. The method of claim 51, wherein one or more slide elements are outline entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:
setting up default properties;
creating and initializing a rendering context;
setting origin and available width;
rendering outline nodes with said rendering context; and
hiding unused layers.
55. A method for interpreting a document data structure, said method comprises the steps of:
identifying objects in said document data structure that needs to be rendered in the viewer's browser.
locating or creating the elements of the browser document object model, wherein said elements are used for rendering said document;
applying any transformations or other changes needed to accommodate the viewer's specific browser configuration to the elements of the browser document object model or the document data structure;
generating HTML needed to render said objects; and
applying said HTML into the elements of the browser document object model so that said document is displayed in said browser.
56. The method of claim 55, wherein said step of applying any transformations or other changes comprises the sub-steps of:
setting the background color;
creating a slide layer for presentation;
enabling the display of said slide layer;
initializing the address of said presentation and said slide;
initializing various slide elements inside said slide; and
setting up the resize handler.
57. The method of claim 56, wherein one or more said slide elements are text entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:
setting up address for said text entities;
creating a layer for said text entities; and
enabling the display of said layer.
58. The method of claim 56, wherein one or more said slide elements are image entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:
setting up address for said image entities;
creating a layer for said image entities; and
enabling the display of said layer.
59. The method of claim 56, wherein one or more said slide elements are outline entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises the sub-sub-steps of:
setting up address for said outline entities; and
initializing outline nodes for said outline entities.
60. The method of claim 55, wherein said step of generating HTML needed to render said objects comprises the sub-steps of:
getting the client screen sizes;
setting the clipping region of said slide layer;
rendering various slide elements inside said slide; and
flushing the output to said layer.
61. The method of claim 60, wherein one or more slide elements are text entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:
setting layer color and alignment;
generating the text to be displayed;
writing the URL start tag;
writing the style and said text; and
writing the URL end tag.
62. The method of claim 60 wherein one or more slide elements are image entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:
setting layer background color;
writing empty content string if slide is editable;
getting the URL of image source;
writing the URL start tag;
rendering said image; and
writing the URL end tag.
63. The method of 60, wherein one or more slide elements are outline entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:
setting up default properties;
creating and initializing a rendering context;
setting origin and available width;
rendering outline nodes with said rendering context; and
hiding unused layers.