JP2003521784A - スケーラブルなウェブページを配信およびレンダリングするためのシステムとプロセス - Google Patents

Abstract

(57)【要約】 【課題】 ブラウザに依存しない文書データ構造を開発すること。 【解決手段】 閲覧者のブラウザの制限に従うHTML文書を表示および再表示するためのシステムとプロセス。このシステムは、ブラウザ、スクリプト、および文書オブジェクトモデル(DOM)を有する。スクリプトは、データ構造と解釈コードを有する。DOMは、テキスト、画像、URLリンクなどのウェブページの要素を表す文書モデルである。プロセスは、スクリプトを使用して文書内の基本的な情報を記述する文書データ構造を作成するステップと、スクリプトがブラウザに文書をレンダリングする目的でDOMを操作できる方式で、解釈コードを使用してデータ構造を解釈するステップとを有する。ユーザイベントに応答してデータ構造を修正し、次いで、対応するHTMLを再生成することができ、従って、最初に作成された後に、閲覧者のブラウザに行われた変更を反映させるために文書を更新することができる。閲覧者がブラウザをサイズ変更すると、ページ要素を自動的にサイズ変更することができる。

Description

【発明の詳細な説明】

【０００１】著作権表示 この特許文書の開示の一部には、著作権保護の対象であるマテリアルが含まれ
ている。著作権所有者は、特許庁のファイルまたは記録の中に存在していると理
解される場合には、本特許文書または特許開示の複写複製を許可するが、それ以
外の場合は、すべての著作権権利を保持する。

【０００２】

【発明が属する技術分野】

本発明は、一般には、インターネット通信技術に関する。より詳細には、本発
明は、スケーラブルなウェブページを配信およびレンダリングするためのシステ
ムと方法に関する。

【０００３】

【従来の技術】

WWW（World Wide Web）文書の作成者らに共通するめんどうな問題として、自
分の文書の閲覧者のビューイング環境（特に文書が表示されるウィンドウの物理
的な寸法に関する環境）が非常に多岐にわたるという問題がある。このことは、
特に、作成者が、固有なレイアウト要件を有する文書を作成する場合に問題であ
る。WWW用の文書形式であるHTML（Hypertext Markup Language）の場合、スケー
ラブルなページ要素という形式でのサポートは、極めてわずかしか提供されてい
ない。多くの要素、特にテキストは、固有のサイズに固定されている。高い表示
解像度でブラウザ上に表示させると、低い解像度で表示させるときと比較して、
テキストの表示が非常に小さくなる。さらに、スケール処理のサポートを提供す
る方法が基本的なものであるため、たとえ何らかの形式のスケール処理をサポー
トする要素でさえも、制御するのが困難である。以上の理由から、WWW文書の一
貫性のあるレイアウトを開発することは、かなり困難である。

【０００４】 文書の作成者がこの問題に対処するための1つの方法は、JavaScriptなどの動
的なスクリプト言語を使用することである。これらの言語は、閲覧者の環境に関
する情報を検出してそれに応じて文書を修正する方法を提供する。しかなしなが
ら、これらの言語によって提供されるネイティブな文書オブジェクトコード（DO
M）は、多少の問題がある。Netscape Navigator 4の場合、必ずしもすべてのペ
ージ要素にアクセスできるわけではない。多くの要素は「書き込み専用」または
「読み取り専用」であるため、文書情報を格納するための信頼できる場所として
ネイティブ構造を使用することは不可能である。

【０００５】 Internet Explorer （4 & 5）のDOMは、逆に、場合によっては非常に複雑とな
ることがあり、このため、文書を修正すべき度合いを制約することが困難である
。

【０００６】 WWW作成者のこの問題に加えて、Netscape NavigatorとInternet Explorerによ
って使用されるDOMが、その性質において大幅に異なるという問題がある。両方
のブラウザをサポートするためには、個々のDOMと対話できる異なるスクリプト
を開発する必要がある。

【０００７】 望まれることは、ページの作成者が、ブラウザのDOMの制限を考慮する必要な
く、文書の関連する側面すべてに自由にアクセスおよび修正できる、ブラウザに
依存しない文書データ構造を開発することである。

【０００８】

【課題を解決するための手段】

本発明は、閲覧者のブラウザの制限に従うHTML文書を表示および再表示するた
めのシステムとプロセスを提供する。このシステムは、ブラウザ、スクリプト、
および文書オブジェクトモデル（DOM）を有する。スクリプトは、文書データ構
造と解釈コードを有する。本発明の望ましい実施例においては、文書データ構造
は、このシステム用に設計されたスライドプレゼンテーション・データ構造であ
る。DOMは、テキスト、画像、URLリンクなどのウェブページの要素を表す文書モ
デルである。

【０００９】 このシステムを使用する場合、ウェブ作成者は、HTML文書を作成する代わりに
、スクリプトから成る文書を作成する。このスクリプトは、実行されたときに、
文書内の基本的な情報を記述する文書データ構造を作成する。解釈コードは、ス
クリプトがブラウザに文書をレンダリングする目的でDOMを操作できる方式で、
このデータ構造を解釈する。

【００１０】 ウェブサーバに、文書のHTMLレンダリングの代わりに文書データ構造を閲覧者
のブラウザに提供させることによって、正しくサイズ処理された文書を作成する
のに必要なブラウザ情報が利用可能である場合、文書のHTMLを生成することがで
きる。これによって、文書のすべての要素(feature)を適切にサイズ処理 するこ
とができる。さらに、ユーザイベントに応答してデータ構造を修正し、次いで、
対応するHTMLを再生成することができる。従って、最初の作成後に、閲覧者のブ
ラウザに行われた変更を反映させるために文書を更新することができる。例えば
、閲覧者がブラウザをサイズ変更したときに、ページ要素を自動的にサイズ変更
することができる。

【００１１】 ブラウザに依存しないデータ構造を作成することによって、ページの作成者は
、ブラウザのDOMの制限を考慮する必要なく、文書の関連する側面すべてに自由
にアクセスおよび修正することができる。このブラウザ非依存性により、さらに
、作成者は、構造を解釈するための1つのスクリプトさえ開発すれば良く、異な
るブラウザDOMを解釈するために複数のスクリプトを開発する必要はない。

【００１２】

【発明を実施するための形態】

図1において、閲覧者のブラウザの制限に従うHTML文書を表示および再表示す
るためのシステム100は、ブラウザ110、DHTML文書オブジェクトモデル（DOM） 1
20、スクリプト130を有する。

【００１３】 ブラウザ110は、表示されたウェブページのコンテンツを修正するための何ら
かの手段（ブラウザ文書オブジェクトモデルとしても知られている）を有するス
クリプト言語をサポートする任意の種類のウェブブラウザとすることが出来る。

【００１４】 DHTML DOM 120は、テキスト、画像、URLリンクなどのウェブページの要素を表
す文書モデルである。

【００１５】 スクリプト130は、文書データ構造140と解釈コード150を有する。このスクリ
プトは、インラインスクリプト（ウェブページ文書のソースHTMLに含まれるスク
リプト）と、ウェブページ文書によって参照されるスクリプトファイルとの組み
合わせである。本発明の望ましい実施例においては、文書データ構造140は、こ
のシステム用に設計されたスライドプレゼンテーション・データ構造である。こ
の文書データ構造140の階層構造は、図2と表1〜8に示されている。

【００１６】 このシステムを使用すると、ウェブ作成者は、HTML文書を作成する代わりに、
スクリプト130から成る文書を作成する。このスクリプトは、実行されたときに
、文書内の基本的な情報を記述する文書データ構造140を作成する。解釈コード1
50は、スクリプトがブラウザに文書をレンダリングする目的でDHTML DOM 120を
操作できる方式で、文書データ構造140を解釈する。

【００１７】 文書データ構造を作成するためのプロセスは、以下のステップを有する。 1. ウェブサーバを使用して、閲覧者のブラウザによる文書の要求に応答するス テップ 2. 適切な方式で文書のコンテンツを取得または作成するステップ（例えば、フ ァイルまたはコンピュータのハードディスクドライブから文書を読み取る、 またはデータベースから情報を検索する、アルゴリズムを使用してコンテン ツを計算するなど） 3. 閲覧者のブラウザによって実行されたときに、文書のコンテンツを有効なス クリプトコードのブロックに変換するステップであって、その結果として、 アクセスまたは操作可能なデータ構造を作成するステップ 4. クライアントに返されるHTML文書にスクリプトコードを埋め込むステップ 5. 閲覧者のブラウザ内で、スクリプトブロックを実行するステップ（これは一 般にはブラウザによって自動的に実行される）

【００１８】 文書データ構造が作成されると、この文書データ構造は、オプションで、必要
な如何なるデータ検証も実行することができる。このステップは、必須ではない
が、ウェブサーバによって提供されるデータ構造をさらに書式処理、または検証
、最適化するために望ましいことが多い。

【００１９】 上記のプロセスのステップ5は、以下の副ステップを有する。 a. 背景色を設定する b. プレゼンテーション用のスライド層を作成する c. 当該スライド層の表示を可能にする d. 当該プレゼンテーションと当該スライドのアドレスを初期化する e. 当該スライドの中のさまざまなスライド要素を初期化する f. サイズ変更ハンドラを設定する g. 当該スライドをHTMLにレンダリングし、当該ブラウザに当該プレゼンテー ションを表示する

【００２０】 スライド要素がテキストエンティティである場合、上記プロセスの副ステップ
(e)は、以下の副副ステップを有する。 (aa) 当該テキストエンティティのアドレスを設定する (ab) 当該テキストエンティティの層を作成する (ac) 当該層の表示を可能にする

【００２１】 当該スライド要素が画像エンティティである場合、副ステップ(e)は以下の副
副ステップを有する。 (ba) 当該画像エンティティのアドレスを設定する (bb) 当該画像エンティティの層を作成する (bc) 当該層の表示を可能にする

【００２２】 当該スライド要素がアウトラインエンティティである場合、副ステップ(e)は
以下の副副ステップを有する。 (ca) 当該アウトラインエンティティのアドレスを設定する (cb) 当該アウトラインエンティティのアウトラインノードを初期化する

【００２３】 上記プロセスの副ステップ(g)は、以下の副副ステップを有する。 (da) クライアントの画面サイズを取得する (db) 当該スライド層のクリッピング領域を設定する (dc) 当該スライドの中のさまざまなスライド要素をレンダリングする (de) 出力を当該層に送る

【００２４】 副ステップ(g)において、スライド要素がテキストエンティティである場合、
副副ステップ(dc)は以下の副副副ステップを有する。 (a1) 層の色と位置合わせを設定する (a2) 表示するテキストを生成する (a3) URL開始タグを書き込む (a4) スタイルと当該テキストを書き込む (a5) URL終了タグを書き込む

