Rich text

Owned by Rob Gagne (Unlicensed)
Last updated: Dec 05, 2012 by Xiaoyan Kong (Unlicensed)
リッチテキストは、ネストされたテキストをレンダリングするために、テキスト内の特定のマークアップタグを行制御文字または命令として解析します。リッチテキストのこのような動作は、<label>や派生コンポーネントに対して有効にすることができます。このようなコンポーネントのほとんどでは、属性 richText="true" の場合にのみこの動作が有効になっています。ただし、<textView>の場合は、デフォルトで有効になっています。これを無効にするには、属性 richText を false に設定する必要があります。
リッチテキストマークアップを使用するには、リッチテキストは整形式の XML (ただし、最上位ノードは不要) でなければなりません。ここで、XML 要素はマークアップを指定し、XML のテキストノードは実際のテキストを指定します。次に例を示します。

 

Well <i>hello, </i> world, <br/>welcome to a brand new line.

このように指定すると、次のテキストが表示されます。

Well hello, world,
welcome to a brand new line.
上の例は、タグのネスト構造の同じレベルで、開始タグ (<i>) が対応する次の終了タグ (</i>) に一致しているため、リッチテキスト仕様に準拠した有効な形式となっています。リッチテキストの動作が指定されていてもテキストが整形式の XML でない場合は、リッチテキストの動作は無効となり、テキスト全体がプレーンテキストでレンダリングされます。次に、その例を示します。
Well <i>hello, </j> world, <br/>welcome to a brand new line.
この場合は、かっこなどがすべてが表示されます。

テキストの指定

ほとんどのラベル派生コンポーネントに対するテキストは、text 属性を使用して指定されます。

<button text="press me"/><textField text="type here"/>

textArea と textView の場合、テキストは textArea または textView タグ内でネストされたテキストによって指定されます。次に例を示します。

<textView>The textView's text</textView>

いずれの場合も、テキストにリッチテキストタグが含まれているときは特に注意しなければなりません。属性に使用される < および > はエスケープする必要があります。

<button richText="true" text="press &lt;b&gt;me&lt;/b&gt;"/>は次のように表示されます。

　
属性 richText が true に設定されていることに注目してください。この属性は、textView ではデフォルトでオンになっています。ただし、textView 以外のテキストラベルでは、設定する必要があります。たとえば、リッチテキストを textView に配置するには、次のように指定します。
<textView>
&lt;p&gt;Paragraph 1&lt;/p&gt;&lt;p&gt;Paragraph 2&lt;/p&gt;
</textView>

textView の場合は、CDATA シンタックスを使用するのが最も簡単です。<![CDATA[ と " >> の間にあるテキストはエスケープされないので、上の例をさらに読みやすく記述するには次のように指定します。

<textView>
<![CDATA[
<p>Paragraph 1.</p><p>Paragraph 2.</p>
" >>
</textView>


タグの ">" および "<" を表示するには、"ニ重エスケープ" (または CDATA セクションで一重エスケープ) する必要があります。たとえば、"<" を表示するための属性内の正しいテキストは "&amp;lt;" となります。

<button richText="true" text="&amp;lt;your name&amp;gt; &lt;i&gt;here&lt;/i&gt;"/>は次のように表示されます。
　
次のタグがサポートされています。

<font>: このタグで囲まれているテキストを指定フォントでレンダリングします。

属性:

  • color: fontColor と同じ形式に設定する必要があります。
  • size: fontSize と同じ形式に設定する必要があります。
  • face: fontName と同じ形式に設定する必要があります。
例: <font color="red">red</font> unred

<i>:

このタグで囲まれているテキストを斜体にします。

例: <i>tilted</i>

<b>:

このタグで囲まれているテキストを太字にします。

例: <b>bold</b>

<u>:

このタグで囲まれているテキストに下線を付けます。

例: <u>underlined</u>

<br>:

改行を挿入します。

例: Text.<br/>Text on new line.

<hr>: 水平線を挿入します。


例: Text.<hr/>Text following line.

<p>: 行をスキップします。

属性:

  • align: "left"、"center"、または "right" に設定する必要があります。
例: Text.<p/>New paragraph.

<img>: インラインイメージを挿入します。

属性:

  • src: GIF 形式または JPEG 形式のイメージ ドキュメントへの参照で、"/" の後に Web アプリケーションの相対 URL の一部を使用します。
例: cool <img src="/folder/cool.gif"/> graphic

<link>: このタグで囲まれているテキストに、onCommand アクションまたはツールチップを定義します。

属性:

  • onCommand: このタグで囲まれているテキストをクリックすると呼び出される、イベントの型テキスト イベント属性タイプを指定します。
  • tooltip: このタグで囲まれているテキストにツールチップを指定します。

例: <link onCommand="moreInfo.jsp">click for more info</link>

リッチテキストとその編集

ユーザーによる編集
textField、 passwordField、textArea はプレーン テキストの編集に使用されますが、textArea と textField はリッチ テキストの編集にも使用できます。Nexaweb クライアントは、挿入、削除、および置換により、開始タグと終了タグのペアが壊れないようにテキストの整形式を維持します。

属性 "API" の編集

属 性テキスト (または textArea のテキストの子) の読み取りと設定のほか、動的な属性である cursorIndex、endSelectIndex、selectedText、selectedStyle の読み取りと設定も可能です。これらの属性は集合的に "API" を形成し、テキスト全体を置き換えることなく、テキストや選択内容を変更することができます。テキストはテキストとマークアップの両方を表しますが、 selectedText は現在の選択内容からプレーン テキストのみを返します。selectedText を設定すると、マークアップ タグの一致するペアと、新規テキストの挿入前に選択した部分のプレーン テキストが削除されます。また、selectedStyle を設定すると、現在の選択内容に対して、渡されたテキスト スタイルを有効にするため、必要に応じてマークアップが追加および削除されます。このような動的な編集属性の詳細については、UI スキーマを参照してください。

リッチテキストと自動行折り返し機能

<label> 派生コンポーネントの autoWrap 属性を true に設定すると、行が複数の行に自動的に分割され、コンポーネントの幅に合わせてそれぞれ調整されます (最適な結果を得るには、自動折り返し機能を使用する際に、コンポーネントの幅が何らかの方法で固定される必要があります)。textArea と textView に対するautoWrap 動作は、デフォルトで true に設定されています。また、richText="true" に設定すると、autoWrap 動作を false に設定しない限り、この動作が有効になります。