How to change a title bar's accent text and image?

[jpbb]

define a title bar like

<div data-bb-type="title" data-bb-caption="xxx" data-bb-accent-text="yyy" data-bb-img="foo.png"></div>

We can change the caption by using setCaption(value), then how to change the access text and img?

[tneil]

It's currently not available. I'll assign this issue to v0.9.5

[jpbb]

Hi Tim, I wonder if this issue has been solved in v0.9.5. Thank you.

[tneil]

It hasn't been implemented yet in v0.9.5, there have been some other title bar changes, but not this one yet

[jpbb]

This feature is very important for app development. I wonder when it will be solved.

[tneil]

It is a complicated change. The title bar applies styles and changes based on what is/isn't provided as attributes. So setting the accent text, or making it empty will change the layout depending on what has been provided.

Changing the text if it is already there is easy, but the corner cases is what makes it more complicated

[tneil]

Retrieving the Accent Text is now available with pull request #486 using getAccentText()

[jpbb]

If we cannot change the picture and the accent text, we have to create two hundred static pages for one hundred friends with status of "available" and "offline". Developers will not be able to use title bar like this.

[tneil]

This functionality is going to be added.. it just hasn't been added yet.

[tneil]

You can also update the these properties in the onscreenready ready event for your screen. The onscreenready event fires before the screen appears.

These JavaScript functions (setAccentText, setImage) only when necessary after the screen has already been shown to the user. You really only want to use these javascript functions if there are very good reasons not to make the changes in the onscreenready event

[jpbb]

My project cannot continue without this important feature. Please let me kown when it will be done.

[tneil]

I currently have no time schedule for when this feature will be done.

I would suggest leveraging the onscreenready event and opening up your target screen and passing it the information for your title bar.

bb.pushScreen('myscreen.htm', 'myscreen', {title : 'my dynamic title', accent : 'my dynamic accent', img: 'http://foo/1.png'}); 

and then in the onscreenready event

function myonscreenready(element, id, params) {
    if (id == 'myscreen') {
        var titleBar = element.getElementById('myTitleBarId');
        titleBar.setAttribute('data-bb-caption', params.title);
        titleBar.setAttribute('data-bb-accent-text', params.accent);
        titleBar.setAttribute('data-bb-img', params.img);
    }
}

Is there a scenario in your app where this will not work?

This is the most efficient way with the best performance

[haixuanc]

Hi Tim, did you implement this feature request? If not, I can work on it. What about place the image, caption, and accent text in the middle when title-bar button(s) is present?

[tneil]

Nope, I haven't started work on this one yet... The combination which you have shown doesn't really follow the BB10 UX guidelines. We're trying to keep bbUI right on spec with the BB10 UX so we wouldn't likely want to add it.

[hendrik-dev]

There are JavaScript functions for changing the caption, back caption and action caption, but none for the accent text and image. Will these functions be added to bbUI?

I have a details page with a refresh action on the action bar and would like to display a status icon in the title bar. The icon image would have to be updated after a refresh.

[tneil]

Those functions are outlined as items in this issue to add to the framework. It isn't available yet

[sh2sg]

my workaround to update title bar accent text:

<div data-bb-type="title" data-bb-caption="Title Bar Caption" data-bb-img="images/icon.png" data-bb-accent-text="<div id='myAccent'>AAAAAAA</div>"></div>

document.getElementById("myAccent").innerHTML = "BBBBB";

[marc25v]

Wondering what the status of this issue was? Has any progress been made as of yet for both the accent text and image?

Thanks for the great work up to now.

[tneil]

There hasn't been progress on this specific item... most work right now is getting the foundation ready for the v1.0 milestone. This functionality will be available as part of that work