How to toggle show/hide button on NKToolBar

by **marcgys** » Fri Dec 30, 2011 6:58 am

Sorry ryubr, I forgot to mention that the error only happens on the device and not on the simulator.
Here is the link to the sample project: http://www.harveyspoint.mobi/app/GG-Test.zip

Also the other thing is not working for me is the NKOpenURLInSafari on the twitter.html page.

Thanks again.
:oops:

by **ryubr** » Fri Dec 30, 2011 3:57 pm

The reload you want to do is on the breaks.html page or you want to reload the http://harveyspoint.mobi/app/breaks/ page? If the second one is what you need you could use the reload method from the webview, no need to reload the page inside the NK, by doing so you're wasting resources (memory, cpu) on the phone, and recreating all the native controls again (modal, webview and so on) this could create problems, reload the remote url from the code on your NK page or just load it again :-)

Something like this:

Code: Select all

            function reloadPage()
            {
                //in this case we do not use the reload method because it would reload the current visible page on the webview and not return to the main one
                loadedFirst = 0;
                toolBar.removeButtonAtIndex(2);//remove the back button
                backButtonIsVisible = false;                
                webView.loadURL("http://harveyspoint.mobi/app/breaks/");
            }

About the problem to open url on safari, take a look into your code:

Code: Select all

    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="#" onclick=NKOpenURLInSafari("http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');

What is wrong here? See a missing ")" at the end of the function call? right here:

Code: Select all

/'+twitters[i].id_str+'">

Close it

Code: Select all

/'+twitters[i].id_str+'")>

And works

Just notice that other links there are not calling the NKOpenURLInSafari, if you want all to open on it, add the function to all desired links :-)

by **marcgys** » Fri Dec 30, 2011 8:23 pm

Your a Star!

Links in twitter feed is working perfect. All links now opening in Safari. I got this tutorial from Kristofer Layon's book http://bit.ly/vmcafB. He never mentioned about changing the other links on the blogger.js. The one he is describing only works when clicking the time of the tweet. But you probably spotted this at a glance.

About the breaks.html page, yes I only want to reload the remote page "http://harveyspoint.mobi/app/breaks/".
I have inserted your code and it works on the second page when the back button is visible but if a user is clicking the update button on the first webview the app is crashing.

Is it possible to add a status bar spinner 'on remote page load' to let the user know something is happening?
I did not find anything in NK docs but I can imagine this would be appreciated for certain apps.

Code: Select all

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<script type="text/javascript" src="NKit.js"></script>
<script type="text/javascript">
            
            var webView = new NKWebView;
            
            webView.init(0,43,320,380);
            webView.loadURL("http://harveyspoint.mobi/app/breaks/");
            webView.setScalesToFit("yes");
            webView.show();
            
            
            var toolBar = new NKToolBar();
            toolBar.init(0);
            toolBar.insertButtonAtIndex(1,"Update",'','reloadPage');
            toolBar.insertButtonAtIndex(2,"Tweets",'','twitter');
            toolBar.setTintColor(01, 44, 18);
            toolBar.show();
            
            var loadedFirst = 0;//nothing loaded yet
            var backButtonIsVisible = false;
            
            function closeModalWindow()
            {
                modal.dismiss();
                loadedFirst++;//increment it the control
                //add the button once this is second time it show (meaning a second page loaded) and increment the loadedFirst
                if(loadedFirst > 1 && backButtonIsVisible == false)
                {
                    toolBar.insertButtonAtIndex(2,"Back",'','webViewBack');
                    backButtonIsVisible = true;
                }
                
            }
            
            function webViewBack()
            {
                webView.goBack();
                
                loadedFirst = loadedFirst- 2;
                //Remove the button if the counter reaches 0, meaning it has no page to go back in the history
                if(loadedFirst <= 1)
                {
                    toolBar.removeButtonAtIndex(2);//remove the back button
                    backButtonIsVisible = false;
                }
                
            }   
            
            
               function reloadPage()
            {
                //in this case we do not use the reload method because it would reload the current visible page on the webview and not return to the main one
                loadedFirst = 0;
                toolBar.removeButtonAtIndex(2);//remove the back button
                backButtonIsVisible = false;                
                webView.loadURL("http://harveyspoint.mobi/app/breaks/");
            }    
            
            
            function twitter(){
                NKMoveToPageAnimated("twitter.html", 'slideup')  
                
            }      
            
            modal = new NKModalWindow();
            modal.show();
            
            var indicator = new NKActivityIndicator();
            indicator.init(90, 165, 30, "white");
            indicator.show();
            indicator.spin();
            modal.addControl(indicator);
            
            var label = new NKLabel();
            label.init(140, 158, 140, 40, "Please wait...");
            modal.addControl(label);
            label.show();
            
            
            var button = new NKButton();
            button.init(120, 210, 100, 40, "buttonClick");
            button.setTitle("Dismiss");
            modal.addControl(button);
            button.show();
            
            function buttonClick(){
                modal.dismiss();
                
            }
            
            webView.setOnFinishCallback("closeModalWindow");
            
            
            
            // check for internet connectivity   
            function checkForConnection(){
                
                if(NKIsInternetAvailableViaWifi() == 0 && NKIsInternetAvailableViaCellularNetwork() == 0){
                    NKAlert("Cannot Connect to Internet", "An internet connection is required to update information.");
                }
            }
            
            checkForConnection();
            
            
            </script>
