how to set TextField automatically editible without clicking Textfield on qtquick2 - qml

i am trying to create a TextField and when the TextField is appeared i want it to become editible even without clicking the Text area. It appears but without clicking on placeholder text which is text area, it is not becoming active. Here is what i tried
import QtQuick 2.12
import QtQuick.Controls 2.0
Item {
TextField {
id: textFieldTest
placeholderText: "This area should appear as clicked"
anchors.centerIn: parent
focus: true
Component.onCompleted: textFieldTest.forceActiveFocus()
}
}
I've also tried to use
focus: true
and
Component.onCompleted: textFieldTest.forceActiveFocus()
seperately. Also together. But both of them did not work. Which function or feature should i use?

Sometimes, you need to delay it, e.g.
Component.onCompleted: Qt.callLater(textFieldTest.forceActiveFocus)
The reason being, is that other components initializing may also want to change focus. So, you want to delay your request for focus so that "last in wins".

Please share your entire code if possible. It seems some thing else is stealing the focus. In my case this is working:
import QtQuick
import QtQuick.Controls
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
TextField {
id: textFieldTest
placeholderText: "This area should appear as clicked"
anchors.centerIn: parent
focus: true
Component.onCompleted: textFieldTest.forceActiveFocus()
}
}

Related

MouseArea in qml(onEntered, onExited, onReleased)

I have one button. I want to change the states of button e.g:
Default image is black.
onEntered i want image as blue, onExited i want image as black(equal to default state), and onReleased i want image as blue(equal to onEntered state).
Note:
onRelease should be active inside the button and outside the button onRelease shouldn't work.
How this can be achieved?
Mouse area looks like this:
MouseArea
{
anchors.fill: firstImage(parent)
onEntered:
{
firstImage.source = "blue.img"
}
onExited:
{
firstImage.source = "black.img"
}
onReleased:
{
firstImage.source = "blue.img"
}
}
Problem i am facing is:
onRelease is active outside the button.
I want onRelease to be active when press is released inside the button.
You can leverage the fact that you can give every object in qml an extra custom property.
I came up with the following, which seems to be what you ask, however, I see a flaw, because when you are 'entered' and press, the button will go to entered state, so there is not difference in the 'released' state, and after leaving the MouseArea it will again go to 'exited' state.
Note, I did not copy the firstImage.source stuff, but you can easily tailor this example to your situation
import QtQuick.Controls 2.4
Button {
hoverEnabled: true
property bool touched : false
onHoveredChanged: touched = hovered
onReleased: touched = true
text: touched ? "touched" : "not touched"
}
The hoverEnabled needs to be set

Placeholder text in QML TextEdit

I am looking for a way to show a text hint stating the expected input as advice for the user. Take the Google search bar for example:
Is there a property I am missing, or is this something that has to be achieved through scripting?
The property doesn't exist on the Qt Quick input items. You can vote for the feature here.
In the meantime, you can use TextArea from Qt Quick Controls 2.
If you would rather use pure Qt Quick, you can do something similar to what the Controls do and add a Text item above the field:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
width: 300
height: 300
visible: true
TextEdit {
id: textEdit
width: 200
height: 50
property string placeholderText: "Enter text here..."
Text {
text: textEdit.placeholderText
color: "#aaa"
visible: !textEdit.text
}
}
}
This is kinda old but I found another necessity for Android builds.
Since Android only send the text editing signal after you press ok in virtual keyboard, the placeholder remains there. So to avoid it, I recommend:
TextEdit {
id: textEdit
width: 200
height: 50
property string placeholderText: "Enter text here..."
Text {
text: textEdit.placeholderText
color: "#aaa"
visible: !textEdit.text && !textEdit.activeFocus // <----------- ;-)
}
}
If you want one line input then why not use TextField ?

Trouble setting activeFocus to Item in a QML TabView

