Xcode Swift UIWebView Back and Forward Button Tutorial

Xcode Swift UIWebView Back and Forward Button Tutorial

Xcode Swift UIWebView Back and Forward Button Tutorial

Meanwhile … after sporadic days of testing … back in mobile development “land” … and any maritime mobile development “sea” members (perhaps in the bath) … we’ve got to admit defeat on our Google Charts mobile app as far as minimal designing goes trying to do away with (UI)WebView “Back” and “Forward” buttons. We do need them, and the main reason is that opening the app to the Pandora’s Box of many Google Chart functionalities in the one app is not very good without the possibility of getting technical advice from Google themselves … so, today, we bite the bullet … boysenberry, today … and put them in … so this is an opportunity to show you in Swift how to dynamically add in “Back” and “Forward” buttons that interact with your UIWebView (we are doing an iOS mobile app in Xcode today).

Now supposing you’re here and you haven’t already been in the loop from a few days ago with Google Charts Mobile WebView Menu Tutorial as shown below … well, welcome … dew do drop inn in … chortle, chortle … what’s the deal with a (UI)WebView on its lonesome …

Well, it is to do with navigating outside the “realms” of your mobile application’s WebView innards page in both a backward and forward sense. In other words you can not worry at all if all of the pages possible to navigate to, can eventually have navigation that would lead you back to that original webpage of the WebView, but if you go outside that, the WebView (without its “back button” and “forward button”) will lose touch with the original webpage without some complete resetting of the mobile application. If this explanation baffles, you may prefer to think of the concept of a mobile WebView as being like a web browser which is not capable of having multiple tabs nor new multiple windows. So to make the system work write “small” for the matter at hand. This shouldn’t be too hard to do if your mobile application has a small defined task, or aim.

So what of the changes … what do they involve? This change, that is, to allow these Google Chart web applications to access help from Google … and be able to find their way home to WebView “land” …

At the mobile IDE (eg. Xcode) for iOS code end of integration, the two main Swift programming source code files of interest are …

Lesson 7896293: You have to have patients patience to be in mobile development “land” … and/or “sea” … or, for a proportional response … “sea” vs “land”

Lesson 7896295: (just went down to the kitchen and learnt something about red chillies) You sometimes have to compromise (indeed perhaps bite boysenberry or raspberry bullets) to be in mobile development areas of interest

Trap for young players 789629500: A UIButton in version iOS 8.1 is white … hopefully for you, it will be “all white on the night” … chortle, chortle.


Previous relevant Google Charts Mobile WebView Menu Tutorial is shown below.

Google Charts Mobile WebView Menu Tutorial

Google Charts Mobile WebView Menu Tutorial

We left you yesterday “popping off” to create a mobile app, but having an initial “pop” (after we “snarp” and “cackle” … darn those ornery consonants), we realized there was another bit of suitable functionality … that is, to make a menu of other Google Chart applications, and allow you to swap from one to another.

So yesterday’s Google Charts Emailing Mobile WebView Tutorial as shown below gets built upon today, for this.

So what of the changes … what do they involve? This change, that is, to allow these Google Chart web application codes to be used as the innards to a mobile application using a WebView (both no “back button” nor “forward button”), only involves changes to that last tutorial’s Javascript and to add one new PHP generic piece of code and change yesterday’s PHP code as per …

  • gchartgen.js is the changed Javascript programming source code as per changes
  • butsel.php is the new PHP programming source code that builds a menu of Google Chart relevant applications, as buttons for mobile devices and as a select dropdown for other platforms
  • webviewemail.php is the changed PHP programming source code as per changes

Bits of the logic used PHP to try to detect a WebView scenario and would recommend a Google search here.

At the mobile IDE (eg. Xcode) for iOS code end of integration, the two main Swift programming source code files of interest are …

Thanks for dropping by at today’s tutorial. The menu effect can be shown with a web application live run for a Pie Chart link today, if you want to peruse. Will be popping off again now to test lots more. Bye for now.


Previous relevant Google Charts Emailing Mobile WebView Tutorial is shown below.

Google Charts Emailing Mobile WebView Tutorial

Google Charts Emailing Mobile WebView Tutorial

Hope if you are a regular reader of this blog that you are getting the hang of the idea of …

  1. surfing the net with a web browser on a mobile device
  2. using the net on a mobile device via a mobile application that is using a WebView (Android or iOS)