【００２５】 副ステップ(g)において、スライド要素が画像エンティティである場合、副副
ステップ(dc)は以下の副副副ステップを有する。 (b1) 層の背景色を設定する (b2) スライドが編集可能である場合に、空のコンテンツ文字列を書き込む (b3) 画像ソースのURLを取得する (b4) URL開始タグを書き込む (b5) 当該画像をレンダリングする (b6) URL終了タグを書き込む

【００２６】 副ステップ(g)において、スライド要素がアウトラインエンティティである場
合、副副ステップ(dc)は以下の副副副ステップを有する。 (c1) デフォルトのプロパティを設定する (c2) レンダリングコンテキストを作成および初期化する (c3) 起点と利用可能な幅を設定する (c4) 当該レンダリングコンテキストによってアウトラインノードをレンダリ ングする (c5) 使用されない層を隠す

【００２７】 文書データ構造を解釈するプロセスは、以下のステップを有する。 1. ウェブサーバによってサポート／処理されていて、閲覧者のブラウザ内でレ ンダリングする必要のある文書データ構造内のオブジェクトを識別する。 2. 文書のレンダリングに使用されるブラウザDOMの要素を位置確認または作成 する。 3. 閲覧者の固有なブラウザ構成設定に対応するために必要な変換またはその他 の変更を、DOM要素または文書データ構造に適用する。 4. 当該オブジェクトをレンダリングするために必要なHTMLを生成する。 5. そのHTMLをDOM要素に適用することにより、HTMLをブラウザに表示させる。

【００２８】 上記プロセスのステップ3は、以下の副ステップを有する。 a. 背景色を設定する b. プレゼンテーション用のスライド層を作成する c. 当該スライド層の表示を可能にする d. 当該プレゼンテーションと当該スライドのアドレスを初期化する e. 当該スライドの中のさまざまなスライド要素を初期化する f. サイズ変更ハンドラを設定する

【００２９】 スライド要素がテキストエンティティである場合、上記プロセスの副ステップ
(e)は、以下の副副ステップを有する。 (aa) 当該テキストエンティティのアドレスを設定する (ab) 当該テキストエンティティの層を作成する (ac) 当該層の表示を可能にする

【００３０】 当該スライド要素が画像エンティティである場合、副ステップ(e)は以下の副
副ステップを有する。 (ba) 当該画像エンティティのアドレスを設定する (bb) 当該画像エンティティの層を作成する (bc) 当該層の表示を可能にする

【００３１】 当該スライド要素がアウトラインエンティティである場合、副ステップ(e)は
以下の副副ステップを有する。 (ca) 当該アウトラインエンティティのアドレスを設定する (cb) 当該アウトラインエンティティのアウトラインノードを初期化する

【００３２】 上記プロセスのステップ4は、以下の副ステップを有する。 (da) クライアントの画面サイズを取得する (db) 当該スライド層のクリッピング領域を設定する (dc) 当該スライドの中のさまざまなスライド要素をレンダリングする (de) 出力を当該層に送る

【００３３】 スライド要素がテキストエンティティである場合、ステップ4下の副ステップ(
dc)は以下の副副ステップを有する。 (a1) 層の色と位置合わせを設定する (a2) 表示するテキストを生成する (a3) URL開始タグを書き込む (a4) スタイルと当該テキストを書き込む (a5) URL終了タグを書き込む

【００３４】 スライド要素が画像エンティティである場合、ステップ4の下の副ステップ(dc
)は以下の副副ステップを有する。 (b1) 層の背景色を設定する (b2) スライドが編集可能である場合に、空のコンテンツ文字列を書き込む (b3) 画像ソースのURLを取得する (b4) URL開始タグを書き込む (b5) 当該画像をレンダリングする (b6) URL終了タグを書き込む

【００３５】 スライド要素がアウトラインエンティティである場合、ステップ4下の副ステ
ップ(dc)は以下の副副ステップを有する。 (c1) デフォルトのプロパティを設定する (c2) レンダリングコンテキスを作成および初期化する (c3) 起点と利用可能な幅を設定する (c4) 当該レンダリングコンテキストによってアウトラインノードをレンダリ ングする (c5) 使用されない層を隠す

【００３６】 ウェブサーバに、文書のHTMLレンダリングの代わりに、文書データ構造（文書
を記述するデータ構造）をウェブブラウザに提供させることによって、正しくサ
イズ処理された文書を作成するのに必要なブラウザ情報が利用可能である場合、
文書のHTMLを生成することができる。これによって、文書のすべての要素を適切
にサイズ処理することができる。さらに、ユーザイベントに応答してデータ構造
を修正（および対応するHTMLを次いで再生成）することができる。従って、最初
の作成後に、閲覧者のブラウザに行われた変更を反映させるために文書を更新す
ることができる。例えば、閲覧者がブラウザをサイズ変更したときに、ページ要
素を自動的にサイズ変更することができる。

【００３７】 従って、ブラウザに依存しないデータ構造を作成することによって、ページの
作成者は、ブラウザのDOMの制限を考慮する必要なく、文書の関連する側面すべ
てに自由にアクセスおよび修正することができる。このブラウザ非依存性により
、さらに、作成者は、構造を解釈するための1つのスクリプトのもを開発すれば
良く、異なるブラウザDOMを解釈するために複数のスクリプトを開発する必要は
ない。

【００３８】 このことの副次的な利点として、もっとも基本的な情報のみを含むように、作
成者によって定義されるデータ構造を最適化することができる。これにより、ス
クリプトは同等のHTMLよりずっと小さくなり、特に狭帯域幅の通信回線を介して
の転送時間が短縮されることがある。

【００３９】 文書データ構造と解釈コードは、1つのファイルに含めることができる。これ
により、転送と移植がより容易になるが、各文書と一緒に解釈コードを送信する
必要がある。

【００４０】 文書データ構造と解釈コードの本質的な違いは、状態の1つと挙動である。文
書データは、文書を表示するために必要な状態を表し、関連付けられる挙動は、
わずかであるか、またはまったくない。解釈コードは、文書データ構造を理解し
てそのHTML表現を作成するために必要な挙動を提供する。

【００４１】 解釈コードは、文書データ構造コードから分けることができる。このことは、
より魅力的な解決策となることが予測される。その理由は、これによりブラウザ
は、あとから別の類似する文書に使用できるように解釈コードをキャッシュに入
れておくことができるためである。

【００４２】 図2は、文書データ構造140の階層構造を示すブロック線図である。第一層は、
SXPresentation 200であり、これはプレゼンテーションデータ構造のルートオブ
ジェクトである。これは、第二層におけるSXSlidesの配列を含む。

【００４３】 SXSlide 210は、プレゼンテーション内の1つのスライドを表すオブジェクトで
ある。これは、第三層における任意の数のSXContentEntities 220を含む。

【００４４】 SXContentEntity 220は、多数のタイプのスライド要素の1つの抽象表現である
。この場合のタイプとして、SXText 230、SXOutline 240、SXImage 250が含まれ
る。

【００４５】 SXOutline 240自体は、別の副アウトライン260を含む。

【００４６】 プレゼンテーションデータ構造内のこれらの各エンティティは、さまざまなプ
ロパティが関連付けられている。これらのプロパティは、以下の表に説明されて
いる。

【００４７】 このシステムは、限定的なトークン置換機能をサポートする。表1は、(1)認識
されるトークン、(2)置換が行われる範囲、(3)置換される値、を示す。

【００４８】 表1. トークンの置換

【００４９】 追加のトークンは、「%TokenName%」表記法を使用する必要がある。

【００５０】 トークン置換は、文字列完全一致方式を使用して行われ、前後の「%」文字を
含めてトークンに正確に一致するテキストのみが置換される。しかしながら、現
時点では、「%」文字をエスケープする方法がなく、従って、例えば、SlideNumb
er要素内に文字列「%SlideNumber%」を表示させる方法はない。

【００５１】 表2〜表8は、各種のプロパティのタイプをリストしてある。このタイプは、オ
ブジェクトの意味タイプ(semantic type)を記述し、必ずしもデータ型ではなく
、例えば整数型としてリストされているzIndexプロパティは、文字列データ型に
含まれる。型フィールドは、表2にリストされている。

【００５２】 表2. 型フィールド

【００５３】 表3. SXPresentation

【００５４】 表4. SXSlide

【００５５】 表5. 抽象SXContentEntity

【００５６】 表6. 抽象SXContentEntityの全属性を継承するSXText

【００５７】 表7. SXTextの全属性を継承するSXOutlineエンティティ

【００５８】 表8. 抽象SXContentEntityの全属性を継承するSXImage

【００５９】 このシステムにおいては、名前が「Background」であるSXImageエンティティ
は、特殊に扱われる。このコンテンツエンティティは、スライドの背景を記述し
、次のように扱われる。 その境界は、常にスライドの境界に正確に一致する。 そのzインデックスは、常に0に設定される。

【００６０】 表9は、文書データ構造の概要を示すJavaScriptの一部である。このサンプル
の場合、文書は、プレゼンテーション文書からのスライドである。表10は、スラ
イドのデータ構造を解釈するJavaScriptである。表11は、アウトラインのデータ
構造を解釈するJavaScriptである。表12は、（データベースから検索された）任
意のハッシュマップ(hashmap)を閲覧者のブラウザにおけるJavaScriptデータ構
造に変換するためにウェブサーバによって使用されるJavaソースコードである。

【００６１】 表9. プレゼンテーション文書からのスライド用のJavaScript ___________________________________________ 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.SXOutlin
e', 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.SXOutlin
e', 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.jp
g', 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:'1Outline+1Image-2', 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, Indonesia!\n\n\'Til then...\n-Rosie' ], isSample:false };

