El AppFramework de AppStudio contiene varios componentes que ofrecen acceso a funciones de sistema estándar y reconocidas. Aunque estos componentes no son necesarios para utilizar estas funciones en su aplicación, debería plantearse su implementación si planea utilizar estas funciones.
Portapapeles
Por defecto, no hay nada que impida a una aplicación de AppStudio acceder a las funciones de cortar, copiar y pegar del portapapeles del sistema; tampoco tiene que escribir ningún tipo de código si esa es su intención. Para flujos de trabajo más complejos que requieran el portapapeles, incluida la copia de elementos tales como colores y objetos de JavaScript, el componente Clipboard ofrece un acceso más detallado al portapapeles del sistema.
El componente Clipboard contiene múltiples propiedades y métodos para devolver el contenido del portapapeles del sistema, en función del tipo de datos almacenados en él. La propiedad text devuelve los contenidos como cadena de texto plano si es posible, sin formatear y potencialmente con HTML visible, en función del contenido del portapapeles.
TextArea {
id: textArea
Layout.fillWidth: true
Layout.fillHeight: true
text: AppFramework.clipboard.text
readOnly: true
}La propiedad html, sin embargo, está principalmente prevista para leer y mostrar contenido HTML. Esta propiedad también puede leer y retener formato de texto más complejo; la siguiente muestra de código lo utiliza adjuntando la propiedad a un área de texto con el formato de texto enriquecido activado.
TextArea {
id: htmlTextArea Layout.fillWidth: true Layout.fillHeight: true text: AppFramework.clipboard.html textFormat: Text.RichText readOnly: true
}Los valores de color se almacenan como aplicación/x-color de tipo MIME y únicamente se pueden escribir o devolver por la propiedad color.
El componente Clipboard no tiene forma alguna de interactuar con imágenes en el portapapeles del sistema (aunque, en función de la fuente, la propiedad text puede devolver una URL). En su lugar, el componente ImageObject proporciona los métodos copyFromClipboard y pasteFromClipboard para la interacción.
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();
}
}
}Compartir funcionalidades
Puede compartir texto, URL o archivos con otras aplicaciones mediante la funcionalidad de uso compartido suministrada por el Portapapeles de AppFramework. El método share del componente del Portapapeles se utiliza para compartir cualquier URL y texto de entrada. Si comparte un archivo, el método share requiere que se proporcione la URL de ubicación del archivo. El siguiente fragmento de código muestra cómo utilizar este método, compartiendo el texto introducido en un campo de texto.
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) }
}Actualmente, esta funcionalidad solamente es compatible con plataformas macOS, iOS y Android.
Como ejemplo de esta funcionalidad, consulte la aplicación de muestra disponible en ArcGIS AppStudio o en el repositorio de GitHub de muestras de AppStudio.
Información de configuración regional
Una configuración regional es un valor estandarizado que describe un idioma o un dialecto, incluidos detalles tales como el alfabeto utilizado, los marcadores decimales y el formato de fecha. Al utilizar un código de configuración regional válido, usted puede sobrescribir la configuración regional predeterminada de su sistema, y proporcionar diversas formas importantes en las que se mostrará la información en su aplicación.
Estas configuraciones regionales se pueden pasar a la aplicación a través del componente LocaleInfo, que contiene las propiedades para definir una configuración regional, así como para distribuir la configuración regional de forma uniforme en estándares y otras secciones de su aplicación. En AppStudio, un ejemplo sería utilizar LocaleInfo para determinar el idioma de un cuadro de diálogo de inicio de sesión de OAuth para ArcGIS Online. Para lograrlo, primero cree una instancia de LocaleInfo y proporcione información tanto de la configuración regional inicial como del momento en el que cambie la configuración regional.
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;
}
}
}Para actualizar la configuración regional de la aplicación, agregue un campo de texto para mostrar y editar la configuración regional.
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();
}
}Ya que el resto de propiedades de LocaleInfo no se actualizarán durante la sincronización, se necesita una función para actualizarlos. A efectos de este flujo de trabajo, la función también será un modelo de lista que se puede mostrar en la 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() });
}
}Una vez configurado el modelo de lista, puede agregar una vista web de un inicio de sesión de OAuth, que mostrará la configuración regional reflejada en el campo de texto anterior. En este caso, la vista web aparece como parte de una vista de pestaña en la lista de propiedades LocaleInfo anterior.
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;
}
}
}
}Recuerde que el control del código de configuración regional y la modificación de la presentación de su aplicación que dependa de este código son solo parte del proceso de localización. Para obtener más información, consulte Globalizar su aplicación.
Direcciones URL
Para realizar operaciones complejas con URL, el componente UrlInfo ofrece propiedades y métodos para construir y deconstruir URL. Estas propiedades y métodos se pueden utilizar para construir dinámicamente una URL o para derivar componentes individuales de una. La siguiente sección de código muestra cómo utilizar UrlInfo para extraer los parámetros de una consulta de una URL, en este caso, un servicio de entidades. Las ediciones realizadas a la consulta extraída cuando la aplicación de muestra se está ejecutando se vuelven a ensamblar y se presentan como una URL nueva.
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 }
}