DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

PhoneGap RSS Reader - Part 5

Raymond Camden user avatar by
Raymond Camden
·
Aug. 21, 12 · Interview
Like (0)
Save
Tweet
Share
4.07K Views

Join the DZone community and get the full member experience.

Join For Free

For a while now I've been talking about, and upgrading, a basic PhoneGap-based RSS reader application. (See the related entries at the bottom for the earlier iterations.) I was thinking about the application this morning. One of the things I noticed about the application is that when you clicked to read a full article, the application launched the native web browser. In IOS, there wasn't a nice way to get back to the application. On Android, you could use back, but overall, the transition was a bit jarring. I thought this would be a perfect opportunity to try the ChildBrowser plugin.

The ChildBrowser plugin creates a "pop up window" that acts like an embedded browser for your application. You can load it with a URL and add event handlers for things like location changing or the browser being closed. The end result is that the user isn't really "leaving" the application when they view a web page.

The ChildBrowser plugin is available for iOS and Android. (You can also use it with Blackberry and Windows Phone.)

The API is really simple to use. Since I'm not concerned with any of the events thrown by the ChildBrowser and just need it to go some place, I added a class to my "Read Entry on Site" link and then added this touch handler:

$(window).on("touchstart", ".fullLink", function(e) {
e.preventDefault();
window.plugins.childBrowser.showWebPage($(this).attr("href"));
});

I've talked about PhoneGap plugins before so I won't repeat the story behind how you use them, but the basic idea is that you get the native code bits installed with your editor and then copy over one JavaScript file that provides the connection to the native code. For the most part, it's really pretty simple.

That being said - I was in luck. Turns out that PhoneGap Build supports a few plugins - and one of them is the ChildBrowser. I opened up my config.xml file and added one line:

<gap:plugin name="ChildBrowser" />

 The last thing I needed to do was add a call to the childbrowser.js file in my index.html. Do not forget that even though you include a script tag that points to the file, you don't actually include the file when creating your zip. Another thing to note. My application - previously - had not actually done anything device related. Yeah, that makes the application kind of dumb I guess, but because I wasn't accessing the camera or doing anything special, I never actually included cordova.js. PhoneGap Build will not include a plugin JavaScript file unless you also have a call to cordova.js. I'm assuming some basic regex is being done on that back end and the first script tag is required before any plugins are checked for. Here's what I added to the head block of my index.html file:

<script src="cordova.js"></script>
<script src="childbrowser.js"></script>

 And that's it! I uploaded my code and within about two minutes I had my iOS and Android versions up and running. I've included a full zip of the code as an attachment to this blog. You can download individual binaries via the embed below. Note that the iOS version will not work for you - sorry - I'm not adding to this to the AppStore.

application

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • What Should You Know About Graph Database’s Scalability?
  • Top Five Tools for AI-based Test Automation
  • Tech Layoffs [Comic]
  • Better Performance and Security by Monitoring Logs, Metrics, and More

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: