Limiting Text to spark textarea available size - text

I'm trying to build a dynamically sized spark textArea which limits the possible text to its size.
E.g the textarea is set to width="300" and height="100". Now the user should only be able to enter or paste as much text as can be visible in the component. I don't want the textArea to scroll or linebreak if more text is entered.
I tried all sorts of approaches, but none with success.
Help is highly appreciated!

I encountered the same issue but no perfect solution is found. But I found a simple workaround for this issue.
Spark TextArea has a textDisplay attribute of type IEditableText. by default, a RichEditableText component is assigned to this attribute. There is a property called contentHeight in this component. I used this property to determine if the text height exceeds textArea height. So my simple solution is like this:
protected function textArea1_changeHandler(event:TextOperationEvent):void {
if (textArea1.textDisplay is RichEditableText){
if ((textArea1.textDisplay as RichEditableText).contentHeight > textArea1.height){
textArea1.maxChars = textArea1.text.length;
}
else {
textArea1.maxChars = 0;
}
}
}
Of cause, this needs to be fine tuned before using in an application. But I wanted to post the solution as soon as possible :) I will post exact logic required. But I think you can do it by your own too...

for a Spark textArea I used this on each change of text:
while (textArea.textFlow.flowComposer.numLines>textArea.heightInLines)
textArea.text = textArea.text.substr(0,textArea.text.length-1);

Related

Coded UI Test - WinEdit control's search properties doesn't allow searching on AutomationID

thanks in advance for you help!
I'm writing a CodedUITest that includes entering text into a textbox. I'm having trouble finding the control, because it hasn't been named. It has an AutomationId, but when I try to use it, I get an error that it's not a valid search property.
Please help!
What I do is to get the parent(s) object and enumerate through the children until you find the desired object. With vs2013 at least, you can use the crosshair and child navigator to verify its position on the page. For instance, if the text box is the 5th element in the main window
IEnumerator<UITestControl> appt = uiMainWindowControl.GetChildren().GetEnumerator();
int i=0;
while (appt.MoveNext() && i<5){
i++;
}
Mouse.click(appt.Current);
Keyboard.SendKeys("Enter Text");
Your Textbox in Coded UI is probably a WinTextBox. Change it to WpfTextBox and you'll be able to use the AutomationId.

using jscolor.js on dynamic input

i'm using color picker from http://jscolor.com/
i'm trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms of, on page load the input doesn't exist, only after the user click on something the input will become available. for example, I have a rows of data, and each row has different background color. this row of data are loaded using ajax. at the end of each row, there's an edit button. by clicking the edit button, it will display an input text box for the clicked row. I want to call the jscolor picker when the user clicks on the input text box. how can I do this?
thanks
For some reason jscolor.init() did not work for me, and looking at the code I called
jscolor.installByClassName("jscolor");
function.
So...
$(document).ready(function() {
jscolor.installByClassName("jscolor");
});
Hope it helps
I just had this problem too but luckily it's easy to fix. You need to (re)init jscolor after you have dynamically created your inputs:
jscolor.init()
This helped me
<script>
$(document).on('click', '#myPickerId', function () {
var obj = $(this)[0];
if (!obj.hasPicker) {
var picker = new jscolor.color(obj, {}); //
obj.hasPicker = true;
picker.showPicker();
}
});
</script>
In my case, the picker control was dynamic because it is inside Knockout.js 'with' statement which hides and recreates the picker when it needs.
Got the same problem upon adding input fields dynamically
Managed to make it work by calling
jscolor.install();
PS: jscolor v2.4.5
As of 2020, the original problem should be solvable by dynamically creating an input element, and then calling new jscolor(input). Using JQuery (you could use vanilla JS as well):
var color_input = $('<input class="jscolor" spellcheck="false">');
new jscolor(color_input[0]);
This will make the popup picker appear on click, and everything appears to work just fine. However, you cannot manipulate it programmatically. To set the color using the objects above, you would normally use a method like: color_input[0].jscolor.fromString("#B7B7B7"). But that will fail for dynamically created objects, as color_input[0].jscolor is undefined. I believe this is a bug in Jscolor (and probably very easily solvable), as the missing object is actually available with color_input[0]._jscLinkedInstance. So you can just set the object yourself on instantiation with:
var color_input = $('<input class="jscolor" spellcheck="false">');
color_input[0].jscolor = new jscolor(color_input[0]);
And then everything looks to be working as expected. Hopefully this helps someone else that comes across this answer page as I did.

how to set lwuit textarea scrolling false

I want to add large string content to a container dynamically.
There are 60 different contents(strings) to be displayed in this container.
To add the string to container, I am adding a TextArea(empty border with 100% transparency).
The problem is that TextArea offers scroll and I do not want it to scroll. Instead I want to grow(increase height) according to content. I am unable to achieve this.
Can you help me out with this?
Or can I use any other component for the purpose?
I am using LWUIT with J2ME.
You can derive text area and return false for isScrollableY() although it should generally work seamlessly even if you don't do that (since your parent layout is scrollable). Is it possible you changed the text area and don't revalidate the parent form on the EDT?
There are problems with text area layout when it is modified by a separate thread (race condition with the layout code).
First put the TextArea.setSingleLineTextArea(false) , and grow by content true.