【００６２】 ___________________________________________ 表10. スライドのデータ構造を解釈するJavaScript ________________________________________________ function CXSlide() {}; CXSlide.version = 1; CXSlide.name = 'Slide'; CXSystem.registerLibrary(CXSlide); /**************************/ // // Global vars // // The last width and height of the window (only used on NS4) var lastWidth=0, lastHeight=0; // Flag for turning DOM validation on and off var DEBUG_DOM = false; debugRegisterFlag('DEBUG_DOM'); // Error string var WARNING_NO_SLIDE_LAYER = 'Unable to locate the slide layer. A tempor
ary one will be created but the quality of this page will be degraded.';
// The name of the layer that contains the slide var SLIDE_NAME = 'Slide'; // The name of the layer that contains the background var BACKGROUND_NAME = 'Background'; // The virtual width, height, and diagonal of the slide var V_WIDTH = 1024; var V_HEIGHT = 768; var V_DIAG = Math.sqrt(V_WIDTH*V_WIDTH + V_HEIGHT*V_HEIGHT); // Default strings to show var DEFAULT_DIRECTIONS = (ie4) ? 'Double click' : 'Click here and choose
"Properties"'; var DEFAULT_TEXT_STRING = 'to edit'; var DEFAULT_IMAGE_STRING = 'to specify image'; // Types of content elements var CLASS_PACKAGE = 'com.iamaze.presentation'; var PRESENTATION_CLASS = CLASS_PACKAGE + '.SXPresentation'; var SLIDE_CLASS = CLASS_PACKAGE + '.SXSlide'; var TEXT_CLASS = CLASS_PACKAGE + '.contenttype.SXText'; var IMAGE_CLASS = CLASS_PACKAGE + '.contenttype.SXImage'; var OUTLINE_CLASS = CLASS_PACKAGE + '.contenttype.SXOutline'; // Constants for the 'scale' field of image entities var SCALE_NONE = null; var SCALE_FIT = 'fit'; var SCALE_WIDTH = 'width'; var SCALE_HEIGHT = 'height'; var SCALE_TILE = 'tile'; // The path to the shim image var SHIM_IMAGE = '/html/images/shim.gif'; // Define and set variable indicating whether or not the slide can be ed
ited var slideIsEditable = false; // The layer containing the slide var slideLayer = null; // Flag indicating whether or not this is the first rendition of the pag
e var slideIsRendered = false; // The width of the client document area var clientWidth = V_WIDTH; var clientHeight = V_HEIGHT; // A prefix we use to uniquely name our images var IMAGE_NAME_PREFIX = "iamaze" // The scale factors we use to resize the slide var xScale=1.0; var yScale=1.0; var scale=1.0; // PENDING(RWK) - Quick patch to get the new data structure working var slide = presentation.slides[0]; var slideContent = slide.contentEntities; var resizeTimeout = null; var slideResizeInterval = null; /* * Called during document.onload() */ CXSlide.onload = function() { if (ns4 || !isRenderingEnabled()) setShowingBatched(true); // Set the background color if we're not editing if (!slideIsEditable && slide.contentEntities.Background.backgroundColor) { document.bgColor = slide.contentEntities.Background.backgroundCol
or; } // Get the layer containing the slide slideLayer = getNamedLayer(SLIDE_NAME); if (slideLayer == null) { warning(WARNING_NO_SLIDE_LAYER); slideLayer = newNamedLayer(SLIDE_NAME, null); slideLayer.setSize(640, 480); slideLayer.setOrigin(200,150); } slideLayer.show(); // Initialize the presentation & slide address presentation._address = presentation.presentationID; setupEntity(presentation.slides[0], 'Slide', SLIDE_CLASS, presentati
on); // slideCacheAddress(); // Init the various slide elements for (var myName in slideContent) { var myContent = slideContent[myName]; setupEntity(myContent, myName, myContent.type, slide); } // Mark the last known width and height for NS resize bug workaround // (See comments in slideResize() for more details) if (ns4) { lastWidth = window.innerWidth; lastHeight = window.innerHeight; } // Set up the resize handler if (!ns4 || !slideIsEditable) { window.onresize = slideResize; } else { // PENDING(RWK) - NS4 workaround: In NS4.5/4.7, the resize event // doesn't appear to be getting sent in the edit slide page. We'v
e // been unable to pin this down to anything more than the page jus
t // being pretty complex (layer-wise). To work around this, we set // up a timer that to call the resize handler every second or so. // This works because, on Netscape, this handler only does // something if the window actually changes size. slideResizeInterval = setInterval('slideResize();', 1000); } // Render the slides render(); if (ns4) setShowingBatched(false); slideIsRendered = true; } /* * The Document Type Definition we use to do some checking of the DOM in
tegrity * * The fields are: * attributeName, datatype, required/optional, defaultvalue * * the defaultValue may be left out, in which case null is used */ var dtd = { SXPresentation:[ ['currentSlideIndex', 'number', 'required'], ['presentationID', 'string', 'required'], ['slideCount', 'number', 'required'], ['slides', 'object', 'required'], ['slideTitles', 'object', 'required'] ], SXSlide:[ ['title', 'string', 'optional'], ['layoutName', 'string', 'optional'], ['contentEntities', 'object', 'required'], ['notes', 'string', 'optional'] ], SXImage:[ ['align', 'string', 'optional'], ['backgroundColor', 'color', 'optional'], ['height', 'string', 'optional'], ['left', 'string', 'optional'], ['scale', 'string', 'optional'], ['src', 'string', 'optional'], ['top', 'string', 'optional'], ['verticalAlign', 'string', 'optional'], ['width', 'string', 'optional'], ['zIndex', 'number', 'optional'] ], SXText:[ ['align', 'string', 'optional'], ['backgroundColor', 'color', 'optional'], ['color', 'color', 'optional'], ['fontFamily', 'string', 'optional'], ['fontSize', 'number', 'optional'], ['fontStyle', 'string', 'optional'], ['fontWeight', 'string', 'optional'], ['height', 'string', 'optional'], ['left', 'string', 'optional'], ['text', 'string', 'optional'], ['top', 'string', 'optional'], ['url', 'string', 'optional'], ['verticalAlign', 'string', 'optional'], ['width', 'string', 'optional'], ['zIndex', 'number', 'optional'] ], SXOutline:[ ['align', 'string', 'optional'], ['backgroundColor', 'color', 'optional'], ['color', 'color', 'optional'], ['fontFamily', 'string', 'optional'], ['fontSize', 'number', 'optional'], ['fontStyle', 'string', 'optional'], ['fontWeight', 'string', 'optional'], ['height', 'string', 'optional'], ['left', 'string', 'optional'], ['nodeBulletType', 'string', 'optional'], ['nodeBulletValue', 'any', 'optional'], ['nodes', 'object', 'optional'], ['text', 'string', 'optional'], ['top', 'string', 'optional'], ['url', 'string', 'optional'], ['verticalAlign', 'string', 'optional'], ['width', 'string', 'optional'], ['zIndex', 'number', 'optional'] ] }; // Run the dom check setStatus('Validating DOM'); if (presentation.currentSlideIndex) presentation.currentSlideIndex = par
seInt(presentation.currentSlideIndex); validateDOM(presentation); setStatus(''); /* * Methods to report an error in the DOM */ function domWarning(aProperty, aString) { if (DEBUG_DOM) debugWriteln('DOM Warning (' + aProperty + '): ' + aS
tring); } function domError(aProperty, aString) { debugWriteln('DOM Error (' + aProperty + '): ' + aString); } /* * Validate the integrity of the dom */ function validateDOM(aNode) { var myConstraints; // Select which set of constraints we want if (aNode.type == PRESENTATION_CLASS) { myConstraints = dtd.SXPresentation; } else if (aNode.type == SLIDE_CLASS) { myConstraints = dtd.SXSlide; } else if (aNode.type == IMAGE_CLASS) { myConstraints = dtd.SXImage; } else if (aNode.type == TEXT_CLASS) { myConstraints = dtd.SXText; } else if (aNode.type == OUTLINE_CLASS) { myConstraints = dtd.SXOutline; } else { debugWriteln('DOM Error: Unrecognized type - ' + aNode.type); debugObject(aNode); return; } // Check each property in the constraints for (var i=0; i < myConstraints.length; i++) { var myProperty = myConstraints[i][0]; var myType = myConstraints[i][1]; var myConstraint = myConstraints[i][2]; var valType = typeof(aNode[myProperty]); if (valType == UNDEFINED) { domError(myProperty, 'Undefined property. Setting to null.
'); aNode[myProperty] = null; } else { var myVal = aNode[myProperty]; if (myVal == null) { if (myConstraint == 'required') { domError(myProperty, 'Required property not set'); } } else { if (valType != myType) { if (myType == 'number') { domWarning(myProperty,'Recasting to ' + myType); aNode[myProperty] = myVal*1; } else if (myType == 'string') { domWarning(myProperty,'Recasting to ' + myType); aNode[myProperty] = myVal + ''; } else if (myType == 'color') { // PENDING(RWK) - Remove this when we no longer ha
ve problems with // colors being set to unexpected values if ((myVal == UNDEFINED) || ((myVal.search(/[^0-9,a-f,A-F]/) == -1) && (myVal.length != 6))) { domError(myProperty, 'Bad color value "' + myVal +
'". Setting to null.'); aNode[myProperty] = null; } else { } } else if (myType != 'any') { domError(myProperty, 'Can\'t convert to ' + myType); } } } } } // Go to the next node if (aNode.type == PRESENTATION_CLASS) { myConstraints == dtd.SXPresentation; validateDOM(aNode.slides[0]); } else if (aNode.type == SLIDE_CLASS) { if (aNode.contentEntities != null) { for (var myName in aNode.contentEntities) { validateDOM(aNode.contentEntities[myName]); } } } else if (aNode.type == OUTLINE_CLASS) { // PENDING(RWK) - Check for image bullet types and turn them // into bullets. // Once we're confident there aren't any more image bullets in // presentations, this can check can be removed. if (aNode.nodeBulletType == 'image') { aNode.nodeBulletType = 'text-symbol'; aNode.nodeBulletValue = 9679; domWarning(myProperty,'Image bullet found. (Converting to a s
ymbol bullet, but you should do this manually to avoid this warning in t
he future.)'); } // Check the subnodes of this node if (aNode.nodes != null) { for (var i=0; i < aNode.nodes.length; i++) { validateDOM(aNode.nodes[i]); } } } // Cache the urls of images that we want to preload if (aNode.type == IMAGE_CLASS) { CXUtil.preloadImage(aNode.src); } else if (aNode.type == OUTLINE_CLASS) { if (aNode.nodeBulletType == 'image') { CXUtil.preloadImage(aNode.nodeBulletValue); } } } /* * Resize handler to manage resizing of the slide */ function slideResize(anEvent) { if (ns4) { // PENDING(RWK) - NS4 workaround: Netscape massacres javascript // code when the window is resized. We detect actual window size // changes and force a complete refresh of the document. (The // downside of this is that all javascript state is lost.) if ((lastWidth != window.innerWidth) || (lastHeight != window.innerHeight)) { if (slideResizeInterval) { clearInterval(slideResizeInterval); slideResizeInterval = null; } if (resizeTimeout) clearTimeout(resizeTimeout); window.location.href = window.location.href; } } else { if (!slideIsEditable) { if ((typeof(playbackControls) != UNDEFINED) && playbackControls.isVisible()) { playbackControls.hide(); } render(); } } return false; } /* * This function is called whenever the address needs to be set */ function setAddress(myContent, myName, myParent) { // Set the name and address of the content object myContent._name = myName; myContent._subtype = myContent._name.replace(/[0-9]/g, ''); if (myContent.type == PRESENTATION_CLASS) { myContent._address = presentation.presentationID; } else if (myContent.type == SLIDE_CLASS) { myContent._address = myParent._address + '.slides[' + presentation.currentSlideIndex + ']'; } else { myContent._address = slide._address + '.contentEntities[' + myContent._name + ']'; } } /* * Call this to turn off rendering */ function setRenderingEnabled(aFlag) { // NB : this may be set in the html if (typeof(renderingDisableLevel) == UNDEFINED) renderingDisableLeve
l = 0; if (aFlag && renderingDisableLevel > 0) { renderingDisableLevel--; } else { renderingDisableLevel++; } } /* * Is rendering turned off */ function isRenderingEnabled() { if (typeof(renderingDisableLevel) == UNDEFINED) { return true; } return (renderingDisableLevel <= 0); } /* * This function runs various setups for a new entity. * It is only called by newEntity(). //PENDING(HJK) this should maybe be used in slideInit and slideCache add
ress */ function setupEntity(myContent, myName, myClass, myParent) { myContent.type = myClass; setAddress(myContent, myName, myParent); if (myContent.type == OUTLINE_CLASS) initOutline(myContent); if ((myContent.type == TEXT_CLASS) || (myContent.type == IMAGE_CLASS)) { // Create the layer we'll need for the object myContent._layer = newNamedLayer(myName, slideLayer.layer); // Create association between content and layer myContent._layer._content = myContent; // Make the layer visible myContent._layer.show(); } } // // Size caching methods // /* * Cache the address information of DOM objects */ function slideCacheAddress() { // Initialize the presentation & slide address presentation._address = presentation.presentationID; slide._address = presentation._address + '.slides[' + presentation.currentSlideIndex + ']'; // Init the various slide elements for (var myName in slideContent) { var myContent = slideContent[myName]; // Set the name and address of the content object setAddress(myContent, myName, slide); if (myContent.type == OUTLINE_CLASS) { outlineCacheAddress(myContent); } } } /* * Update any geometry we're interested in */ function cacheSizes() { // Use the slide layer width/height to find the scaling factors if (ns4 && slideIsEditable) { // PENDING(RWK) - Unfortunately on netscape the Slide layer // may be clipped (e.g. if the window is really small). There
's // know way to know what the layer size is supposed to be. // So, to make sure the elements are shown at the proper size // during editing (the only time this is really a problem) // we hard code the size here. clientWidth = 560; clientHeight = 420; } else { var myBounds = slideLayer.getBounds(); clientWidth = myBounds.width; clientHeight = myBounds.height; } /* PENDING(RWK) - Code to use the window dimensions as the slide size if (ns4) { clientWidth = window.innerWidth; clientHeight = window.innerHeight; } else { clientWidth = document.body.clientWidth; clientHeight = document.body.clientHeight; } */ // Figure the scaling factors xScale = clientWidth/V_WIDTH; yScale = clientHeight/V_HEIGHT; scale = (xScale < yScale) ? xScale : yScale; // Use this to scale based on the diagonal of the display area // scale = Math.sqrt(clientWidth*clientWidth + clientHeight*clientHe
ight)/V_DIAG; } // // Bounds retrieval methods // /* * Translate the dimensions of a layout object to real layer coordinates */ function getAdjustedBounds(aContent) { var myBounds = new Object(); if ((aContent.left != null) && (typeof(aContent.left) == 'string') && (aContent.left.lastIndexOf('%') != -1)) { myBounds.left = parseInt(aContent.left)*clientWidth/100; } else { myBounds.left = (myBounds.left != null) ? parseInt(aContent.left)
: null; } if ((aContent.top != null) && (typeof(aContent.top) == 'string') && (aContent.top.lastIndexOf('%') != -1)) { myBounds.top = parseInt(aContent.top)*clientHeight/100; } else { myBounds.top = (myBounds.top != null) ? parseInt(aContent.top) : n
ull; } if ((aContent.width != null) && (typeof(aContent.width) == 'string') && (aContent.width.lastIndexOf('%') != -1)) { myBounds.width = parseInt(aContent.width)*clientWidth/100; } else { myBounds.width = (myBounds.width != null) ? parseInt(aContent.widt
h) : null; } if ((aContent.height != null) && (typeof(aContent.height) == 'string') && (aContent.height.lastIndexOf('%') != -1)) { myBounds.height = parseInt(aContent.height)*clientHeight/100; } else { myBounds.height = (myBounds.height != null) ? parseInt(aContent.he
ight) : null; } myBounds.zIndex = aContent.zIndex; return myBounds; } /* * Return a value scaled by the generic scaling factor */ function adjust(aNum) { var myVal = aNum*scale; return (isNaN(myVal)) ? aNum : Math.round(myVal); } /* * Return a value scaled by the width scaling factor */ function adjustX(aNum) { if (typeof(aNum) != 'number') return aNum; return Math.round(aNum*xScale); } /* * Return a value scaled by the height scaling factor */ function adjustY(aNum) { if (typeof(aNum) != 'number') return aNum; return Math.round(aNum*yScale); } // // Rendering methods // /* * Render all the layers named in the content object */ function render() { // Get the client screen size cacheSizes(); if (!isRenderingEnabled()) return; // Set the clipping region of the slide layer // // PENDING(RWK) - NS4 workaround: Without this clip, NS4 // clips the slide to approximatlely 1/2 it's width slideLayer.setClipRect(0, 0, clientWidth, clientHeight); // Render each content element for (var myName in slideContent) { setStatus('Rendering (' + myName + ')'); renderContent(myName); } } /* * Need this on netscape so we can fix the display (not doneyet) */ function hasTransparentImages() { for (var myName in slideContent) { var myContent = slideContent[myName]; if (myContent.type == IMAGE_CLASS && myContent.backgroundColor == null) { return true; } } return false; } /* * Write the contents associated with a layer */ function renderContent(aName, isMove) { if (!isRenderingEnabled()) return; // PENDING(RWK) - Minor hack to make sure we render an entire outlin
e, even // if we're passed the name of one of the subnodes // (Also note that the regex is not supposed to be a string! Very wi
erd.) aName = aName.replace(/:.*/g, ''); // Get references to the properties var myContent = slideContent[aName]; // Get the adjusted bounds (as a separate object so that if the wind
ow // is resized, we still have the original specification to recompute // from.) var myBounds = getAdjustedBounds(myContent); // Get the layer the content will be rendered into var myLayer = myContent._layer; // For easy content... if (myContent.type != OUTLINE_CLASS) { // Error check for missing layer if (!myLayer) { warning('Unable to locate layer "' + aName + '"'); return; } // Explicitely set the layer index. myLayer.style.zIndex = myBounds.zIndex; // Set the layer position myLayer.setOrigin(myBounds.left, myBounds.top); if (!isMove) { myLayer.setSize(myBounds.width, myBounds.height); // Set the default alignments myLayer.setAlign('center'); myLayer.setVerticalAlign('middle'); if (ns4) { // Netscape does not understand 0 dimension, it reads th
is as unbounded if (!myBounds.width || myBounds.width <= 0) myBounds.wid
th = 1; if (!myBounds.height || myBounds.height <= 0) myBounds.h
eight = 1; } // Call the appropriate renderer, based on type if (aName == BACKGROUND_NAME) { renderBackground(myLayer, myContent, myBounds); } else if (myContent.type == TEXT_CLASS) { renderText(myLayer, myContent, myBounds); } else if (myContent.type == IMAGE_CLASS) { renderImage(myLayer, myContent, myBounds); } // Flush what we've written to the layer myLayer.flush(); } } else { // Special case for outline renderOutline(myLayer, myContent, myBounds, (!isMove) ? false : tr
ue); } } /* * All hyperlinks come through this method, to apply rules to URLs, and
display. * * URL munging: * any string with an "@" w/o a protocol is assimed to be a mailto: * any plain number is assumed to be a slideNUMBER (as distinct from a s
lideID) * any string starting with "?" are assumed to be a link to another pres
entation on this host * any string (other than the ones above) w/o a protocol get "http://" a
dded to them. * * Display: * any iamaze URL is shown in this window * all ther windows（登録商標） appear in a separate window */ function startLinkTag(aURL) { var myLink = null; var myTarget = 'target="user_link"'; if (slideIsEditable) { myLink = '<u>'; } else { if (aURL.indexOf(':') == -1) { if (aURL.indexOf('@') != -1) { aURL = "mailto:" + aURL; } else { var myNumber = parseInt(aURL); // if the url is a number, treat as a slideNumber (origin 1) if (!isNaN(myNumber) && (myNumber + '') == myNumber) { // Force number into proper range if (myNumber < 1) { myNumber = 1; } else if (myNumber > presentation.slideTitles.length) { myNumber = presentation.slideTitles.length; } aURL = '?' + 'presentationID=' + presentationID() + '&' + 'slideID=' + (myNumber - 1); } else if (!aURL.startsWith('?')) { // Prefix with http:// for URLs that don't specify a pro
tocol aURL = "http:\/\/" + aURL; } } // Handle ? syntax for specifying the arguments to a // presentation w/o supplying a host if (aURL.startsWith('?')) aURL = getBase() + aURL; // Put all internal URLs in same window if (aURL.startsWith(getBase()) || (aURL.indexOf("iamaze") != -
1)) myTarget = null; } if ((!myTarget) || aURL.startsWith("mailto:")) { myLink = '<a href="' + aURL + '">'; } else { myLink = '<a href="' + aURL + '" ' + myTarget + '>'; } } return myLink; } /* * end of a link tag (handled differently on play vs edit). */ function endLinkTag() { return (!slideIsEditable ? '</a>' : '</u>'); } /* * Replace special tokens in the text */ var slideTokens = [ /\%SlideNumber%/g, (presentation.currentSlideIndex + 1), /\%SlideCount%/g, presentation.slideCount, null ]; function replaceSlideTokens(aString) { for (var i = 0; slideTokens[i] != null; i += 2) { aString = aString.replace(slideTokens[i], slideTokens[i+1]); } return aString; } /* * Write text content * * aLayer: the layer to write the text into * aContent: an object containing any combination of the following prope
rties * align - One of "left", "center", or "right" * color - Either a named color or a color in the form 'RRG
GBB' * fontFamily - A comma separated list of font names * fontSize - A number (not a string!) specifying the font poi
nt size * fontStyle - Either null or 'italic' * fontWeight - Either null or 'bold' * text - Arbitrary text string * url - A valid URL * verticalAlign - One of "top", "middle", or "bottom" */ function renderText(aLayer, aContent, aBounds) { // Check for nothing worth rendering during playback if ((!aContent.text) && (!aContent.backgroundColor) && (!slideIsEdit
able)) return; // PENDING(RWK) - Really ugly workaround to make sure we don't lose
the // style information when rendering to the layer if (ns4) aLayer.doLayerHack(); // Set the layer color and alignment aLayer.setBackgroundColor(aContent.backgroundColor); aLayer.setAlign((aContent.align != null) ? aContent.align : 'left'); aLayer.setVerticalAlign((aContent.verticalAlign != null) ? aContent.verticalAlign : 'top'); // Figure out what text we want var myText = aContent.text; // Do token replacement for slide numbers if (aContent._subtype == 'SlideNumber') { myText = replaceSlideTokens(myText); } // PENDING(RWK) - IE workaround: There is a wierd problem with line // spacing in multiple lines of text. We fix this by simply ensurin
g // that the last character is a space. (Don't ask me why this works, // but it does) if (ie4 && myText && (myText.indexOf('\n') != -1) && myText[myText.l
ength-1] != ' ') myText += ' '; // Use default text if we're editing and the text is empty if (slideIsEditable && (!myText)) myText = DEFAULT_DIRECTIONS + ' '
+ DEFAULT_TEXT_STRING + ' ' + aContent.name; // Render the content if (myText) { // Write the url start tag if (aContent.url) { aLayer.write(startLinkTag(aContent.url)); } // Write the text writeTextStyle(aLayer, aContent); aLayer.write(myText.escapeForHTML()); aLayer.writeln('</font>'); // Write the url end tag if (aContent.url) aLayer.write(endLinkTag()); } } /* * Write style information for text content */ function writeTextStyle(aLayer, aContent) { var style = ''; if (aContent.fontSize != null) style += ' font-size:' + adjust(aCont
ent.fontSize) + 'pt'; if (aContent.fontFamily != null) style += '; font-family:' + aConte
nt.fontFamily; if (aContent.fontStyle != null) style += '; font-style:' + aContent
.fontStyle; if (aContent.fontWeight != null) style += '; font-weight:' + aConte
nt.fontWeight; if (aContent.color != null) style += '; color:' + aContent.color; aLayer.write('<font style="' + style + '">'); } /* * Write background content */ function renderBackground(aLayer, aContent, aBounds) { aBounds.left = aBounds.top = 0; aBounds.width = clientWidth; aBounds.height = clientHeight; renderImage(aLayer, aContent, aBounds); aLayer.setOrigin(0,0); aLayer.setSize(clientWidth,clientHeight); return; } /* * Write image content * * aLayer: the layer to write the text into * aContent: an object containing any combination of the following prope
rties * align - One of "left", "center", or "right" * src - A URL specifying the source of the image * scale - 'fit' scales the image. Everything else is
unscaled. * file - If the file was uploaded, the filename where the
image came from * verticalAlign - One of "top", "middle", or "bottom" * aBounds: The bounds of the image area */ function renderImage(aLayer, aContent, aBounds) { // Set the background color aLayer.setBackgroundColor(aContent.backgroundColor); // Write the empty content string? if ((aContent.src == null) && (aContent.backgroundColor == null)) { if (slideIsEditable && (aContent._name != BACKGROUND_NAME)) aLayer.write(DEFAULT_DIRECTIONS + ' ' + DEFAULT_IMAGE_STRING +
' ' + aContent.name); return; } // Get a cleaned up version of the image source URL var mySrc = aContent.src; if (mySrc && (mySrc.indexOf(':') == -1) && !mySrc.startsWith('/') && !mySrc.startsWith('\\')) { // PENDING(RWK) - Note that we are a little stricter with the sour
ce // URL since it may be an iAmaze server image reference mySrc = 'http:\/\/' + mySrc; } // Defer rendering the image? if ((mySrc != null) && (deferImageContent(aContent, mySrc))) return; // Write out the href link if (aContent.url != null && !slideIsEditable) { aLayer.write(startLinkTag(aContent.url)); } // Write a shim image? var myScale = aContent.scale; if ((!mySrc) || (myScale == SCALE_TILE)) { // Write the shim image to size the layer properly aLayer.write('<img src="' + SHIM_IMAGE + '"' + ' width=' + aBounds.width + ' height=' + aBounds.height + ' hspace=0 vspace=0 border=0>'); } // Render the image if (mySrc) { if (myScale == SCALE_TILE) { // Set the image as the layer background aLayer.setBackground(mySrc); } else { // Use the shim image to make sure the table will be as small
as needed if (mySrc == null) { mySrc = SHIM_IMAGE; myScale = SCALE_FIT; } aLayer.write('<img src="' + mySrc + '"'); if (myScale == SCALE_FIT) { aLayer.write(' width=' + aBounds.width + ' height=' + aBound
s.height); } else if (myScale == SCALE_WIDTH) { aLayer.write(' width=' + aBounds.width); } else if (myScale == SCALE_HEIGHT) { aLayer.write(' height=' + aBounds.height); } // When editing on netscape, name the image and catch the on
load (see imageLoaded) if (ns4 && slideIsEditable) { aLayer.write(' name="' + IMAGE_NAME_PREFIX + aLayer.name
+ '" onload="imageLoaded(this)" '); } aLayer.write(' hspace=0 vspace=0 border=0>'); // And make sure any previous tiling is removed aLayer.setBackground(null); } } else if (aLayer.getBackground()) { aLayer.setBackground(null); } // Close out the href if ((aContent.url != null) && !slideIsEditable) { aLayer.write(endLinkTag()); } if (aContent.align != null) aLayer.setAlign(aContent.align); if (aContent.verticalAlign != null) aLayer.setVerticalAlign(aContent.verticalAlign); } // PENDING(RWK) - Buttugly IE5 workaround: The image onload event appea
rs to get sent before the slide is actually ready (the complete flag is
still false and the image fails to render.) Instead of relying on the e
vent, we set up an interval to poll the images at reasonable intervals.
Ugly, ugly, ugly! var deferredInterval = null; /* * PENDING(RWK) - IE5 workaround (part 1 of 2): Images that load in * a delayed fashion are not rendered. * * Return true if we have to wait for an image to load, false * if the image is already loaded. * * For images that are not loaded, add the image to our load queue * and set up an onload handler to check the queue when the image * loaded. */ var deferredContent = new Array(); function deferImageContent(aContent, aSrc) { // PENDING(RWK) - I'm turning this off for a while to see how well thing
s behave. If things continue to work, then we might consider deleting t
his code. return false; if ((!ie4) || (version < 5)) return false; // Create and configure only if the image doesn't already exist if (!aContent._image) { aContent._image = new Image(1,1); aContent._image.src = aSrc; // Defer the image if it's not loaded if (!aContent._image.complete) { deferredContent.addObject(aContent); if (!deferredInterval) { deferredInterval = setInterval('deferredImageCheck()', 333); } } } return (aContent._image.complete) ? false : true; } /* * PENDING(RWK) - IE5 workaround (part 2 of 2): Images that load in * a delayed fashion are not rendered. * * This method is called any time one of our deferred images becomes loa
ded. * Determine which content the image was for, and render that content. */ function deferredImageCheck(aString) { for (var i = deferredContent.length-1; i >= 0; i--) { var myContent = deferredContent[i]; if (myContent._image.complete) { // Turn off the handler since animated images will keep callin
g // the handler, and remove the content. // myContent._image.onload = null; deferredContent.removeIndex(i); // Render the content renderContent(myContent._name); } } // Turn off the timer if there are no deferred images if ((deferredContent.length == 0) && (deferredInterval)) { clearInterval(deferredInterval); deferredInterval = null; } } /* * Convenience method to determine if the mouse position of * anEvent is within the slide */ function isEventOnSlide(anEvent) { var myBoundsLayer = slideLayer ; return myBoundsLayer.isHit(anEvent); } /* * Convenience method to determine if a location * is within the slide */ function isPointOnSlide(aLeft, aTop) { var myBoundsLayer = slideLayer ; // Cache the bounds, it never changes, and this method is called // a LOT, so we don't want to alloc a bounds each time if (myBoundsLayer.myCachedBounds == null) myBoundsLayer.myCachedBounds = myBoundsLayer.getAbsoluteBounds()
; var mb = myBoundsLayer.myCachedBounds; if (aLeft >= mb.left && aLeft <= (mb.left + mb.width) && aTop >= mb.top && aTop <= (mb.top + mb.height)) return true; return false; } /* * Accessor for presentationID, for use in URLs */ function presentationID() { var pid = presentation.presentationID; if (pid.startsWith('com.')) { myStart = pid.indexOf('_'); if (myStart > 0) pid = pid.substring(myStart+1); } return pid; } /* * Accessor for formatted titles of slides (used in UI slide choosers) */ function formattedSlideTitle(index, maxChars, minChars, padChar) { if (index < 0 || index >= presentation.slideTitles.length) return 'Unknown slide index' + index; var sTitle = (index+1) + '. ' + presentation.slideTitles[index]; var newln = sTitle.indexOf('\n'); if (newln > 0) { sTitle = sTitle.substring(0, newln - 1); if ((sTitle.length + 3) < maxChars) sTitle += '...'; } return sTitle.insureLength(maxChars, minChars, padChar); } /* * Is this content entity the background */ function isBackground(aContent) { if (aContent == null || aContent._name == null) return false; return (aContent._name == BACKGROUND_NAME); } /* * Returns the object of the highest number with the passed objectName */ function slideLastObject(objectName) { // The new entity code makes sure that the numbers are contiguous, // so look fo the first gap. if (slideContent[objectName + '1']) { var biggest = 1; for (var myName in slideContent) { if (myName.startsWith(objectName)) { var myIndex = parseInt(myName.substr(objectName.length))
; if (myIndex > biggest) biggest = myIndex; } } return objectName + biggest; } return null; } /* * This is called whenever any image content is finished loading * Workaround for a bug where handlers were not set properly * on large images (Netscape) */ function imageLoaded(anImage) { if (ns4 && anImage && anImage.name) { setRolloversToCurrentState(getNamedLayer(anImage.name.substr(IMA
GE_NAME_PREFIX.length))); command.safeToSend(); } } // // CXElementIterator class // // This class iterates through the elements of a slide // aFilter - A function that accepts an element as it's only // parameter and returns true for it to be included, false to // exclude it. // function CXElementIterator(aSlide, aFilter) { this.filter = (aFilter) ? aFilter : CXElementIterator.ALL; this._elements = new Array(); this.nextElementIndex = 0; for (var myName in aSlide.contentEntities) { this._addElementToIterator(aSlide.contentEntities[myName]); } } CXElementIterator.prototype = new CXIterator(); CXElementIterator.ALL = function(anElement) {return true;} CXElementIterator.prototype._addElementToIterator = function(anElement) { if (anElement && this.filter(anElement)) { this._elements[this._elements.length] = anElement; if (anElement.nodes) { for (var i = 0; i < anElement.nodes.length; i++) this._addElementToIterator(anElement.nodes[i]); } } } CXElementIterator.prototype.hasNext = function() { return (this.nextElementIndex < this._elements.length); } CXElementIterator.prototype.next = function() { return this._elements[this.nextElementIndex++]; } _______________________________________

