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
Tobster_
Posts: 242
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?

Please use plain text.
Developer
Benecore
Posts: 458
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: T-Mobile

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 :smileyvery-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
Please use plain text.
Developer
Tobster_
Posts: 242
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: webView Query

That worked! Thanks :smileyvery-happy:

Is there a way to enable desktop mode in a webView?
Please use plain text.
Developer
Benecore
Posts: 458
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: T-Mobile

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
Please use plain text.
Developer
Tobster_
Posts: 242
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 :smileyhappy: 

Please use plain text.
Developer
Benecore
Posts: 458
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: T-Mobile

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 :smileywink:



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
Please use plain text.
Developer
Tobster_
Posts: 242
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 :smileyvery-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: {
                
            }
        }

 

Please use plain text.
Developer
Benecore
Posts: 458
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: T-Mobile

Re: webView Query

[ Edited ]

Many different questions in one topic :smileyhappy:
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
Please use plain text.
Developer
Tobster_
Posts: 242
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 :smileywink:

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

Thanks for all of your help with my webView queries
Please use plain text.
Developer
Benecore
Posts: 458
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: T-Mobile

Re: webView Query

[ Edited ]

Ok :smileywink: , 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 :smileywink:

 



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
Please use plain text.