blackberry/bbui.js

BlackBerry UI look and feel JavaScript toolkit for WebWorks

bbui.js's Issues

Styles do not apply if DOM objects are create programatically

I am trying to create a dynamic comobo box with populating values coming from JSON string from server. However, when i apply the style within the code, it does not apply the style to the create element on screen.

Here is the code

        json = jQuery.parseJSON($(msg).find('getCompanyNameResult').text());
        var str = "<select data-bb-style='stretch' id='selectCompany'>";
        for (var i = 0; i < json.Table.length; i++) {
            str += '<option value="' + json.Table[i].ID + '">' + json.Table[i].CompanyName + '</option>';            
        }
        str += "</select>";
        $('#compDiv').append(str);

Input alignment/styling on BB5

Input boxes are not aligning properly in the rounded panels and have not been styled

General Back Button issues

There seems to be an issue on some devices where when you run the application for the first time after it is installed that the back button doesn't actually get trapped properly. So when you click "back" it doesn't do anything.

It appears that it doesn't even fire the event. This may be some kind of race condition with the WebWorks event handling loading.

Focus Based navigation slow on Arrow Lists

For some reason focus based navigation through Arrow lists with the trackpad is slow. Much slower than navigating any other list with the trackpad.

I'm not sure if it is because I'm applying the styling over every time that a mutation event bubbles down from the nested divs or not.

Ripple and Phonegap build need .html file not .htm

I'd like to suggest changing .htm file to .html. Ripple is not detecting configuration file when we use:

http://localhost:9900/index.htm

The same problem appear when we'd like to build application using Phonegap build:

Error log
No index.html found

Back button when menu is open..

When the menu is open, the back button does not close the menu as expected...

PlayBook Inbox List

Add PlayBook specific styling to the Inbox List so that it looks like the new built in Inbox application

Highlighting on BB5 touch devices

Button/list item highlighting not appearing on "touch" on a Storm device

Pill Buttons on BB5

Pill Buttons do not work yet

Touch delay on BB6 Torch devices

There is currently a touch delay on BB6 Torch devices when you select a button or a list item.

Ellipsis text when it's too long

In some of the menus or lists that are used in bbUI there can be a situation where the text is too long for the display area. It would be good to apply the proper CSS to automatically truncate and ellipsis the text.

An example of how to do this with CSS:

http://www.quirksmode.org/css/textoverflow.html

Core support for tabs

Need to get the core support working for tabs and update the sampls

Inertial Scroll Panel on PlayBook

We have a requirement tracking the inertial scrolling of a screen on PlayBook but in some cases you will want to create a master/detail type of screen where you will want the screen to be fixed and have two or more scrolling panels.

This would be a new control that would allow you to place content inside it and have its contents be scrolled with proper inertial scrolling and elastic rebounds.

Syntax example:

<div data-bb-type="scroll-panel"> 
</div>

In the case of using this panel on a BB5/BB6/BB7 device it would simply create a div with scrolling overflow. If used on BB5/B6/BB7 it would mean that trackpad navigation may not scroll this content.

Wide buttons on BB5

Buttons that stretch the width of the screen don't work yet

BB10'ish DropDown

Create some BB10'ish looking dropdowns based on the dropdown styling in the new PlayBook 2.0 Contacts app. This dropdown control has an elastic effect when scrolling items that reach the end of the list.

3 elements in row

Probably this is by design but I'd like to put 3 elements in the row for example to create time control in settings:

Time: HH, MIN

Time - label element

HH, MIN - dropdowns elements

Right now after putting third element in row I get just blank screen and error in line 766.

blackberry.menu support for PlayBook

Create a "blackberry.menu" and "blackberry.menu.MenuItem" JavaScript object in bbUI to match the Smartphone ones so that you can manipulate the PlayBook menu dynamically

This requires the menu integration from Rory

#53

Flicker on PlayBook with Inertial scrolling Screens

When you use a fade animation effect to display the new screen using pushScreen() there can sometimes be a flicker when you have inertial scrolling turned on.

