Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-18499] TiAPI: Ti.UI.ATTRIBUTE_LINK needs to support click events

GitHub Issuen/a
TypeImprovement
PriorityMedium
StatusReopened
ResolutionUnresolved
Affected Version/sRelease 3.5.0
Fix Version/sRelease 4.0.0
ComponentsiOS
LabelsTCSupport
ReporterShannon Hicks
AssigneeUnknown
Created2015-01-15T13:48:32.000+0000
Updated2018-02-28T19:54:54.000+0000

Description

Is it possible that Ti.UI.ATTRIBUTE_LINK could respond to click events in addition to longpress? It is difficult to explain to users that they see something that looks clickable, but no, they need to longpress it. We end up having to use StyledLabel modules to get this working.

Comments

  1. Shannon Hicks 2015-02-13

    I didn't flag this as iOS or Android because it should be implemented for both, now that Android supports attributed strings TIMOB-15998
  2. Vishal Duggal 2015-02-19

    Test case
       var win = Ti.UI.createWindow({
           backgroundColor: '#ddd',
           fullscreen:true,
           layout:'vertical'
       });
        
       var text =  'Tap on any of the following:\n1.Appcelerator Titanium \t2.Android \t3.IOS';
         
       var attr = Ti.UI.createAttributedString({
           text: text,
           attributes: [
               {
                   type: Ti.UI.ATTRIBUTE_LINK,
                   value: 'http://www.appcelerator.com/developers/',
                   range: [text.indexOf('Appcelerator Titanium'), ('Appcelerator Titanium').length]
               },
               {
                   type: Ti.UI.ATTRIBUTE_FONT,
                   value: {textStyle:Ti.UI.TEXT_STYLE_HEADLINE},
                   range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
               },
               {
                   type: Ti.UI.ATTRIBUTE_FONT,
                   value: {textStyle:Ti.UI.TEXT_STYLE_SUBHEADLINE},
                   range: [text.indexOf('Titanium'), ('Titanium').length]
               },
               {
                   type: Ti.UI.ATTRIBUTE_LINK,
                   value: 'http://developer.android.com/',
                   range: [text.indexOf('Android'), ('Android').length]
               },
               {
                   type: Ti.UI.ATTRIBUTE_FONT,
                   value: {textStyle:Ti.UI.TEXT_STYLE_CAPTION1},
                   range: [text.indexOf('Android'), ('Android').length]
               },
               {
                   type: Ti.UI.ATTRIBUTE_LINK,
                   value: 'https://developer.apple.com/',
                   range: [text.indexOf('IOS'), ('IOS').length]
               },
               {
                   type: Ti.UI.ATTRIBUTE_FONT,
                   value: {textStyle:Ti.UI.TEXT_STYLE_CAPTION1},
                   range: [text.indexOf('IOS'), ('IOS').length]
               },
           ]
       });
        
       var label = Ti.UI.createLabel({
           backgroundColor: '#ccc',
           attributedString: attr,
       });
        
       label.addEventListener('link',function(e){
           alert(e.url);
       })
        
        
        
        
       var container1 = Ti.UI.createView({width:Ti.UI.SIZE,height:Ti.UI.SIZE,layout:'horizontal'});
       var b11 = Ti.UI.createButton({title:' W 200 '});
       var b12 = Ti.UI.createButton({title:' W 300 '});
       var b13 = Ti.UI.createButton({title:' W SIZE '});
       container1.add(b11);
       container1.add(b12);
       container1.add(b13);
        
       var container2 = Ti.UI.createView({width:Ti.UI.SIZE,height:Ti.UI.SIZE,layout:'horizontal'});
       var b21 = Ti.UI.createButton({title:' H 200 '});
       var b22 = Ti.UI.createButton({title:' H 300 '});
       var b23 = Ti.UI.createButton({title:' H SIZE '});
       container2.add(b21);
       container2.add(b22);
       container2.add(b23);
        
       var container3 = Ti.UI.createView({width:Ti.UI.SIZE,height:Ti.UI.SIZE,layout:'horizontal'});
       var b31 = Ti.UI.createButton({title:' Vert C '});
       var b32 = Ti.UI.createButton({title:' Vert T '});
       var b33 = Ti.UI.createButton({title:' Vert B '});
       container3.add(b31);
       container3.add(b32);
       container3.add(b33);
        
       var container4 = Ti.UI.createView({width:Ti.UI.SIZE,height:Ti.UI.SIZE,layout:'horizontal'});
       var b41 = Ti.UI.createButton({title:' Hor L '});
       var b42 = Ti.UI.createButton({title:' Hor C '});
       var b43 = Ti.UI.createButton({title:' Hor R '});
       container4.add(b41);
       container4.add(b42);
       container4.add(b43);
        
       //vertical = {center:0,top:1,bottom:2}
       //horizontal = {left:0,center:1,right:2}
        
        
       function clickHandler(e){
           if (e.source == b11) {
               label.width = 200;
           }    
           if (e.source == b12) {
               label.width = 300;
           }    
           if (e.source == b13) {
               label.width = Ti.UI.SIZE;
           }    
           if (e.source == b21) {
               label.height = 200;
           }    
           if (e.source == b22) {
               label.height = 300;
           }    
           if (e.source == b23) {
               label.height = Ti.UI.SIZE;
           }    
           if (e.source == b31) {
               label.verticalAlign = 0;
           }    
           if (e.source == b32) {
               label.verticalAlign = 1;
           }    
           if (e.source == b33) {
               label.verticalAlign = 2;
           }    
           if (e.source == b41) {
               label.textAlign = 0;
           }    
           if (e.source == b42) {
               label.textAlign = 1;
           }    
           if (e.source == b43) {
               label.textAlign = 2;
           }    
       }
        
       win.addEventListener('click',clickHandler);
        
        
       win.add(label);
       win.add(container1);
       win.add(container2);
       win.add(container3);
       win.add(container4);
        
       win.open();
       
  3. Ingo Muschenetz 2015-02-19

    Changing to TiAPI as requested by Shannon.
  4. Shannon Hicks 2015-02-19

    looks like the test case needs tweaking... createAttributedString has been moved to Titanium.UI.createAttributedString in 4.0.0 [https://github.com/appcelerator/titanium_mobile/blob/124852b1b7def38a37e565cacff067bca3dcdd65/apidoc/Titanium/UI/iOS/Attribute.yml#L5] via TIMOB-15998
  5. Vishal Duggal 2015-02-19

    Pull pending master - https://github.com/appcelerator/titanium_mobile/pull/6653
  6. Shannon Hicks 2015-02-20

    @vduggal The PR only addresses iOS. That doesn't Resloved/Fixed this ticket. It only creates another iOS/Android parity issue.
  7. Vishal Duggal 2015-02-20

    @[~iotashan] The Android work is done in a separate task as a new feature.
  8. Shannon Hicks 2015-02-20

    Do you have the JIRA ticket for that handy? I couldn't find one that specifically calls this out or shows a test case for it.
  9. Vishal Duggal 2015-02-24

    @[~iotashan] See TIMOB-18608
  10. Eric Wieber 2015-03-11

    Verified fixed using: Titanium SDK 4.0.0.v20150311105810 Studio 4.0.0.201503062102 CLI 3.4.2 Xcode 6.2 Node 0.10.36 On: Galaxy Note 2, Android 4.3 iPhone 6, iOS 8.2 Click and Longpress events correctly fired.

JSON Source