Architect ユーザーエクステンションのファイルとディレクトリ

デフォルトでは、インストールされている Architect ユーザーエクステンション（.aux ファイル）のファイルは Documents/Architect/Extensions ディレクトリに、そのエクステンションの名前で格納されます。このディレクトリは [Edit Menu（編集メニュー）] > [Architect Settings（Architect 設定）] > [Asset Storage（アセットストエージ）] セクション > [Extension（エクステンション）] で変更できます。

ユーザーエクステンションはバージョンごとに固有のサブディレクトリを保持し、その名前は1.0、1.1、のようになります。

バージョン番号が付けられたディレクトリに保存されているファイルやディレクトリは次のとおりです。

architect/            # JSON definition files for each of the UX classes
    Xx1.Definition.js # Definition file for the Xx1.Definition class
    Xx2.Definition.js # Definition file for the Xx2.Definition class
    ...
build.xml             # Generated file that controls how the UX is built
docs/
    package.png       # Graphic used on Sencha Market for this UX
    screenshots/
        pict.png      # Graphic used for Sencha Market
licenses/             # License agreement for this UX
        Readme.md
overrides/            # Contains any overrides that are required
package.json          # Describes the User Extension package to be built
Readme.md             # Description of this UX used on Sencha Market
resources/            # Static resources used in this UX
        css/          # CSS resources for this UX
        images/       # Files for images used in this UX
sass/                 # SASS files used in this UX
    config.rb
    etc/              # General, non-component oriented SASS
    example/          
    Readme.md         # Information about this SASS
    etc/              # SASS files that must be used explicitly
    src/              # SASS sources that mimic the component-class hierarchy
                      # These files are gathered in a build of the CSS
                      # based on classes used by the build.
    var/              # Contains variable declaration files named by component class
src/                  # Javascript source files for each extension class
    xxxx.js
    yyyy.js

ほとんどのファイルが自動生成されたものです。*package.json* ファイルには、手作業で情報を設定する必要があります。ユーザーエクステンション内の各クラス/コンポーネント用のDefinition（定義）ファイルも、手作業で作成してデータを設定する必要があります。次のセクションでは、この 2 つのファイルの完全なリファレンス情報を提供します。これらのファイルの設定に関する説明やガイドラインについては、ユーザーエクステンションの作成を参照してください。

package.json ファイル

package.json ファイルでは、ユーザーエクステンションパッケージの作成方法、このパッケージのバージョン番号、使用できるフレームワークのバージョン、パッケージの作成に必要なファイルすべてをを定義します。**sencha generate** コマンドにより、*package.json* ファイルの雛形をセットアップします。

{
    "name": "DreidelExtension",
    "type": "code",
    "creator": "anonymous",
    "summary": "Short summary",
    "detailedDescription": "Long description of package",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "format": "1",
    "local": true,
    "css": [{
        path: "resources/css/dreidel.css"
    }],
    "requires": []
}

このファイルを手作業で編集して、使用するエクステンションに関する情報を追加することが必要です。フィールドは次のように定義されます。

compatVersion と local 行の間に architect セクションを追加することも必要です。以下は、SchedulerGrid ユーザーエクステンションからとった例です。これは、クラスを 5 つ持つ複雑なユーザーエクステンションです。

"architect": {
    "defsonly": true,
    "compatFrameworks": [
        "ext42"
    ],
    "requires":[
        "sch-all-min.js"
    ],
    "classes": [{
        "definition": "ResourceModel.js",
        "className": "Sch.model.Resource",
        "js": ["ResourceModel.js"]
    },{
        "definition": "ResourceStore.js",
        "className": "Sch.data.ResourceStore",
        "js": ["ResourceStore.js"]
    },{
        "definition": "EventModel.js",
        "className": "Sch.model.Event",
        "js": ["EventModel.js"]
    },{
        "definition": "EventStore.js",
        "className": "Sch.data.EventStore",
        "js": ["EventStore.js"]
    },{
        "definition": "SchedulerGridPanel.js",
        "className": "Ext.ux.SchedulerGrid",
        "js": ["SchedulerGridPanel.js"]
    }]
},

フィールドは次のように定義されます。

空白のものも含め、すべてのフィールドをファイルに含めることが必要です。

定義ファイル

定義ファイルでは次のことを定義します。

• ユーザーに対するエクステンションの提示方法
• ユーザーに公開する設定
• Sencha Architect における動作

エクステンション内のクラスそれぞれについて定義ファイルを 1 つ作成することが必要です。ファイルの拡張子は .js でなければなりません。ファイル名にはクラス名と「Definitions」または「Def」という文字列を使用することを推奨します。たとえば、FancyPants というエクステンションの場合、定義ファイルの名前は「FancyPantsDef.js」とします。

定義ファイルはすべて、User Extension Project ディレクトリの architect セクションに格納されています。*package.json* ファイルでは、エクステンション内の各クラスに対する定義ファイルを識別します。

サンプルの定義ファイルを次に示します。

{
    classAlias: "plugin.dragdropregion",
    className: "Ext.ux.DragDropRegion", 
    inherits: "abstractplugin",
    autoName: "MyDragDropRegion",
    validParentTypes:["abstractpanel"], 

    "toolbox": {
        "name": "Drag Drop Region",
        "category": "Containers",
        "groups": ["Containers","Views"]
    },

configs: [{ name: ‘drag’, type: ‘boolean’, hidden: false, initialValue: true }, { name: ‘drop’, type: ‘boolean’, hidden: false, initialValue: true }, { name: ‘group’, type: ‘string’, hidden: false, initialValue: ‘ddg’ },{ name: ‘notifyEnterCls’, type: ‘string’, hidden: false, initialValue: ‘highlightDropZone’ }, { name: ‘dragLabel’, type: ‘string’, hidden: false, initialValue: ‘Untitled Region’ }, { name: ‘frameSwapped’, type: ‘boolean’, hidden: false, initialValue: ‘true’ }, { name: ‘frameColor’, type: ‘string’, hidden: false, initialValue: ‘#99FF99’ }, { name: ‘frameCount’, type: ‘number’, hidden: false, initialValue: 2 }] }

これらの全プロパティの説明が下の表に記載されています。

必須のプロパティ

オプションのプロパティ

toolbox プロパティ

toolbox プロパティは、ツールボックスにおけるこのエクステンションの表現を記述するオブジェクトです。

configs

このコンポーネントでサポートされるコンフィグを記述する設定オブジェクトの配列です。ここにリストされているコンフィグはすべて、「hidden」プロパティが「true」となっていない限り、コンポーネントの [Config（コンフィグ）] パネルでセットできます。

コンフィグのタイプ

{ "name":"typedArrayOfModels", "type":"typedarray", "memberConfig":{ "type":"model", "confirmDelete": false } }

listener オブジェクト

イベントの発火時に呼び出すリスナ名 / 関数の配列です。

現在、以下のイベントリスナがサポートされています。