Rich text behavior is attempting to parse certain markup tags in the text as line control characters or instructions for rendering nested text. You can enable rich text behavior for <label> and derived components. For most of these components, the behavior is enabled only if attribute richText="true". For the <textView> component; however, the behavior is enabled by default and attribute richText must be set to false to disable it.
...
...
specifies that the text should appear as
Well hello,
...
...
welcome to a brand new line.
...
...
would appear as it appears here, brackets and all.
Specifying Text
For most label-derived components, text is specified with the text attribute:
...
テキストの指定
ほとんどのラベル派生コンポーネントに対するテキストは、text 属性を使用して指定されます。
<button text="press
...
me"/><textField
...
text="type
...
here"/>
...
...
textArea
...
と textView の場合、テキストは textArea または textView タグ内でネストされたテキストによって指定されます。次に例を示します。
<textView>The textView's text</textView>
いずれの場合も、テキストにリッチテキストタグが含まれているときは特に注意しなければなりません。属性に使用される < および > はエスケープする必要があります。
<button richText="true" text="press <b>me</b>"/
...
Note that the attribute richText is set to true. For textView this attribute is on by default. For all other text labels it should be specified. For example, to put rich text in a textView:
...
>は次のように表示されます。
<p>Paragraph
...
...
...
</textView>
...
textView の場合は、CDATA シンタックスを使用するのが最も簡単です。<
richText Supported Tags
The following table provides a list and description of the tags supported in richText:
...
<font>: このタグで囲まれているテキストを指定フォントでレンダリングします。
属性:
- color: fontColor と同じ形式に設定する必要があります。
- size: fontSize と同じ形式に設定する必要があります。
- face: fontName と同じ形式に設定する必要があります。
<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" に設定する必要があります。
<img>
...
: インラインイメージを挿入します。
属性:
- src:
...
- GIF 形式または JPEG 形式のイメージ ドキュメントへの参照で、"/" の後に Web アプリケーションの相対 URL の一部を使用します。
<link>
...
: このタグで囲まれているテキストに、onCommand アクションまたはツールチップを定義します。
属性:
- onCommand: このタグで囲まれているテキストをクリックすると呼び出される、イベントの型テキスト イベント属性タイプを指定します。
- tooltip: このタグで囲まれているテキストにツールチップを指定します。
例: <link onCommand="moreInfo.jsp">click for more info</link>
Rich Text and Editing
User Editing
Usually textField, passwordField and textArea are used for editing plain text. However textArea and textField can be used with rich text as well. The Nexaweb client attempts to maintain well-formedness of the text through insertion, deletion, and replacement by ensuring pairs of opening and closing tags are not broken up.
Editing Attribute "API"
In addition to reading and setting attribute text (or the text child of a textArea), the dynamic attributes: cursorIndex,endSelectIndex, selectedText, and selectedStyle can be read and set. Collectively these dynamic attributes form an "API" for changing text or selection without replacing the entire text. Note that selectedText returns only plain text from the current selection, whereas text represents text and markup together. Setting selectedText removes matched pairs of markup tags as well as plain text in any selection before inserting the new text. Setting selectedStyle adds and removes markup as necessary to effect the passed text style over the current selection. See the UI schema for more discussion of these dynamic editing attributes.
Rich Text and Automatic Line Wrapping
When a <label>-derived component's autoWrap attribute is set true, lines are automatically broken into multiple lines so each fits in the width of the component. (For best results, a component's width should be fixed in one way or another when using automatic wrapping.) autoWrap behavior is true by default for textArea and textView. Additionally, setting richText=true enablesautoWrap behavior unless autoWrap is specifically set to false.リッチテキストとその編集
ユーザーによる編集
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 に設定しない限り、この動作が有効になります。