Show header/title in ChildBrowser, Phonegap/Android

I am using ChildBrowser, which works fine to display external web pages within my PhoneGap application. My problem is that I am not able to add title/header in child web pages. Any suggestions?

What i tried so far

Instead of toolbar.addView(edittext); I added

final TextView rowTextView = new TextView(ctx.getContext()); 
rowTextView.setText(myTitle); 
toolbar.addView(rowTextView);

But it looks like I also need to pass myTitle variable to execute method so that inside PluginResult execute() I can use something like

result = this.showWebPage(args.getString(0), args.optJSONObject(1), myTitle);

Can I add the same sample of code of yours for iOS?

Solution

You'll have to "upgrade" ChildBrowser: somewhere around line 340 there's this code: webview.setWebViewClient(client);. Replace it with the following:

webview.setWebViewClient(new WebViewClient() {
  @Override
    public void onPageFinished(WebView view, String url) {
      webview.loadUrl("javascript:(function(){"+"var t=document.head.getElementsByTagName('title')[0];t.innerHTML="+myNewTitle+"})()");
    }
});

You'll have to tweak also the options reading code of showWebPage() to set myNewTitle. But after that, you should be good to go.

EDIT:

Basically I decided that -- for my use at least, and probably yours -- the toolbar as it stands wasn't needed. Originally, I tweaked ChildBrowser so that I could do Google oAuth2 painlessly, by sending back the full HTML source back to the JS code. I definitely don't need a toolbar, as the user is going where Google wants it to, period. I had to hack stuff off the code, and the original author could be pissed at what I did with his code... Here's a checklist:

import android.view.Gravity;
import android.util.TypedValue;
import android.graphics.Color;
import android.graphics.Typeface;

public class ChildBrowser extends Plugin {
  **public String zeTitle;**

//  private EditText edittext;
private TextView edittext;

All references to EditText have to be changed to TextView.

result = this.showWebPage(args.getString(0), args.optJSONObject(1)**, args.getString(2)**);

You will need to change stuff in the .js file too.

public String showWebPage(final String url, JSONObject options**, String myNewTitle**) {
  if (options != null) {
    showLocationBar = options.optBoolean("showLocationBar", true);
  }
  **zeTitle=myNewTitle;**

Comment out all the ImageButton related code.

edittext = new TextView(ctx.getContext()); // insread of EditText

Comment out the edittext.setOnKeyListener

// edittext.setText(url);
edittext.setText(zeTitle);
edittext.setTextSize(TypedValue.COMPLEX_UNIT_PX, 24);
edittext.setGravity(Gravity.CENTER);
edittext.setTextColor(Color.DKGRAY);
edittext.setTypeface(Typeface.DEFAULT_BOLD);

Add to the toolbar only what's needed:

// toolbar.addView(back);
// toolbar.addView(forward);
toolbar.addView(edittext);
// toolbar.addView(close);

Finally:

public class ChildBrowserClient extends WebViewClient {
// EditText edittext;
  TextView edittext;

/**
 * Constructor.
 * 
 * @param mContext
 * @param edittext 
 */
public ChildBrowserClient(TextView mEditText) {
//  this.edittext = mEditText;
}

In the JS code:

cb.showWebPage(YOUR_URL, {showLocationBar:true}, YOUR_TITLE);

You should be good to go. I'll put up an updated version of the ChildBrowser I use on GitHub.