All network processes in an app are handled by network requests, an exchange of information between a network address and an app. These requests can be signaling exchanges between the app and a feature service to ensure a continued connection and up-to-date information, uploading form responses to a central feature service, or downloading a tile package or geodatabase, as examples.
Create a network request
The majority of a network request is handled by the NetworkRequest component. This component contains the configurations, destination, and settings of the request, as well as a number of functions to aid in monitoring the process of the request.
The following code sample shows the process of downloading a file from an online source, in this case, an image. The console displays the process of the download, as well as the URL of the downloaded file on the device when the request is complete.
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
}
}
The progress property, reported by the onProgressChanged signal, describes the process of the network request in the form of a decimal value from 0.0 to 1.0. This property considers both the sending and receiving halves of the request of equal weight, meaning that this value will rarely progress at a linear rate; for example, adding this code sample to the one above will display a progress bar for the image download. However, this progress bar will jump quickly from empty to the halfway point (as the send portion of the request is very small) before progressing the rest of the way comparatively slowly.
ProgressBar {
id: progressBar
visible: true
anchors {
left: parent.left
leftMargin: 10
right: parent.right
rightMargin: 10
}
value: networkRequest.progress
}
Network headers
The header to a network request provides identifying information to the destination address about the source of the request. The NetworkRequestHeaders component handles this and can be used through the headers property to define alternative information in these headers.
NetworkRequestHeaders has two properties that can be used to write to these areas. The Referrer property describes the origin address of the request, while the userAgent property describes the software used to access this. By default, these properties will return values reflective of the app but can be defined otherwise. The following sample code sends an upload request describing itself as coming from the ArcGIS Online home page using Mozilla Firefox.
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
}
}