系统函数

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 组件提供了 copyFromClipboardpasteFromClipboard 方法以用于交互。

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 AppStudioAppStudio 示例 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    }
}