BlackBerry 10 development- TextField - c++

Guys I am developing the basic app in BlackBerry 10 and I want to get text which is in TextField (in cpp). I am trying to find method for that but not getting the right one .So can anyone please tell me how to get the value from TextField in cpp (not in qml) ???

Well, the first thing you need to do is expose your QML TextField to C++. This is done with an object name property ala:
TextField {
objectName: "myTextField"
...
}
Next, find this child from your C++:
QmlDocument *qml = QmlDocument::create("asset:///my.qml");
Container *root = qml->createRootObject<bb::cascades::Container>(); //or whatever the root control is
TextField *textField = root->findChild<TextField*>("myTextField");
From then on, simply use textField->text().

We have 3 parts in this problem
First on in Qml your text area and bottom when clicked send text area to function in c++
TextField {
id: n2
}
Button {
id: button
text: "send text"
onClicked: {
app.sendtext(n2.text)
}
Second part your c++ function in your ApplicationUI to receive this text
QString ApplicationUI::sendtext(QString txtarea)
{
QString text = txtarea;
return text;
}
Third and final part in your ApplicationUI.h u must make this function INVOKABLE to access it in Qml
so u will need this line
Q_INVOKABLE QString sendtext(QString txtarea);

Related

Make a Label/Text automatically recognize links in QtQuick/QML?

I want to automatically make links (e.g. https://xmpp.org/) into the text of a Text element clickable, so the link can be opened in a browser (without manually copying the link).
I can't add e.g. manually in my code, because the input comes directly from users.
Has Qt a simple solution for this in QtQuick/QML?
You can use something like that(Regex is from this answer);
Text {
property string text2: "http://www.google.com"
text: isValidURL(text2) ? ("<a href='"+text2+"'>"+text2+"</a>") : text2
onLinkActivated:{
if (isValidURL(text2)){
Qt.openUrlExternally(text2)
}
}
function isValidURL(str) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
return regexp.test(str);
}
}
You can use TextArea or TextEdit components, set textFormat property to TextEdit.RichText and listen to onLinkActivated signal.
E.g.
TextArea {
id: ...
textFormat: TextEdit.RichText
onLinkActivated: Qt.openUrlExternally( link )
}
Note: in order the link in browser you need to use Qt.openUrlExternally
One hint, in order to make the component not editable (so that user can not type in), DO NOT set enabled property (inherited from Item) to false, use readOnly property instead. Setting enabled would make link unclickable.

Implementing an active item function in QAbstractListModel subclass for QML

I have created a ListView in QML, and I want to be able to implement something like an active item, using an QAbstractListModel as the model that the QML uses. To be more specific, I am using a generic object model, as described in the answer to this question. However, in my QML delegate I have something like this:
Component
{
id: itemDlgt
Rectangle
{
id: rec
width: 50
height: 50
color: "#645357"
property bool itemActive: false
AbstractItem //AbstractItem is the class that my object model uses. Its only property is a boolean value
{
id: s
}
MouseArea
{
anchors.fill: parent
onClicked:
{
s.status = !s.status
itemActive= s.status // using this to trigger onItemActiveChanged
console.log(s.status)
console.log(index)
}
}
onItemActiveChanged:
{
if (itemActive == true)
rec.color = "#823234"
else
rec.color = "#645357"
}
}
}
What I want to do, is have only one item in the ListView to hold a true value at a time. As soon as another item is clicked, I want to set the AbstractItem of the previously selected item to false, then set the AbstractItem of the new item to true.
Of course, I could use something like this:
ListView
{
id: view
anchors.fill: parent
clip: true
model: myAbstractModel
delegate: itemDlgt
spacing: 5
focus: true //using focus could allow to highlight currently selected item,
//by using ListView.isCurrentItem ? "blue": "red"
}
But this doesn't seem to work with a QAbstractListModel, since neither arrow keys, nor clicking on an item seems to highlight the current item.
In addition, I want that item to be highlighted again, in the event that the ListView is forced to reset itself from the c++ side, when I use beginResetModel() and endResetModel(). If I were using a QAbstractListModel as described in Qt Documentation, I would be able to do that easily, by saving the index of the selected item, and storing it until a new item was selected. In other words, something like this:
//somewhere in QAbstractListModel's subclass .h file
int x; // temporary storage for keeping currently selected item
//QAbstractListModel's subclass .cpp file
changeCurrentItem(int index) // function that gets called when user selects an item
{
//...
//Checking if x has a value, If not, I simply set the
//needed item's value to true, and then set x to the value of index.
//Else do the following...
m_ItemList.at(x).setToFalse();
m_ItemList.at(index).setToTrue();
x = index;
}
But I was facing several issues when I was using that, which is the reason why I decided to use a generic object model, which seems to be more flexible.
Finally, I want to be able to send a signal to the c++ side of the code whenever the currently selected item changes, which is trivial with a MouseArea, but I know not of a method to do that using the ListView's focus property, should that be an option.
To make long things short, this is my question in a few words:
Am I missing something in regards to QML code, that would allow me to highlight the currently selected item, while also being able to keep it active after reseting ListView, and being able to send a signal to c++ when it changes?
If not, is there a way to implement a function inside my generic object model, that keeps track of the currently selected item, so that I can highlight it?
If using the ListView's currentIndex property is the goto approach.
Simply set the color in the delegate via:
color: index == view.currentIndex ? "blue": "red"
And don't forget that in order for this to work, you must set the active index, it doesn't work by magic, and by default it will be -1, so no item will be highlighted:
//in the delegate mouse area
onClicked: view.currentIndex = index
The same applies to keyboard events too, you will have to tell the view what to do with the events, so you can have the up and down keys increment and decrements the current index.
There is another approach, which is more applicable if you want to detach the active item functionality from any view, and have it at item level:
property ItemType activeItem: null
function setActiveItem(item) {
if (activeItem) activeItem.active = false
activeItem = item
activeItem.active = true
}
The focus property only specifies whether an item has keyboard event focus or not.
If you want to signal on the the index change, use onCurrentIndexChanged

data-dialog created dynamically

I'm using polymer 1.0.
I'm trying to open a with on a clic on an element created dynamically with template repeat.
Here is the code :
<paper-button
data-dialog="modal"
on-click="dialogClick">
Click
</paper-button>
and the script (from doc) :
dialogClick: function(e) {
var button = e.target;
while (!button.hasAttribute('data-dialog') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('data-dialog')) {
return;
}
var id = button.getAttribute('data-dialog');
var dialog = document.getElementById(id);
alert(dialog);
if (dialog) {
dialog.open();
}
}
This work only if the value of data-dialog is simple text. If I want to change it by data-dialog="{{item.dialogName}}" for instance, it doesn't work. It is not found by the while loop and exit with the if. in the source code of the page, there is no data-dialog in the paper-button.
Any idea ?
I've ran into a similar problem when using data attributes on custom elements. You might want to subscribe to this polymer issue.
As a workaround, place the data attribute in a standard element that is a parent of the button and search for that one instead.
Also, you might want to consider using var button = Polymer.dom(e).localTarget instead of directly accessing e.target, since the later will give you an element deeper in the dom tree under shady dom.

QDialog on accept return custom class object

I'm using qt-creator to build a little QT application.
I have a main window where I have some controls like a "new contact" button.
Pressing the button a QDialog is shown, it contains 3 line edits: name, mobile and email.
The dialog is shown through the Signal/Slot system. It works fine but I want to create a Contact object when OK is clicked and I want to give back that Contact to my main window in order to put it in a QList created in the main window code.
The approach is:
QMainWindow -> new contact -> QDialog is shown
QDialog -> ok -> QMainWindow
Should I pass the QList from the main window to the QDialog as argument or there is a best way?
Should I pass the QList from the main window to the QDialog as argument or there is a best way?
In my opinion, best would be a custom QDialog subclass with three QLabels and 3 QLineEdits.
The labels would get the following type of values:
Label 1: name
Label 2: mobileNumber
Label 3: email
You would use then QLabels and QLineEdits to display them with the input coming from the user.
Then, as your program probably already does, just handle the "accept" event respectively. You could use the following method to retrieve the text entered by the end user:
text : QString
This property holds the line edit's text.
Setting this property clears the selection, clears the undo/redo history, moves the cursor to the end of the line and resets the modified property to false. The text is not validated when inserted with setText().
The text is truncated to maxLength() length.
By default, this property contains an empty string.
Then, in the handler of the accepted signal, you could call three accessor methods, like:
QString name() const { return nameLineEdit->text(); }
QString mobileNumber() const { return mobileNumberLineEdit->text(); }
QString email() const { return emailLineEdit->text(); }
You could also store that in a dedicated structure depending on you build up your data representation, so the structure would be something like this:
struct Contact {
QString name;
QString mobileNumber;
QString email;
};
and then you would have the accessor for that as follows
Contact contact() const;
Make a subclass of QDialog. Call Yourclass::exec() to show the dialog (exec is a function in QDialog), then afterwards Yourclass::contactDetails() to get them. contactDetails is a perfectly ordinary member function that you have to write.

Settings menu UI implementation

I'm trying to implement a BB10 settings menu, looking like the one in the Calendar app for example. The question here is, which components should I use? Using a ListView with an XML model looks great, but is incompatible with translation. Using a C++ model looks overkill for a simple menu with a couple of entries…
There's probably an established pattern somewhere, but I can't find it.
Screenshot of the Calendar app settings view
What you want is the expendable content property of the title bar:
I would create a QML object that you can re-use for each entry with properties for title and image.
So for example, something perhaps like this:
SettingEntry.qml
Container {
property alias title:title.Text
signal click()
TextView {
id: title
text: "[title goes here]"
}
gestureHandlers: [
TapHandler {
onTapped: {
click();
}
}
]
}
Then in your settings page you would use it like a normal object:
Page {
Container {
SettingEntry {
title: "General"
onClick: {
//open general page
}
}
SettingEntry {
title: "Invitation Settings"
}
}
}
The above is obviously very simplified, you would want to include an icon image, add translation code and add visual adjustments like filling the width and padding.
It should however give you a good idea of where to start.
I also included a gesturehandler and signal to show you how to handle events such as a click.