L'AppFramework di AppStudio contiene vari componenti che offrono accesso a funzioni di sistema standard e conosciute. Questi componenti non sono necessari per usare tali funzioni nell'app, ma è necessario considerarne l'implementazione per usare queste funzioni.
Appunti
Per impostazione predefinita, non c'è nulla che impedisca a un'app di AppStudio di accedere alle funzioni Taglia, Copia e Incolla degli appunti del sistema e non è necessario scrivere alcun codice. Per flussi di lavoro più complessi che implicano l'utilizzo degli appunti, tra cui la copia di elementi come colori e oggetti JavaScript, il componente Clipboard fornisce un accesso più dettagliato agli appunti del sistema.
Il componente Clipboard contiene varie proprietà e metodi per riportare il contenuto degli appunti del sistema, a seconda del tipo di dati archiviati. La proprietà text riporta il contenuto come stringhe di testo normale se possibile, senza formattare e potenzialmente con HTML visibile, a seconda del contenuto degli appunti.
TextArea {
id: textArea
Layout.fillWidth: true
Layout.fillHeight: true
text: AppFramework.clipboard.text
readOnly: true
}La proprietà html, d'altro canto, ha come funzione principale la lettura e la visualizzazione di contenuto HTML. Questa proprietà può anche leggere e mantenere formattazioni di testo più complesse, che il seguente esempio di codice usa per associare la proprietà a un'area di testo con Rich Text Format abilitato.
TextArea {
id: htmlTextArea Layout.fillWidth: true Layout.fillHeight: true text: AppFramework.clipboard.html textFormat: Text.RichText readOnly: true
}I valori dei colori sono archiviati come tipo MIME application/x-color e possono essere scritti o restituiti solo dalla proprietà color.
Il componente Clipboard non ha mezzi per interagire con le immagini sugli appunti del sistema (sebbene, a seconda della fonte, la proprietà text potrebbe restituire un URL). Invece, il componente ImageObject fornisce i metodi copyFromClipboard e pasteFromClipboard per l'interazione.
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();
}
}
}Funzionalità di condivisione
È possibile condividere testi, URL o file con altre app utilizzando la funzionalità di condivisione tra app fornita dal componente Appunti di AppFramework. Il metodo di share del componente Appunti è utilizzato per condividere qualsiasi tipo di testo inserito o URL. Se si condivide un file, il metodo share richiede che sia fornito l’URL della posizione del file. Il frammento di codice seguente mostra come usare questo metodo, condividendo il testo inserito in un campo di testo.
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) }
}Attualmente, questa funzionalità è supportata soltanto dalle piattaforme macOS, iOS e Android.
Per un esempio di questa funzionalità in uso, servirsi dell'app di esempio disponibile su ArcGIS AppStudio, o nel repository GitHub degli esempi di AppStudio.
Informazioni sulle impostazioni locali
Le impostazioni locali sono espresse mediante un valore standardizzato che descrive una lingua o un dialetto, includendo dettagli come l'alfabeto usato, indicatori dei decimali e formato della data. Se si usa un codice valido per le impostazioni locali, è possibile sostituire le impostazioni predefinite del proprio sistema e fornire una serie di importanti metodi di visualizzazione delle informazioni nell'app.
Queste impostazioni locali possono essere trasferite sull'app attraverso l'uso del componente LocaleInfo, che contiene proprietà per definire le impostazioni locali, nonché per eseguirne la mappatura in modo coerente negli standard e in altre sezioni dell'app. In AppStudio, un esempio può essere l'uso di LocaleInfo per stabilire la lingua di una finestra di dialogo di accesso a OAuth per ArcGIS Online. A questo scopo, creare prima un'istanza di LocaleInfo, quindi immettere informazioni sulle impostazioni locali iniziali e sulle successive modifiche.
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;
}
}
}Per aggiornare le informazioni locali dell'app, aggiungere un campo di testo sia per visualizzarle che per modificarle.
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();
}
}Le altre proprietà di LocaleInfo non si aggiorneranno durante la sincronizzazione; pertanto, sarà necessaria una funzione per aggiornarle. Ai fini di questo flusso di lavoro, la funzione sarà disponibile anche nel modello dell'elenco che può essere esposto nell'interfaccia utente.
// 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() });
}
}Dopo la configurazione del modello dell'elenco, sarà possibile aggiungere una vista Web ad un accesso OAuth, che si visualizzerà nelle impostazioni locali dichiarate nel campo di testo precedente. In questo caso, la vista Web verrà visualizzata come parte di una tabella insieme all'elenco precedente LocaleInfo delle proprietà.
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;
}
}
}
}Tenere in considerazione che il controllo del codice delle impostazioni locali e la modifica della presentazione della propria app in base ad esso fanno solo parte del processo di localizzazione. Per ulteriori informazioni, consultare Globalizzare l'app.
URL
Per eseguire operazioni più complesse con gli URL, il componente UrlInfo fornisce proprietà e metodi per la costruzione e la decostruzione di URL. Le proprietà e i metodi possono essere usati per costruire dinamicamente un URL o derivare componenti individuali da uno di essi.. La seguente sezione di codice mostra come utilizzare UrlInfo per estrarre i parametri di una query da un URL, in questo caso un feature service. Le modifiche apportate alla query estratta quando viene eseguita l'app di esempio vengono quindi riassemblate e presentate come nuovo 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 }
}