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
New Contributor
awatara
Posts: 3
Registered: ‎11-21-2013
My Device: Z30
My Carrier: Tsel

Webview navigation using peek?

Hi All,

 

I tried to use Webview on my app to access my mobile site.

I would like to add Peek feature when users click an url and want to go back to previous page.

 

Any ideas?

 

thanks in advance

Please use plain text.
Developer
BBSJdev
Posts: 5,948
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
My Carrier: Orange

Re: Webview navigation using peek?

Can you explain your problem a bit more?

Are you asking to invoke peek from a web page, if so this is not possible.


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
greenmr
Posts: 865
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Webview navigation using peek?

[ Edited ]

Please explain what you mean by "peek feature". My multiFEED app has backward and forward buttons on the action bar to do what you are describing. Do you mean you actually want to see the previous page contents under the current one when you peek? If so I think the only way this would work is to have a new WebView on a pushed page when you navigate forward, but this would get complicated fast since you'd always need to ensure there was a WebView behind the current on that was displaying the previous page.

 

If you want to do it this way you would need to trap the onNavigationRequested event and push a new WebView every time the user clicked a link. Although this should work, if the user kept browsing without going back you could easily have tens or hundreds of pages on the stack, each containing a loaded WebView. I don't think this is going to be very practical.


awatara wrote:

Hi All,

 

I tried to use Webview on my app to access my mobile site.

I would like to add Peek feature when users click an url and want to go back to previous page.

 

Any ideas?

 

thanks in advance






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.
Please use plain text.
Developer
greenmr
Posts: 865
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Webview navigation using peek?

It would be really nice to get notified when someone answers a thread while you are busy typing your own reply. I can't count how often I have hit the "Post" button, only to discover someone else has posted almost the same answer while I was typing. LOL


BBSJdev wrote:

Can you explain your problem a bit more?

Are you asking to invoke peek from a web page, if so this is not possible.






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.
Please use plain text.
New Contributor
awatara
Posts: 3
Registered: ‎11-21-2013
My Device: Z30
My Carrier: Tsel

Re: Webview navigation using peek?

Thanks guys
Yes, i would like to peek the previous page from the current one.
I'm guessing Booking.com app using webview to their mobile site and it has peek to go back. I would like to implement it to my app.

I've read about onNavigationRequested, but still don't get how it works, can you explain a bit about this function, even better if you have example on that

Thanks
Please use plain text.
Developer
greenmr
Posts: 865
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Webview navigation using peek?

The navigationRequested signal is triggered whenever the WebView wants to go to a new URL from the current one. Not only does the signal tell you where it wants to go, but also what triggered the request (i.e. user clicked a link, go back/forward, or reload), and most important, it allows you to prevent the WebView from executing its normal response to such a request so you can do something else instead (or just igore it).

 

For instance, my multiFEED app has a help feature that uses a WebView to browse HTML help files stored locally in "assets:///". Although most links in this help point to another help page, a few of them are external links from the web. My app checks each requested URL in the onNavigationRequested slot, and if it begins with "http" it launches the full BlackBerry browser rather than display it in the help viewer WebView. All the links to help HTML are local or relative URLs so don't begin with "http".

 

Even though I don't really think your idea is practical, if you want to implement it you should catch the navigationRequested signal, tell the WebView to ignore it with  WebNavigationRequest::ignore(), then push another page with a new WebView on it to display the target URL instead.


awatara wrote:
Thanks guys
Yes, i would like to peek the previous page from the current one.
I'm guessing Booking.com app using webview to their mobile site and it has peek to go back. I would like to implement it to my app.

I've read about onNavigationRequested, but still don't get how it works, can you explain a bit about this function, even better if you have example on that

Thanks





Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.
Please use plain text.
Developer
BBSJdev
Posts: 5,948
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
My Carrier: Orange

Re: Webview navigation using peek?

[ Edited ]

greenmr wrote:

It would be really nice to get notified when someone answers a thread while you are busy typing your own reply. I can't count how often I have hit the "Post" button, only to discover someone else has posted almost the same answer while I was typing. LOL


 