【００６３】 表11. アウトラインの文書データ構造を解釈するJavaScript _______________________________________ 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'; // Constants 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.nodes[i]; 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.nodes[i]; 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 wit
hin * 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._nodeLayers[myContext.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.nodes[i]; 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 = myLayers[aContext.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 valign="top" width="1px">'); if (myType.startsWith(BULLET_TEXT)) { var myText = null; // Write the text style writeTextStyle(myLayer, myNode); // Determine the prefix string var myPadding = '.&nbsp;'; var myValue = (myNode.nodeBulletValue == null) ? aContext.nextBulletValue : myNode.nodeBulletValue; if (myType == BULLET_SYMBOL) { myText = '&#' + myValue + ';'; myPadding = '&nbsp;&nbsp;'; } 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 i
mage bullets removed var myValue = myNode.nodeBulletValue; if (myNode.fontSize != null) { myLayer.write('<img height=' + adjust(myNode.fontSize*.8) + 'px' + ' src="' + myValue + '">&nbsp;&nbsp;&nbsp;
'); } 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 valign="top" width="1px">'); 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_S
TRING; // Write out the text cell myLayer.write('<td valign="top" width="99%">'); 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.verticalSpa
cing); anOutline._rootNode.heightInPixels += myLayer.getHeight() + adjus
t(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.nodes[0]; } // // 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 >= romanData[i][0]) { aVal += romanData[i][1]; romanString += romanData[i][2]; break; } } } return isUppercase ? romanString : romanString.toLowerCase(); } function toLetter(aVal, isUppercase) { return String.fromCharCode((isUppercase ? 64 : 96) + (((aVal-1) % 26
) + 1)); } _________________________________________________

