{"id":588,"date":"2015-02-10T15:30:46","date_gmt":"2015-02-10T23:30:46","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=588"},"modified":"2015-02-10T15:30:46","modified_gmt":"2015-02-10T23:30:46","slug":"displaying-web-pages-in-your-android-apps","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2015\/02\/10\/displaying-web-pages-in-your-android-apps\/","title":{"rendered":"Displaying web pages in your Android apps"},"content":{"rendered":"<p>Last year, I presented a short tutorial on displaying web pages from inside your App Inventor apps. Now, here is a some what improved version that prompts for a web address URL, checks to see if http:\/\/ has been entered, and if not, prepends http:\/\/ to the front of the address. Then the web page is displayed.<\/p>\n<h2>The Designer View<\/h2>\n<p>There is not much to the user interface &#8211; a text box to enter the web URL and a button to display the web page. The page then appears below the button, and the content may be scrolled on the screen.<\/p>\n<p>To create this user interface, drag a horizontal layout onto the screen and then add a label for the &#8220;Web page URL&#8221; prompt, followed by a text box for the data entry. Then add the Display web page button.<\/p>\n<p>From the User Interface\u00a0section of the Palette, at the left of the Designer screen, drag and drop a <em>WebViewer<\/em> component on to the design area.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/02\/Screenshot_2015-02-10-15-15-17.png\"><img loading=\"lazy\" decoding=\"async\" class=\"  wp-image-590 aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/02\/Screenshot_2015-02-10-15-15-17-576x1024.png\" alt=\"Screenshot_2015-02-10-15-15-17\" width=\"281\" height=\"499\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The <em>WebViewer<\/em> is not a full Internet browser &#8211; it is a component that displays the specified web page only. The WebViewer does not support standard browser features, such as saving web page content nor does it provide a history of the web pages visited.<\/p>\n<h2>The Blocks\u00a0Code<\/h2>\n<p><!--more--><\/p>\n<p>The entire app is implemented in the <em>btnDisplayPage<\/em>\u00a0button event handler.<\/p>\n<p>The <em>contains text<\/em> block checks to see if the entered web address contains &#8220;http:\/\/&#8221;, and if it does not contain &#8220;http:\/\/&#8221; then &#8220;http:\/\/&#8221; is inserted at the beginning of the web address string.<\/p>\n<p>The page is displayed on screen where you placed the Web component (in the Designer view). That&#8217;s all there is to displaying a web page!<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/02\/WebPageBlocks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"  wp-image-591 aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/02\/WebPageBlocks.png\" alt=\"WebPageBlocks\" width=\"516\" height=\"250\" \/><\/a><\/p>\n<h2>Key Features Shown<\/h2>\n<ul>\n<li>Checking the user input text for the presence or absence of &#8220;http:\/\/&#8221;<\/li>\n<li>Calling the WebViewer component to display the selected web page<\/li>\n<\/ul>\n<p>Note &#8211; due to the very short app in this demo, no source code has been uploaded.<\/p>\n<p><strong>Please Share on Social Media<\/strong><\/p>\n<p>Please click on the buttons below this post to share with your friends on Facebook or other social media.<\/p>\n<p>If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!<\/p>\n<p><a href=\"https:\/\/www.facebook.com\/appinventor2\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/facebook-like.png\" alt=\"\" width=\"150\" \/><\/a><a href=\"https:\/\/plus.google.com\/107302082825289724871\/posts\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/plus-badge.png\" alt=\"\" width=\"48\" \/><\/a><a href=\"http:\/\/twitter.com\/appinventorplus\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/twitter-follow.png\" alt=\"\" width=\"100\" \/><\/a><a href=\"http:\/\/appinventor.pevest.com\/?feed=rss2\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/rss.png\" alt=\"\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last year, I presented a short tutorial on displaying web pages from inside your App Inventor apps. Now, here is a some what improved version that prompts for a web address URL, checks to see if http:\/\/ has been entered, and if not, prepends http:\/\/ to the front of the address. Then the web page &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2015\/02\/10\/displaying-web-pages-in-your-android-apps\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Displaying web pages in your Android apps<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[19,22,28,130,151,176,205,211],"class_list":["post-588","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method","tag-android","tag-app-inventor","tag-appinventor","tag-mit-app-inventor","tag-programming","tag-software","tag-url","tag-web-page"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}