MonoTouch.Dialog Json マークアップ

[アーティクル]
11/25/2015

このページでは、MonoTouch.Dialog の JsonElement で受け入れられる Json マークアップについて説明します

最初に例を見てみましょう。 JsonElement に渡すことができる完全な Json ファイルを次に示します。

{     
    "title": "Json Sample",
    "sections": [ 
        {
            "header": "Booleans",
            "footer": "Slider or image-based",
            "id": "first-section",
            "elements": [
                { 
                    "type": "boolean",
                    "caption": "Demo of a Boolean",
                    "value": true
                }, {
                    "type": "boolean",
                    "caption": "Boolean using images",
                    "value": false,
                    "on": "favorite.png",
                    "off": "~/favorited.png"
                }, {
                    "type": "root",
                    "title": "Tap for nested controller",
                    "sections": [
                        {
                            "header": "Nested view!",
                            "elements": [
                                {
                                    "type": "boolean",
                                    "caption": "Just a boolean",
                                    "id": "the-boolean",
                                    "value": false
                                }, {
                                    "type": "string",
                                    "caption": "Welcome to the nested controller"
                                }
                            ]
                        }
                    ]
                }
            ]
        }, {
            "header": "Entries",
            "elements" : [
                {
                    "type": "entry",
                    "caption": "Username",
                    "value": "",
                    "placeholder": "Your account username"
                }
            ]
        }
    ]
}

上記のマークアップでは、次の UI が生成されます。

ツリー内のすべての要素にプロパティ "id" を含めることができます。実行時に、JsonElement インデクサーを使用して個々のセクションまたは要素を参照できます。例:

var jsonElement = JsonElement.FromFile ("demo.json");

var firstSection = jsonElement ["first-section"] as Section;

var theBoolean = jsonElement ["the-boolean"] as BooleanElement;

ルート要素の構文

ルート要素には、次の値が含まれています。

title
sections (任意)

ルート要素は、入れ子になったコントローラーを作成する要素としてセクション内に表示できます。その場合、追加のプロパティ "type" は "root" に設定する必要があります

URL

"url" プロパティが設定されている場合、ユーザーがこの RootElement をタップすると、コードは指定された URL からファイルを要求し、内容を新しい情報として表示します。これを使用して、ユーザーがタップした内容に基づいてサーバーからユーザーインターフェイスを拡張できます。

グループ

設定すると、ルート要素のグループ名が設定されます。グループ名は、要素内の入れ子になった要素の 1 つからルート要素の値として表示される概要を選択するために使用されます。これは、チェックボックスの値またはラジオボタンの値です。

radioselected

入れ子になった要素で選択されているラジオ項目を識別します

タイトル

存在する場合は、RootElement に使用されるタイトルになります

type

セクションに表示される場合は、 "root" に設定する必要があります (これはコントローラーを入れ子にするために使用されます)。

セクション

これは、個々のセクションを含む Json 配列です

セクション構文

このセクションには次のものが含まれます。

header (任意)
footer (任意)
elements 配列

存在する場合、ヘッダーテキストはセクションのキャプションとして表示されます。

存在する場合、フッターはセクションの下部に表示されます。

要素

これは要素の配列です。各要素には、少なくとも 1 つのキー (作成する要素の種類を識別するために使用される "type" キー) が含まれている必要があります。一部の要素は、"caption" や "value" のような一般的なプロパティを共有します。サポートされている要素の一覧を次に示します。

string 要素 (スタイルの有無にかかわらず)
entry 行 (通常またはパスワード)
boolean 値 (スイッチまたはイメージを使用)

文字列要素は、ユーザーがセルまたはアクセサリをタップしたときに呼び出すメソッドを提供すると、ボタンとして使用できます。

要素のレンダリング

レンダリング要素は C# StringElement と StyledStringElement に基づいており、さまざまな方法で情報をレンダリングできます。最も単純な要素は次のように作成できます。

{
    "type": "string",
    "caption": "Json Serializer"
}

これにより、フォント、背景、テキストの色、装飾など、すべての既定値を含む単純な文字列が表示されます。これらの要素にアクションをフックし、"ontap" プロパティまたは "onaccessorytap" プロパティを設定してボタンのように動作させることが可能です。

{
    "type": "string",
    "caption": "View Photos",
    "ontap": "Acme.PhotoLibrary.ShowPhotos"
}

上記では、クラス "Acme.PhotoLibrary" の "ShowPhotos" メソッドが呼び出されます。 "onaccessorytap" は似ていますが、ユーザーがセルをタップするのではなく、アクセサリをタップした場合にのみ呼び出されます。これを有効にするには、アクセサリも設定する必要があります。

{
    "type": "string",
    "caption": "View Photos",
    "ontap": "Acme.PhotoLibrary.ShowPhotos",
    "accessory": "detail-disclosure",
    "onaccessorytap": "Acme.PhotoLibrary.ShowStats"
}

レンダリング要素は、2 つの文字列 (キャプションと値) を一度に表示できます。これらの文字列のレンダリング方法はスタイルによって異なり、"style" プロパティを使用してこれを設定できます。既定値では、左側にキャプションが表示され、右側に値が表示されます。詳細については、スタイルに関するセクションを参照してください。色は、'#' 記号の後に赤、緑、青、アルファ値の値を表す 16 進数を使用してエンコードされます。その内容は、RGB または RGBA 値を表す短い形式 (3 桁または 4 桁の 16 進数) でエンコードできます。または、RGB または RGBA 値を表す長い形式 (6 または 8 桁) の場合もあります。短いバージョンは、同じ 16 進数字が 2 回書かれている場合の短縮形です。そのため、"#1bc" 定数は、red=0x11、green=0xbb、blue=0xcc として解釈されます。アルファ値が存在しない場合、色は不透明になります。次に例をいくつか示します。

"background": "#f00"
"background": "#fa08f880"

accessory

レンダリング要素に表示するアクセサリの種類を決定します。使用可能な値は次のとおりです。

checkmark
detail-disclosure
disclosure-indicator

値が存在しない場合、アクセサリは表示されません

background

background プロパティは、セルの背景色を設定します。値は画像への URL (この場合、非同期画像ダウンローダーが呼び出され、画像がダウンロードされると背景が更新されます)、または、色の構文を使用して指定された色のいずれかです。

caption

レンダリング要素に表示されるメインの文字列。フォントと色は、"textcolor" と "font" プロパティを設定するとカスタマイズできます。レンダリングスタイルは "style" プロパティによって決まります。

color と detailcolor

主なテキストまたは詳細テキストに使用する色。

detailfont と font

キャプションまたは詳細テキストに使用するフォント。フォント指定の形式は、フォント名の後にダッシュとポイントサイズが必要に応じて続く形式です。有効なフォント仕様を次に示します。

"Helvetica"
"Helvetica-14"

改行

行の分割方法を指定します。指定できる値は、

character-wrap
clip
head-truncation
middle-truncation
tail-truncation
word-wrap

character-wrap と word-wrap は両方とも、"lines" プロパティを 0 に設定して、レンダリング要素を複数行の要素に変換するために使用できます。

ontap と onaccessorytap

これらのプロパティは、オブジェクトをパラメーターとして受け取るアプリケーションの静的メソッド名を指す必要があります。 JsonDialog.FromFile または JsonDialog.FromJson メソッドを使用して階層を作成する場合は、省略可能なオブジェクト値を渡すことができます。その後、このオブジェクト値がメソッドに渡されます。これを使用して、静的メソッドにコンテキストを渡すことができます。次に例を示します。

class Foo {
    Foo ()
    {
        root = JsonDialog.FromJson (myJson, this);
    }

    static void Callback (object obj)
    {
        Foo myFoo = (Foo) obj;
        obj.Callback ();
    }
}

lines

この値を 0 に設定すると、含まれる文字列の内容に応じて要素のサイズが自動的に変更されます。これを機能させるには、"linebreak" プロパティを "character-wrap" または "word-wrap" に設定する必要もあります。

style

style は、コンテンツのレンダリングに使用されるセルスタイルの種類を決定します。UITableViewCellStyle 列挙値に対応します。指定できる値は、

"default"
"value1"
"value2"
"subtitle" : サブタイトル付きのテキスト。

字幕

サブタイトルに使用する値。これは、スタイルを "subtitle" に設定し、"value" プロパティを文字列に設定するためのショートカットです。これらの両方が 1 つのエントリで行われます。

textcolor

テキストに使用する色。

値

レンダリング要素に表示されるセカンダリ値。このレイアウトは、"style" 設定の影響を受けます。フォントと色は、"detailfont" と "detailcolor" を設定するとカスタマイズできます。

ブール値の要素

