맨 위로 이동

시스템 함수

본 항목

  1. 클립보드
  2. 로캘 정보
  3. URL

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 컴포넌트는 이미지와의 상호작용을 위해 copyFromClipboard 및 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();
        }
    }
}

공유 기능

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 AppStudio 또는 AppStudio 샘플 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()        });
    }
}

목록 모델을 설정한 후에는 OAuth 로그인에 웹 뷰를 추가할 수 있습니다. 이 뷰에는 앞의 텍스트 필드에서 선언한 로캘이 보여집니다. 이 워크플로에서는 위에서 설명한 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)에서 쿼리 매개변수를 추출하는 방법을 보여줍니다. 샘플 앱 실행 시 추출된 쿼리에 대한 편집 내용은 다시 합쳐져 새로운 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    }
}

이 항목에 대한 피드백을 제공하시겠습니까?

본 항목
  1. 클립보드
  2. 로캘 정보
  3. URL