【００６４】 表12. 文書のJavaScriptデータ構造を作成するためのJavaコード _________________________________________________ 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 Collecti
on * 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 Ja
vaScript. * * If objectToRepresent is a Map, and there is a key in the named "n
ame", 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 serve
r * "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 carriage-return after the final * closing bracket (}). */ static public SXIndentedStringBuffer getJavaScriptRepresentationOfDa
ta(SXIndentedStringBuffer indentBuffer, Object objectToRepresent, boolea
n 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 B
ACK 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 ELEME
NTS 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 it
em prior to us } else { firstTime = false; } if (objectIsMap) { String aKey = (String)(anIterator.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(indentBuf
fer, aValue, quoteNumericValues); hasMoreElements = anIterator.hasNext(); } // DO THIS STUFF ONCE, AFTER PROCESSING THE CONTAINER ELEMEN
TS indentBuffer.outdent(); indentBuffer.println(""); indentBuffer.print(containerEncloserEndCharacter); // SXJavaScriptProducer... LET IT RE-CALL US WITH THE HASHMAP
IT WANTS SAVED } else if (objectToRepresent instanceof SXJavaScriptProducer)
{ ((SXJavaScriptProducer)objectToRepresent).getJavaScriptR
epresentation(indentBuffer); // FLAT, LEAF-NODE VALUE... JUST WRITE IT OUT... } else { boolean objectIsInteger = false; // PENDING(kbern): see belo
w boolean objectIsString = objectToRepresent instanceof String
; boolean quoteThisValue = true;//PENDING(kbern) was false; se
e 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)objectToRepres
ent); } catch (NumberFormatException anException) { // Quote non-numeric Strings if they're not empty (tho
ugh // that case is caught in the previous "else if" claus
e). 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.escapeSpecialChar
acters(objectToRepresentString); } indentBuffer.print(objectToRepresentString); if (quoteThisValue) { indentBuffer.print("'"); } } } else { indentBuffer.print("null"); } return indentBuffer; } } _________________________________________________

