Bone Flow #027 - TextBox

Package Version 1.0.63 / Runtime Version 1.0.37 / Status: Development Candidate

累積回帰テスト

文字入力・編集 / Untrusted IN防御 / #002 Joint WAIT・BLOCKED OUT配送統合テスト

Development Standard v1.0#001 Core v1.0.0#002 Joint v1.1.36#017 Text = 表示責務境界のみ

使用コンポーネント

#001 Bone Core確認中

#002 Bone Joint確認中

#022 Bone Hover Border Effect確認中

#040 ColorPicker確認中

#020 Bone Label#040 Caller Runtime dependency

#017 Bone TextRuntime非依存 / 表示責務境界

プロパティ設定

Property 表示言語

値 (value)

プレースホルダー (placeholder)

最小文字数 (minlength)

最大文字数 (maxlength)

必須 (required)

読み取り専用 (readonly)

無効 (disabled)

テーマ (theme)

背景色 (backgroundColor)

#040 ColorPicker / #118 Transition

Transition Direction Speed Respect reduced motion

外見 (appearance)

親要素に依存（親に合わせる）

単体時の表示設定（#017 Text基準）

親要素に依存がONの時、この幅・高さ・表示位置・入力時文字位置は無視されます。

幅 (px)

高さ (px)

表示位置（9方向）

入力時文字位置

親要素設定（継承確認用）

テスト用親要素の設定。親依存ONではTextBoxは親の幅・高さ100%、背景・文字色・角丸・文字位置へ追従し、自身の通常枠は持ちません。

親の幅 (px)

親の高さ (px)

親の文字位置

親の背景色

親の文字色

親の角丸 (px)

アクティブ時の枠Effect

枠Effect

Effect色

Effect方向

Effect速度

マウスオーバー時の枠Effect

枠Effect

Effect色

Effect方向

Effect速度

TextBox Preview

親要素に依存をONにすると、この親Previewの背景・文字色・枠色・角丸へ追従します。

Untrusted IN / Security Test

この欄は操作ガイドではなく、外部入力がTextBoxの安全性契約を満たすか検証する専用QAです。Classの使用方法・コード・実行例はヘッダーの操作ガイドを参照してください。このSecurity TestはTextBox Previewとは独立した専用テストです。#002 Bone JointからSecurity専用TextBoxへINし、PASS ○ の時だけSecurityテスト側の値を更新、BLOCKED ⛔ の時はそこで停止してSecurityテスト側の直前値を保持します。TextBox Previewの値・編集状態・OUTには一切干渉しません。HTML風文字列はHTMLとして実行せず、安全な文字列としてPASSします。

Source / Joint IN未実行#002 Joint

TextBox Security未実行検査待ち検査待ち

TextBox-値変更なし

未実行

接続イメージ

#021 Shape v1.0.24 と同じ Bone Joint 接続状態イメージです。中央表示のみ「TextBox」に合わせています。

IN 接続線

OUT 接続線

型不一致

接続エラー／不存在終端

OUT WAIT / BLOCKED - #002 Joint v1.1.36 Integration

TextBoxはcommitまでを担当し、待機キュー・FIFO・BLOCK判定後の配送停止は#002 Jointへ委譲します。下の線・端点・spinner / ban はすべて BoneJoint.drawLine の実描画です。

READY ○Target受信 0件

TextBox OUTcommit data

TargetREADY

Target受信ログ: なし

Joint描画確認中...

3秒WAITで spinner → ○、線が切れず、待機データが自動配送されたことを目視確認しました。BLOCKで fa-ban + beat-fade、線は接続維持、Targetへ危険データが届かなかったことを目視確認しました。

Smoke Test / Validation Report

NOT RUN

実行日時-

検査件数0件

PASS0件

FAIL0件

実行時間0.0ms

Version1.0.63 (Runtime 1.0.37)

Smoke Test 結果NOT RUN

Smoke Testは未実行です。

Validation 結果NOT RUN

Validationは未実行です。

Runtime Console

Completion

Component#027 TextBox

Version1.0.63 (Runtime 1.0.37)

StatusDevelopment

Runtime QA未実行

WAIT目視未確認

BLOCK目視未確認

Completion Flagfalse

Runtime ALL PASS + WAIT/BLOCK目視確認後に完了できます。

Bone Flow #027 TextBox ガイド

Class / Public API・使用方法・操作説明

ガイド言語

HTML Functional Class：bf-textbox

HTMLに class="bf-textbox" を記述するだけでTextBoxを生成します。これはJavaScriptの class とは異なります。

1. コピーして使うHTML

<div class="bf-textbox" data-id="customer-name" data-value="初期値"
     data-placeholder="名前を入力" data-width="320" data-height="44"
     data-theme="light"></div>

2. JS / CSSの読み込み

使用するページでBone Flow共通依存と以下の3つをこの順番で読み込みます。JSの相対パスはページの設置場所に応じて指定してください。

<link rel="stylesheet" href="/boneflow/css/bone-textbox.css">
<script src="/boneflow/js/bone-core.js"></script>
<script src="/boneflow/js/bone-textbox.js"></script>
<script src="/boneflow/js/bone-textbox-html-class.js"></script>

BoneTextBoxが使用する#002 Joint、#022 Effectなどの正式依存はアプリケーションで先に読み込んでください。

3. HTML属性一覧

属性	役割	例
`data-id`	Bone識別子	customer-name
`data-value`	初期文字列	初期値
`data-placeholder`	未入力時のヒント	名前を入力
`data-width / data-height`	幅・高さ（整数）	320 / 44
`data-theme`	テーマ	light / dark
`data-required`	必須入力	true / false
`data-readonly / data-disabled`	読取専用・無効化	true / false
`data-minlength / data-maxlength`	文字数制限	1 / 100
`data-position / data-align`	配置・入力文字位置	Runtime仕様の有効値
`data-background`	背景色	#ffffff
`data-effect / data-mouseover-effect`	Active / Hover Effect	normal

4. 実際の実行結果（入力できます）

HTML classを読み込み中...

入力してEnterまたはblurで確定します。生成失敗時はここに原因を表示します。

1. Public API

TESTで確認しているBoneTextBox Public APIの一覧と、各APIの引数・使用手順・コード例・戻り値・責務境界を確認します。

Public API 一覧

実Runtimeで利用できるPublic APIを一覧表示します。各APIの詳細は一覧の下で確認できます。

Public API 詳細

3. 操作説明

クラス一覧から各クラス説明へ移動し、いつ・どこで使うか、参照データ、コードの書き方、サンプル、結果を確認します。

Class リスト / Class List（ガイド）

Sample ClassTextBoxClassSample

利用部品BoneTextBox

生成new TextBoxClassSample(...).mount(host)

状態確認中

TextBoxClassSampleは利用側で定義したClass名です。コードと実際に生成したTextBox、入力・commit後のStateを下で確認できます。操作ガイドの「3. 操作説明」にコード各部の意味と同じ実動作例を掲載しています。

Classサンプルコード

BoneTextBox Public APIを利用側Classから使用するサンプルコードです。

利用側Classサンプルコード

Classサンプルコード実行結果

上のClassサンプルと同じBoneTextBox API経路で生成した実instanceです。

未生成

実行結果 / State

Public API一覧・各API詳細・使用方法・操作説明はヘッダーの操作ガイドで確認できます。

Classサンプルを実際に操作

上のコードと同じClassで作成したTextBoxです。入力・値設定・commitでStateを確認できます。