앱의 모든 네트워크 프로세스는 네트워크 요청, 즉 네트워크 주소와 앱 간의 정보 교환을 통해 처리됩니다. 이러한 요청은 지속적인 연결과 정보의 최신 상태를 유지하거나, 중앙 피처 서비스에 양식 응답을 업로드하거나, 타일 패키지 또는 지오데이터베이스를 다운로드하는 등의 작업을 수행하기 위한 피처 서비스와 앱 간의 신호 교환일 수 있습니다.
네트워크 요청 생성
대부분의 네트워크 요청은 NetworkRequest 컴포넌트를 통해 처리됩니다. 이 컴포넌트에는 요청의 구성, 대상, 설정뿐 아니라 요청 프로세스 모니터링 지원을 위한 여러 함수도 포함되어 있습니다.
다음 코드 샘플은 온라인 원본에서 파일(여기서는 이미지)을 다운로드하는 프로세스를 보여 줍니다. 콘솔에는 다운로드 프로세스가 나타나며, 요청 완료 시에는 기기에 다운로드된 파일의 URL도 표시됩니다.
QtObject {
id: internal
property url folderUrl: AppFramework.userHomeFolder.fileUrl("ArcGIS/Runtime/Data");
}
FileFolder { //Creates FileFolder object to handle filepath
id: fileFolder
url: internal.folderUrl
Component.onCompleted: {
if (!fileFolder.exists) {
fileFolder.makeFolder(internal.folderUrl);
}
}
}
//Downloads an image from the web
NetworkRequest {
id: networkRequest
url: "http://appstudio.arcgis.com/images/index/introview.jpg"
responsePath: fileFolder.path +"/appstudio.jpg"
property url imagePath: responsePath
onReadyStateChanged: {
if (readyState === NetworkRequest.DONE) {
console.log(networkRequest.url, networkRequest.responsePath)
image.source = internal.folderUrl+"/appstudio.jpg";
}
}
onProgressChanged: console.log("progress:", progress)
onError: {
console.log(errorText + ", " + errorCode)
//On failure, don't use the local copy
image.source = ""
}
}
ColumnLayout {
spacing: 20
anchors {
left: app.left
top: app.top
margins: 20
}
Button {
id:download
text: "Download Request (Download Image)"
Layout.margins: 2
Layout.fillWidth: true
onClicked: {
networkRequest.send({f:"json"});
}
}
Button {
id: clear
text: "Clear"
Layout.margins: 2
Layout.fillWidth: true
onClicked: {
image.source = ""
}
}
Image {
id: image
Layout.margins: 10
Layout.preferredWidth: 250
Layout.preferredHeight: 200
}
}progress 신호를 통해 보고되는 onProgressChanged 속성은 0.0~1.0 범위의 소수 값 형식으로 네트워크 요청 프로세스를 설명합니다. 이 속성은 요청의 전송 측과 수신 측 가중치가 같다고 간주하므로 이 값이 일정한 속도로 증가하는 경우는 거의 없습니다. 예를 들어 위의 코드 샘플에 이 코드 샘플을 추가하면 이미지 다운로드의 진행률 표시줄이 나타납니다. 그러나 요청의 전송 부분이 매우 작기 때문에 이 진행률 표시줄은 비어 있는 상태에서 절반 지점까지는 빠르게 이동하며, 나머지 부분은 비교적 느리게 진행됩니다.
ProgressBar {
id: progressBar
visible: true
anchors {
left: parent.left
leftMargin: 10
right: parent.right
rightMargin: 10
}
value: networkRequest.progress
}네트워크 헤더
네트워크 요청의 헤더는 요청 원본에 대한 식별 정보를 대상 주소에 제공합니다. NetworkRequestHeaders 컴포넌트가 이 정보 제공을 처리합니다. headers 속성을 통해 이 컴포넌트를 사용하여 이러한 헤더에서 대체 정보를 정의할 수 있습니다.
NetworkRequestHeaders에는 이러한 영역에 쓰는 데 사용할 수 있는 두 가지 속성이 있습니다. Referrer 속성은 요청의 원점 주소를 설명하는 반면 userAgent 속성은 해당 주소에 접근하는 데 사용되는 소프트웨어를 설명합니다. 이러한 속성은 기본 설정에 따라 앱을 반영하는 값을 반환하지만, 다른 값을 반환하도록 정의할 수도 있습니다. 다음 샘플 코드는 Mozilla Firefox를 사용하여 자체 설명이 포함된 업로드 요청을 ArcGIS Online 홈페이지에서 들어오는 요청으로 전송합니다.
NetworkRequest {
id: uploadRequest
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/1/applyEdits"
method: "POST"
headers.referrer: "https://www.arcgis.com/home/index.html"
headers.userAgent: "Mozilla/5.0"
onReadyStateChanged: {
if ( readyState === NetworkRequest.DONE ) {
result.text = responseText
}
}
onError: result.text = errorText + ", " + errorCode
}
ColumnLayout {
spacing: 20
anchors {
left: app.left
top: app.top
margins: 20
}
Button {
id:upload
text: "Upload Request"
Layout.margins: 2
Layout.fillWidth: true
onClicked: {
uploadRequest.send({adds:"[{\"attributes\":{\"description\":\"Networkrequest Sample\",\"symbolid\":\"13\",\"timestamp\":null},\"geometry\":{\"paths\":[[[-11542803.322978519,3129176.1574580222],[-3547788.0343353897,8625749.168400176],[-5746417.238712249,-3366773.7645645197]]],\"spatialReference\":{\"latestWkid\":3857,\"wkid\":102100}}}]", f:"json"});
}
}
TextArea {
id:result
readOnly: true
Layout.fillWidth: true
Layout.margins: 10
Layout.preferredWidth: 250
Layout.preferredHeight: 75
}
}