Set prompt text to the center of TextArea control in JavaFX - textarea

I was wondering if there is a way to set prompt text location in TextArea.
Basically I am trying to create the similar effect as ListView Placeholder does. It is just to keep consistency in UI, so that everything mostly would look similar.
Any suggestions with this.

I think you can only do this by a dirty hack:
Set alignment to center.
Depending on your desired behavior either add a focus listener which sets the alignment to left again when focused and back to center when focus left.
text.focusedProperty().addListener((p,o,n)->{
if(n){
text.setAlignment(Pos.CENTER_LEFT);
}else {
text.setAlignment(Pos.CENTER);
}
});
Or add a keylistener to get the left aligned text while typing(and a focus-left listener to reset it if needed, eg. empty)
setOnKeyPressed(e->text.setAlignment(Pos.CENTER_LEFT));

Related

Create edittext like stackoverflow tag text box

I want to create a multi lined edit text that can hold buttons but also have the ability to add free form text.
It should behave like the tag text box of stackoverflow that is under the body of the question when you ask a question on stackoverflow.
I thought about one layout that holds buttons (e.g. tags) and an edit text right after said layout. But as I want it to be multi-lined and if there was a line break, I'm not sure how the edit text should behave, since it couldn't be a quadratic box anymore.
Can you point me in the right direction? I've seen a post about making parts of an edittext uneditable. I could do this and put buttons over it, but the buttons might be a little bigger than the underlying text.
Do you know of alternatives?
I hope you get the point, if not I'll draw the control.
You can achieve same by using FlowLayout. Keep on adding text/button view it will automatically wraps contents to next line

Forcing Vaadin Component to occupy it's space in invisible state

I have a Label and a Progess Indicator in my Vaadin indicator. It is dynamically made visible in the UI. There is a Tree below this Progress Indicator.
When the program dynamically sets the visibility of the Progress Indicator to true, the tree shifts down and the UI shakes due to the shifting.
Is there any way to make a Vaadin component occupy it's space, even if it is invisible and hence, when made visible it must not try to borrow space from other UI components?
What I am looking for is a feature similar to setRendered(true) in flex and actionscript programming.
Thanks for your help.
Finally I got an answer to my question. I just replaced the invisible components with a dummy visible label with no text.
And used it alternatively to switch between visible and invisible.
I asked the question in the Vaadin forum, and here's the response I got, from Kim Leppanen:
With Vaadin 7, if you set a component's visibility to false, then the component's information is not sent to the browser at all - it is just as if the component wouldn't exist in the layout at all.
I can quickly come up with two solutions. If you know the size of the component whose visibility you want to toggle, then you can use placeholder components - such as a Label. Put a label with the correct size in the place where you want the component. When you want to set a component as visible, then replace the label with the actual component.
The second option is to use css. Apply the css attribute "visibility: hidden" for the component you want to hide. Note that the component is not "truly" hidden. Let's say that it is a button. A user could still inspect the DOM tree and see the button in the code, change the visibility of the component on the client side (eg using developer tools or firebug) and then see and use the button as if it would be visible in the layout.
I am putting it here because people might add some more useful answers there. For a detailed explanation please see this.
Use this following example to the component you want set invisible but keeping its occupied space:
Image home = new Image();
home.setSource(HOME);
home.addStyleName("visibility: hidden");
OR
home.addStyleName("visibility: collapse");

Firemonkey: TSpeedButton IsPressed no visible Effect?

How do I set a TSpeedButton (on a TToolbar) to look pressed down? It's only highlighted when clicking but gets normal when the mouse leaves it. I set the property Stayspressed to True and indeed the property IsPressed becomes and stays True, but this state is not visible.
What style are you using? Some of the included ones do not have every effect included.
First, revert back to the windows style. If that works, then it's definitely a styling issue, rather than a code issue.
If you want to add an effect (actually an animation) to another style:
Right click on a button and select Edit Default Style.
Find the Fill.Color property of the Rectangle you want to show the anmimation.
Click the animation icon and add a TColorAnimation
Set: the StartValue (the existing value).
The StopValue
The Trigger: IsPressed=True
Repeat the above to add a second animation with the Start and StopValues reversed and Trigger of IsPressed=False
This is a tough one - the standard TButton style includes effects which work - the button will look pressed when "IsPressed" is true. However, other styles (and especially your own) can be much more problematic. I have found the best solution is to have 2 styles and change the style when the button is pressed.
I found it pretty impossible to get "mouseover" animation to work with "pressed" animation in buttons - normally you want to highlight the button slightly when the mouse passes over and then add an effect when you press - especially when you don't want the default shadow effect but a colour effect (which I prefer, I don't like the inner shadow effect of a default button press), but I always seemed to end up with issues. Either one effect wouldn't fire OR the button state wouldn't return to what you'd expect (visually I mean).
My advice - add a little bit of extra code to change the style for the pressed button, you might go mad otherwise :-)