How to set background image for Dialog?

I am trying to do this:
public class DialogMenuHawaii extends Dialog {
Style s = UiFactory.getBaseStyle();
s.setBgTransparency(0);
s.setBgImage( <my image >);
this.setUnselectedStyle(s);
}
but it doesn't work.
First, I suggest you use a theme. We constantly change small implementation details e.g. customizations like the one you are doing will not be portable between LWUIT 1.4 and 1.5. There is no reason whatsoever not to use a theme for something like this.
If you are interested in the pain and suffering of manually coding view logic into your application you can use several methods such as getDialogComponent() to get the style from them and manipulate that. Dialog is a complex beast due to the fact that its really a form padded away from the edges.
Open your '.res' file in resource Editor and select your preferred theme,
Under 'Unselected' tab open the DialogContentPane style, if you don't have one create it look at the end of this answer on HOW TO DO IT?, and set the background image to the image you need to show as Dialog bg
Under 'Unselected' tab open the DialogBody style, if you don't have one create it look at the end of this answer on HOW TO DO IT?, and set the background transparency as '0' and also make sure the background image type is NONE
NOTE: The above code will reflect for all the Dialogs in your application. If you want a particular dialog with background image than derive new styles from these default styles, and follow the above steps to apply it to your DialogMenuHawaii or any runtime Dialogs.
HOW TO: I would recommend you to go through the Shai's blog posts LWUIT Resource Editor Tutorial Part 1 till part 10. To better understand the Resouce Editor its features and capabilities.
:
:
:
PS: Programmatic-ally i haven't been able to achieve it using TextArea which is the case for default Dialog's. If you replace the dialog body component with Label if works fine, the code sample is given below. I haven't delved much into why is it so ? maybe will do it in my free time. Hence i have proposed a working alternative solution which is scripted above using Resource Editor and below using the code
class MyDialog extends Dialog {
public void show() {
Container octnPane = this.getDialogComponent();
octnPane.getUnselectedStyle().setBgTransparency(0, false);
Container ctnPane = (Container)((BorderLayout)octnPane.getLayout()).getCenter();
ctnPane.getUnselectedStyle().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED, false);
ctnPane.getUnselectedStyle().setBgImage(myImage, false);
Label t = new Label("Dialog");
t.setUIID("DialogBody");
t.getUnselectedStyle().setBgTransparency(0, false);
ctnPane.addComponent(t);
super.show();
}
}
This is for Dialog background.
Dialog dialog = new Dialog();
dialog.getDialogStyle().setBgImage(Image.createImage("/image/image.png"));
If you want to set transparency of Dialog with image.
dialog.getStyle().setBgImage(Image.createImage("/image/image.png");

LWUIT scroll jumping issue

I need to show the only component on the form - HTMLComponent. Reaching the bottom of the form/component while vertical scrolling scroll bar jumps back to the top of the form. I need to prevent this.
I've tried to turn on/off scrolling on the form and HTMLComponent but anyway if there's a scroll bar - it will return to the top from the bottom. Also I've tried border and box layouts and additional container for HTMLComponent - no use.
Any ideas how to prevent such scrolling issue?
Try this (it works for me - LWUIT 1.5):
htmlComponent.getComponentForm().setCyclicFocus(false);
If you get a NullPointerException, call it after adding to the HtmlComponent to a form.
If you want to get rid of the bottom/top jump scroll, you can use
form.setCyclicFocus(false)
You should stick with border layout and place the HTML component in the center for this particular use case. You can disable form scrolling since the HTML component is indeed scrollable by default:
form.setScrollable(false);
HTMLComponent is itself scrollable
to prevent scrolling
setScrollable(false);
for horizontal scroll off
setScrollableX(false);
hope this will solve your issue
...or, you can paste this code on your Form class
public void keyPressed(int keyCode) {
int tecla = Display.getInstance().getGameAction(keyCode);
if(tecla == 8){
//if hit ENTER or principal key in mobile keyboard
}else if(tecla == 6){//down key
if(this.list_component_name.getSelectedIndex() < this.list_component_name.size() - 1)
this.list_component_name.setSelectedIndex(this.lista_bodegas.getSelectedIndex() + 1);
}else if(tecla == 1){//up key
if(this.list_component_name.getSelectedIndex() > 0)
this.list_component_name.setSelectedIndex(this.list_component_name.getSelectedIndex() - 1);
}
}
That's also work for me
form.serScrollable(false) or form.setCyclicFocus(false) didn't work for me.
I have a form and just a single HTMLComponent in it.
The problem is in HTMLComponent itself and disabling focus of the form won't affect it.
You can try with making the whole component focusable which might help in scrolling in a proper way. Along with this you should add your html component in Boderlayout.center of form and make form scrollable true and cyclic focus false.
In LWUITImplementation we have function getDragPathTime(). This javaDoc about this function:
/**
* Indicates what drag points are valid for the drag speed calculation.
* Points that are older then the current time - the path time are ignored
*
* #return the relevance time per point
*/
I also was problem especially in devices with OS S-60 Nokia. Lists was jumped from buttom to top. i solved this problem by change the return value. I change the value to 600( from 200). this occurs to fewer sampling and prevent the "jump".

Resources