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
Developer
Tobster_
Posts: 262
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK
Accepted Solution

Character Count For Text Areas

Hi, 

 

I was just wondering if it's possible to add a character count (in the corner of a text area) like the native Twitter app does but for it to display the number of characters that are in the text area as it's being typed.

 

Is it possible to do this in Cascades?

 

Thanks :smileyhappy:

Please use plain text.
Developer
Zmey
Posts: 1,512
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Character Count For Text Areas

Hi,
Sure, just place the label over the text area using absolute layout and display the character count in it.

Label's text can be bound to textArea.text.length.

Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
Tobster_
Posts: 262
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Character Count For Text Areas

I understand what you're saying :smileyvery-happy: - how would I create a character count for the text area in this snippet of code?

 

Container {
            id: editPane
            property real margins: 40
            background: Color.create("#f8f8f8")
            topPadding: editPane.margins
            leftPadding: editPane.margins
            rightPadding: editPane.margins
            
            layout: DockLayout {
            }
            
            attachedObjects: [
                TextStyleDefinition {
                    id: editTextStyle
                    base: SystemDefaults.TextStyles.TitleText
                }
            ]
            Container {
                TextField{
                    id: itemTitle
                    hintText: qsTr("Add a new Title to your to-do list")
                    textStyle {
                        base: editTextStyle.style
                    }
                }
                TextArea {
                    id: itemText
                    hintText: qsTr("Add a new item to your to-do list") + Retranslate.onLanguageChanged
                    topMargin: editPane.margins
                    bottomMargin: topMargin
                    preferredHeight: 575
                    maxHeight: 575
                    horizontalAlignment: HorizontalAlignment.Fill
                    
                    textStyle {
                        base: editTextStyle.style
                    }
                }
            }// Text Area Container
        }// Edit pane Container

 

Please use plain text.
Developer
Zmey
Posts: 1,512
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Character Count For Text Areas

I suggest starting by adding the label under the TextArea and binding it's text to textArea's text length.

Once it's updating correctly, position the label over the TextArea by wrapping them into a Container with absolute layout:
http://developer.blackberry.com/native/reference/cascades/bb__cascades__absolutelayout.html

If you encounter any specific problems while implementing this, feel free to ask.

Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
santito95
Posts: 133
Registered: ‎02-24-2013
My Device: BlackBerry Z10 LE
My Carrier: Telcel

Re: Character Count For Text Areas

[ Edited ]

Hey buddy,  It's too easy, you need use length property to scan how many letters you're using in your textArea

 

I wrote it fast:

 

Container {
                TextField{
                    id: itemTitle
                    hintText: "Add a new Title to your to-do list"
                    textStyle {
                        base: editTextStyle.style
                    }
                }
                Container {
                layout: DockLayout {
                }
                  
                TextArea {
                    id: itemText
                    
                    hintText: qsTr("Add a new item to your to-do list") + Retranslate.onLanguageChanged
                    topMargin: editPane.margins
                    bottomMargin: topMargin
                    preferredHeight: 575
                    maxHeight: 575
                    horizontalAlignment: HorizontalAlignment.Fill
                    onTextChanging: {
                        charcount.text = itemText.text.length
                    }
                    textStyle {
                        base: editTextStyle.style
                    }
                }
                Container{
                    verticalAlignment: VerticalAlignment.Bottom
                    horizontalAlignment: HorizontalAlignment.Right
                    rightPadding: 20
                    bottomPadding: 10
                Label {
                    id: charcount
                    text: "0"
                    }
                  }
               }
}

 Regards!

Please use plain text.
Developer
Tobster_
Posts: 262
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Character Count For Text Areas

Thanks Sanito! Works perfectly 

Please use plain text.