システム関数

AppStudio AppFramework には、標準的な既知のシステム関数へのアクセスを提供する複数のコンポーネントが含まれています。これらのコンポーネントは、これらの関数をアプリ内で使用するために必須となるものではありませんが、これらの関数の使用を計画する際は、コンポーネントの実装を検討する必要があります。

クリップボード

デフォルトでは、AppStudio アプリは、システム クリップボードの切り取り、コピー、貼り付け関数に問題なくアクセスできるため、これが目的の場合はコードを記述する必要はありません。色や JavaScript オブジェクトなどのアイテムのコピーなど、クリップボードが関係するより複雑なワークフローの場合、Clipboard コンポーネントがシステム クリップボードに対して、より詳細なアクセスを提供します。

Clipboard コンポーネントには、システム クリップボードに格納されているデータの種類に応じて、コンテンツを返すためのさまざまなプロパティとメソッドが含まれています。text プロパティは、クリップボードのコンテンツに応じて、可能であれば、書式設定を除いた、HTML の場合は表示される部分をプレーン テキスト文字列としてコンテンツを返します。

TextArea {
    id: textArea
                    
    Layout.fillWidth: true
    Layout.fillHeight: true
                    
    text: AppFramework.clipboard.text
    readOnly: true
}

ただし、html プロパティは、HTML コンテンツの読み取りと表示を主な目的としています。このプロパティは、テキストのより複雑な書式設定の読み取りと維持も可能です。次のサンプル コードでは、リッチ テキスト形式を有効にした状態でテキスト領域にアタッチして、このプロパティを使用しています。

TextArea {
    id: htmlTextArea                        Layout.fillWidth: true    Layout.fillHeight: true                        text: AppFramework.clipboard.html    textFormat: Text.RichText    readOnly: true
}

色の値は application/x-color MIME タイプとして格納され、color プロパティでのみ書き込んだり返したりすることが可能です。

Clipboard コンポーネントには、システム クリップボード上の画像を操作する機能はありません (ただし、ソースによっては、text プロパティは URL を返すことができます)。代わりに、対話機能のために ImageObject コンポーネントが copyFromClipboard および pasteFromClipboard メソッドを提供します。

Flow {
    Layout.fillWidth: true                ImageObject {
        id: imageObject    }
                Button {
        text: "Clear Image"
        enabled: !imageObject.empty                        onClicked: {
            imageObject.clear();
        }
    }
                Button {
        text: "Copy"
        enabled: !imageObject.empty                        onClicked: {
            imageObject.copyToClipboard();
        }
    }
                Button {
        text: "Paste"
        enabled: imageObject.canPasteFromClipboard                        onClicked: {
            imageObject.pasteFromClipboard();
        }
    }
}

共有機能

AppFramework の Clipboard が提供する共有機能を使用すると、テキスト、URL、またはファイルを他のアプリと共有できます。Clipboard コンポーネントの share メソッドは、入力テキストまたは URL を共有するために使用されます。ファイルを共有する場合、share メソッドでファイルの場所の URL を指定する必要があります。次のコード スニペットは、このメソッドを使用して、テキスト フィールドに入力されたテキストを共有する方法を示しています。

property url shareURL
TextField {
    id: inputText    placeholderText: "Enter something to share"
}
Button {
    text: "Share as text"
    onClicked: {
        AppFramework.clipboard.share(inputText.text)    }
}
Button {
    text: "Share as Url"
    onClicked: {
        shareURL = inputText.text        AppFramework.clipboard.share(shareURL)    }
}

現在、この機能は macOS、iOS、および Android プラットフォームでのみサポートされています。

この機能の使用例については、ArcGIS AppStudio または AppStudio サンプル GitHub リポジトリにあるサンプル アプリをご覧ください。

ロケール情報

ロケールとは、使用されるアルファベット、小数点の記号、日付の書式などの詳細を含む言語や独自設定を記述する標準化された値です。有効なロケール コードを使用することで、システムのデフォルト ロケールをオーバーライドして、アプリ内の情報を表示する多くの重要な方法を提供できます。

これらのロケールは、LocaleInfo コンポーネントを使用してアプリに渡すことができます。このコンポーネントには、ロケールを定義するプロパティや、アプリの標準その他のセクション全体で一貫性を持ってロケールをマッピングするプロパティが含まれています。AppStudio における例としては、LocaleInfo を使用して ArcGIS Online での OAuth サイン インのダイアログ ボックスの言語を決定する処理が挙げられます。これを行うには、まず LocaleInfo をインスタンス化し、初期のロケールとロケールが変化したときを通知します。

property string localeName
property string oauthUrlFormat: "https://www.arcgis.com/sharing/rest/oauth2/authorize?client_id=arcgisonline&redirect_uri=http://www.arcgis.com&response_type=token&locale=%1"
property url oauthUrl
    