This only happens sometimes if the fade animation has not yet finished its timing, and the user quickly scrolls the list. Looks like there's some kind of paint/race condition with the two CSS effects for the fade and the scroll.

PlayBook DropDown

Add PlayBook specific styling to drop downs

Add disabled state to drop downs

Right now drop downs can only be enabled, and not disabled. Same type of styling needs to be applied like the buttons.

Add Tab support for BB5

Once the core support for tabs is available, the styling should be applied for BB5

Dependency on #5

Text Arrow list is highlighting multiple items

It appears that there's a highlight problem with the new inertial scrolling additions and the text arrow list where it will highlight multiple items.

More details here: #34 (comment)

PlayBook Pill Buttons

Add PlayBook specific styling to Pill Buttons

Issues With Other Javascript Files

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

PlayBook Buttons

Add styling for PlayBook Buttons that match the PIM applications

Input type = password messes up textfield width & height

if input field type is selected as password, no styles apply to it and it looks quite different from the one where type was set as text.

bbui.js parse error

I downloaded the latest source and loaded the examples in Ripple. I got a parse error in bbui.js. This is the offending section of code.

device: {
    isHiRes: window.innerHeight > 480 || window.innerWidth > 480,
device: {  
    isHiRes: function() { 
device: {
    isHiRes: function() {

bbUI.js:54SyntaxError: Parse error (repeated 2 times)

        if (bb.device.isRipple()) {
            return window.innerHeight > 480 || window.innerWidth > 480; 
        } else {
            return screen.width > 480 || screen.height > 480;
        }
    }, 
            return window.innerHeight > 480 || window.innerWidth > 480;
        } else {
            return screen.width > 480 || screen.height > 480;
        }
    },

Is there a way to refresh a SELECT element after setting selectedIndex?

First, thanks very much for creating bbUI, it's fast, looks good, and is fun to work with!

I have a very simple app that I'm using to get my teeth wet with Bb HTML5 development. On an HTML screen there are two or drop down boxes, and a single button on the page. The two elements are exactly the same except for their ID, and NAME properties. The purpose of the button is to simply change the selectedIndex of each select element for the selectedindex value of the other select element, or invert their selectedindex values.

Here are the select elements:

<select name="SelectA" id="SelectA" onChange="doSomething();" onKeypress="if(event.keyCode == 13) {doSomething();};" onClick="doSomething();">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

<select name="SelectB" id="SelectB" onChange="doSomething();" onKeypress="if(event.keyCode == 13) {doSomething();};" onClick="doSomething();">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6" selected="selected">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

Here's the button element which calls the fnInvert function with the onClick event:

<div data-bb-type="button" id="btninvert" onclick="fnInvert(document.getElementById('SelectA'), document.getElementById('SelectB'));">invert</div>

Here's the fnInvert function which swaps the selectedIndex (I tried to refresh the select by setting the selectedIndex to -1, and also tried setting the specific option from the options collection to true):

function fnInvert (From, To) {
    var FromValue = From.selectedIndex;
    var ToValue = To.selectedIndex;

    // From.options[ToValue].selected = true;
    From.selectedIndex = -1;
    To.selectedIndex = -1;
    From.selectedIndex = ToValue;
    To.selectedIndex = FromValue;
};

Basically, the fnInvert function works. When I click the button the selectedIndex values are swapped between the two select elements. However the change is not noted visibly. The fact that the selectedIndex has changed is not discernible as the originally selected, or visible option does not change. However, when I click the select element, the option menu appears and the option that is checked is the option that was changed by the fnInvert function.

Is there a way to "refresh" the select element? I know that jQuery offers a refresh method for the select element, but I haven't looked into why that's the case.

Dynamically Modifying Elements After Load

There needs to be a more elegant way of adding in UI elements after load. Right now you can hack it, but it is brittle. I'll keep updating this top level comment with details based on feedback.

Modifying/Inserting Lists

There are a couple of use cases to think about when modifying/inserting lists. The cases that I think we should cover are:

1) I want to populate/re-populate an entire list after the initial screen has loaded

In this case we want to minimize touching the live DOM as much as humanly possible. Every time we touch the DOM we incur performance penalties. To get the best performance in these cases you can use a Worker thread to build your entire list and then update the UI. This ensures that your user's UI isn't blocked as you're processing data.

Function signature would be:

void refresh( DomElement[] ) 

An example of how this could be accomplished using the text arrow list:

function doMyLoading()  {
    var i,
         item,
         itemList = [],
         arrowList,
         mydata = getMyDataArray[];

    // Loop through all my data and create my items
    for (i = 0; i < mydata.length; i++) {
       item = document.createElement('div');
       item.setAttribute('data-bb-type','item');
       item.innerHTML = 'Sleepy';
       item.onclick = function() {
                               alert('clicked Sleepy');
                            }
       itemList.push[item];
    }

    // Get our text arrow list and replace its items
    arrowList = document.getElementById('myArrowList');
    arrowList.refresh(items);

This approach would be to add a refresh(items) function to a bbUI list DOM element. The function would first style all of the items passed into the function and then replace all of the items inside of the list reducing the number of DOM updates to at most 2.

2) I want to add an item to the end of a list
TBD

3) I want to insert an item into a list
TBD