When the user changes the current tab in my TabView. I would like to set the activeFocus to the top level Item in the current tab, e.g. using forceActiveFocus. However for some weird reason the TabView is setting the activeFocus to the first Button it finds in the Tab, even if that Button has "focus: false" set.
As shown in the output below. When I use forceActiveFocus to set the focus to the top-level Item. First that Item gets focus, then it immediately loses focus and the Button gains focus instead. If there is no Button in the tab, then it works as expected. I need advice on a work-around for this problem. I would like to know if this is a Bug or whether I'm doing something wrong here?
Below is the program output when the user clicks on the 2nd tab.
qml: Item Focus gained: Tab2
qml: Button focus gained: Tab2
qml: Item Focus lost: Tab2
Code example follows (tested in Qt 5.4.2):
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
width: 640
height: 480
visible: true
TabView {
id: tabView
onCurrentIndexChanged: {
getTab(currentIndex).forceActiveFocus();
}
}
Component.onCompleted: {
var tab1 = tabView.addTab("tab1", tabComp);
tab1.active = true;
tab1.item.objectName = "Tab1";
var tab2 = tabView.addTab("tab2", tabComp);
tab2.active = true;
tab2.item.objectName = "Tab2";
}
Component {
id: tabComp
Item {
focus: true
onActiveFocusChanged: {
if(activeFocus)
console.log("Item Focus gained: " + objectName);
else
console.log("Item Focus lost: " + objectName);
}
Button {
focus: false
onActiveFocusChanged: {
if(activeFocus)
console.log("Button focus gained: " + parent.objectName);
else
console.log("Button focus lost: " + parent.objectName);
}
}
}
}
}
When a tab is clicked, TabView is setting the activeFocus to the first Item with activeFocusOnTab set. Button has this set to true by default. I solved this by setting activeFocusOnTab to false for the Button. This is a bit inconsistent with usual focus management in QML because I think normally the "focus" property is meant to take precedence over "activeFocusOnTab" for initial focus, but in this case it is ignored.

Link in Label BlackBerry 10

I am using JSON to receive data and place it into List. There is a Label displaying the text that I am receiving from the JSON. In some of the cases there is a Link in the text. By default you can't click on the Link from the label. Is there a way to make the Link to be clickable?
Label {
text: "Click here to open browser and get redirected to www.stackoverflow.com";
}
The output is "Click here to open browser and get redirected to www.stackoverflow.com" but the Link to StackOverflow is not clickable.
Use TextArea instead of Label and set property editable to false, it would look same as Label.
Don't forget to set inputMode to either Text or Chat.
TextArea {
text: "http://www.google.com"
editable: false
inputMode: TextAreaInputMode.Text
}
You can actually use HTML in the label itself to style the text as a link, according to the Text Styles documentation. You need to be aware of a few quirks though if you are going to apply any of your own styles, as discussed on the Blackberry Developer support forums here. The example below should work, using the default style which will colour the link blue, with bold and underline:
Label {
text: "<html>Click here to open browser and get redirected to <a href='http://www.stackoverflow.com'>www.stackoverflow.com</a></html>"
}
Note: you may need to set multiline: true on the Label in order to see all of the text, depending on your layout.
You should assign Text.RichText value to "textFormat" property of the Label:
import QtQuick 1.1
Rectangle {
width: 360
height: 360
Text {
text: "Click here"
anchors.centerIn: parent
textFormat: Text.RichText
onLinkActivated: {
Qt.openUrlExternally(link)
}
}
}

Send text from Qt textEdit control to QML TextInput control using Qt/QML

I have created a UI in widget and added a edittext control and a pushButton control to it. In the QML file I have a TextInput control. I am able to display the Widget controls in the QML. Now I want to set the EditText control text in the QML to the text in the edittext control that is there inside the widget when the pushButton of the Widget is clicked. On button click I want to send the text from the editText to QML TextInput.
How is it possible.
I used the following to register and use the Widget in the QML.
main.cpp file --->
qmlRegisterType<WidgetContainer>("MyWidget", 1, 0, "MyWidget");
QML file contents:
import QtQuick 1.1
import MyWidget 1.0
Rectangle {
width: 360
height: 360
color: "gray"
TextInput {
id: textInput1
x: 10
y: 10
width: 100
height: 100
color: "black"
cursorVisible: true
text: widget.getText()
}
MyWidget {
id: widget
x:10;
y:70
width: 180;
height: 150
text: "Widget text"
}
}
Class WidgetContainer should emit signal when button is clicked. Then you will be able to write the clicked handled which you need in QML.
By default button (or any other member of WidgetContainer class) is not available in QML code. So you can't use button's clicked signal in QML directly.
You need to declare e.g. buttonClicked signal inWidgetContainer class. Then you need to connect WidgetContainer's buttonClicked signal to button's clicked signal.
Now you can use buttonClicked signal in QML:
TextInput {
id: textInput1
text: widget.getText()
}
MyWidget {
id: widget
text: "Widget text"
onButtonClicked: textInput1.text = text
}