Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

How do you put links to websites in labels?

I'm curious whether there is a way to hyperlink to a website a la html anchor tags style. I have a label and may either want to linkify the entire label or a part of it.

I'm hoping that I don't need to create a "mock" link with an underline styling with an event listener that opens the webview and sends the user accordingly.

Any thoughts?

— asked June 8th 2010 by Surojit Niyogi
  • links
0 Comments

5 Answers

  • There is a very simple and cross-platform solution here: http://developer.appcelerator.com/question/11281/click-button-and-open-hyperlink-in-safari-instead-of-webview#comment-108572

    The code is:

    //create label (or button etc)
    var label = Ti.UI.createLabel({text:'LINK'});
    
    //event listener
    label.addEventListener('click', function(e) {
        //open link in safari - application will close
        Titanium.Platform.openURL('http://www.soft4u.be');
    });
    
    — answered December 30th 2011 by José Júnior
    permalink
    0 Comments
  • Hi,

    I know it's an old topic, but here is my solution:

    var link = "http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Label-object";
    var linkE = Titanium.UI.createLabel({
            text: "What about label in titanium?",
            color: "blue",
            font: {
                fontSize: 16,
                fontWeight: 'bold'
            },
            width: 'auto',
            textAlign: 'left',
            bottom: deviceHeight * 2 / 100,
            left: deviceWidth * 4/100,
            height: 'auto',
    });
    
    linkE.addEventListener('click', function(e){
        var intent = Ti.Android.createIntent({
            action: Ti.Android.ACTION_VIEW,
            data:link
        });
        Ti.Android.currentActivity.startActivity(intent);
    });
    
    win.add(linkE);
    

    in fact it works for almost everything (intent can be use to start google map/e-mail/dial/…)

    — answered June 14th 2011 by Florent Cardot
    permalink
    0 Comments
  • Unfortunately Surojit, that is precisely what is needed right now :(. We've had other people run into this exact problem, and that is the technique needed - you'll need to specially style labels and add a click handler function to launch the browser.

    — answered June 8th 2010 by Kevin Whinnery
    permalink
    2 Comments
    • alright, not a problem as long as i know. just wanted to be sure i'm not doing more work than is necessary. :-)

      — commented June 8th 2010 by Surojit Niyogi
    • adding a click handler is straight forward enough but how do you add a style with underline to label text??

      — commented November 14th 2010 by Lee Sibbald
  • This is a method I used….may need some tweeking:

    var createLink = function(labelOptions, callback) {
        var view = Titanium.UI.createView({
            width:'auto',
            height:'auto',
            layout:'vertical'
        });
    
        var label = Titanium.UI.createLabel(labelOptions);
    
        label.addEventListener('click', callback);
    
        var lineView = Titanium.UI.createView({
            width:label.width,
            left:label.left,
            height:1,
            backgroundColor:label.color ? label.color : 'black',
            bottom:0
        });
    
        view.add(label);
        view.add(lineView);
        return view;
    }
    
    var forgotPassword = createLink({
        width:'auto',
        height:20,
        text:'Forgot Password?',
        left:120
    }, function(){Titanium.Platform.openURL('http://someurl.com/forgotpassword')});
    
    — answered November 29th 2010 by Roger Chapman
    permalink
    2 Comments
    • Thanks for this, when I tried this on Android I don't see the underline. Anyone else tried it?

      — commented January 24th 2011 by Frank A
    • In my experience, label.width will equal to 'auto' in android. It has to be drawn to the screen before it actually gets any "real" value.

      — commented July 1st 2011 by Julian Lindblad
  • for android …
    From below code set html property of label see in double quote

    var lblLink = Titanium.UI.createLabel({
    font : {
    fontSize : 20,
    fontStyle : 'bold',
    },
    top : 10,
    color : '#0000EE',
    left : 10,
    height : 30,
    width : 150,
    html : refer this
    });

    — answered September 6th 2013 by Jayesh Joshi
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.