Moduł AppFramework aplikacji AppStudio zawiera kilka składników umożliwiających dostęp do standardowych i dobrze znanych funkcji systemowych. Chociaż użycie tych funkcji w aplikacji nie wymaga stosowania wspomnianych komponentów, należy jednak rozważyć ich zaimplementowanie, gdy myślimy o korzystaniu z tych funkcji.
Schowek
Domyślnie aplikacja AppStudio ma dostęp do funkcji wycinania, kopiowania i wklejania przy użyciu schowka systemowego i jeśli taki jest cel użytkownika, nie musi on pisać żadnego kodu. W przypadku bardziej złożonych procedur wykonywania zadań wykorzystujących schowek, w tym kopiowania elementów (takich jak kolory i obiekty JavaScript), komponent Clipboard zapewnia bardziej szczegółowy dostęp do schowka systemowego.
Komponent Clipboard zawiera wiele właściwości i metod umożliwiających zwrócenie zawartości schowka w zależności od typu przechowywanych w nim danych. Właściwość text zwraca zawartość w postaci ciągu znakowego zwykłego tekstu (jeśli to możliwe) bez formatowania i potencjalnie bez widocznego kodu HTML, w zależności od zawartości schowka.
TextArea {
id: textArea
Layout.fillWidth: true
Layout.fillHeight: true
text: AppFramework.clipboard.text
readOnly: true
}Z drugiej strony właściwość html jest przeznaczona głównie do odczytu i wyświetlania treści HTML. Za pomocą tej właściwości można także odczytywać i zapisywać tekst o bardziej złożonym formacie, co zostało wykorzystane w poniższym przykładowym kodzie, w którym właściwość została zastosowana dla obszaru tekstu z włączonym formatem RTF.
TextArea {
id: htmlTextArea Layout.fillWidth: true Layout.fillHeight: true text: AppFramework.clipboard.html textFormat: Text.RichText readOnly: true
}Wartości kolorów są przechowywane jako typ MIME (application/x-color) i mogą być zapisywane lub zwracane wyłącznie przez właściwość color.
Komponent Clipboard nie może prowadzić interakcji z obrazami w schowku systemowym (chociaż, w zależności od źródła, właściwość text może zwracać adres URL). Zamiast tego, do obsługi tej interakcji komponent ImageObject udostępnia metody copyFromClipboard i 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();
}
}
}Funkcja udostępniania
Tekst, adresy URL i pliki mogą być udostępniane innym aplikacjom przy użyciu funkcji udostępniania oferowanej przez schowek modułu AppFramework. Metoda share komponentu schowka jest używana do udostępniania dowolnego wejściowego tekstu lub adresu URL. Gdy plik jest udostępniany, metoda share wymaga podania adresu URL lokalizacji pliku. Poniższy fragment kodu przedstawia sposób użycia tej metody w celu udostępnienia tekstu wprowadzonego w polu tekstowym.
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) }
}Aktualnie ta funkcjonalność jest obsługiwana tylko na platformach macOS, iOS i Android.
Jako ilustracja użycia tej funkcjonalności może służyć przykładowa aplikacja dostępna w aplikacji ArcGIS AppStudio lub w repozytorium GitHub udostępniającym przykładowe rozwiązania dla aplikacji AppStudio.
Informacje o ustawieniach regionalnych
Ustawienia regionalne to standaryzowana wartość opisująca język lub dialekt, w tym szczegóły, takie jak używany alfabet, znaczniki dziesiętne i format daty. Przy użyciu poprawnego kodu ustawień regionalnych można zastąpić domyślne ustawienia regionalne systemu i umożliwić wyświetlanie informacji w aplikacji na wiele sposobów.
Te ustawienia regionalne można przekazać do aplikacji za pośrednictwem komponentu LocaleInfo, który zawiera właściwości służące do definiowania ustawień regionalnych, jak również do odwzorowywania ustawień regionalnych w jednolity sposób w standardach i innych sekcjach aplikacji. W aplikacji AppStudio przykładem tego może być użycie komponentu LocaleInfo do określenia języka okna dialogowego logowania OAuth do usługi ArcGIS Online. W tym celu należy najpierw zainicjować komponent LocaleInfo i przekazać mu informacje o początkowych ustawieniach regionalnych i dacie ich zmiany.
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;
}
}
}Aby zaktualizować ustawienia regionalne aplikacji, należy dodać pole tekstowe dla wyświetlania i edycji ustawień regionalnych.
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();
}
}Ponieważ inne właściwości komponentu LocaleInfo nie będą aktualizowane podczas synchronizacji, do ich aktualizacji potrzebna jest funkcja. Na potrzeby tej procedury wykonywania zadań funkcja ta znajdzie się też w modelu listy, który można udostępnić w interfejsie użytkownika.
// 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() });
}
}Po dokonaniu konfiguracji modelu listy można dodać widok internetowy do logowania OAuth, który będzie wyświetlany w ustawieniach regionalnych zadeklarowanych we wcześniejszym polu tekstowym. W tym przypadku widok internetowy jest wyświetlany jako część widoku karty obok powyższej listy właściwości 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;
}
}
}
}Należy zdawać sobie sprawę, że zarządzanie kodem ustawień regionalnych i uzależniona od tego kodu zmiana prezentacji aplikacji stanowią tylko część procesu lokalizacji. Więcej informacji zawiera sekcja Globalizacja aplikacji.
Adresy URL
Aby można było wykonywać złożone operacje na adresach URL, komponent UrlInfo udostępnia właściwości i metody służące do konstruowania i dekonstruowania adresów URL. Tych właściwości i metod można używać do dynamicznego konstruowania adresu URL lub uzyskiwania poszczególnych jego komponentów. W poniższej sekcji kodu przedstawiono użycie UrlInfo do wyodrębnienia parametrów zapytania z adresu URL, w tym przypadku usługi obiektowej. Zmiany wprowadzane do wyodrębnionego zapytania podczas działania przykładowej aplikacji są następnie ponownie łączone i prezentowane jako nowy adres 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 }
}