Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
Posts: 357
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK
Accepted Solution

webView Query

Hello, 

 

I am currently looking at invoking a search within a page on my app so I am looking to use a webView but I cannot figure out how to use the property alias to add it to the search page. 

 

Here's my code:

 

fixtures.qml

import bb.cascades 1.0

Page {
    property alias fixtureInfo: fixtureText.text

    Label {
        id: fixtureText
        multiline: true
    }
    actions: [
        ActionItem {
            title: qsTr("Search For Live Score")
            imageSource: "asset:///IMG/ic_search.png"
            ActionBar.placement: ActionBarPlacement.InOverflow

            onTriggered: {
                var searchpage = goToSearch.createObject();
                navigationPane1.push(searchpage);
            }
        },
        ActionItem {
            title: qsTr("Go To: Teams")
            imageSource: "asset:///IMG/ic_contacts.png"
            ActionBar.placement: ActionBarPlacement.InOverflow

            onTriggered: {
                //Go to the teams tab
            }
        }
    ]
    attachedObjects: [
        ComponentDefinition {
            id: goToSearch
            source: "webView.qml"
        },
        Invocation {
            id: invokeCalendar
            query {
                mimeType: "text/calendar"
                invokeActionId: "bb.action.CREATE"
                invokeTargetId: "sys.pim.calendar.viewer.eventcreate"
            }
        }
    ]
}

 webView.qml

import bb.cascades 1.0

Page {
    ScrollView {
        scrollViewProperties.pinchToZoomEnabled: true
        scrollViewProperties.scrollMode: ScrollMode.Both
        Container {
            background: Color.create ("#f8f8f8")
            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }
            WebView {
                url: "https://www.google.com/search?q=" + fixtureInfo.text
            }
        }
    }
}

 Now, the webView loads correctly but it searches "undefined" rather than what fixtureInfo.text is; so what am I doing wrong in my code for the webView not to read fixtureInfo.text?

 

Thanks in advance and is it possible to somehow enable desktop mode in a webView?

Highlighted
Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: webView Query

[ Edited ]

fixtures.qml page is a root page? If not, you can't access the Label from WebView page.

You can search for "How to pass properies between pages" .There is many options how can you do that. I give you one workaround

Create a function in your WebView page which receive an search text and then call it after you push page to navigationPane.

For example (because i like examples Smiley Very Happy)

 

webView.qml

Page{
    

    function searchText(text){
        webView.url = "https://www.google.com/search?q=" + text
    }
}

 and in your fixtures.qml page

var searchpage = goToSearch.createObject();
navigationPane1.push(searchpage);
searchpage.searchText(fixtureText.text)

 There is many other workarounds. You can create an alias property for the WebView.url and just pass the text or.....

Hope it helps

 



If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Posts: 357
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: webView Query

That worked! Thanks Smiley Very Happy

Is there a way to enable desktop mode in a webView?
Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: webView Query

[ Edited ]

I think you can enable desktop mode by changing the User Agent string, I think it could work.



If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Posts: 357
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: webView Query

I haven't worked with the User Agent string before; I know the CSS looks like this: 

 

settings.userStyleSheetLocation: "asset:///CSS/webViewStyle.css"

 So, what would a User Agent string look like? 

 

Thanks again Smiley Happy 

Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: webView Query

[ Edited ]

Try to set desktop mode in your mobile and check how the string looks like

http://www.whatsmyuseragent.com/

 

EDIT

I tried and this is the result:

Mobile UserAgent (BB10 broowser)

Mozilla/5.0 (BB10; Kbd) AppleWebKit/537.35+ (KHTML, like Gecko) Version/10.2.1.3175 Mobile Safari/537.35+


and Desktop mode

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.35

 

So as you can see is different, try it.

 

PS: if desktop mode does not work try also clear the cookies Smiley Wink



If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Posts: 357
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: webView Query

I went on and got the User Agent, applied it to my webView and it worked Smiley Very Happy 

 

settings.userAgent: "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.35"

How would I set an actionItem to turn on and off the userAgent and for the title, of the actionItem, to display "Desktop Mode: On" for when it's enabled and "Desktop Mode: Off" for when it's disabled? 

 

ActionItem {
            id: action6
            title: qsTr("Desktop Mode:")
            imageSource: "asset:///IMG/ic_enable.png"
            ActionBar.placement: ActionBarPlacement.InOverflow
            
            onTriggered: {
                
            }
        }

 

Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: webView Query

[ Edited ]

Many different questions in one topic Smiley Happy
Create a property for checking if is in desktop mode:

property bool desktopEnabled: false

ActionItem{
    title: desktopEnabled ? "Desktop mode" : "Mobile mode"
    onTriggered:{
        desktopEnabled = !desktopEnabled
        if (desktopEnabled)
            webview.settings.userAgent = //set desktop agent
        else
            webview.settings.userAgent = //set mobile agent
    }
}


If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Posts: 357
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: webView Query

Haha, sorry about so many questions Smiley Wink

I changed your code around a bit and got it to work perfectly!

Thanks for all of your help with my webView queries
Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: webView Query

[ Edited ]

Ok Smiley Wink , it is because some users try to search problem and it's difficult if are in one topic. So, it's better create a new topic for new problem (if doesn't exists).

 

btw: I'm glad it's working. Happy coding Smiley Wink

 



If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog