Go ahead and create your own www/tweetView.html file based on the one we discussed. We'll go over the code that is new, while leaving the rest to you to review.

For this next task, we should end up with a view that looks like the following on iOS:

For Android, the view will be as follows:

This time, we're not going to display the HTML for defining the layout of our view. You may ask why? This is because you've seen it several times before and can look it up in the code for this project. We're going to start with the templates that will define the content instead:

<div class="hidden" id="tweetView_tweetTemplate">
 <div class="twitterItem" onclick="tweetView.selectTweet(%INDEX%);">
  <img src="%PROFILE_IMAGE_URL%" width=64 height=64 
   border=0 />
  <div class="twitterRealName">%REAL_NAME%</div>
  <div class="twitterScreenName">@%SCREEN_NAME%</div>
  <div class="twitterTweet">%TWEET%</div>
  <div class="twitterEntities">%ENTITIES%</div>
 </div>
</div>

This code is pretty similar to the template in the previous view with a couple of exceptions: one that we've made the profile image larger, and two, we've added a div element that lists all the entities in the tweet. Twitter defines an entity as a URL, a hashtag, or a mention of another twitter user. We'll display any of these that are in a tweet so that the user can tap on them to get more information.

<div class="hidden" id="tweetView_entityTemplate">
  <DIV class="entity %TYPE%">%ENTITY%</DIV>
</div>

Here's our template for any entity. Notice that we've given it the class of entity, so that all our entities can have a similar appearance.

Next up, we define what each particular entity looks like, in this case, the URL template.

<div class="hidden" id="tweetView_urlEntityTemplate">
 <a href="javascript:PKUTIL.showURL('%URL%')," 
  class="openInNewWindow url" target="_blank">%DISPLAYURL%</a>
</div>

Note the use of PKUTIL.showURL() in this template. It is a convenience method we've defined in PKUTIL to use ChildBrowser to show a webpage. We've done the work of combining how it works on each platform and put it into one function so that it is easy to call. We'll take a look at it a little later.

<div class="hidden" id="tweetView_hashEntityTemplate">
 <a href="javascript:socialView.loadStreamFor('%23%HASHTAG%'), 
  PKUI.CORE.popView();" class="hash">#%TEXT%</a>
</div>

This template is for a hashtag. The big difference between this and the previous template is that it is actually referring back to our previous view! It does this to tell it to load a stream for the hashtag, and then we call popView() to go back to the view. Chances are the view won't have the loaded information from Twitter just yet, but give it a second and it'll reload with the new stream.

Similarly, the code for a mention is as follows:

<div class="hidden" id="tweetView_userEntityTemplate">
 <a href="javascript:socialView.loadStreamFor('@%USER%'), 
  PKUI.CORE.popView();" class="user" >@%TEXT%</a>
</div>

So that defines how our tweet looks and works, let's see how the view actually creates the tweet itself:

  var tweetView = $ge("tweetView") || {};
  tweetView.theTweet = {};
  tweetView.setTweet = function ( aTweet )
  {
      tweetView.theTweet = aTweet;
  }

Here, we've defined the setTweet() method, which stores a given tweet into our theTweet property. Remember, this is called from the Twitter stream view when a tweet is tapped to send us the tweet to display.