Yeah I've mentioned this before in other posts. Still it's better to have many answers than none. :-)

 

Yours is the more comprehensive answer, although I think the use of the word peek (as BlackBerry describes it) is being used incorrectly here really the OP is about navigation.

 

[Edit] put a request in JIRA and I'll upvote it. LOL.


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
greenmr
Posts: 865
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Webview navigation using peek?

That's what I was trying to determine when I posted the original request for clarification. I took the OP's reply to mean they really are trying to use peek, that is to say, to see the previous page under the current one when the current page is dragged over part way. If I am wrong then the OP can perhaps correct me.

 

As I said though, while I can visualize what the OP hopes to achieve (I think), and agree it would be quite "nifty", I really don't believe it is practical.


BBSJdev wrote:

greenmr wrote:

It would be really nice to get notified when someone answers a thread while you are busy typing your own reply. I can't count how often I have hit the "Post" button, only to discover someone else has posted almost the same answer while I was typing. LOL


 

Yeah I've mentioned this before in other posts. Still it's better to have many answers than none. :-)

 

Yours is the more comprehensive answer, although I think the use of the word peek (as BlackBerry describes it) is being used incorrectly here really the OP is about navigation.

 

[Edit] put a request in JIRA and I'll upvote it. LOL.






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.
Please use plain text.
Contributor
nubianprince
Posts: 13
Registered: ‎07-21-2013
My Device: z10
My Carrier: rogers

Re: Webview navigation using peek?

greenmr any chance you can post a sample code on how to do this? , i have been trying to wrap my head around this for some time now.

 

Thanks

Please use plain text.
Developer
greenmr
Posts: 865
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Webview navigation using peek?

I do almost all my development in C++ these days, but I'll give you some pseudocode in QML/JavaScript since I think more developers will understand it that way. Note that none of what I am posting here is expected to be working code as-is, but it should point you in the right direction.

 

Lets start with a NavigationPane that will hold everything:

 

NavigationPane {
   id: navPane
   attachedObjects: [
      ComponentDefinition {
         id: webViewerPageDef
         WebViewer {
         }
      }
   ]
   function viewWeb(url) {
      var viewer = webViewerPageDef.createObject();
      viewer.url = url;
      navPane.push(viewer);
   }
   onPopTransitionEnded: {
      if ( page.objectName == "webViewer" ) {
         page.destroy();
      }
   }
   onCreationCompleted: {
      // ---This makes it easier to push pages from anywhere
      Qt.navPane = navPane;
   }
}

Calling navPane.viewWeb() will create a starting web viewer and push it onto the stack. Now let's define WebViewer.QML:

 

Page {
   property alias url: webView.url
   objectName: "webViewer"
   Container {
      ScrollView {
         WebView {
            id: webView
            onNavigationRequested: {
               // ---Only handle link clicked request. Other request types handled normally by WebView
               if (request.navigationType == WebNavigationType.LinkClicked)
                  // ---Prevent the WebView from doing the default action
                  request.action = WebNavigationRequestAction.Ignore;
                  
                  // ---Instead, create and push another viewer page onto the stack
                  Qt.navPane.viewWeb(request.url);
               }
            }
         }
      }
   }
}

 

Now, whenever the user clicks a link, rather than handle it normally by just loading the new link into the current WebView, a new page is created, the link if loaded onto that instead, then pushed onto the top of the stack.

 

As I said at the top, this is just bare-bones code and needs fleshing out to be useful. It should, however, give you a better idea of what I was suggesting. Note that you would probably want to handle goForward() the same way, which would require extra code since WebNavigationType doesn't differentiate between forward and backward.

 

Also, as I said in a previous post, depending on what the user does, you could wind up with hundreds of pushed pages on the stack, which I think makes this an unworkable and impractical way to open links.

 


nubianprince wrote:

greenmr any chance you can post a sample code on how to do this? , i have been trying to wrap my head around this for some time now.

 

Thanks






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.
Please use plain text.