1

I'm triyng to load a html file into a BrowserField.

The html file is located inside the res folder.

enter image description here

This is how I build the browserField object:

InputStream content = getClass().getResourceAsStream("/www/html/welcome2.html");     
try {
   byte[] html = IOUtilities.streamToBytes(content);
   BrowserFieldConfig config = new BrowserFieldConfig();
   HttpHeaders headers = new HttpHeaders();
   headers.addProperty(HttpHeaders.HEADER_CONTENT_TYPE, HttpHeaders.CONTENT_TYPE_TEXT_HTML);
   headers.addProperty(HttpHeaders.HEADER_ACCEPT_CHARSET, "UTF-8");
   config.setProperty(BrowserFieldConfig.HTTP_HEADERS, headers);
   BrowserField contentField = new BrowserField(config);
   vfm_r.add(contentField);

   contentField.displayContent(new String(html), "http://localhost");
} catch (IOException e) {
   e.printStackTrace();
}

This is the html file:

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
        <link rel="stylesheet" href="../css/style-preferential.css">

    </head>
    <body id="welcome-page">
        <div class="welcome-header"></div>

        <div id="welcome-access-container">
            <span>acceder mi cuenta</span>
        </div>

        <div id="owl-demo" class="owl-carousel owl-theme">
            <div class="item"><span>Contact</span></div>
            <div class="item"><span>Option 1</span></div>
            <div class="item"><span>Option 2</span></div>
            <div class="item"><span>Option 3</span></div>
            <div class="item"><span>Option 4</span></div>
            <div class="item"><span>Option 5</span></div>
        </div>
        <div id="image-carousel" class="owl-carousel owl-theme">
            <div class="banner"><img src="../img/brown.png"></div>
            <div class="banner"><img src="../img/orange.png"></div>
            <div class="banner"><img src="../img/pink.png"></div>
            <div class="banner"><img src="../img/green.png"></div>
            <div class="banner"><img src="../img/blue.png"></div>
        </div>
        <div class="footer">
            <div id="info-footer"><span>Lorem ipsum dolor sit amet</span></div>
        </div>
    </body>
</html>

The problem is that the browserField takes something like 2 minutes to finish loading and the style is never applied.

When I remove the import to the css

<link rel="stylesheet" href="../css/style-preferential.css">

the browserField loads the page instantly.

1) what should I do to prevent that long delay for the page loading when importing a style.

2) what should I do to make the browserField recognize the css?. Right now, as I mentioned, the html is rendered after a long delay but the style is not applied.

Thanks in advance.

Lucas
  • 1,239
  • 4
  • 15
  • 26

1 Answers1

2

The issue here is not that the BrowserField does not recognise the css, it is that the BlackBerry does not find the css. It spends sometime looking for localhost as a resource, because BlackBerry devices do not recognise localhost as themselves, and in fact they don't really have an IP address, unless they are WiFi connected.

The 2 minutes delay you see is the BB device trying to find localhost.

So you need to use the "local:" 'protocol' so that the Browser knows to pick up the local files.

Here is some sample code that works for me. Try it, and then play round to get what you want:

body { color: green; }
.item {
    color: blue;
    background-color: red;
}

Above is my test "style-preferential.css" file. 

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
        <link rel="stylesheet" href="/www/css/style-preferential.css">
    </head>
    <body id="welcome-page">
        <div class="welcome-header"></div>
        <div id="welcome-access-container">
            <span>acceder mi cuenta</span>
        </div>
        <div id="owl-demo">
            <div class="item">Contact1</div>
            <div class="item"><span>Option 1</span></div>
            <div class="item"><span>Option 2</span></div>
            <div class="item"><span>Option 3</span></div>
            <div class="item"><span>Option 4</span></div>
            <div class="item"><span>Option 5</span></div>
        </div>
        <div class="banner"><img src="/img/icon.png"></div>
        <div class="footer">
            <div id="info-footer"><span>Lorem ipsum dolor sit amet</span></div>
        </div>
    </body>
</html>

The above is my cut down version of your test html.

And finally this is the change I made to your code:

contentField.displayContent(new String(html), "local:///");

My project looks like this:

Resources structure

and the output looks like this:

BB result

Peter Strange
  • 2,640
  • 11
  • 11
  • thanks Peter. For a strange reason, this doesn't work on BB 9800 simulator, but works fine with the others I tried. – Lucas Mar 20 '14 at 18:40
  • That is interesting because the screen shot is from a 9800! What level is the OS on the 9800 you are testing. – Peter Strange Mar 20 '14 at 21:39
  • Peter, I tried with both 6.0 and 7.1.0 OS. The only problem is that the css is not recognized with this simulator. – Lucas Mar 21 '14 at 12:34
  • What level of OS is the Simulator you are having problems with. Options-->About..... Not just 6.0, there are other number associated with it too. For example, the 9800 Simulator I tested with was 6.0.0.313. – Peter Strange Mar 21 '14 at 13:58
  • Peter, it says Blackberry 9800 smartphone v6.0.0.141 (Bundle 278, Platform 3.0.0.60) – Lucas Mar 21 '14 at 14:23
  • 1
    OK, that is a very 'old' release and I would presume there is a bug in it. Try installing a later level Simulator. Since the US site seems to be down, here is the UK site from which you can download Simulators. http://uk.blackberry.com/sites/developers/resources/simulators.html – Peter Strange Mar 21 '14 at 15:07