sample page

main

Test text.

編集画面が多言語対応したモジュールのサンプルです。

1
default1
select1
radio1

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

インラインCSSで大きくされた文字です。

この行には、リンクが含まれています。

この行には、が含まれています。

JavaScriptも埋め込まれています。

onclick 属性が定義されています。
cell テーブルも含まれます。

Left 1 (parent locked)

Left 2

Left 3

Left 4

default1
select2
radio3

Right 1 (parent locked)

Right 2

Right 3

Right 4

このモジュールには入力欄が定義されていません。

1: image 1

2: image 2

3: image 3

ファイルをダウンロードするサンプル

このモジュールは、 loopフィールドの外側にあるinputフィールドの値を、 loopフィールド内のechoフィールドで参照するテストです。

Echo Sample String

Echo Sample String

custom1-2 field

custom1
custom1 value
custom2.val1
value of val1
custom2.val2
value of val2

/custom1-2 field

resource build.

デフォルトの値

ここを編集してください。

これは、PHPスクリプトによる出力です。

"; ?>

loopフィールドの中にmoduleフィールド

/loopフィールドの中にmoduleフィールド

document.write("ここはJavaScriptでdocument.writeした文字列です。"); /* css sample */ ここはPHPコードが出力した文字列です。

"; ?> // Language Selectable
text
text required
test1@example.com
html required
test1@example.com
html_attr_text required
test1@example.com
href required
test1@example.com
markdown required

test1@example.com

multitext required

customvalidation

text
あああ
text required
あああ
html required
あああ
html_attr_text required
test1@example.com
href required
あああ
markdown required

あああ

multitext required

customvalidation

text
text required
html required
html_attr_text required
href required
markdown required
multitext required

(1) モジュールIDの表現形式

{$idx}:{$dir}/{$name}
たくさんの花

最小構成のモジュールのサンプル

(2) モジュールテンプレートの定義場所

px-files/px2dtconfig.json に定義する。 あああああ

Markdownフィールド

  • list 1
  • list 2

再描画されます。

再描画されました。

(3) Composer から呼び出す場合

  • require に、リポジトリを指定する。
  • ディレクトリのパスは ./vendor/vendorname/libname/~~~~ になるはず。

長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。長い文字コンテンツ。

まるちテキストを追加してみました。

長いページを作るテスト

長いページを作ると、スクロールバーが出る。

高さ調整のためのスクリプトの実行順序を見直すと直るのではないかな。

自分でコーディングする領域

HTMLコードを自分で書きます。

HTMLエンティティ変換もされないので、自分で書きます

ただのテキスト。<br />
HTMLエンティティ変換される、はず。

- でも、markdownの書式は使えない、はず。

あー、改行が反映されない、か。

スクロール位置は?

ちょうどいいじゃないですか。

宿題宿題。

Yes, 宿題。

宿題やったかー?
\(^o^)/

やってるYo! \(^o^)/

会社の宿題。

module はやっぱり、input の1つでは問題がある。不便。

こいつは直しました。 moduleフィールドを追加。input type:module は廃止。

loopフィールドの多階層処理のテスト用モジュール

  • loop1:

    テストテキストモジュールー!

    • loop2:

      テスト2 うふろぉぉぉぉ

      • loop3:

        だはぁぁぁぁぁ

        マルチテキスト3

      • loop3:

        どぉぉぉ

    • loop2:

      テスト2いいいおおおお

      • loop3:

        なかなかいいと思います。

        マークダウンコード。そのままHTMLに変換されます。

        すばらしい!

        どですか?

      • loop3:

        テスト3ああああ

      • loop3:

        ループして

  • loop1:

    もじれつ書いてみますよ。

  • loop1:

    テキストテキストー!

/loopフィールドの多階層処理のテスト用モジュール

なかなかです。

まだ帰らなくてもいいでしょ。 もっと遊びたいんだよ。

いいじゃんかよーーーー!

  • きたーーーー!

  • うぉーーーすばらしいー!!∑(゚Д゚)

    • markdown書くけどね。
  • こうしたら?

いい感じになってまいりました

あけましておめでとうございます。

できました

px.utils.iterate() が、オブジェクトも処理できるようになりました。

長いページを作るテスト

長いページを作ると、スクロールバーが出る。

高さ調整のためのスクリプトの実行順序を見直すと直るのではないかな。

複雑な画面をつくろうと思うと・・・やっぱそこそこ大変ね。

配列処理を毎回キックしてるので、リフレッシュに時間がかかる。重い。

したーーーのほうも再描画テスト。

default2
select2
radio3

長いページを作るテスト

長いページを作ると、スクロールバーが出る。

コールバックチェーンがいまいち

高さ調整のためのスクリプトの実行順序を見直すと直るのではないかな。

