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 }
}