ブール型要素は、型を "bool" に設定する必要があり、表示する "caption" を含めることができます。"value" は true または false に設定されます。 "on" および "off" プロパティが設定されている場合は、画像と見なされます。画像は、アプリケーション内の現在の作業ディレクトリを基準にして解決されます。バンドル相対ファイルを参照する場合は、アプリケーションバンドルディレクトリを表すショートカットとして "~" を使用できます。たとえば "~/favorite.png" は、バンドルファイルに含まれるfavorite.png になります。次に例を示します。

{ 
    "type": "boolean",
    "caption": "Demo of a Boolean",
    "value": true
},

{
    "type": "boolean",
    "caption": "Boolean using images",
    "value": false,
    "on": "favorite.png",
    "off": "~/favorited.png"
}

type

型は、"boolean" または "checkbox" に設定できます。ブール値に設定すると、UISlider または画像が使用されます ("on" と "off" の両方が設定されている場合)。 checkbox に設定すると、チェックボックスが使用されます。 "group" プロパティを使用すると、ブール要素を特定のグループに属する要素としてタグ付けできます。これは、ルートが同じグループに属するすべてのブール値 (またはチェックボックス) の数で結果を集計するため、含まれるルートにも "group" プロパティがある場合に便利です。

Entry 要素

entry 要素を使用すると、ユーザーがデータを入力できるようになります。 entry 要素の型は、"entry" または "password" のいずれかです。 "caption" プロパティは右側に表示するテキストに設定され、"value" はエントリを設定する初期値に設定されます。 "placeholder" は、空のエントリのヒントをユーザーに表示するために使用されます (灰色で表示されます)。次に例をいくつか示します。

{
    "type": "entry",
    "caption": "Username",
    "value": "",
    "placeholder": "Your account username"
}, {
    "type": "password",
    "caption": "Password",
    "value": "",
    "placeholder": "You password"
}, {
    "type": "entry",
    "caption": "Zip Code",
    "value": "01010",
    "placeholder": "your zip code",
    "keyboard": "numbers"
}, {
    "type": "entry",
    "return-key": "route",
    "caption": "Entry with 'route'",
    "placeholder": "captialization all + no corrections",
    "capitalization": "all",
    "autocorrect": "no"
}

オートコレクト

エントリに使用する自動修正スタイルを決定します。指定できる値は true または false (または文字列 "yes" と "no") です。

大文字使用

エントリに使用する大文字化のスタイル。指定できる値は、

all
none
sentences
words

caption

エントリに使用するキャプション

keyboard

データ入力に使用するキーボードの種類。指定できる値は、

ascii
decimal
default
email
name
numbers
numbers-and-punctuation
twitter
url

placeholder

エントリに空の値がある場合に表示されるヒントテキスト。

return-key

戻りキーに使用されるラベル。指定できる値は、

default
done
emergencycall
go
google
join
next
route
search
send
yahoo

値

エントリの初期値

ラジオ要素

ラジオ要素には型 "radio" があります。選択された項目は、含まれているルート要素の radioselected プロパティによって選ばれます。さらに、"group" プロパティの値が設定されている場合、このラジオボタンはそのグループに属します。

日付と時刻の要素

要素の型 "datetime"、"date"、"time" は、時刻を含めた日付、あるいは時刻か日付をレンダリングするために使用されます。これらの要素は、パラメーターとしてキャプションと値を受け取ります。この値は、.NET DateTime.Parse 関数でサポートされている任意の形式で記述できます。例:

"header": "Dates and Times",
"elements": [
    {
        "type": "datetime",
        "caption": "Date and Time",
        "value": "Sat, 01 Nov 2008 19:35:00 GMT"
    }, {
        "type": "date",
        "caption": "Date",
        "value": "10/10"
    }, {
        "type": "time",
        "caption": "Time",
        "value": "11:23"
    }                       
]

Html/Web 要素

タップすると、"html" 型を使用してローカルまたはリモートの指定された URL のコンテンツをレンダリングする UIWebView を埋め込むセルを作成できます。この要素のプロパティは "caption" と "url" の 2 つだけです。

{
    "type": "html",
    "caption": "Miguel's blog",
    "url": "https://tirania.org/blog" 
}

次の方法で共有

MonoTouch.Dialog Json マークアップ

ルート要素の構文

URL

グループ

radioselected

タイトル

type

セクション

セクション構文

ヘッダー

フッター

要素

要素のレンダリング

accessory

background

caption

color と detailcolor

detailfont と font

改行

ontap と onaccessorytap

lines

style

字幕

textcolor

値

ブール値の要素

type

Entry 要素

オートコレクト

大文字使用

caption

keyboard

placeholder

return-key

値

ラジオ要素

日付と時刻の要素

Html/Web 要素

その他のリソース