Issues With Other Javascript Files #28

Closed
tubiz opened this Issue Feb 19, 2012 · 3 comments

Projects

None yet

2 participants

@tubiz
tubiz commented Feb 19, 2012

I am developing a RSS application for Blackberry using the BBUI.
I am using the Google feeds API but the issue i have is that I have tried everything I cant fetch feeds using Google feeds API it seems the issue has to do with bbui.js but i can't seems to get it

Below is the code for my homepage

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
    <head>
        <meta name="x-blackberry-defaultHoverEffect" content="false" />
        <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
        <link  rel="stylesheet" type="text/css" href="css/bbUI.css"></link>
        <script type="text/javascript" src="js/bbUI.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    </head>
    <body onload="bb.pushScreen('home.htm', 'home');">  
    </body>
</html>

Below is the code for the page that retrieves the feeds and display it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<div data-bb-type="screen" data-bb-effect="fade">
    <div data-bb-type="title" data-bb-caption="lindaikeji.blogspot.com"></div>    
    <script type="text/javascript">
    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://rss.slashdot.org/Slashdot/slashdot");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
    <div>
        <h4>Testing Feeds API</h4>
        <div id="feeddiv"></div>
    </div>
</div>
</div>

It seems the error is in the html because after the feeds is fetched it is displayed in

how can I taget the responce to be sent to this div in BBUI

@tneil
Member
tneil commented Feb 19, 2012

There are a couple things you can try.

First, bbUI doesn't support inline JavaScript in script tags in the screens that it loads in. You'll need to move your JS code to a *.js file that you add using a script tag. (See the "Loading Screen Specific JavaScript" section of the readme for more details). This is because the inline JS text would be inserted into the document which won't be evaluated. When you specify a script file, bbUI will properly load it into the <head> and then remove it when the screen is popped back off the stack.

Second, if you're looking to manipulate the contents of the screen before the bbUI styling gets applied, you will want to assign the global bb.onscreenready. This event will then fire before any of your screens are opened. It allows you to see which screen is being loaded and then manipulate the Document Fragment <div> of the screen before the bbUI styling is applied and then inserted in the DOM. I added the getElementById function to the element that is passed into this event so that you can easily find and manipulate the DOM of your screen's <div>.

This is where you would call the Google feeds API to populate the screen.

(See the "Managing Screens" section of the readme for more details)

Another approach you could take is to call the Google Feeds API to return all of your content, create your resulting <div> in a Document Fragment and then call bb.doLoad(myDocumentFragment) and then insert your document fragment into the screen. This would allow you to display your screen immediately with a "loading" image, and then when the feeds information comes back you would populate the screen. If you use the bb.onscreenready function, all display of your new screen will wait until you have retrieved and created your DOM based on the feeds API.

I highly suggest that you do this work in a document fragment.. if you try and add the feed information directly into the DOM one-by-one it is going to be crazy slow. This is because each DOM manipulation of the live DOM will cause a re-computation of the layout of the page. So if you have 20 news articles that each generate say 3 <div>'s you will suffer from 60 re-computation of the screen's layout.

If you do all of this in a document fragment and then insert it into the screen.. then you will have only 1 re-computation of layout.

@tubiz
tubiz commented Feb 19, 2012

Thanks for the prompt response.
Presently my javascript knowledge is low as I am just learning it.
Would be grateful if you can show me example codes on how to get this done using the two steps you talked about.

Thanks

@tneil
Member
tneil commented Mar 5, 2012

This has now been fixed with Gord's pull request

@tneil tneil closed this Mar 5, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment