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

Native Development

Reply
Highlighted
Developer
Posts: 133
Registered: ‎03-28-2011
My Device: BlackBerry 9900 & PlayBook
My Carrier: Bell

HTML in Labels - A Notice and Warning

[ Edited ]

Hey guys,

 

If you're not already aware, you can use HTML inside of your Cascades Labels. This lets you do cool things like apply CSS styling to your text. It also lets you incorporate links directly into your app, quickly and easily.

 

If you're adding links, you'll want to use <a></a> tag to link to the external content you want to. You'll notice that the links will be styled blue, bolded, and underlined by default.

 

If you want to change the default styling of links, you'll have to do the following: 

<a style="color: #ff0000; text-decoration: none;" href="http://developer.blackberry.com/">Link to BlackBerry Developer</a>

 Notice how I've incorporated CSS styling directly in the HTML tag. Furthermore, notice how I've placed it before the href parameter. This is important!

 

There's seemingly a bug/quirk with the HTML parsing where if you put anything after the href parameter, it gets blended into the URL that's invoked. This means that the following code:

<a href="http://developer.blackberry.com/" style="color: #ff0000; text-decoration: none;">Link to BlackBerry Developer</a>

 Will cause your app to open the browser to http://developer.blackberry.com/style="color: #ff0000; text-decoration: none;" instead of http://developer.blackberry.com/.

 

Hopefully this saves some of you some headache. I'll file a bug report with RIM about this as well.

 

Edit: JCarty just informed me that apparently shortcodes for colours don't work either (i.e. #eee vs #eeeeee). So stick with full hex color codes, named colors, or rgb values.

 

Edit2: Link to the relevant documentation, courtesy of peter9477: https://developer.blackberry.com/cascades/documentation/ui/text/styles.html


Founder of Pulsecode Inc. and taab
Authomator - Two-factor authentication codes on BlackBerry 10 - http://www.xitijpatel.com/ - Follow @xitijpatel
Is there a helpful or useful post in this thread? Click the thumbs up on it so that other people can find it more easily!
Developer
Posts: 175
Registered: ‎12-18-2012
My Device: n/a
My Carrier: 2 Degrees NZ

Re: HTML in Labels - A Notice and Warning

 is there any way to use the HTML to call the Javascript embedded in the QML?

 

For example, in the text set to a Label (HTML), I want an anchor tag to invoke a javascript method to perform an action, but it isn't really working.

 

Either that or have a listener somehow on any link click in the HTML text in the label, and determining what to do based on the URL/text of the link?

+Like this post, if you find it useful/helpful!
Developer
Posts: 47
Registered: ‎05-31-2013
My Device: Z10, Passport

Re: HTML in Labels - A Notice and Warning

Check webview documentation: setting up two-way communication between Cascades and JavaScript.

 

Extract from documentation:

Label {
    id: originLabel
    objectName: "originLabel"
    text: "message.origin: (no message received)"
}
 
Label {
    id: messageLabel
    objectName: "messageLabel"
    text: "message.data&colon; (no message received)"
}
 
WebView {
    id: webViewJS
    html: "<html><head><title>Hello, world!</title>" +
    "<script type=\"text/javascript\">" +
    "navigator.cascades.onmessage = function onmessage(message) {\n" +
    "    navigator.cascades.postMessage(\"Anything else?\");\n" +
    "}\n" +
 
    " // Try sending a first message\n" +
    "navigator.cascades.postMessage(\"Hello, Cascades!\");" +
      "</script>" +
 
    "</head>" +
    "<body>Hello, world!</body>"+
    "</html>"
 
    onMessageReceived: {
        originLabel.setText("message.origin: " + message.origin);
        messageLabel.setText("message.data&colon; " + message.data);
    }
}