【００６５】 ブラウザのウェブページのコンテンツはHTMLであることが想定されている。し
かしながら、より高度なブラウザはその他の形式（もっとも有名なものはXML(eX
tensible Markup Language)）を表示させることができるため、コンテンツは必
ずしもHTMLでなくてもよい。従って、本出願に説明されているプロセスは、他の
ブラウザ文書形式にも適合し、従って、HTML形式は、実際にはこのプロセスの要
件ではない。

【００６６】 本発明は、本出願においては望ましい実施例を参照しながら説明されているが
、当業者は、本発明の精神および範囲から逸脱することなく、本出願に記載され
ている応用を別の応用に置き換えることができることを容易に理解するであろう
。

【００６７】 従って、本発明は、請求項によってしか制限されることはない。

【図面の簡単な説明】

【図１】 閲覧者のブラウザの制限に従うHTML文書を表示および再表示するた
めのシステムを示すブロック線図である。

【図２】 本発明による文書データ構造の階層構造を示すブロック線図である
。

【符号の説明】

100 システム 110 ブラウザ 120 DHTML文書オブジェクトモデル(DOM) 130 スクリプト 140 文書データ構造 150 解釈コード 200 プレゼンテーション 210 スライド 220 エンティティ 230 テキスト 240 アウトライン 250 画像

───────────────────────────────────────────────────── フロントページの続き (81)指定国 ＥＰ(ＡＴ，ＢＥ，ＣＨ，ＣＹ， ＤＥ，ＤＫ，ＥＳ，ＦＩ，ＦＲ，ＧＢ，ＧＲ，ＩＥ，Ｉ Ｔ，ＬＵ，ＭＣ，ＮＬ，ＰＴ，ＳＥ，ＴＲ)，ＯＡ(ＢＦ ，ＢＪ，ＣＦ，ＣＧ，ＣＩ，ＣＭ，ＧＡ，ＧＮ，ＧＷ， ＭＬ，ＭＲ，ＮＥ，ＳＮ，ＴＤ，ＴＧ)，ＡＰ(ＧＨ，Ｇ Ｍ，ＫＥ，ＬＳ，ＭＷ，ＭＺ，ＳＤ，ＳＬ，ＳＺ，ＴＺ ，ＵＧ，ＺＷ)，ＥＡ(ＡＭ，ＡＺ，ＢＹ，ＫＧ，ＫＺ， ＭＤ，ＲＵ，ＴＪ，ＴＭ)，ＡＥ，ＡＬ，ＡＭ，ＡＴ， ＡＵ，ＡＺ，ＢＡ，ＢＢ，ＢＧ，ＢＲ，ＢＹ，ＣＡ，Ｃ Ｈ，ＣＮ，ＣＲ，ＣＵ，ＣＺ，ＤＥ，ＤＫ，ＤＭ，ＥＥ ，ＥＳ，ＦＩ，ＧＢ，ＧＤ，ＧＥ，ＧＨ，ＧＭ，ＨＲ， ＨＵ，ＩＤ，ＩＬ，ＩＮ，ＩＳ，ＪＰ，ＫＥ，ＫＧ，Ｋ Ｐ，ＫＲ，ＫＺ，ＬＣ，ＬＫ，ＬＲ，ＬＳ，ＬＴ，ＬＵ ，ＬＶ，ＭＡ，ＭＤ，ＭＧ，ＭＫ，ＭＮ，ＭＷ，ＭＸ， ＮＯ，ＮＺ，ＰＬ，ＰＴ，ＲＯ，ＲＵ，ＳＤ，ＳＥ，Ｓ Ｇ，ＳＩ，ＳＫ，ＳＬ，ＴＪ，ＴＭ，ＴＲ，ＴＴ，ＴＺ ，ＵＡ，ＵＧ，ＵＳ，ＵＺ，ＶＮ，ＹＵ，ＺＡ，ＺＷ

Claims (63)

【特許請求の範囲】
1. 【請求項１】 スケーラブルなウェブページを配信およびレンダリングするためのシステムで
   あって、当該システムが、 ブラウザと、 解釈コードを含むスクリプトと、 文書オブジェクトモデルと、 を有するシステムにおいて、 当該スクリプトが、実行されたときに、ページ作成者によって作成された文書
   を記述するデータ構造を作成し、かつ、 当該データ構造が、当該ブラウザに当該文書をレンダリングするために当該文
   書オブジェクトモデルを操作することを可能にする方式で、当該解釈コードが当
   該データ構造を解釈する、 システム。
2. 【請求項２】 当該ブラウザが、表示されたウェブページのコンテンツを修正するための手段
   を有するスクリプト言語をサポートする如何なる種類のウェブブラウザでもよい
   、請求項1のシステム。
3. 【請求項３】 当該文書に含まれる情報の基本的な部分のみを含むように当該データ構造を最
   適化することができる、請求項1のシステム。
4. 【請求項４】 当該データ構造と当該解釈コードが1つのファイルに含まれる、請求項1のシス
   テム。
5. 【請求項５】 当該データ構造を当該解釈コードから分けることができる、請求項1のシステ
   ム。
6. 【請求項６】 当該データ構造が、 ルートオブジェクト、 を有し、当該ルートオブジェクトが、ウェブ文書内の子オブジェクトの配列を
   有し、当該子オブジェクトがページを表し、かつ、 当該子オブジェクトそれぞれが、複数のコンテンツエンティティを有し、かつ
   当該コンテンツエンティティそれぞれが、さまざまなプロパティを有する、 請求項1のシステム。
7. 【請求項７】 当該ルートオブジェクトが、さらに、 当該ウェブ文書内の当該ページそれぞれのタイトルを含む文字列の配列 を有する、請求項6のシステム。
8. 【請求項８】 当該ルートオブジェクトが、さらに、 当該ウェブ文書内の現在の子オブジェクトのインデックスである第一属性と
   、 サンプルプレゼンテーションの場合に真である第二属性と、 スタイルプレゼンテーションの場合に真である第三属性と、 テンプレートプレゼンテーションの場合に真である第四属性と、 当該ウェブ文書のデータベースIDを示す第五属性と、 当該ウェブ文書内の子オブジェクトの合計数を示す第六属性と、 当該オブジェクトが属すタイプを示す第七属性と、 を有する、請求項6のシステム。
9. 【請求項９】 当該子オブジェクトそれぞれが、さらに、 当該子オブジェクトを表示するときに使用する効果のタイプを示す第一属性
   と、 当該ウェブ文書が基づいているレイアウトの名前を示す第二属性と、 当該子オブジェクトのユーザー定義の注記のセットである第三属性と、 当該子オブジェクトによって表されるページのタイトルを示す第四属性と、 当該子オブジェクトが属すタイプを示す第五属性と、 を有する、請求項6のシステム。
10. 【請求項１０】 当該第一属性が、 右から入れる子オブジェクト要素のセットである第一値と、 左から入れる子オブジェクト要素のセットである第二値と、 下から入れる子オブジェクト要素のセットである第三値と、 上から入れる子オブジェクト要素のセットである第四値と、 短周期で点滅する子オブジェクト要素のセットである第五値と、 各マウスクリックのたびに徐々に現れる子オブジェクト要素のセットである
    第六値と、 を有する、請求項9のシステム。
11. 【請求項１１】 当該コンテンツエンティティが、 テキストエンティティと、 アウトラインエンティティと、 画像エンティティと、 を有し、かつ、 当該コンテンツエンティティそれぞれが、 当該コンテンツエンティティそれぞれによって占められる長方形を集合的に
    (collectively)定義するための複数の属性と、 当該コンテンツエンティティそれぞれを格納するための属性と、 当該コンテンツエンティティそれぞれの名前を示すための属性と、 当該ページ内の層エンティティのz順序付けを示すための属性と、 を有する、 請求項6のシステム。
