Basic Web Browser in Cascades

So, it's been a while since I have been able to get any code together for you guys, but now that MockIt! has launched officially, I should have time to get some posts together (big post coming within a few days!).  Also, Brandon Orr (@elbranduco) will be getting some awesome tutorials together for you Cascades devs.

Today, I made a small project for a friend of mine, and thought some of you might find it helpful.  The app is a simple one page web browser built in Cascades.

The project is attached at the end of this post, but first let me highlight a couple of things that I feel are important, simple elements of this sample app.

  • Browser viewable area goes full screen when scrolled (hiding url bar and action bar)
  • Address bar detects whether or not the url contains http: or https: and inserts http: if necessary
  • Back and Forward Action Items disable when they cannot be used 
  • Scrolling is vertical only until the user zooms in, which makes for a more natural experience

Screenshots

MockIt 27042014205729

main.qml

import bb.cascades 1.2

Page {
    id: thePage
    ///Hide the action bar during a scroll event
    actionBarAutoHideBehavior: ActionBarAutoHideBehavior.HideOnScroll
    titleBar: TitleBar {
        scrollBehavior: TitleBarScrollBehavior.NonSticky
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {

            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                rightPadding: 10
                leftPadding: 10
                Label {
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1
                    }
                    text: "url"
                    verticalAlignment: VerticalAlignment.Center
                }
                TextField {
                    id: urlBar
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 8
                    }
                    hintText: "Enter and address"
                    verticalAlignment: VerticalAlignment.Center
                    textFormat: TextFormat.Plain
                    onFocusedChanged: {
                        if (focused == true) {

                        }
                    }
                    inputMode: TextFieldInputMode.Url
                    input.submitKey: SubmitKey.Go
                    input {
                        onSubmitted: {
                            if (urlBar.text.indexOf("http:") != -1 || urlBar.text.indexOf("https:") != -1) {
                                webView.url = urlBar.text
                            } else {
                                webView.url = "http://" + urlBar.text
                            }
                        }
                    }
                }
            }

        }
    }
    actions: [
        ActionItem {
            title: "Back"
            imageSource: "asset:///images/ic_previous.png"
            enabled: webView.canGoBack
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                webView.goBack()
            }
        },
        ActionItem {
            title: "Reload"
            imageSource: "asset:///images/ic_refresh.png"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                webView.reload()
            }
        },
        ActionItem {
            title: "Forward"
            imageSource: "asset:///images/ic_next.png"
            enabled: webView.canGoForward
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                webView.goForward()
            }
        }
    ]

    Container {
        layout: DockLayout {
        }
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        // To enable scrolling in the WebView, it is put inside a ScrollView.
        ScrollView {
            // Scrolling is restricted to vertical direction only, in this particular case.
            scrollRole: ScrollRole.Main
            scrollViewProperties.scrollMode: ScrollMode.Vertical
            scrollViewProperties.pinchToZoomEnabled: true
            scrollViewProperties.minContentScale: 1.0
            scrollViewProperties.maxContentScale: 4.0
            onContentScaleChanged: {
                //here we allow for scrolling beth vertically and horixontally if the user zooms in
                if (contentScale > 1.0) {
                    scrollViewProperties.scrollMode = ScrollMode.Both
                } else {
                    scrollViewProperties.scrollMode = ScrollMode.Vertical
                }
            }

            WebView {
                id: webView
                // The url that is loaded points to OSBB.
                url: "http://opensourcebb.com"
                onUrlChanged: {
                    reload()
                    progressIndicator.setOpacity(1.0)
                }
                onLoadProgressChanged: {
                    // Update the ProgressBar while loading.
                    progressIndicator.value = loadProgress / 100.0
                }
                onLoadingChanged: {

                    //All this pertains to the progress bar and dislpays some HTML if there is an error loading
                    if (loadRequest.status == WebLoadStatus.Started) {
                        // Show the ProgressBar when loading started.
                        progressIndicator.opacity = 1.0
                    } else if (loadRequest.status == WebLoadStatus.Succeeded) {
                        // Hide the ProgressBar when loading is complete.
                        progressIndicator.opacity = 0.0
                    } else if (loadRequest.status == WebLoadStatus.Failed) {
                        // If loading failed, fallback to inline HTML, by setting the HTML property directly.
                        html = "
Fallback HTML on Loading Failed










 Oh ooh, loading of the URL that was set on this WebView failed. Perhaps you are not connected to the Internet?"
                        progressIndicator.opacity = 0.0
                    }
                }

                // This is the Navigation-requested signal handler so just print to console to illustrate usage.
                onNavigationRequested: {
                    //just console stuff
                    console.debug("NavigationRequested: " + request.url + " navigationType=" + request.navigationType)
                }
            }
        } // ScrollView

        // A progress indicator that is used to show the loading status
        Container {
            topPadding: 1
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Top

            ProgressIndicator {
                id: progressIndicator
                opacity: 0
            }
        }
    } // mainContainer
}

There is no added code other than the above in this project, however, the project and its assets are attached to this post below, and I hope some of you find this useful!

View on GitHub: https://github.com/OpenSourceBB/WebviewNav

Leave your comments

Post comment as a guest

0
  • No comments found
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top