blackberry / bbui.js Goto Github PK
View Code? Open in Web Editor NEWBlackBerry UI look and feel JavaScript toolkit for WebWorks
License: Apache License 2.0
BlackBerry UI look and feel JavaScript toolkit for WebWorks
License: Apache License 2.0
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.
Focus based navigation mode can get confused when navigating between screens
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);
The dropdowns don't work in Ripple but do work in the simulator as of 3/21/2012
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.
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.
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;
}
},
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.
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
Once the core support for tabs is available, the styling should be applied for BB5
Dependency on #5
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.
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
Still need to handle:
Combo box are not opening when clicked
Dropdown buttons do not work. They need to be plumbed into the same WebWorks v2.3 dialogs as the BB6/BB7 styling
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
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
The background splicing of the BBM chat layout currently has sizing problems when in Landscape mode on PlayBook
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 BBUIPill Buttons do not work yet
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:
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:
Input boxes are not aligning properly in the rounded panels and have not been styled
Buttons that stretch the width of the screen don't work yet
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.
Add PlayBook specific styling to the Inbox List so that it looks like the new built in Inbox application
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
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
When the menu is open, the back button does not close the menu as expected...
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);
}
},
Add PlayBook specific styling to Pill Buttons
Disabled buttons are not supported
There are various back button issues on BB5 where the screen will jump or not work as expected.
Add styling for PlayBook Buttons that match the PIM applications
There is currently a touch delay on BB6 Torch devices when you select a button or a list item.
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.
Right now drop downs can only be enabled, and not disabled. Same type of styling needs to be applied like the buttons.
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 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
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.
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)
Need to get the core support working for tabs and update the sampls
Add PlayBook specific styling to drop downs
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
Label/Control Containers are not working
Button/list item highlighting not appearing on "touch" on a Storm device
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.