How to add multi-string to "winControl" using in "data-win-res" ?

Question

Hello everybody,

here is a simple button want to show a button name and a tooltip on it.

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'bottom-delete',  icon:'url(images/appBar/btn_delete.png)', 
, type:'flyout', flyout:'deleteFlyout', onclick:AppBar.doClickDelete}"
data-win-res="{winControl: {label: 'Delete', tooltip: 'Delete'}}"></button>

The result is that button name disappear and just show the "Delete" tooltip when pointer move it and waiting a second.

As I changed the order for {tooltip: 'Delete', label: 'Delete'}

It only show the button name, but without tooltip.

So, how to show both on "winControl" using in "data-win-res" ??

Answer 1

Check out the appbar sample, you want to use the data-win-options: HTML AppBar control sample

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'s1cmdAdd',label:'Home',icon:'home',section:'global',tooltip:'Add item'}">
        </button>
        

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Thx for your reply.

But use data-win-options can not support localized string unless apply javascript to do that.

I want to define multiple strings and support localized language in html button. Is is possible ?

Answer 3

Check this out:

http://channel9.msdn.com/Blogs/How-Do-I/How-Do-I-Implement-App-Bars-in-a-Windows-8-Metro-Style-Application-Part3

Answer 4

Hi,

Maybe a really late answer, but have you checked that you are calling to the WinJS.Resources.processAll() method in the initialization function?

 

---

Juan Manuel Servera
twitter: @jmservera
mi blog: http://jmservera.com
Únete al grupo de WP7 en LinkedIn
MCPD WP7 Developer - MCTS Sharepoint 2010 Application Development

Answer 5

This is possible as burger1 already shared the video link:

http://channel9.msdn.com/Blogs/How-Do-I/How-Do-I-Implement-App-Bars-in-a-Windows-8-Metro-Style-Application-Part3

---

Arindam Basu

Answer 6

Hi dogtim.

The problem here is because the content of the label and the tooltip are the same:

data-win-res="{winControl: {label: 'Delete', tooltip: 'Delete'}}"

If they are the same, the localization does not work well. But if you create another entry in the resource file and use a different string for the tooltip, everything works fine, see example below:

1) Create different resource entries with different values

"Delete" : "Delete",
"Delete_Tooltip" : "Delete selected item(s)"

2) Use these resources in the AppBar button

 data-win-res="{winControl: {label: 'Delete', tooltip: 'Delete_Tooltip'}}" 

Best regards,

Anderson Neves