Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
Developer
yako
Posts: 43
Registered: ‎01-20-2009
My Device: Not Specified

BrowserField not expanding with new html code insert using javascript

Hi All,

I am updating BrowserField with new html data whenever certain events comes and adding it to the html using javascript. The problem I have is that it is not expanding after its initial height, nor can I get it to give me the new size required to fit the html document.

 

You can see the issue using the code below. It's a simple program that displays "Hello World" as html on the browserField. As soon as I press the Add Html button. You should see "Count 1", but it's partially cut off. As the BrowserField is not resizing it.

 

package com.test.BrowserFieldTest;

import net.rim.device.api.browser.field2.BrowserField;
import net.rim.device.api.browser.field2.BrowserFieldConfig;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FieldChangeListener;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.container.MainScreen;

public class Main extends UiApplication {
    public static void main(String[] args) {
	Main theApp = new Main();
	theApp.enterEventDispatcher();
    }

    public Main() {
	pushScreen(new SimpleBrowser());
    }

    public final class SimpleBrowser extends MainScreen implements FieldChangeListener {
	private BrowserField _webview;
	private ButtonField _addHtmlButton;
	private int count = 0;

	public SimpleBrowser() {
	    setTitle("Browser Field Test");

            BrowserFieldConfig config = new BrowserFieldConfig();
            // not really necessary as it default to enable.
            config.setProperty(BrowserFieldConfig.JAVASCRIPT_ENABLED, Boolean.TRUE);
            
            _addHtmlButton = new ButtonField("Add Html");
            _addHtmlButton.setChangeListener(this);
            add(_addHtmlButton);

            _webview = new BrowserField(config);
            _webview.displayContent("<!DOCTYPE html><html><body><div>Hello World!</div></body></html>", "local:///assets/");
            add(_webview);
	}

	public void fieldChanged(Field field, int context) {
	    if ( _addHtmlButton == field ) {
		++count;
		String html = "<div>Count " + count + "</div>";
		String js = "document.body.innerHTML = document.body.innerHTML + '" + html + "';";
		
		_webview.executeScript(js);
		
		_webview.invalidate();	// tells browserfield to invalidate
		invalidate();		// invalidate screen.
	    }
	}
    }
}

 What I've tried:

 - Invalidating the webview and screen does not work.

 - Write a custom Manager and forcing the manager to perform sublayout after inserting html. The height given by BrowserField does still not fit and has not really changed.

 - Scrollable DIV with forced fullscreen BrowserField using custom manager. Seems to work okayish but I can't get the scrollbar to show which means users won't know to scroll it. There's probably other issues that I haven't come accross yet with this solution.

 

Other potential solutions to explore (reluctantly) if this goes no where:

 - port jsoup to blackberry or some other parsers that woks on BB to perform the html parsing and modification and then giving to the Browserfield to load. As it seems to redo it's size everytime call displayContent().

 - abandon the BrowserField and go with custom rendering widgets.

 

I am doing this on BB OS5 and OS6. I have not tried higher OSes as it exceeds the min requirements that it has to work on.

 

Perhaps I'm missing something simple?

Thanks in advance.

Developer
maadani
Posts: 729
Registered: ‎05-04-2011
My Device: 9700

Re: BrowserField not expanding with new html code insert using javascript

Hi @

 

Try adding your browserField to a vertical field manager and add the manager to the screen.

 

E.

Developer
yako
Posts: 43
Registered: ‎01-20-2009
My Device: Not Specified

Re: BrowserField not expanding with new html code insert using javascript

Yes I have tried that. Unfortunately it did not work as it appears that it is the BrowserField that does not update its size.

 

public class WebviewManager extends VerticalFieldManager
{
    public WebviewManager()
    {
        super(USE_ALL_HEIGHT | USE_ALL_WIDTH | VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
    }
    
    protected void sublayout(int maxWidth, int maxHeight)
    {
        int count = getFieldCount();
        int height = 0;
        for ( int i = 0; i < count; ++i ) {
            int h1 = getField(i).getPreferredHeight();
            int h2 = getField(i).getHeight();
            height +=  Math.max(h1, h2);
        }
        
        super.sublayout(maxWidth, height);
    }
    
    public void UpdateLayout() {
        sublayout(getWidth(), getHeight());
    }
}

I got the custom manager to expose the sublayout() method so that after the html insert, we force an UpdateLayout() to recalculate all the height.

Developer
maadani
Posts: 729
Registered: ‎05-04-2011
My Device: 9700

Re: BrowserField not expanding with new html code insert using javascript

Hi @

 

If you invalidate the browser field, you might as well update the html string and there you can put your content in a div or a table and set the height of your content.

 

Again, you can use the standard vertical field manager (no need to override its subLayout) and invalidate the manager (which in turn calls the invalidate of its sons).

 

Hope that helps,

 

E.

Developer
yako
Posts: 43
Registered: ‎01-20-2009
My Device: Not Specified

Re: BrowserField not expanding with new html code insert using javascript

Thanks for the response maadani

 

I actually have no problem updating the BrowserField with new html.

The issue with that is needing to parse the html and insert it with the correct place etc. The options were:

 - porting jsoup to BB

 - sax parser is said to be a potential

 - or just write our own since our html is guranteed to be well formed.

 

I went with the options of javascript as it provided the functionality with little work. BB without html parse or lack of library for it makes it a problem, which is why I initially did not go down this path.

 

The custom VFM was to expose sublayout to public. Yes I did not have to override sublayout but I did so that I can see what's values are been given from BrowserField. Considering the problem is BrowserField not updating itself with a new height after a html insert from JS. I tried to force a sublayout (protected method) to be expose sublayout as another attempt work around the issue. I was hoping that we would get a new height from BrowserField to update the height required to show it properly and scroll properly, but it doesn't.