Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TIMOB-18062] Android: Enable links to work in textfields and textarea #6641

Merged
merged 1 commit into from
Mar 10, 2015
Merged

[TIMOB-18062] Android: Enable links to work in textfields and textarea #6641

merged 1 commit into from
Mar 10, 2015

Conversation

ashcoding
Copy link
Contributor

Jira: https://jira.appcelerator.org/browse/TIMOB-18062

Sample code:

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
// create base UI tab and root window
//////////////////////////////////////
var win1 = Titanium.UI.createWindow({  
    title:'Label',
    backgroundColor:'#ddd'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Label',
    window:win1
});


var text =  'Bacon ipsum dolor Appcelerator Titanium rocks! sit amet fatback leberkas salami sausage tongue strip steak.';

var attr = Ti.UI.createAttributedString({
    text: text,
    attributes: [
        //font
        {
            type: Ti.UI.ATTRIBUTE_FONT,
            value: {font:{fontSize:50,fontFamily:'Helvetica Neue'}},
            range: [0, text.length]
        },
        // Underlines text
        {
            type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
            value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, //only iOS needs this, android ignores.
            range: [0, text.length]
        },
        // Sets a background color
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "red",
            range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
        }
    ]
});

attr.addAttribute(
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "blue",
            range: [text.indexOf('Titanium'), ('Titanium').length]
        }
);  

attr.addAttribute(
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "yellow",
            range: [text.indexOf('rocks!'), ('rocks!').length]
        }
);        

attr.addAttribute(
        {
            type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
            value: "orange",
            range: [0,  text.length]
        }
);

attr.addAttribute(
        {
            type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
            value: "black",
            range: [text.indexOf('rocks!'), ('rocks!').length]
        }
);

attr.addAttribute(
        {
            type: Ti.UI.ATTRIBUTE_LINK,//ignored in iOS, label doesn't support attribute link. Use textArea instead. 
            value: "http://www.appcelerator.com",
            range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
        }
);

var label = Titanium.UI.createLabel({
    left: 20,
    right: 20,
    height: Titanium.UI.SIZE,
    attributedString: attr
});

var changeStyle = Titanium.UI.createButton({
    bottom:200,
    title: "ChangeStyle"
});

win1.add(label);
win1.add(changeStyle);

var attr2 = Titanium.UI.createAttributedString({
    text: text,
    attributes: [
        //font
        {
            type: Ti.UI.ATTRIBUTE_FONT,
            value: {font:{fontSize:30,fontFamily:'Helvetica Neue'}},
            range: [0, text.length]
        },
        // Underlines text
        {
            type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
            value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, //only iOS needs this, android ignores.
            range: [0, text.length]
        },
        // Sets a background color
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "green",
            range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
        },
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "red",
            range: [text.indexOf('Titanium'), ('Titanium').length]
        },
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "blue",
            range: [text.indexOf('rocks!'), ('rocks!').length]
        },
        // Sets a foreground color
        {
            type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
            value: "black",
            range: [0,  text.length]
        },
        {
            type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
            value: "red",
            range: [text.indexOf('rocks!'), ('rocks!').length]
        },
        // Sets strike through
        {
            type: Ti.UI.ATTRIBUTE_STRIKETHROUGH_STYLE,
            value: Titanium.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, //only iOS needs this, android ignores.
            range: [text.indexOf('tongue'), ('tongue').length]
        },
        {
            type: Ti.UI.ATTRIBUTE_LINK, //ignored in iOS, label doesn't support attribute link. Use textArea instead. 
            value: "http://www.appcelerator.com",
            range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
        }
    ]
});

changeStyle.addEventListener('click', function(){
    label.attributedString=attr2;});


//////////////////////////////////////
var win2 = Titanium.UI.createWindow({  
    title:'TextField',
    backgroundColor:'#ddd'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'TextField',
    window:win2
});

var textFieldtextHint =  'Hints are awesome!';

var attrFieldHint = Ti.UI.createAttributedString({
    text: textFieldtextHint,
    attributes: [
        //font
        {
            type: Ti.UI.ATTRIBUTE_FONT,
            value: {font:{fontSize:30,fontFamily:'Helvetica Neue'}},
            range: [0, textFieldtextHint.length]
        },
        // Underlines text
        {
            type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
            value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, //only iOS needs this, android ignores.
            range: [0, textFieldtextHint.length]
        },
        // Sets a background color
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "red",
            range: [textFieldtextHint.indexOf('Hints'), ('Hints').length]
        },
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "blue",
            range: [textFieldtextHint.indexOf('are'), ('are').length]
        },
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "yellow",
            range: [textFieldtextHint.indexOf('awesome!'), ('awesome!').length]
        },
        // Sets a foreground color
        {
            type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
            value: "orange",
            range: [0,  textFieldtextHint.length]
        },
        {
            type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
            value: "black",
            range: [textFieldtextHint.indexOf('awesome!'), ('awesome!').length]
        }
    ]
});

