APL Resources



APL Resources

resourcesとは、データバインディングと値の解決によりアクセスできる名前付きエンティティです。resourcesは、APLのドキュメントおよびパッケージ内のリソースブロックで定義します。viewportパラメーターに応じて、条件付きで定義することも可能です。

resourcesの評価は、APLのドキュメントおよびパッケージの読み込み時に行われます。コンポーネントのインフレート時には、resourcesは静的であり変更されることはありません。

resources定義のサンプル

APLドキュメントでのresources定義の例を次に示します。

{
  "type": "APL",
  "resources": [
    {
      "colors": {
        "accent": "#00CAFF",
        "myBlue": "#66DFFF"
      },
      "dimension": {
        "leftRight": "72dp"
      },
      "string": {
        "logo": "images/logo200x200.png"
      }
    },
    {
      "when": "${viewport.shape == 'round'}",
      "dimension": {
        "leftRight": "${viewport.width * 0.25}"
      }
    },
    {
      "when": "${viewport.theme == 'light'}",
      "colors": {
        "accent": "#0070BA",
        "myBlue": "#005A95"
      }
    },
    {
      "description": "大画面では大きな画像を使用する",
      "when": "${viewport.width > 1200}",
      "string": {
        "logo": "images/logo300x300.png"
      }
    }
  ]
}

この例では、themelightdarkかによって、colorの値をaccentmyBlueから選択しています。また、通常の場合はleftRightディメンションを72に設定しますが、画面形状がroundの場合には、画面の幅の25%(dp単位)に設定します。

resourcesの定義はブロック内で行います。このブロックはオブジェクトであり、オプションでwhen句と複数の型を設定できます。

プロパティ

resourcesの各ブロックのプロパティは以下のとおりです。

プロパティ 必須 説明
boolean ブール値のマップ ブール値の名前をブール値にマッピングします。
color(s) 色のマップ 色の名前を色の値にマッピングします。
description 文字列 resourcesのブロックの説明です。
dimension(s) ディメンションのマップ ディメンション名をディメンション値にマッピングします。
string(s) 文字列の配列 名前を文字列にマッピングします。
when ブール値 trueの場合、このresourceブロックが適用されます。デフォルトはtrueです。

resourceブロックは配列順に処理され、前の定義は後の定義で上書きされます。

resourceの定義では、@name構文を使用することで、前のブロックで定義されているresourceを参照できます。

resourceブロックは、他のresourceブロックの中に入れ子にできます。次に例を示します。

{
  "resources": [
    {
      "dimensions": {
        "myFontSize": "28dp",
        "myLeftRightPadding": "60dp"
      }
    },
    {
      "when": "${viewport.shape == 'round'}",
      "resources": [
        {
          "dimensions": {
            "myFontSize": "30dp",
            "myLeftRightPadding": "80dp"
          }
        },
        {
          "when": "${viewport.width < 400}",
          "dimensions": {
            "myFontSize": "20dp",
            "myLeftRightPadding": "45dp"
          }
        }
      ]
    }
  ]
}