Fonctions système

AppStudio AppFramework comprend plusieurs composants permettant d'accéder à des fonctions système standard et bien connues. Bien que ces composants ne soient pas requis pour utiliser ces fonctions dans votre application, leur mise en œuvre doit être considérée si l'utilisation de ces fonctions est planifiée.

Presse-papiers

Par défaut, rien n'empêche une application AppStudio d'accéder aux fonctions couper, copier et coller du presse-papiers système et vous n'avez pas besoin d'écrire de code si cela est votre intention. Pour les workflows plus complexes impliquant le presse-papiers, y compris la copie d'éléments tels que des couleurs et des objets JavaScript, le composant Clipboard fournit un accès plus détaillé au presse-papiers système.

Le composant Clipboard comprend plusieurs propriétés et méthodes pour retourner le contenu du presse-papiers système, selon le type de données qui y est stocké. La propriété text retourne le contenu sous la forme d'une chaîne de texte brute si possible, sans formatage et potentiellement avec du code HTML visible, selon le contenu du presse-papiers.

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

La propriété html, est cependant principalement destinée à la lecture et l’affichage de contenu HTML. Cette propriété est également capable de lire et de retenir du formatage de texte plus complexe, que l'exemple de code suivant utilise en rattachant la propriété à une zone de texte où le format RTF est activé.

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

Les valeurs de couleur sont stockées en tant qu'application/type MIME x-color et peuvent uniquement être écrites ou retournées par la propriété color.

Le composant Clipboard n'a aucun moyen d'interagir avec les images figurant dans le presse-papiers système (bien que, selon la source, il se peut que la propriété text retourne une adresse URL). Au lieu de cela, le composant ImageObject fournit les méthodes copyFromClipboard et pasteFromClipboard pour l’interaction.

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();
        }
    }
}

Fonction de partage

Vous pouvez partager du texte, des URL ou des fichiers avec d’autres applications à l’aide de la fonction de partage fournie par le Presse-papiers AppFramework. La méthode share du composant Presse-papiers est utilisée pour partager tout texte de saisie ou URL. Si vous partagez un fichier, la méthode share requiert que vous spécifiez l’URL de son emplacement. L’extrait de code suivant montre comment utiliser cette méthode, en partageant le texte saisi dans un champ de texte.

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

Actuellement, cette fonctionnalité n’est prise en charge que sur les plateformes macOS, iOS et Android.

Pour voir un exemple de cette fonctionnalité en condition d’utilisation, consultez l'application d’exemple disponible dans ArcGIS AppStudio ou dans le référentiel GitHub d’exemples AppStudio.

Informations locales

Un paramètre local est une valeur standardisée décrivant une langue ou un dialecte, y compris des détails tels que l'alphabet utilisé, les marqueurs décimaux et le format de date. En utilisant un code de paramètre local valide, vous pouvez remplacer le paramètre local par défaut de votre système et fournir de nombreuses méthodes d’afficher les informations figurant dans votre application.

Ces paramètres locaux peuvent être transmis à l'application via l'utilisation du composant LocaleInfo, qui contient des propriétés permettant de définir un paramètre local et de le mapper de manière cohérente à travers les standards et les autres sections de votre application. Dans AppStudio, un exemple de cela consiste à utiliser LocaleInfo pour déterminer la langue d'une boîte de dialogue de connexion OAuth pour ArcGIS Online. Pour ce faire, instanciez d'abord le composant LocaleInfo et indiquez-lui le paramètre local initial et le moment où le paramètre local change.

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

Pour mettre à jour le paramètre local de l'application, ajoutez un champ de texte afin d'afficher et de modifier le paramètre local.

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();
    }
}

Puisque les autres propriétés de LocaleInfo ne seront pas mises à jour pendant la synchronisation, une fonction est nécessaire pour les mettre à jour. Dans le cadre de ce workflow, la fonction figurera également dans un modèle de liste pouvant être exposé dans l'interface utilisateur.

// 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()        });
    }
}

Une fois le modèle de liste configuré, vous pouvez ajouter une vue web à une connexion OAuth, qui s'affichera dans le paramètre local déclaré dans le champ de texte précédent. Dans ce cas, la vue web s'affiche dans une vue d'onglet avec la liste des propriétés LocaleInfo ci-dessus.

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

Sachez que contrôler le code du paramètre local et changer la présentation de votre application en fonction de ce code fait uniquement partie du processus de localisation. Pour plus d'informations, reportez-vous à la rubrique Globalisation de votre application.

URL

Pour effectuer des opérations complexes avec les adresses URL, le composant UrlInfo fournit des propriétés et des méthodes pour construire et déconstruire des adresses URL. Ces propriétés et méthodes peuvent être utilisées pour construire une adresse URL de manière dynamique ou en dériver des composants spécifiques. La section de code suivante indique comment utiliser UrlInfo pour extraire les paramètres d’une requête à partir d’une URL, dans ce cas un service d’entités. Les mises à jour apportées à la requête extraite lorsque l’application d’exemple est exécutée sont ensuite rassemblées et présentées sous forme de nouvelle 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    }
}