Keyboard pushes the whole view up in WP7

I have 3 grids:- Header,Body and Footer with Body having textboxes.
I have included the Body inside a scrollviewer so that user can type as much data as he wants in the texboxes of Body.
But when the Keyboard pops up the whole view is pushed at top and I cannot see the Header.
The textboxes have wrapping on and also accepts return.
Can the scrollview move up the text when keyboard pops up?
Thanks and Regards,
Kanaya
Not entirely sure if this will help. How about some XAML?
You could capturing the Focus event of the text box that brings the Keyboard up. In that event you could set the scrollViewer.HorizontalOffset property to some caluclated value to get whatever you want in view.
Edit: HorizontalOffest is only a getter user ScrollToHorizontalOffset instead
You probably can make it scroll up like you want, but it will appear very strange to seasoned users of the WP7 operating system. Expected behavior for text input is exactly what you described, the notion Microsoft (I believe) is trying to hit here is that when you want to type something in, you want to clear everything else out of view, and only focus on the textbox at hand.

Blackberry - Smileys in text field

I'm looking for a way to insert emoticons/smileys/any bitmap in a text field (LabelField, EditField, whatever). From what I've researched so far, there is no direct way to do this, so I'm stuck with trying to simulate this behavior.
I was thinking of using a normal text field and instead of smileys to insert blank spaces and then place some BitmapFields over the text field where the smileys should be. The problem is that I have no reliable/quick way of finding a character's position on screen (x,y).
Can you give me some ideas?
Can you think of other approaches to this problem?
I'm sure a lot of people encountered this kind of problem at one time or another. I hope there is someone who managed to find a solution. I'm desperate enough to accept any solution, no matter how crazy/complex/difficult.
Also, I would like to use this in SDK 5.0 and up, but I will settle for only 6.0.
What you might be able to do is create a custom Manager that is a container for EditFields and BitmapFields. When the user clicks in the initial EditField that is inside of your Manager and begins typing, you let them type until they want an emoticon. When they select it you create a BitmapField right after the EditField and then place a new EditField to the right of the BitmapField. You'll have to keep track of things like when the user hits backspace and empties an EditField, it should be removed, and then they are selecting the BitmapField, and a subsequent backspace would delete the BitmapField and put focus on the previous EditField.
You will have to also create your own EditField that you can control the size of, and BitmapField that allows for backspace to delete it.
As far as I can think ahead, you shouldn't have any problem using this for 5.0
Edit for comments:
You'll have to be implementing your own sublayout() of your Manager in any approach you take, so you know positions because you're the one who put them there. If you want to want to do multi-line (my approach was for single-line), you can do one of three things:
1.) Just have new EditFields for each line and do the linking the same way I talked about where backspace drops you to the previous Field, in this case the last line. You have to keep measurements of how big the field is based off of the text, and see if that will move it to the next line. If it does just adjust where the EditFields are positioned.
2.) You can do your image placement in the multi-line field by implementing your own EditField that expands height, in which case you'll know where the text is and what lines you are on. Drawing the Bitmap would be a matter of calculating (what line number you are) * (font height) and getAdvance(text_up_to_bitmap).
3.) Implement your own EditField where you have a focusable Manager that you manually do all of the drawing. You can parse a String that you save from capturing key strokes and maybe have a flag where an emoticon should be. Draw the text before it, draw the emoticon, then continue drawing the text. The difficulty with this is you will have to do things like determining where the cursor should be, bringing up the virtual keyboard, and handling some of the other tasks that the EditField does for you.

Resources