4) I want to delete an item from a list

This use case is typically used when a user selects an item and they want to delete it. This type of manipulation should be used when deleting only a couple of items. If you're removing a lot of items you may want to consider the refresh function.

The reason why there should likely be a remove function is that in many cases you will need to update the iScroll scrolling mechanism when the size of the page changes. This can all be captured inside the bbUI framework so that there's less work to do in your app.

function signature would be:

void remove( DomElement[] ) 

An example of removing a single item would be:

function deleteItem(id) {
    var item = document.getElementById(id),
          list = document.getElementById('mylist');

    list.remove([item]);
}

An example of removing multiple items would be:

function deleteRange(ids) {
    var i,
         item, 
         itemsToDelete = [],
         list = document.getElementById('mylist');

    // Gather items to delete
    for (i = 0; i < ids.length; i++) {
        item = document.getElementById(id[i]);
        itemsToDelete.push(item);
    }

    list.remove(itemsToDelete);
}

5) I want to update an item in a list
TBD

6) I want to create and insert a brand new list
TBD

TODO

Still need to handle:

• Round Panel Creation
• Button Creation/Update
• Dropdown Creation/Update
• Pill Button Creation/Update
• Label/Control container Creation/Update
• Menu Creation/Update
• Updating screen's scrolling area

Drop down buttons on BB5

Dropdown buttons do not work. They need to be plumbed into the same WebWorks v2.3 dialogs as the BB6/BB7 styling

PlayBook Top Swipe-down Menu

Add a new PlayBook top swipe-down menu that looks like the menus on the standard PlayBook apps. This should use the WebWorks swipe-down event to trigger the visibility of the menu.

I'm hoping that we can use the same consistent coloring and styling as used in the title bar and back button as seen in the below screen shot of the Pictures app:

PlayBook Scrolling Area With "more" indicators

PlayBook has areas that allow scrolling.. these could be lists or simply a section of UI that needs to scroll. They have inertial scrolling built into them and also draw lines/separators on the top and bottom of the area if there's available content to scroll to.

An example can be found in settings.

This UI control is also found in the new PlayBook 2.0 Calendar and Contacts applications

Label/Control Containers on BB5

Label/Control Containers are not working

Displaying Ads && bbUI

Using the Ads API with the bbUI framework results in my app not been able to navigate with the trackpad (focused nav) and even tho is not supported, if I choose to display ads in my app on the PlayBook, I can't use the swipe down menu unless I navigate to a screen that isn't displaying an ad.

Dropdowns don't work in Ripple

The dropdowns don't work in Ripple but do work in the simulator as of 3/21/2012

Ability to apply BB10 styling to PlayBook app

bbUI detects the OS version that is running and applies the appropriate styling. As we head towards BB10 there is an evolution in styling.