… can have quite differing considerations regarding any HTML or PHP (or ASP.Net) code you write if your mobile application does away with “back buttons” or “forward buttons”. Of course, the IDE you may use to set up your mobile application WebView may make it so easy it is like “falling off a log” to implement the “back button” and “forward button” functionalities into your mobile application. Or, if you think this way (and there are many who don’t), you can write HTML and PHP to accomodate for a mobile application world using WebViews, but not relying on the use of “back buttons” nor “forward buttons”.

So what is the nature of the issue differences?

Well, it is to do with navigating outside the “realms” of your mobile application’s WebView innards page in both a backward and forward sense. In other words you can not worry at all if all of the pages possible to navigate to, can eventually have navigation that would lead you back to that original webpage of the WebView, but if you go outside that, the WebView (without its “back button” and “forward button”) will lose touch with the original webpage without some complete resetting of the mobile application. If this explanation baffles, you may prefer to think of the concept of a mobile WebView as being like a web browser which is not capable of having multiple tabs nor new multiple windows. So to make the system work write “small” for the matter at hand. This shouldn’t be too hard to do if your mobile application has a small defined task, or aim.

So, do you remember when we made quite a few changes to all our Google Charts web applications to allow for some email functionality, when we showed the Google Charts Emailing Primer Tutorial as shown below? Well, those changes work fine for desktop and laptop web surfing of the net, and work for the mobile usage case 1 as above as well. It is just with case 2 (with no “back buttons” nor “forward buttons”, and using a WebView method to access the net) that the new (snapshot Google Chart (link)) email functionality that was designed for an HTML a tag mailto: href value (client-side method, that relies on an email client program), would be a case of spilling outside the “realm” of the innards of any WebView that mobile application might use to do this job.

So what of the changes … what do they involve? This change, that is, to allow these Google Chart web application codes to be used as the innards to a mobile application using a WebView (both no “back button” nor “forward button”), only involves changes to that last tutorial’s Javascript and to add one new PHP generic piece of code as per …

  • gchartgen.js is the changed Javascript programming source code as per changes
  • webviewemail.php is the new PHP programming source code that uses a PHP mail method of emailing when using a mobile application’s WebView

At the mobile IDE (eg. Xcode) for iOS code end of integration, the two main Swift programming source code files of interest are …

Ideally it would be good in Javascript to be able to differentiate in a generic way the difference in usage of case 1 versus case 2 as shown above, but this is not straightforward, as you can see here, for instance. So, without that neat solution, probably the next best approach is to, within your mobile application code where you define the URL for the WebView you set up a GET parameter to indicate that extra information that the accessor of the HTML and/or PHP (or ASP.Net), is a WebView in a mobile application. In ViewController.swift above, where this happens, the URL used has “?WebView=WebView” added to the normal URL to flag to the the (UI)WebView innards that a WebView supervises it … by the way, as we’ve seen before, the innards, in Javascript, or PHP, would be very capable of working out that they are working for a mobile (device) platform. For instance, in Javascript, use a test like …

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// it is a mobile device
}

… great thanks to this link for this advice and idea, and don’t forget that it can be done with PHP too (and no doubt ASP.Net).

Guess this falls under a cross-platform issue, but that term does not encompass the idea, for me, that you can have a cross-platform issue for the same mobile device using the same underlying code … maybe we need the term cross-environment, or cross-caller.

Pardon us while we pop off and start on being able to produce the equivalent of a “live run” link for you … ie. a mobile application … chortle, chortle. Hope you enjoy today’s tutorial.


Previous relevant Google Charts Emailing Primer Tutorial is shown below.

Google Charts Emailing Primer Tutorial

Google Charts Emailing Primer Tutorial

The Google Charts (derived) webpages here at this rjmprogramming.com.au WordPress blog have all changed to add functionality for emailing snapshots of the Google Charts “midstream”. You can see a table of tutorials, and corresponding PHP code (with the last row being our one new bit of Javascript code) affected below …