12. 【請求項１２】 当該テキストエンティティが、さらに、 フォントポイントサイズを定義するための属性と、 フォントスタイルを定義するための属性と、 フォントファミリーを定義するための属性と、 フォントウェイトを定義するための属性と、 テキストの色を定義するための属性と、 背景色を定義するための属性と、 水平位置合わせを定義するための属性と、 垂直位置合わせを定義するための属性と、 ジャンプ先のURLを定義するための属性と、 を有する、請求項11のシステム。
13. 【請求項１３】 当該アウトラインエンティティが、当該テキストエンティティの全属性を継承
    し、かつ、さらに、 ブレットのタイプを定義するための属性と、 当該ブレットの表示方式を指定する値を定義するための属性と、 副アウトラインの配列を定義するための属性と、 を有する、請求項11のシステム。
14. 【請求項１４】 当該画像エンティティが、さらに、 水平位置合わせを定義するための属性と、 背景色を定義するための属性と、 当該画像を表示するときに使用するスケール処理モードを定義するための属
    性と、 表示する画像のURLを定義するための属性と、 ジャンプ先のURLを定義するための属性と、 垂直位置合わせを定義するための属性と、 を有する、請求項11のシステム。
15. 【請求項１５】 当該画像を表示するときに使用するスケール処理モードを定義するための当該
    属性が、 当該ページの境界内に正確に収まるように当該画像がスケール処理される適
    合値と、 当該ページの境界内に当該画像の幅が正確に収まるように、縦横比を維持し
    て、当該画像がスケール処理される幅値と、 当該ページの境界内に当該画像の高さが正確に収まるように、縦横比を維持
    して、当該画像がスケール処理される高さ値と、 当該画像の境界に正確に収まるように、当該画像が当該画像のネイティブサ
    イズでタイル表示されるタイル値と、 を有する、請求項14のシステム。
16. 【請求項１６】 当該画像エンティティが、背景要素を有し、かつ当該背景要素が、当該ページ
    の境界に対応する境界を常に維持する、請求項14のシステム。
17. 【請求項１７】 当該背景要素が、zインデックス0を常に維持する、請求項16のシステム。
18. 【請求項１８】 コンピュータによって実行されると、その結果として、当該コンピュータがス
    ケーラブルなウェブページを配信およびレンダリングするためのプロセスを実行
    する命令、を格納するコンピュータ読み取り可能記憶媒体であって、当該プロセ
    スが、 スクリプトを実行することによって、文書を記述するデータ構造を作成する
    ステップと、 当該スクリプトが当該データ構造を使用して、ブラウザに当該文書をレンダ
    リングするために文書オブジェクトモデルを操作できる方式で、解釈コードによ
    って当該データ構造を解釈するステップと、 を有するコンピュータ読み取り可能記憶媒体において、 当該ブラウザがサイズ変更されたときに当該ブラウザへの変更を反映するため
    に、当該文書が自動的に更新される、 コンピュータ読み取り可能記憶媒体。
19. 【請求項１９】 当該文書に含まれる情報の基本的な部分のみを含めるように当該データ構造を
    最適化できる、請求項18のコンピュータ読み取り可能記憶媒体。
20. 【請求項２０】 当該データ構造と当該解釈コードを1つのファイルに含めることができる、請
    求項18のコンピュータ読み取り可能記憶媒体。
21. 【請求項２１】 当該データ構造を当該解釈コードから分けることのできる、請求項18のコンピ
    ュータ読み取り可能記憶媒体。
22. 【請求項２２】 コンピュータによって実行されると、その結果として、当該コンピュータが文
    書データ構造を作成するためのプロセスを実行する命令、を格納するコンピュー
    タ読み取り可能記憶媒体であって、当該プロセスが、 ウェブサーバを使用して、閲覧者のブラウザによる文書の要求に応答するス
    テップと、 当該文書のコンテンツを取得または作成するステップと、 当該文書のコンテンツをスクリプトコードのブロックに変換するステップと 当該閲覧者に返されるHTML文書に当該スクリプトコードを埋め込むステップ
    と 当該閲覧者のブラウザ内で、当該スクリプトコードのブロックを実行して文
    書データ構造を作成するステップと、 を有するコンピュータ読み取り可能記憶媒体。
23. 【請求項２３】 当該プロセスが、さらに、 必要なデータ検証を当該データ構造によって実行するステップ を有する、請求項22のコンピュータ読み取り可能記憶媒体。
24. 【請求項２４】 スクリプトコードのブロックを実行する当該ステップが、さらに、 背景色を設定するステップと、 ウェブ文書のページ層を作成するステップと、 当該ページ層の表示を可能にするステップと、 当該ウェブ文書と当該ページのアドレスを初期化するステップと、 当該ページの中のさまざまなページ要素を初期化するステップと、 サイズ変更ハンドラを設定するステップと、 当該ページをHTMLにレンダリングし、かつ当該ウェブ文書を当該ブラウザに
    表示するステップと、 を有する、請求項22のコンピュータ読み取り可能記憶媒体。
25. 【請求項２５】 1つ以上の当該ページ要素がテキストエンティティであり、かつ、当該ページ
    の中のさまざまなページ要素を初期化する当該ステップが、さらに、 当該テキストエンティティのアドレスを設定するステップと、 当該テキストエンティティの層を作成するステップと、 当該層の表示を可能にするステップと、 を有する、請求項22のコンピュータ読み取り可能記憶媒体。
26. 【請求項２６】 1つ以上の当該ページ要素が画像エンティティであり、かつ、当該ページの中
    のさまざまなページ要素を初期化する当該ステップが、さらに、 当該画像エンティティのアドレスを設定するステップと、 当該画像エンティティの層を作成するステップと、 当該層の表示を可能にするステップと、 を有する、請求項22のコンピュータ読み取り可能記憶媒体。
27. 【請求項２７】 1つ以上の当該ページ要素がアウトラインエンティティであり、かつ、当該ペ
    ージの中のさまざまなページ要素を初期化する当該ステップが、さらに、 当該アウトラインエンティティのアドレスを設定するステップと、 当該アウトラインエンティティのアウトラインノードを初期化するステップ
    と、 を有する、請求項22のコンピュータ読み取り可能記憶媒体。
28. 【請求項２８】 当該ページをHTMLにレンダリングし、かつ当該プレゼンテーションを当該ブラ
    ウザに表示するステップが、さらに、 クライアントの画面サイズを取得するステップと、 当該ページ層のクリッピング領域を設定するステップと、 当該ページの中のさまざまなページ要素をレンダリングするステップと、 出力を当該層に送るステップと、 を有する、請求項22のコンピュータ読み取り可能記憶媒体。
29. 【請求項２９】 1つ以上のページ要素がテキストエンティティであり、かつ、当該ページの中
    のさまざまなページ要素をレンダリングする当該ステップが、 層の色と位置合わせを設定するステップと、 表示するテキストを生成するステップと、 URL開始タグを書き込むステップと、 スタイルと当該テキストを書き込むステップと、 URL終了タグを書き込むステップと、 を有する、請求項28のコンピュータ読み取り可能記憶媒体。
30. 【請求項３０】 1つ以上のページ要素が画像エンティティであり、かつ、当該ページの中のさ
    まざまなページ要素をレンダリングする当該ステップが、 層の背景色を設定するステップと、 ページが編集可能である場合に、空のコンテンツ文字列を書き込むステップ
    と、 画像ソースのURLを取得するステップと、 URL開始タグを書き込むステップと、 当該画像をレンダリングするステップと、 URL終了タグを書き込むステップと、 を有する、請求項28のコンピュータ読み取り可能記憶媒体。
31. 【請求項３１】 1つ以上のページ要素がアウトラインエンティティであり、かつ、当該ページ
    の中のさまざまなページ要素をレンダリングする当該ステップが、さらに、 デフォルトのプロパティを設定するステップと、 レンダリングコンテキストを作成および初期化するステップと、 起点と利用可能な幅を設定するステップと、 当該レンダリングコンテキストによってアウトラインノードをレンダリング
    するステップと、 使用されない層を隠すステップと、 を有する、請求項28のコンピュータ読み取り可能記憶媒体。
32. 【請求項３２】 コンピュータによって実行されると、その結果として、当該コンピュータが文
    書データ構造を解釈するためのプロセスを実行する命令、を格納するコンピュー
    タ読み取り可能記憶媒体であって、当該プロセスが、 閲覧者のブラウザ内でレンダリングする必要のある当該文書データ構造内の
    オブジェクトを識別するステップと、 前記ブラウザの文書オブジェクトモデルの要素を位置確認または作成するス
    テップであって、当該要素が当該文書のレンダリングに使用される、ステップと
    、 当該閲覧者の固有なブラウザ構成設定に対応するために必要な変換またはそ
    の他の変更を、前記ブラウザの文書オブジェクトモデルの前記要素または前記文
    書データ構造に適用するステップと、 当該オブジェクトをレンダリングするために必要なHTMLを生成するステップ
    と、 当該文書が当該ブラウザに表示されるように、当該HTMLをブラウザの文書オ
    ブジェクトモデルの要素に適用するステップと、 を有する、コンピュータ読み取り可能記憶媒体。
33. 【請求項３３】 任意の変換またはその他の変更を適用する当該ステップが、さらに、 背景色を設定するステップと、 ウェブ文書のページ層を作成するステップと、 当該ページ層の表示を可能にするステップと、 当該ウェブ文書と当該ページのアドレスを初期化するステップと、 当該ページの中のさまざまなページ要素を初期化するステップと、 サイズ変更ハンドラを設定するステップと、 を有する、請求項32のコンピュータ読み取り可能記憶媒体。
34. 【請求項３４】 1つ以上の当該ページ要素がテキストエンティティであり、かつ、当該ページ
    の中のさまざまなページ要素を初期化する当該ステップが、さらに、 当該テキストエンティティのアドレスを設定するステップと、 当該テキストエンティティの層を作成するステップと、 当該層の表示を可能にするステップと、 を有する、請求項33のコンピュータ読み取り可能記憶媒体。
35. 【請求項３５】 1つ以上の当該ページ要素が画像エンティティであり、かつ、当該ページの中
    のさまざまなページ要素を初期化する当該ステップが、さらに、 当該画像エンティティのアドレスを設定するステップと、 当該画像エンティティの層を作成するステップと、 当該層の表示を可能にするステップと、 を有する、請求項33のコンピュータ読み取り可能記憶媒体。
36. 【請求項３６】 1つ以上の当該ページ要素がアウトラインエンティティであり、かつ、当該ペ
    ージの中のさまざまなページ要素を初期化する当該ステップが、さらに、 当該アウトラインエンティティのアドレスを設定するステップと、 当該アウトラインエンティティのアウトラインノードを初期化するステップ
    と、 を有する、請求項33のコンピュータ読み取り可能記憶媒体。
37. 【請求項３７】 当該オブジェクトをレンダリングするために必要なHTMLを生成する当該ステッ
    プが、さらに、 クライアントの画面サイズを取得するステップと、 当該ページ層のクリッピング領域を設定するステップと、 当該ページの中のさまざまなページ要素をレンダリングするステップと、 出力を当該層に送るステップと、 を有する、請求項32のコンピュータ読み取り可能記憶媒体。
38. 【請求項３８】 1つ以上のページ要素がテキストエンティティであり、かつ、当該ページの中
    のさまざまなページ要素をレンダリングする当該ステップが、さらに、 層の色と位置合わせを設定するステップと、 表示するテキストを生成するステップと、 URL開始タグを書き込むステップと、 スタイルと当該テキストを書き込むステップと、 URL終了タグを書き込むステップと、 を有する、請求項37のコンピュータ読み取り可能記憶媒体。
39. 【請求項３９】 1つ以上のページ要素が画像エンティティであり、かつ、当該ページの中のさ
    まざまなページ要素をレンダリングする当該ステップが、さらに、 層の背景色を設定するステップと、 当該ページが編集可能である場合に、空のコンテンツ文字列を書き込むステ
    ップと、 画像ソースのURLを取得するステップと、 URL開始タグを書き込むステップと、 当該画像をレンダリングするステップと、 URL終了タグを書き込むステップと、 を有する、請求項37のコンピュータ読み取り可能記憶媒体。
40. 【請求項４０】 1つ以上のページ要素がアウトラインエンティティであり、かつ、当該ページ
    の中のさまざまなページ要素をレンダリングする当該ステップが、 デフォルトのプロパティを設定するステップと、 レンダリングコンテキストを作成および初期化するステップと、 起点と利用可能な幅を設定するステップと、 当該レンダリングコンテキストによってアウトラインノードをレンダリング
    するステップと、 使用されない層を隠すステップと、 を有する、請求項37のコンピュータ読み取り可能記憶媒体。
41. 【請求項４１】 スケーラブルなウェブページを配信およびレンダリングするための方法であっ
    て、 スクリプトを実行することによって、文書を記述するデータ構造を作成する
    ステップと、 当該データ構造が、ブラウザに当該文書をレンダリングするために文書オブ
    ジェクトモデルを操作できる方式で、解釈コードによって当該データ構造を解釈
    するステップと、 を有する方法において、 当該ブラウザがサイズ変更されたときに当該ブラウザへの変更を反映するため
    に、当該文書が自動的に更新される、 方法。
42. 【請求項４２】 当該文書に含まれる情報の基本的な部分のみを含むように当該データ構造を最
    適化することができる、請求項41の方法。
43. 【請求項４３】 当該データ構造と当該解釈コードが1つのファイルに含まれる、請求項41の方
    法。
44. 【請求項４４】 当該データ構造を当該解釈コードから分けることができる、請求項41の方法。
45. 【請求項４５】 文書データ構造を作成するための方法であって、 ウェブサーバを使用して、閲覧者のブラウザによる文書の要求に応答するス
    テップと 当該文書のコンテンツを取得または作成するステップと、 当該文書のコンテンツをスクリプトコードのブロックに変換するステップと
    、 当該閲覧者に返されるHTML文書に当該スクリプトコードを埋め込むステップ
    と 当該閲覧者のブラウザ内で、当該スクリプトコードのブロックを実行して文
    書データ構造を作成するステップと、 を有する、方法。
46. 【請求項４６】 任意の必要なデータ検証を当該データ構造によって実行するステップをさらに
    有する、請求項45の方法。
47. 【請求項４７】 スクリプトコードのブロックを実行する当該ステップが、さらに、 背景色を設定するステップと、 ウェブ文書のページ層を作成するステップと、 当該ページ層の表示を可能にするステップと、 当該ウェブ文書と当該ページのアドレスを初期化するステップと、 当該ページの中のさまざまなページ要素を初期化するステップと、 サイズ変更ハンドラを設定するステップと、 当該ページをHTMLにレンダリングし、かつ当該ウェブ文書を当該ブラウザに
    表示するステップと、 を有する、請求項45の方法。
48. 【請求項４８】 1つ以上の当該ページ要素がテキストエンティティであり、かつ、当該ページ
    の中のさまざまなページ要素を初期化する当該ステップが、さらに、 当該テキストエンティティのアドレスを設定するステップと、 当該テキストエンティティの層を作成するステップと、 当該層の表示を可能にするステップと、 を有する、請求項45の方法。
49. 【請求項４９】 1つ以上の当該ページ要素が画像エンティティであり、かつ、当該ページの中
    のさまざまなページ要素を初期化する当該ステップが、さらに、 当該画像エンティティのアドレスを設定するステップと、 当該画像エンティティの層を作成するステップと、 当該層の表示を可能にするステップと、 を有する、請求項45の方法。
50. 【請求項５０】 1つ以上の当該ページ要素がアウトラインエンティティであり、かつ、当該ペ
    ージの中のさまざまなページ要素を初期化する当該ステップが、さらに、 当該アウトラインエンティティのアドレスを設定するステップと、 当該アウトラインエンティティのアウトラインノードを初期化するステップ
    と、 を有する、請求項47の方法。
51. 【請求項５１】 当該ページをHTMLにレンダリングし、かつ当該ウェブ文書を当該ブラウザに表
    示するステップが、さらに、 クライアントの画面サイズを取得するステップと、 当該ページ層のクリッピング領域を設定するステップと、 当該ページの中のさまざまなページ要素をレンダリングするステップと、 出力を当該層に送るステップと、 を有する、請求項47の方法。
52. 【請求項５２】 1つ以上のページ要素がテキストエンティティであり、かつ、当該ページの中
    のさまざまなページ要素をレンダリングする当該ステップが、さらに、 層の色と位置合わせを設定するステップと、 表示するテキストを生成するステップと、 URL開始タグを書き込むステップと、 スタイルと当該テキストを書き込むステップと、 URL終了タグを書き込むステップと、 を有する、請求項51の方法。
53. 【請求項５３】 1つ以上のページ要素が画像エンティティであり、かつ、当該ページの中のさ
    まざまなページ要素をレンダリングする当該ステップが、 層の背景色を設定するステップと、 当該ページが編集可能である場合に、空のコンテンツ文字列を書き込むステ
    ップと、 画像ソースのURLを取得するステップと、 URL開始タグを書き込むステップと、 当該画像をレンダリングするステップと、 URL終了タグを書き込むステップと、 を有する、請求項51の方法。
54. 【請求項５４】 1つ以上のページ要素がアウトラインエンティティであり、かつ、当該ページ
    の中のさまざまなページ要素をレンダリングする当該ステップが、さらに、 デフォルトのプロパティを設定するステップと、 レンダリングコンテキストを作成および初期化するステップと、 起点と利用可能な幅を設定するステップと、 当該レンダリングコンテキストによってアウトラインノードをレンダリング
    するステップと、 使用されない層を隠すステップと、 を有する、請求項51の方法。
55. 【請求項５５】 文書データ構造を解釈するための方法であって、 閲覧者のブラウザ内でレンダリングする必要のある当該文書データ構造内の
    オブジェクトを識別するステップと、 前記ブラウザの文書オブジェクトモデルの前記要素を位置確認または作成す
    るステップであって、当該要素が当該文書のレンダリングに使用される、ステッ
    プと、 当該閲覧者の固有なブラウザ構成設定に対応するために必要な変換またはそ
    の他の変更を、前記ブラウザの文書オブジェクトモデルの前記要素または前記文
    書データ構造に適用するステップと、 当該オブジェクトをレンダリングするために必要なHTMLを生成するステップ
    と、 当該文書が当該ブラウザに表示されるように、当該HTMLを前記ブラウザの文
    書オブジェクトモデルの要素に適用するステップと、 を有する、方法。
56. 【請求項５６】 任意の変換またはその他の変更を適用する当該ステップが、さらに、 背景色を設定するステップと、 ウェブ文書のページ層を作成するステップと、 当該ページ層の表示を可能にするステップと、 当該ウェブ文書と当該ページのアドレスを初期化するステップと、 当該ページの中のさまざまなページ要素を初期化するステップと、 サイズ変更ハンドラを設定するステップと、 を有する、請求項55の方法。
57. 【請求項５７】 1つ以上の当該ページ要素がテキストエンティティであり、かつ、当該ページ
    の中のさまざまなページ要素を初期化する当該ステップが、さらに、 当該テキストエンティティのアドレスを設定するステップと、 当該テキストエンティティの層を作成するステップと、 当該層の表示を可能にするステップと、 を有する、請求項56の方法。
58. 【請求項５８】 1つ以上の当該ページ要素が画像エンティティであり、かつ、当該ページの中
    のさまざまなページ要素を初期化する当該ステップが、さらに、 当該画像エンティティのアドレスを設定するステップと、 当該画像エンティティの層を作成するステップと、 当該層の表示を可能にするステップと、 を有する、請求項56の方法。
59. 【請求項５９】 1つ以上の当該ページ要素がアウトラインエンティティであり、かつ、当該ペ
    ージの中のさまざまなページ要素を初期化する当該ステップが、さらに、 当該アウトラインエンティティのアドレスを設定するステップと、 当該アウトラインエンティティのアウトラインノードを初期化するステップ
    と、 を有する、請求項56の方法。
60. 【請求項６０】 当該オブジェクトをレンダリングするために必要なHTMLを生成する当該ステッ
    プが、さらに、 クライアントの画面サイズを取得するステップと、 当該ページ層のクリッピング領域を設定するステップと、 当該ページの中のさまざまなページ要素をレンダリングするステップと、 出力を当該層に送るステップと、 を有する、請求項55の方法。
61. 【請求項６１】 1つ以上のページ要素がテキストエンティティであり、かつ、当該ページの中
    のさまざまなページ要素をレンダリングする当該ステップが、さらに、 層の色と位置合わせを設定するステップと、 表示するテキストを生成するステップと、 URL開始タグを書き込むステップと、 スタイルと当該テキストを書き込むステップと、 URL終了タグを書き込むステップと、 を有する、請求項60の方法。
62. 【請求項６２】 1つ以上のページ要素が画像エンティティであり、かつ、当該ページの中のさ
    まざまなページ要素をレンダリングする当該ステップが、さらに、 層の背景色を設定するステップと、 当該ページが編集可能である場合に、空のコンテンツ文字列を書き込むステ
    ップと、 画像ソースのURLを取得するステップと、 URL開始タグを書き込むステップと、 当該画像をレンダリングするステップと、 URL終了タグを書き込むステップと、 を有する、請求項60の方法。
63. 【請求項６３】 1つ以上のページ要素がアウトラインエンティティであり、かつ、当該ページ
    の中のさまざまなページ要素をレンダリングする当該ステップが、さらに、 デフォルトのプロパティを設定するステップと、 レンダリングコンテキストを作成および初期化するステップと、 起点と利用可能な幅を設定するステップと、 当該レンダリングコンテキストによってアウトラインノードをレンダリング
    するステップと、 使用されない層を隠すステップと、 を有する、請求項60の方法。