The question is which styling to apply.. the PlayBook core UI control styling, or the BB10 evolution UI control styling.

We possibly need a way for the developer to configure which PlayBook styling it is looking for

BB10'ish Label/Control Container

Create some BB10'ish looking Label/Control containers based on the styling in the new PlayBook 2.0 Contacts app.

Disabled buttons on BB5

Disabled buttons are not supported

BB10'ish Pill Buttons

Create some BB10'ish looking pill buttons based on the pill button styling in the new PlayBook 2.0 Contacts app. This pill button control has an animation effect when switching between buttons.

Focus Based Navigation issues on BB5

Focus based navigation mode can get confused when navigating between screens

Background Sizing BB5

Background color has some issues when moving from screen to screen. It will sometimes look like the background color cuts off before the end of the screen.

error when script tag added

Hi i got problem on os 5 using this UI the content can't show if you add the <script></script> tag on the script , the menu can be display is etc: inbox list,buble chat

PlayBook BBM Layout Problems

The background splicing of the BBM chat layout currently has sizing problems when in Landscape mode on PlayBook

Combo Boxes are not working on BB 6 / BB 7

Combo box are not opening when clicked

Back Button issues on BB5

There are various back button issues on BB5 where the screen will jump or not work as expected.

Inertial Scrolling on PlayBook

Currently PlayBook 2.0 has overflow scrolling in divs but it could be improved using a toolkit to add inertial scrolling and elastic ends to the scroll.

My thoughts are to integrate iscroll.js logic into PlayBook dropdowns and screens of bbUI for PlayBook.

We could trim out the Mozilla, iOS and Android specific logic to minimize the JS overhead and integrate the inertial scrolling functionality into bbUI controls by default. Default the settings of iscroll.js to look and feel like PlayBook native scroll bars to create the proper PlayBook UX guidelines look and feel.

From initial tests on PlayBook 2.0 iscroll.js looks like it really performs well and provides that native scrolling experience.

bbUI screen flicker on data-bb-effect="fade"

When a page is pushed and the screen effect is set to fade, the screen flickers after the page is loaded. I believe I have a solution for this issue. In the function fadeIn add two new variables: perspective and visibility. I have only tested this out on the inboxList and it seems to work without flashing the page on the screen.

fadeIn: function (params) {
    // set default values
    var r = 0,
        duration = 1,
        iteration = 1,
        timing = 'ease-out',
        // trying to address the flicker Add two new variables:
        perspective = 1000,
        visibility = 'hidden';

    if (document.getElementById(params.id)) {
        var elem = document.getElementById(params.id),
            s = elem.style;

        if (params.random) {
            r = Math.random() * (params.random / 50) - params.random / 100;
        }

        if (params.duration) {
            duration = parseFloat(params.duration) + parseFloat(params.duration) * r;
            duration = Math.round(duration * 1000) / 1000;
        }

        if (params.iteration) {
            iteration = params.iteration;
        }

        if (params.timing) {
            timing = params.timing;
        }

        s['-webkit-animation-name']            = 'bbUI-fade-in';
        //added perspective and visibility to address screen flicker
        s['-webkit-perspective']               = perspective;
        s['-webkit-backface-visibility']       = visibility;
        s['-webkit-animation-duration']        = duration + 's';
        s['-webkit-animation-timing-function'] = timing;
    }
    else {
        console.warn('Could not access ' + params.id);
    }
},

BB10'ish Top Tabs

Create some BB10'ish looking top tabs based on the top tab styling in the new PlayBook 2.0 Calendar app.

Inertial Scrolling on BB7

Currently BB7 has overflow scrolling in divs but it could be improved using a toolkit to add inertial scrolling and elastic ends to the scroll in the same manner as we did for PlayBook

However, this gets complicated because of the need to tie in trackpad navigation with dual input touch/trackpad devices

PlayBook Label/Control Container

Style the Label/Control container to match that of either the new Contact application or the settings area

It should also be orientation aware so that it knows how to layout and change on orientation change