Network requests

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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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
    }
}