The next method of interest is loadTweet(). We'll skip the initializeView() method as it is similar to the previous view. The loadTweet() method is given as follows:

  tweetView.loadTweet = function ()
  {
    var theTweet = tweetView.theTweet;
    
    var theTweetTemplate = 
        $ge("tweetView_tweetTemplate").innerHTML;
    var theEntityTemplate = 
        $ge("tweetView_entityTemplate").innerHTML;
    var theURLEntityTemplate = 
        $ge("tweetView_urlEntityTemplate").innerHTML;
    var theHashEntityTemplate = 
        $ge("tweetView_hashEntityTemplate").innerHTML;
    var theUserEntityTemplate = 
        $ge("tweetView_userEntityTemplate").innerHTML;

First, we obtain the HTML for each template we need—and there are several! These are given as follows:

    var theContentArea = $ge("tweetView_contentArea");
    var theTweetHTML = "";
    var theEntitiesHTML = "";    

    var theURLEntities = theTweet.entities.urls;
    for (var i=0;i<theURLEntities.length;i++)
    {
        var theURLEntity = theURLEntities[i];
        theEntitiesHTML += theEntityTemplate.replace 
                                 ("%TYPE%", "url")
                                .replace ("%ENTITY%",
            theURLEntityTemplate.replace ("%URL%", 
                                 theURLEntity.url )
                                .replace ("%DISPLAYURL%", 
                                 theURLEntity.display_url )
                           );
    }

In this code, we've gone through every URL entity that Twitter has sent us and added it to our entity HTML string. We'll repeat that for hashtags and for mentions, but the code is so similar, we won't repeat it here.

    var theTemplate = theTweetTemplate
                      .replace ("%PROFILE_IMAGE_URL%", 
                       theTweet.profile_image_url || 
                       theTweet.user.profile_image_url)
                      .replace ("%REAL_NAME%", 
                       theTweet.from_user || 
                       theTweet.user.name)
                      .replace ("%SCREEN_NAME%", 
                       theTweet.from_user || 
                       theTweet.user.screen_name)
                      .replace ("%TWEET%", theTweet.text)
                      .replace ("%ENTITIES%", theEntitiesHTML );
    theTweetHTML += theTemplate;        
    theContentArea.innerHTML = theTweetHTML;

Once we've gone through all the entities, we handle the tweet itself. Note that we had to handle the entities first because we handle the substitution earlier. Just like with the previous view, we correctly handle if the tweet is from a search or from a timeline as well.

The next method of interest is the share() method, so we'll skip over viewWillAppear(), viewWillHide(), and backButtonPressed(). Suffice to say, the only different thing the viewWIllAppear() method does than any of the others is call the loadTweet() method to display the tweet when our view is shown.

The share() method is where we call each platform's plugin for sharing. Each platform has a slightly different syntax, so we have to check which platform we're on and decide which plugin to call based on that. We can do so using the following code snippet:

  tweetView.share = function ()
  {
    switch (device.platform)
    {
case "Android": window.plugins.share.show(
          { subject: 'Share',
            text: tweetView.theTweet.text,
          },
          function() {},
          function() { alert ('Error sharing.'), }
          );
                break;

For Android, we're using the Share plugin, and this is how we can share with it. Android will then display a list of services that support sharing, including Twitter and Facebook, if the user has them installed. The text we give it will be included in the message, and Android is nice enough to let us send a success and a failure function should we want to do something after the tweet.

default:
                window.plugins.shareKit.share ( 
                     tweetView.theTweet.text );
    }
  }

Our default method is for iOS, which will display an action sheet listing a few services, probably Twitter and Facebook, and the user can tap the button of the service they want to share to. Once they authenticate to the service, they can then send the message.

We displayed a single tweet and processed the various entities within it. We demonstrated loading an external site in the ChildBrowser plugin by using PKUTIL.showURL(). We also demonstrated how to use the various sharing plugins.

Let's take a quick look at PKUTIL.showURL(), the method used to display a ChildBrowser with an external site. It's a pretty simple function, but since it takes three different ways to show ChildBrowser, we packaged it up into a function that makes it easy to use.

PKUTIL.showURL = function ( theURL )
{
    switch (device.platform)
    {
case "Android":
        window.plugins.childBrowser.showWebPage( theURL );
        break;

For Android, it's simple to call ChildBrowser. Typically this is how you call any plugin you want to use in PhoneGap.

case "WinCE":
      var options = 
      {
       url:theURL,
       geolocationEnabled:false
      };
          Cordova.exec(null, null,"ChildBrowserCommand",
              "showWebPage", options);
        break;

WP7 is here too, since the platform supports it, and is a little more difficult. We have to pack the URL into an options array and then send it to the plugin to show.

default:
        cordova.exec("ChildBrowserCommand.showWebPage", 
            theURL);
    }
}

For iOS, it's very similar to Android's method, except we call it directly instead of using window.plugins.*.