3

I am building a tabbed mobile application in Appcellerator Titanium.
I need to fill one tab with a big text-segment, and are using a TextArea to do this:

var explanationView = Ti.UI.createTextArea({
    enabled: false, 
    editable: false, 
    color: 'black', 
    value: explanation
});

This displays the text as I want. However when the content gets too long to fit it shows the latter part of the content, forcing the user to scroll upwards to find the beginning of the text.

  What I get:       What I want:
  __________       ______________
 | CONTENT  |      ||          ||
_|__________|_     ||   VIEW   ||
||          ||     ||__________||
||  VIEW    ||      |  Content |
||__________||      |__________|

I guess my question is twofold:

  • Is there a way to force the TextArea to scroll to the top when generated?
  • Is there a better way using titanium to accomplish an uneditable textView?

- Update with solution -

Martin is absolutely right, the best way to make a non-editable text for display is to use Ti.UI.Label. A working solution in my case were to replace the above code with the following:

var explanationView = Titanium.UI.createScrollView()
explanationView.add(Ti.UI.createLabel({text: explanation, color:'black'}))

win.add(explanationView)
mariusnn
  • 1,847
  • 18
  • 30

2 Answers2

3

Better way to represent a TextArea that isn't editable would be a label. This should expand to multiple lines if needed. It would also be less likely to confuse the user into thinking the box is something you can edit like a normal textarea entry.

Not really sure what the pictures are trying to communicate. Initially it looks like to me you are adding the view and the textarea to the overall view in the wrong order or have their top/bottom position set wrong.

If you are attempting to show scrollable text and a view with some other content on it at the same time, I would probably create a Scrollable View and put my text on that with the appropriate height set and then have the other view fill the rest of the screen.

Whenever I created a large amount of text or items on the screen, my view hasn't already been scrolled to the bottom. If I don't destroy and recreate my win/view after scrolling down on it myself, then I might see this. Especially if I attempt to reuse the items already displayed on the screen and just reload them with data.

Martin
  • 1,914
  • 1
  • 12
  • 14
  • I realize that the illustration should have been shifted horizontally. The point is that what I see on the screen (and how content is positioned within the TextArea is so that I see the bottom part of the text and not the top. Multiline Label sounds decent - I'll give that a try when I'm back in the office tomorrow morning. – mariusnn Oct 09 '12 at 21:18
  • 1
    FYI on that, there isn't a setting I'm aware of that will set it to multiple lines, it just wraps automatically for you. At least in my case it does. If you are still having an issue with it, I can look at my source and see if I set anything special. I'm almost 100% sure it wasn't required. – Martin Oct 09 '12 at 21:35
  • Sounds reasonable. Never occured to me that a lable would wrap. I'll be at work in nione hours, so I'll break it down and test then. – mariusnn Oct 09 '12 at 21:37
2

Using Labels as the said solution would do the trick. However, labels have shorter character limits. Using labels on long texts would cut your text. You can stick on using TextAreas on your long texts by setting the editable property to false and as well as putting your TextArea inside a ScrollView. This will let you see the top of your TextArea since ScrollViews gives you the freedom to expand your items beyond the device's view as well as the function to scroll to a specific region by code implementation.

Axel
  • 685
  • 5
  • 14