var textFieldtext =  'Textfields are awesome!';

var attrField = Ti.UI.createAttributedString({
    text: textFieldtext,
    attributes: [
        //font
        {
            type: Ti.UI.ATTRIBUTE_FONT,
            value: {font:{fontSize:50,fontFamily:'Helvetica Neue'}},
            range: [0, textFieldtext.length]
        },
        // Underlines text
        {
            type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
            value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, //only iOS needs this, android ignores.
            range: [0, textFieldtext.length]
        },
        // Sets a background color

        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "red",
            range: [textFieldtext.indexOf('Text'), ('Text').length]
        },
        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "blue",
            range: [textFieldtext.indexOf('field'), ('field').length]
        },

        {
            type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
            value: "yellow",
            range: [textFieldtext.indexOf('awesome!'), ('awesome!').length]
        },
        // Sets a foreground color
        {
            type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
            value: "orange",
            range: [0,  textFieldtext.length]
        },
        {
            type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
            value: "black",
            range: [textFieldtext.indexOf('awesome!'), ('awesome!').length]
        },
        {
            type: Ti.UI.ATTRIBUTE_LINK, //ignored in iOS, label doesn't support attribute link. Use textArea instead. 
            value: "http://www.appcelerator.com",
            range: [textFieldtext.indexOf('Text'), ('Text').length]
        }

    ]
});

var textField1 = Ti.UI.createTextField({
  borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
  color: 'black',
  top: 10,
  width: 'auto', height: 'auto',
  value: 'value text',
  attributedHintText: attrFieldHint
});

var textField2 = Ti.UI.createTextField({
  borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
  color: 'black',
  top: 110,
  width: 'auto', height: 'auto',
  attributedString: attrField,
  font: {fontSize:20,fontFamily:'Helvetica Neue'},
  backgroundColor: 'red',
  color: 'yellow'

});

var textField3 = Ti.UI.createTextField({
  borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
  color: 'black',
  top: 210,
  width: 'auto', height: 'auto',
  attributedHintText: attrFieldHint,
  attributedString: attrField,
  value: 'value text',
  font: {fontSize:10,fontFamily:'Helvetica Neue'},  
  color: 'red'
});

win2.add(textField1);
win2.add(textField2);
win2.add(textField3);

//////////////////////////////////////
var win3 = Titanium.UI.createWindow({  
    title:'TextArea',
    backgroundColor:'#ddd'
});
var tab3 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'TextArea',
    window:win3
});

var textArea1 = Ti.UI.createTextArea({
  borderWidth: 2,
  borderColor: '#bbb',
  borderRadius: 5,
  textAlign: 'left',
  attributedString: attrField,
  value: 'value text',
  font: {fontSize:20, fontWeight:'bold'},
  backgroundColor: 'red',
  color: 'yellow',
  top: 10,
  width: 'auto', height: 'auto'
});

win3.add(textArea1);
//////////////////////////////////

tabGroup.addTab(tab1);  
tabGroup.addTab(tab2); 
tabGroup.addTab(tab3); 
// open tab group
tabGroup.open();

hieupham007
hieupham007 reviewed Feb 18, 2015
View reviewed changes
android/modules/ui/src/java/ti/modules/titanium/ui/widget/TiUIText.java
Bundle bundleText = AttributedStringProxy.toSpannableInBundle(attrString, TiApplication.getAppCurrentActivity());
if (bundleText.containsKey(TiC.PROPERTY_ATTRIBUTED_STRING)) {
tv.setText((Spannable) bundleText.getCharSequence(TiC.PROPERTY_ATTRIBUTED_STRING));
if(bundleText.getBoolean("hasLink", false)){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is "hasLink" documented? We should create TiC constant for it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. I'll do that.

@hieupham007
Copy link
Contributor

Functionally tested. Looks good, please address comments

@ashcoding
Copy link
Contributor Author

Comment addressed.

@ingo
Copy link
Contributor

ingo commented Feb 28, 2015

@hieupham007 can you please re-review?

@hieupham007
Copy link
Contributor

Code reviewed. Looks good.

hieupham007 added a commit that referenced this pull request Mar 10, 2015
@hieupham007
Merge pull request #6641 from ashcoding/TIMOB-18068_links
50b8c7c 
[TIMOB-18062] Android: Enable links to work in textfields and textarea
@hieupham007 hieupham007 merged commit 50b8c7c into tidev:master Mar 10, 2015
@ashcoding ashcoding deleted the TIMOB-18068_links branch May 21, 2015 07:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ashcoding @hieupham007 @ingo