One idea, 4 samples, a lot of support forum posts and a fine result.

So today I want to tell you a little bit more about WebSplitter app. This post is for new developers. Not for those that can do anything because they know how to code. It’s for those who are new in the business. As in many things in life, there is a certain order things should be done.

Before anything else comes the  idea.  My idea was simple. I need 2 browsers in one signle page! I know Z10’s browser is the best, but i still want 2 browsers in one page.  I can do this, i say to my self and I start a new project in Cascades. One simple page, two identical containers of half screen size and a webview in each container. Simple so far. I know webview is not for browsing purposes, but who cares? This is for me only.(or at least this is what I was saying 4 weeks ago)

Now we need a text field on top of each container to add the url of each webview. Simple also. We need back/reload/forward buttons too.

https://developer.blackberry.com/cascades/reference/bb__cascades__webview.html

So easy to do this. All the examples are here. Even the progress bar is ready for me in the samples.

https://github.com/blackberry/Cascades-Samples/blob/master/cascadescookbookqml/assets/WebView.qml

 

So far so good. Everything is working and idea done! For my personal pleasure only! At that time i had no intention of publishing that kind of app. I just did it for my personal needs. It took me about 1 hour and was working. Then i made a “mistake”. I told it to the “wrong” people. The responses i got were:”Nice idea man.”, “Could be a cool app”, “Why dont you seel this app?”, etc etc. I even shared the bar file with few of them.

IMG_00000077

 

They convinced me. Bare in mind that c/c++ is not my best, but so far no code was needed. Everything was made with qml with the help of the samples.  So lets do this a cool app. What else we need? First of all we need a lot of options and simple design. The basic option is open each grid url in the BB10 browser. For all cases that webview is not supporting the content(youtube videos, pages that pops up windows etc) Easy to do that as well. A simple InvokeActionItem.The same thing with Sharing. Cool. Now why not adding the option to change sizes of each mini-browser? That was easy too. I just added a new container 15pix height between the minibrowsers. Now all i had to do was play with preferredHeights and connect them with the containers position in the screen. Well played.

So the basics for an distributable app was there. No c/c++ still. I was proud for what i did. But then issues came up. A lot of issues. First of all we need an url handler that reades the textfields and understands what we are typing. How am i supposed to do this?

https://github.com/blackberry/Cascades-Community-Samples/tree/master/BBBBBBrowser

It’s allready been done for me! Thanks Johan!

And what about bookmarks and favorites ? If you are going to sell this app in BlackBerry World you need to have functions like this. Dead end.Or not.  BucketList does allow you to save and edit stuff. What if i could use this?

https://github.com/blackberry/Cascades-Samples/tree/master/bucketlist

I end up with a new page where i can see my bookmarks, add a custom one, or even add the running mini-browsers running pages as favorites.

I wish if imageview could simply handle url as imageSource but wait a moment, there is a sample for that as well! WebImageView!(And it is on the roadmap as weel!!!)

https://github.com/RileyGB/BlackBerry10-Samples/tree/master/WebImageViewSample

It cant handle *.ico but does pretty well with png/jpg/jepg. So if we found *.ico we show our custom cool logo instead of an empty page. How to do that?

http://supportforums.blackberry.com/t5/Cascades-Development/global-JavaScript-support-inside-QML/m-p/1906669#M3376

We need a little bit of Java. Ready to go!

Lets test this. Hmmmm. Works nice, saves items, deletes them but I am not able to load bookmarks from my favorite list to the minibrowsers. Guess what.

http://supportforums.blackberry.com/t5/Cascades-Development/Sharing-values-between-pages-in-NavigationPane/m-p/1900827#M3191 (not the solution, check at the last response)

IMG_00000081

And thats it! App is ready to go! Almost. Since i made it and it works… what else is missing from the BB10 Browser?

An rss reader! Cool! Lets do that. The same way as we did the favorites list, we create a new one for rss subscriptions.

Now it is ready. Wait! Wouldnt be cool if you could save a bookmark from the BB10 Browser straight to Web Splitter without even opening my app? It’s called invocation framework.

https://github.com/blackberry/Cascades-Samples/tree/master/invoketarget

https://github.com/blackberry/opendataspace-cascades

Wonderful code examples. A lot of changes needed to be made but I managed to do all necessary for it to work.

IMG_00000032

Lets Rock and Roll this. I submitted the app and it was aprooved after a week or so. First comments and reviews starting to arrive.And some suggestions too.

I like suggestions!

if (suggestions==”Honest”){

me=”better”} else {me= “pointless hard work”}

Orientation Support and BBM support are in the next version (waiting for aproval)

IMG_00000005  IMG_00000006

And basically that’s it. One month,one idea, many samples,and a nice app available for download here:

http://appworld.blackberry.com/webstore/content/25840873/

 

Special THANKS goes to:

Luca Filigheddu @filos for all the support and patience with my questions,requests and almost everyday “priximo”(Its greek for ‘that guy again?’ on bbm notification….)

Nick Kalkounis @NickKalkounis for the exact same reasons as mentioned above

Marc Sohm

Harry Kalogirou @harkal

Vassilis Douros @vforvassili

Giannis Dogas @sqlinj

Angelos Lakrintis @angeloslakrinti

Ekke “Invokation Master” @ekke

Niko “N4BB.com” Giannopoulos   @NikoG21 for the review(I want a review for the update as well!!!)

Mairy for being my inspiration

and Most of all TEAM #GREEKBERRY for the support!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s