i am trying to accomplish the following behavior with a QML TextArea:
I want single Words in the Text to be colored differently
I want the "select"-functions to be working for automated scrolling (user interaction is disabled)
There is a stream of text in the TextArea where one Word needs to be selected(highlighted). The user is requested to input some text elsewhere and press enter to proceed (not part of the question). After that the selection jumps to the next word and the last selected word is either colored green or red. There is only a small portion of the text visible (a few lines, managed by the TextArea height – not part of the question) and i need the text to scroll if the next word is out of that visible range .. therefore the selection is quite helpful because all interaction from the user – to scroll or select or whatever – is disabled (disabling is not part of the question)
my main problem is: if i use textFormat: TextEdit.RichText i can easily color the text how i like it to be (<font color=\"green\">{}</font>) but i cannot use the "select"-functions anymore because – as i would guess – the selection works on the "plaintext" and cannot correspond to the "richtext"-selection? Anyway selectWord() etc. does not work QTextCursor::setPosition: Position '-1' out of range is the result. But if i disable the RichText i don't know how to color the text. Maybe i could live without the selection if i could detect the current word – which would be colored blue etc. – and scroll if its out of the visible area to "fake" the selection behavior, but that's just a third option.
I would really either know how to color non-Rich Text or how to select Rich Text in a TextArea.
You can use QSyntaxHighlighter to highlight the words independent of the selection. See QQuickTextDocument and How to implement rich text logic on QML TextEdit with QSyntaxHighlighter class in Qt for more details.
Related
I am trying to create something similiar like MS paint and I need a feature where I can click on the scene and immediately being able to write where I clicked. I took the the entire code example from this Anwser to solve how to switch between canvas and textarea. In other word how to switch between "drawing" and "writing" mode. So currently I can draw and write Current progress , but my problem is I want to write text where ever I click on the textarea and not at the beginning of the row.
This is how I imagine it (Goal).
So I wanted to add a handler, which can give the mouse coordinates and set the Caret to that positon:
textarea.setOnMouseClicked(event->{
textarea.positionCaret();
});
To only realise that positionCaret() only takes 1 parameter.
So I am not able to position my "Caret" to the x,y position of my mouse click.
So the question is how do I move the "Caret"/cursor to any given positon within my textarea?
Explaining Caret positioning and why it is irrelevant for your purposes
You are misunderstanding the concept of the caret position-related APIs for JavaFX text input. The APIs have nothing to do with screen coordinates. They are referring to the position of the caret with respect to the text in the text input field.
Let's say you have the following word:
happy
Caret position 0 positions the caret before the h.
Caret position 3 positions the caret in-between the two ps.
Once the caret is positioned. If somebody starts typing, the new text will be inserted at the caret.
So if you do:
setCaretPositon(3)
Then you type haphap, then the text will become:
haphaphappy
If somebody clicks in an editable text field, the JavaFX system is smart enough to handle the click by default to position the caret next to the closest letter to the click (and also handle selection and other tasks). You don't need to write any code to get the functionality.
So the caret API has nothing to do with the task you want to accomplish.
Absolute positioning for Text (or any other Node)
If you want to define an absolute position for a text input field on mouse click, then you do it in the exact same way you position any node in JavaFX, i.e. you use the node layout functions. Specifically, you set the x and y coordinates of the node. The co-ordinate system and relevant APIs are explained in the Node javadoc. To set both the x and y values at once, you call the relocate method.
Example for positioning editable text in a pane on mouse click
Here is an example, which generates a new text area and positions the top left corner of the new text area at the position a mouse was clicked.
Pane pane = new Pane();
pane.setOnMouseClicked(event -> {
if (event.getTarget() == pane) {
TextArea newTextArea = new TextArea();
newTextArea.relocate(
event.getX(),
event.getY()
);
pane.getChildren().add(
newTextArea
);
}
});
The example uses a Pane because that is a parent node which does not apply layout positioning to its children (unlike a StackPane which will overwrite any layout values you set and apply its own layout algorithm, which, by default, will center a node in its parent node).
You can see a more comprehensive example in context in the answer to:
How do I create an editable Label in javafx 2.2
That example will convert the text between a Label and TextField on click to allow the label value to be edited. You could choose to use such functionality in your paint program, or you could do it the way MS Paint does it.
How to emulate MS Paint
What MS Paint does is allow you to initially edit the text, but once you hit return to commit the edit, it snapshots the text and paints it as an image on the canvas, converting it from a node-type object to a bit on the canvas. Thereafter you can't edit the text directly anymore. If you want to do things that way you can use a combination of the node snapshot function and the graphics context drawImage function. If you do a snapshot, make sure you set the background correctly in the SnapshotParameters, so that it is transparent, that way the text background won't overwrite your drawing (or do set a background to the appropriate color, if you wanted an overwrite).
I won't provide full code for such functionality here at this time.
Styling text input
You probably want to style (using CSS) the text input field to get the look you want. The editable label example gives some hints on how to do this, but you probably want a different style for your app. Specifically, the default style for text input will have a box and background, which you may or may not want.
I am new to Material UI and I am currently testing on TextField.
When the value is longer that the width of the field, you still can read the text with clicking on the field and drag to right.
I would like to ask if there is a way to change the font color (Or any other thing) if length of the string is longer than a certain value in order to indicate there are some texts left behind.
(Single line edit field is necessary since there are many fields required to show on screen)
Thank you very much!
The image below shows an input field with the text 'test' in it, immediately after clicking in the input to gain focus:
I'm trying to remove the green highlighting (the green is coming from the OS highlight color). Here is another image illustrating the desired behavior with a normal, unstyled input:
As you can see, the standard behavior is a cursor appearing where the user clicked, as opposed to highlighting the entire text with no cursor. What is causing this behavior?
The styling for this element is scattered all over the place, and inspecting the computed properties doesn't seem to reveal anything unusual to me. This behavior is present in Chrome and Firefox.
It appears something is selecting the text on focus. You could use javascript to collapse the selection on focus.
http://developer.mozilla.org/en-US/docs/Web/API/Selection/collapse
Is there any way to create a textInput box for flex mobile with inline image without using textflow ?
Basically i need a text input component , so that user can just use it as normal text input box but to it images can also be entered inline with text. To enter images user can select the image from list and that image will get inserted at the current cursor position.
If you look at any platform, there is no user experience (as far as I've seen) that lets you add images in the text input box. It's always been straight text, except for android which replaces certain text with icons (like :-) becomes an android icon). I don't think your users would expect that behaviour. If you really do need it, I would recommend you create a custom skin for your textinput box and add that feature into it, but it won't be easy to do.
When you select text in a Text or Label or TextArea (or other) control in a Flex application, the selection is shown in white text on a black background. Always.
I have a request to change that — and it seems to be a simple enough thing to want — but I can't find a style (or property) anywhere that permits that. Any ideas out there about how to do this, or reasons why it definitively can't be done?
Change TextField selection color in AS3
http://ericlin2.tripod.com/select/selectt.html