複雑になっちゃったなぁ

なかなかさ、あれですな。

集中して構えないと手を入れられない感じ。むぅ。

長いページを作るテスト

長いページを作ると、スクロールバーが出る。

高さ調整のためのスクリプトの実行順序を見直すと直るのではないかな。

  • 選択できなければ、編集できません。

  • リストの順番をドラッグ&ドロップで入れ替えられます。

  • ドラッグ&ドロップで移動させる操作もできるべきです。

  • 領域が重なって表示されるなどの問題があるならば、修正が必要です。

  • floatされた要素をloopするテストです。

  • それぞれの要素を編集できるでしょうか?

  • 要素を増やすには、loopフィールドのappenderをダブルクリックします。

長いページを作るテスト

長いページを作ると、スクロールバーが出る。

高さ調整のためのスクリプトの実行順序を見直すと直るのではないかな。

テストテキスト

↑これはpng

SVG画像を読み込む練習です。

↑これはSVG

階段空

マークダウン。

## JSON のフォーマットを、人にやさしくしてみました。

テキストコード。

JSON自体の差分を追えるようになりたい。

やっぱね、マークダウンが便利っす。

大抵のことはこれで事足りる。

ちゃんとマークアップできるし。コードもそこそこキレイにできる。

こうすると、なるらしい。

var jsonStr = JSON.stringify( {"JSON":"value"}, null, 1 );
  • 増えたっていいじゃない?

  • PHP必要?

    • マークダウンをリスト編集する。
    • リストモジュールなのに、さらにリストをネストして編集してるんだからっ。

finalized

custom1 field

あれ?

/custom1 field

- {"modId":"testMod1:dev/custom1","fields":{"main":"あれ?"},"anchor":"","dec":"","locked":{"contents":false,"children":false,"move":false,"delete":false}}

finalized

[ERROR] Unknown Module Template.

loopフィールドの多階層処理のテスト用モジュール

/loopフィールドの多階層処理のテスト用モジュール

module_js

isSingleRootElement が false になってはいけないパターン

markdown

isSingleRootElement が false になってはいけないパターン

markdown

isSingleRootElement が false になってはいけないパターン

md

Heading

うまく行ってますか???

表示されていますか?

baseText は入力されていません。

option 1-3

option 2-2

body は入力されていません。

ううう

えええ

あああ

いいい

テストです。

テストです。 その2。

Getting extra data: bar
テキスト入力しています。
<b>テキスト</b>です。
1行<b>テキスト</b>です。

HTML入力です。

HTMLソースを入力しています。

1行HTML入力です。

マークダウンです。

  • markdown 1
  • markdown 2
  • 1行マークダウンです

MultiText

マルチテキストです。

  • list 1
  • list 2
- 1行マルチテキストです。
#C09FB0
2020-04-29 00:00:00
2020-04-14 18:20:00
2024-02-07 11:18:03
2020年04月23日 00時00分00秒
2016年02月01日 22時05分00秒
2008年03月09日 12時07分01秒 = 08年3月9日 12時07分01秒 = pm PM 12時 12時
function contTest (){ var abcdef = null; return false; } .css { &--scss { border: 1px solid #f00; } } echo
フィールド1
フィールド2
フィールド3
This module is deprecated.
test
  • test
  • リスト

mod

mod

mod

このモジュールには、scriptタグが含まれています。

これらがGUI処理に悪影響を及ぼさないよう、無害化される必要があります。

画像はセットされていません。

内部の処理では testMod2:dev/module_id_fake として扱われるのが正しい。

内部の処理では testMod2:fake/mod_id_fake_2 として扱われるのが正しい。

内部の処理では testMod1:unit/module_id_fake_3 として扱われるのが正しい。

テストテキスト。

internalId の中のモジュールフィールド。

内容テキスト1

internalId の中のループフィールドの中のモジュールフィールド。

内容テキストその3。

内容テキストその2。

内部の処理では testMod2:dev/module_id_fake として扱われるのが正しい。

内部の処理では testMod2:fake/mod_id_fake_2 として扱われるのが正しい。

内部の処理では testMod1:unit/module_id_fake_3 として扱われるのが正しい。

テストテキスト

内部の処理では testMod2:dev/module_id_fake として扱われるのが正しい。

入れ子状態の中のテキスト1。

内部の処理では testMod2:fake/mod_id_fake_2 として扱われるのが正しい。

テストテキスト2

あとから追加されたフィールドのテスト

secondly

ふたつめのコンテンツエリア

いい感じになってきたと思います。

finalized

custom1 field

カスタムフィールドを追加してみました。

/custom1 field

- {"modId":"testMod1:dev/custom1","fields":{"main":"カスタムフィールドを追加してみました。"},"anchor":"","dec":""}

finalized

thirdly