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

Web and WebWorks Development

Reply
Developer
Posts: 164
Registered: ‎11-27-2012
My Device: Z10 LE,Dev Alpha C
My Carrier: China Mobile

bbui.js is just too bad for Q10.

 

what can I do?

should I just " switch to cascades " instead?

BlackBerry Cascades / WebWorks developer, Vendor name: anpho
Developer
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: bbui.js is just too bad for Q10.

no bbui.js is fine.

your syntax probably has errors.

your image size may be incorrect.

check both and report back...

Developer
Posts: 366
Registered: ‎07-15-2013
My Device: blackberry Z10
My Carrier: Personal

Re: bbui.js is just too bad for Q10.

no , bbui is very good , maybe you can use html and css to do this , but you can do this with webworks dont worry , put the problems in the forum for we help you

If you find this information useful please click like --->
@mezeitune on twitter
Developer
Posts: 366
Registered: ‎07-15-2013
My Device: blackberry Z10
My Carrier: Personal

Re: bbui.js is just too bad for Q10.

Same , in cascades you can do this very well , the technolies are very usefull for everything 

If you find this information useful please click like --->
@mezeitune on twitter
Developer
Posts: 164
Registered: ‎11-27-2012
My Device: Z10 LE,Dev Alpha C
My Carrier: China Mobile

Re: bbui.js is just too bad for Q10.

<div data-bb-type="screen">
<!-- Top Bar Menu -->
<div data-bb-type="menu">
<div data-bb-type="menu-item" data-bb-img="icon/ic_info.png" data-bb-pin="left">about</div>
<div data-bb-type="menu-item" data-bb-img="icon/ic_feedback.png" data-bb-pin="right">feedback</div>
</div>

<!-- Song Title -->
<div data-bb-type="title" data-bb-caption="All Things At Once" data-bb-accent-text="Lenka" data-bb-img="icon/ic_contacts.png"></div>

<!-- Album Art -->
<div id="albumart" style="width:100%;height:100%;background: url(res/album.jpg) no-repeat center;background-size:80%;overflow:hidden;background-color:black;">
<div id='oplayer' style="width:100%;height:100%;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;background-color:gray;z-index: 1">
</div>
<div id="lyrics" style="width:100%;height:100%;text-align: center;text-shadow: 2px 2px white; z-index: 2">
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
<br/><br/><br/><br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
<br/><br/><br/><br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/><br/><br/><br/><br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/><br/><br/><br/><br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/><br/><br/><br/><br/>
You're my apple in my eye,<br/>
I wish I would see you there.<br/>
</div>

</div>
<div id='slider_bottom' style="z-index: 100;position: absolute;bottom: 2px;width:100%; opacity: 50%">
<input type="range" min="0" max="1500" step="10" value="0" onchange="document.getElementById('lyrics').style.marginTop=-this.value"/>
</div>
<!-- Action Bar and side bar menus. -->
<div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="true" data-bb-selected="true" data-bb-img="icon/ic_info.png">Playing</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="true" data-bb-selected="false" data-bb-img="icon/ic_view_list.png">Playlist</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="true" data-bb-selected="false" data-bb-img="icon/ic_doctype_music.png">Lib</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="false" data-bb-img="icon/ic_previous.png">Prev</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="false" data-bb-img="icon/ic_play.png">Play</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="false" data-bb-img="icon/ic_next.png">Next</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="icon/ic_share.png">Share</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="icon/ic_delete.png">Delete</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="icon/ic_settings.png">Settings</div>
</div>

&lt;script&gt;

&lt;/script&gt;
</div>


this is my page.all the icons are using the default icons provided by blackberry..
I've tried to remove the lyrics div and doesn't make any diffirence.
BlackBerry Cascades / WebWorks developer, Vendor name: anpho
Developer
Posts: 164
Registered: ‎11-27-2012
My Device: Z10 LE,Dev Alpha C
My Carrier: China Mobile

Re: bbui.js is just too bad for Q10.

at last,
bbui.js is just a simulation for bb10 experience.
BlackBerry Cascades / WebWorks developer, Vendor name: anpho
Developer
Posts: 366
Registered: ‎07-15-2013
My Device: blackberry Z10
My Carrier: Personal

Re: bbui.js is just too bad for Q10.

yes , for this way is very useful , because you can do your apps with html and js

If you find this information useful please click like --->
@mezeitune on twitter
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: bbui.js is just too bad for Q10.

There may be some display nuances between what you see in Ripple, and what runs on an actual device.  bbUI was tested on Q10 and it does present UI well.

 

Do you have the zoom level in Chrome changed to anything but 100%?  If so, normalize this and you may see things like the text below the action bar icons hidden off-screen as expected.

 

Otherwise, can I suggest building & deploying this app to a Q10 simulator or device and confirming if you see these rendering issues disappear?

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
Posts: 164
Registered: ‎11-27-2012
My Device: Z10 LE,Dev Alpha C
My Carrier: China Mobile

Re: bbui.js is just too bad for Q10.

Thanks for your reply,but I've tested on my DAC and works just like in the ripple.

1.png2.png3.png4.png

BlackBerry Cascades / WebWorks developer, Vendor name: anpho
Developer
Posts: 25
Registered: ‎12-09-2012
My Device: Z10
My Carrier: Congstar Germany

Re: bbui.js is just too bad for Q10.

Did you try this on a real device? Because for me Ripple gives these kinds of errors as well, but on device it is just fine!