</head>
<body>
</body>
</html>

by **ryubr** » Fri Dec 30, 2011 9:04 pm

Nice to know it's working :-)

Add the loading indicator on the top of the screen, like on the toolbar, that way the user will understand the page is loading and wait, better than in the middle where it can fade out with the white background.

Regarding the update button, why not show the modal window when you reload the page? That you not only you prevent the multiple call as you also guarantee that the user will only interacts when the page is available.

This should fix it for you:

Code: Select all

            
function reloadPage(){
                //in this case we do not use the reload method because it would reload the current visible page on the webview and not return to the main one
                modal.show();
                loadedFirst = 0;
                if(backButtonIsVisible)
                {
                    toolBar.removeButtonAtIndex(2);//remove the back button
                }
                
                
                backButtonIsVisible = false;                
                webView.loadURL("http://harveyspoint.mobi/app/breaks/");
                
                
            }

I added the test of backButtonIsVisible before remove the back button, because if they call it when it not that (like the first page) the system will not be able to remove a button that is not actually there. :-)

by **marcgys** » Fri Dec 30, 2011 9:55 pm

Absolut everything is working now the way it should.

Thank you very very much! Drinks are on me tonight. Or is it morning for you?

Sorry, just one more last thing: If a user is not connected to the internet and update the page, the alert is not triggered. Will Apple or the user be ok with this?

by **ryubr** » Fri Dec 30, 2011 10:55 pm

6:54 pm here in Brazil

Sorry, just one more last thing: If a user is not connected to the internet and update the page, the alert is not triggered. Will Apple or the user be ok with this?

Sure not, make sure you test the connection every time you'll use function that will user the internet, that's one of the main rules of Apple, one of the first things they try is use internet features with the device in airplane mode to check how the app will behave and the user experience. :-)

by **marcgys** » Sat Dec 31, 2011 2:48 pm

ryubr, I have sent you a private message but it's not going out of my Outbox.

Will it stay there until you have read it?

Sorry it's the first private message I have sent to a member via the forum but tests to myself worked fine.

by **ryubr** » Sat Dec 31, 2011 4:43 pm

I got it

I'm going to reply you on your e-mail :-)

How to toggle show/hide button on NKToolBar

Re: How to toggle show/hide button on NKToolBar

Re: How to toggle show/hide button on NKToolBar

Re: How to toggle show/hide button on NKToolBar

Re: How to toggle show/hide button on NKToolBar

Re: How to toggle show/hide button on NKToolBar

Re: How to toggle show/hide button on NKToolBar

Re: How to toggle show/hide button on NKToolBar

Re: How to toggle show/hide button on NKToolBar

Who is online