Component.onCompleted: {
    // Get the current Locale from the system's locale settings
    localeName = Qt.locale().name;
}
LocaleInfo {
    id: localeInfo
    name: localeName
    //  update the properties and the OAuth page when the app Locale is changed
    onLocaleChanged: {
        localeInfoModel.update(localeInfo);
        oauthUrl = oauthUrlFormat.arg(esriName);
        if (oauthTab.item) {
            oauthTab.item.url = oauthUrl;
        }
    }
}

アプリのロケールを更新するために、ロケールを表示および編集するテキスト フィールドを追加します。

Text {
    text: "Locale search"
}
// locale Name provided by the user for the app e.g. fr-Fr, en-GB, de_DE TextField {
    id: localeField    Layout.fillWidth: true    text: localeName    placeholderText: "Locale"
    onEditingFinished: {
        localeName = text;
    }
    function update(name) {
        text = name;
        editingFinished();
    }
}

LocaleInfo のその他のプロパティは同期中に更新されないため、それらを更新する関数が必要です。このワークフローのために、この関数は UI に公開できるリスト モデル内にもあります。

// Model to list the properties associated with the LocaleInfo ListModel {
    id: localeInfoModel    // function to update the properties when the Locale is changed in the textbox    function update(localeInfo) {
        clear();
        add("name",                 localeInfo.name);
        add("ietfName",             localeInfo.ietfName);
        add("esriName",             localeInfo.esriName);
        add("languageName",         localeInfo.languageName);
        add("languageCode",         localeInfo.languageCode);
        add("countryName",          localeInfo.countryName);
        add("countryCode",          localeInfo.countryCode);
        add("scriptName",           localeInfo.scriptName);
        add("scriptCode",           localeInfo.scriptCode);
    }
    function add(name, value) {
        append({
            name: name,            value: value.toString()        });
    }
}

リスト モデルを設定した後は、Web ビューを OAuth サイン インに追加できます。これは、前のテキスト フィールドで宣言したロケールで表示されます。この場合、Web ビューが上記の LocaleInfo プロパティのリストとともにタブ ビューの一部として表示されます。

TabView {
    Layout.fillWidth: true    Layout.fillHeight: true
    Tab {
        id: localeInfoTab        title: "LocaleInfo"
        TableView {
            model: localeInfoModel
            TableViewColumn {
                role: "name"
                title: "Property"
            }
            TableViewColumn {
                role: "value"
                title: "Value"
            }
        }
    }
    Tab {
        id: oauthTab        title: "Sign In Page"
        WebView {
            // Load the OAuth url in the webView.            Component.onCompleted: {
                url = oauthUrl;
            }
        }
    }
}

ロケール コードの制御とそれに応じたアプリの表示の変更は、ローカライゼーション プロセスの一部に過ぎないので注意してください。詳細については、「アプリのローカライズ」をご参照ください。

URL

URL を使用した複雑な操作を実行するために、UrlInfo コンポーネントは、URL を構築および分解するためのプロパティとメソッドを提供します。これらのプロパティとメソッドを使用すると、URL を動的に構築したり、URL の個々のコンポーネントを取得したりできます。 次のコード セクションは、UrlInfo を使用して URL からクエリのパラメーター (この場合はフィーチャ サービス) を抽出する方法を示します。サンプル アプリの実行時に抽出済みのクエリに加えられた編集は、再組み立てが行われた後に新しい URL として表示されます。

Column {
    id: cl    width: parent.width    spacing: 5
    UrlInfo {
        id: urlInfo    }
    Text {
        text: "Your initial URL:"
        wrapMode: Text.WrapAnywhere        width: parent.width    }
    TextArea {
        id: urlField        selectByMouse: true        cursorPosition: 1        wrapMode: "Wrap"
        width: parent.width        font.pixelSize: 10        horizontalAlignment :TextInput.AlignLeft        text:"https://csmgisweb.smgov.net/csmgis01/rest/services/admin_boundaries/zoning/MapServer/0/query?objectIds=99,100&time=&geometry=&geometryType=esriGeometryPoint&inSR=&spatialRel=esriSpatialRelContains&f=html"
        onTextChanged: {
            urlInfo.fromUserInput(text);
        }
    }
    CheckBox {
        text: "<b>Is a query present?</b>"
        checked: urlInfo.hasQuery        enabled: false        padding: 0    }
    Text {
        text: "<b>The query for your URL</b>: "
        wrapMode: Text.WrapAnywhere        width: parent.width    }
    Text {
        text: "Edit the query, and the URL below it will update with your changes."
        wrapMode: Text.WrapAnywhere        width: parent.width    }
    TextArea {
        id: queryField        text: JSON.stringify(urlInfo.queryParameters, undefined, 2)        wrapMode: Text.WrapAnywhere        width: parent.width
        onTextChanged: {
            urlInfo.queryParameters = JSON.parse(text);
        }
    }
    Text {
        text: "<b>Your URL with updated query:<b>"
        wrapMode: Text.WrapAnywhere        width: parent.width    }
    TextField {
        id: reQueried        text: urlInfo.url        wrapMode: Text.WrapAnywhere        width: parent.width    }
}

このトピックの内容
  1. クリップボード
  2. ロケール情報
  3. URL