File Relative Path Blog Search Link Email Functionality Code Difference Link
wordtree_chart.php–GETME PHP/Wordtree/ wordtree_chart.php–GETME wordtree_chart.php–GETME
treemap_chart.php-GETME PHP/TreemapChart/ treemap_chart.php-GETME treemap_chart.php-GETME
timeline_chart.php-GETME PHP/TimelineChart/ timeline_chart.php-GETME timeline_chart.php-GETME
sparkline.php-GETME PHP/Sparkline/ sparkline.php-GETME sparkline.php-GETME
scatter_chart_diff.php–GETME PHP/ScatterChart/ scatter_chart_diff.php–GETME scatter_chart_diff.php–GETME
scatter_chart.php-GETME PHP/ScatterChart/ scatter_chart.php-GETME scatter_chart.php-GETME
sankey_diagram.php-GETME PHP/SankeyDiagram/ sankey_diagram.php-GETME sankey_diagram.php-GETME
column_chart.php-GETME PHP/ColumnChart/ column_chart.php-GETME column_chart.php-GETME
pie_chart.php–GETME PHP/PieChart/ pie_chart.php–GETME pie_chart.php–GETME
pie_chart_diff.php-GETME PHP/PieChart/ pie_chart_diff.php-GETME pie_chart_diff.php-GETME
parabola_lgraph.php-GETME PHP/ParabolaLineGraph/ parabola_lgraph.php-GETME parabola_lgraph.php-GETME
Google_OrgChart.php-GETME PHP/OrgChart/ Google_OrgChart.php-GETME Google_OrgChart.php-GETME
motion_chart.php-GETME PHP/MotionChart/ motion_chart.php-GETME motion_chart.php-GETME
line_chart.php-GETME PHP/LineChart/ line_chart.php-GETME line_chart.php-GETME
linear_trendline.php-GETME PHP/LinearTrendline/ linear_trendline.php-GETME linear_trendline.php-GETME
intervals.php-GETME PHP/IntervalsChart/ intervals.php-GETME intervals.php-GETME
annotatedtimeline_chart.php-GETME PHP/AnnotatedTimelineChart/ annotatedtimeline_chart.php-GETME annotatedtimeline_chart.php-GETME
intensity_chart.php-GETME PHP/IntensityChart/ intensity_chart.php-GETME intensity_chart.php-GETME
histogram_chart.php-GETME PHP/HistogramChart/ histogram_chart.php-GETME histogram_chart.php-GETME
geo_chart.php-GETME PHP/GeoChart/ geo_chart.php-GETME geo_chart.php-GETME
gauge_chart.php-GETME PHP/GaugeChart/ gauge_chart.php-GETME gauge_chart.php-GETME
column_chart.php–GETME PHP/ColumnChart/ column_chart.php–GETME column_chart.php–GETME
column_chart_diff.php-GETME PHP/ColumnChart/ column_chart_diff.php-GETME column_chart_diff.php-GETME
chart_wrapper.php-GETME PHP/ChartWrapper/ chart_wrapper.php-GETME chart_wrapper.php-GETME
candlestick_chart.php-GETME PHP/CandlestickChart/ candlestick_chart.php-GETME candlestick_chart.php-GETME
calendar_chart.php-GETME PHP/CalendarChart/ calendar_chart.php-GETME calendar_chart.php-GETME
bubble_chart.php-GETME PHP/BubbleChart/ bubble_chart.php-GETME bubble_chart.php-GETME
bar_chart.php–GETME PHP/BarChart/ bar_chart.php–GETME bar_chart.php–GETME
bar_chart_diff.php-GETME PHP/BarChart/ bar_chart_diff.php-GETME bar_chart_diff.php-GETME
area_chart.php-GETME PHP/AreaChart/ area_chart.php-GETME area_chart.php-GETME
map.php-GETME PHP/Map/ map.php-GETME map.php-GETME
gchartgen.js_GETME gchartgen.js_GETME

Let’s now discuss some tactics that can work to be a bit objective about the task of making these changes in a methodical and systematic way.

  • If possible, have the change amount to the adjustment of one line of code … so we looked at one bit of Javascript called gchartgen.js called by each Google Chart application via … <script type="text/javascript" src="//www.rjmprogramming.com.au/gchartgen.js"></script> … the one (extra) line of code ( that is placed between <head> and </head> )
  • So where can gchartgen.js intervene to do its thing (which is to add an Email link down the bottom and allow HTML h1’s be clickable to Email, as well (quite often))? … onload functionality proved to be too crowded, and as this functionality is not mission-critical it is decided that it can be created with setTimeout(gcinit, 2000); … ie. roughly 2 seconds after onload event
  • Unit test this on one Google Chart scenario on local (MAMP) web server
  • When happy bring all Google Charts code over to local (MAMP) web server
  • Make a file of *GETME files via Linux command something like find . -name ‘*GETME’ 2> /dev/null > gclist.xxx
  • Manually filter out the entries that are not “relevant latest” from this list using vi (for instance) adjusting each relevant latest to go up one (eg. _GETME goes to -GETME or -GETME goes to –GETME)
  • Write a Korn shell script whose main lines of functionality look like
    #!/bin/ksh
    for f in `cat gclist.xxx`; do
    pf=`echo $f | sed '/-GETME/s///g' | sed '/_GETME/s///g'`
    nf=`echo $f | sed '/-GETME/s//--GETME/g' | sed '/_GETME/s//-GETME/g'`
    cat $f | sed '/<head>/s//<head> <script type="text/javascript" src="//www.rjmprogramming.com.au/gchartgen.js"></script>/g' > $nf
    cat $pf | sed '/<head>/s//<head> <script type="text/javascript" src="//www.rjmprogramming.com.au/gchartgen.js"></script>/g' > ${pf}_new
    cat ${pf}_new > $pf
    rm ${pf}_new
    done
    exit
  • Run this Korn Shell on the local (MAMP) web server (Linux) environment (on Mac, is Terminal application’s Bash environment)
  • Now for each Google Chart application …
    1. test it works on local (MAMP) web server
    2. upload it to live rjmprogramming.com.au place
    3. retest on live rjmprogramming.com.au place
  • To get the table above constructed we, roughly …
    1. updated this blog’s All Posts table … why? pourquoi? … the All Posts functionality has a lot in common to what we want, in a table, here … good to find linkages and commonalities with software
    2. went to the All Posts “code download table” and sorted for latest changed source code up the top
    3. start up Firefox web browser’s Firebug add on … why? pourquoi? … we want to get in under any Javascript client side (in this case, sorting) rearrangements (which View->Page Source is not good enough to show) .. so we can use a dynamic Javascript DOM tool like Firebug effectively (and strategically) here
    4. point at the table and use the Copy HTML option to paste the buffer over to a TextWrangler (text editor) session and create a standalone piece of HTML (with only the top “today” parts of the buffer) on the local (MAMP) web server, where it is unit tested on a local web browser ( eg. HTTP://localhost:8888/sometest.html ) over and over again until it works, in preparation for copying this into the live rjmprogramming.com.au WordPress blog post (ie. what you are reading here)
    5. check that it still looks okay, or not, in the scenario of being in the blog post

Here is a link to Google Chart Tools “spiritual home” … via Google.

Hope you try out some of the newly tweaked Google Charts functionality.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, GUI, iOS, Tutorials, Xcode and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

30 Responses to Xcode Swift UIWebView Back and Forward Button Tutorial

  1. Carylon Cash says:

    Someone in my Facebook group shared this site with us so I came to take a look. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Fantastic blog and terrific design

  2. Laura says:

    Hello, super artykuł. Pewien czas nie słuchałem tak interesującego dzieła

  3. Hello there, just became alert for your blog by means of Google, and found that it’s actually informative. I’m gonna watch out for brussels. I’ll be grateful if you continue this in future. A great deal of men and women will likely be benefited out of your writing. Cheers!

  4. Isabelle says:

    Witaj, super tekst. Jakiś czas nie słuchałem tak interesującego dzieła

  5. Good write-up, I am regular visitor of one¡¦s website, maintain up the excellent operate, and It is going to be a regular visitor for a lengthy time.

  6. Opportunity says:

    I do consider all of the concepts you have presented for your post. They’re really convincing and can definitely work. Nonetheless, the posts are very brief for beginners. Could you please prolong them a little from next time? Thanks for the post.

  7. Law & Legal says:

    My husband and i were so more than happy that John managed to complete his research while using the ideas he obtained from your very own site. It is now and again perplexing just to choose to be offering hints which others could have been trying to sell. And we also figure out we have the website owner to be grateful to for this. The specific illustrations you made, the easy web site navigation, the friendships you will assist to engender – it is most excellent, and it’s really aiding our son in addition to the family know that the idea is interesting, and that is quite important. Many thanks for all!

  8. Bmw X6 says:

    Wow, amazing blog layout! How lengthy have you been running a blog for? you made running a blog look easy. The full look of your web site is excellent, let alone the content material!

  9. Kenya safari says:

    hi. I see that you are most likely involved in building good quality backlinks and stuff. I’m merchandising scrapebox auto approve link lists. Do you wish to trade ?

    http://babayroy.tumblr.com/post/142063114194/how-to-plan-kenya-safari-holidays

  10. Thank you for sharing excellent informations. Your web-site is so cool. I’m impressed by the details that you¡¦ve on this web site. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for extra articles. You, my friend, ROCK! I found just the info I already searched everywhere and simply could not come across. What a perfect site.

  11. Legal says:

    hello there and thank you for your information – I’ve definitely picked up something new from right here. I did however expertise a few technical issues using this site, as I experienced to reload the website lots of times previous to I could get it to load correctly. I had been wondering if your web hosting is OK? Not that I am complaining, but sluggish loading instances times will often affect your placement in google and could damage your high-quality score if ads and marketing with Adwords. Well I’m adding this RSS to my e-mail and could look out for a lot more of your respective intriguing content. Make sure you update this again soon..

  12. Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire actually enjoyed account your blog posts. Any way I’ll be subscribing to your augment and even I achievement you access consistently quickly.

  13. Keep working ,impressive job!

  14. punheta says:

    Its fantastic as your other posts : D, appreciate it for putting up.

  15. You got a quite great web site, Gladiola I discovered it via yahoo.

  16. What i do not understood is if truth be told how you’re no longer actually much more smartly-favored than you might be right now. You are very intelligent. You understand therefore considerably in relation to this subject, made me for my part imagine it from numerous numerous angles. Its like women and men don’t seem to be fascinated until it¡¦s one thing to do with Lady gaga! Your personal stuffs great. Always maintain it up!

  17. There is noticeably a bundle to learn about this. I assume you made positive good points in features also.

  18. excellent post, very informative. I wonder why the opposite experts of this sector don’t notice this. You must proceed your writing. I’m confident, you’ve a great readers’ base already!

  19. Sports Lines says:

    I precisely desired to say thanks again. I’m not certain the things that I could possibly have gone through without the type of creative ideas contributed by you on that problem. This has been an absolute frightful problem in my view, nevertheless witnessing this skilled avenue you managed that made me to leap for gladness. I will be grateful for your support and thus have high hopes you really know what a powerful job that you are accomplishing training men and women through your site. Most probably you haven’t come across all of us.

  20. Hotels says:

    magnificent post, very informative. I wonder why the other experts of this sector do not notice this. You must proceed your writing. I’m sure, you’ve a huge readers’ base already!

  21. My wife and i got really excited that Louis managed to conclude his research from your ideas he obtained out of the web pages. It is now and again perplexing just to continually be giving freely ideas which usually other folks have been selling. And we also figure out we have you to be grateful to because of that. All of the explanations you have made, the simple site menu, the relationships you will give support to engender – it’s most sensational, and it’s really assisting our son in addition to us reckon that that subject is enjoyable, which is certainly rather mandatory. Many thanks for all the pieces!

  22. Great post. I was checking continuously this blog and I’m impressed! Very useful info specially the last part :) I care for such information a lot. I was seeking this particular information for a very long time. Thank you and good luck.

  23. townhouse says:

    As I web-site possessor I believe the content matter here is rattling magnificent , appreciate it for your hard work. You should keep it up forever! Best of luck.

  24. mens fashion says:

    I do trust all the ideas you’ve offered on your post. They are really convincing and will definitely work. Nonetheless, the posts are very short for newbies. May just you please extend them a bit from next time? Thanks for the post.

  25. I’ve learn some just right stuff here. Definitely price bookmarking for revisiting. I wonder how so much effort you set to make the sort of great informative web site.

  26. You really make it seem so easy with your presentation but I to find this topic to be really something that I think I would never understand. It seems too complex and extremely large for me. I’m having a look ahead in your next put up, I will try to get the hold of it!

  27. yes, investigation is having to pay off. I appreciate you telling your viewpoint.. Isn’t it terrific whenever you locate a superb article? Enjoying the document.. glad I found it

  28. Thank you so much for providing individuals with an exceptionally terrific opportunity to read from here. It can be so beneficial and also jam-packed with a great time for me and my office peers to visit your web site nearly three times every week to read the newest guidance you have. And lastly, I am just always amazed with the gorgeous solutions you serve. Certain 2 tips in this article are rather the most impressive we’ve had.

  29. کارویس says:

    i realy enjoyed reading this post and appreciate your nice work

  30. Thanks for this nice post. I like your website.

Leave a Reply to better health Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>