Option style (Dropdown, RadioGroup, etc) in QML or C++ (Cascades) - c++

I'm trying to set a custom style to a group of options belonging to a dropdown or a Radio Group. I'm searching all over and it seems impossible. At least I would like to decrease the size of the letters in the text of each option because is too big! and crashes my UI.
Here's and example of what I need:
RadioGroup {
id: groupOrigin
objectName: "groupOrigin"
Option{
text: "text to display"
//This text default style is what I'm trying to change. Please help!.
}
}
thanks!

for Radio group you can achieve this using custom implementation. Take a label and place it after the radio group did not provide text inside the options tag. So whatever style you want to apply can be done using label.
On label you can set the font size, color and other style parameter you want to apply.
Please check the source code below for this custom radio button. I did this in the QML you can achieve same in C++.
// The Component title.
Label {
id: titleLabel
text: ""
textStyle {
base: SystemDefaults.TextStyles.SmallText
alignment: TextAlignment.Center
}
layoutProperties: StackLayoutProperties {
horizontalAlignment: HorizontalAlignment.Fill
}
}
// The radio group presenting the different curves.
RadioGroup {
id: radioGroup
Option {
text: "Height"
}
}

Related

Setting Row Colors Programmatically in SwiftUI

Currently trying to determine if there is a way to programmatically set colors in SwiftUI.
Here's an example of the code I have that doesn't work.
ForEach(listItems, id: \.self) { item in
Text(item.name).listRowBackground(Color(item.color))
}
However manually specifying the color like so does.
ForEach(listItems, id: \.self) { item in
Text(item.name).listRowBackground(Color.red)
}
Just wanting to know if anyone else has determined a way dynamically set this with a large selection of colors.
Thanks

ChartJS custom tooltip doesn't render background on labels (only the title)

Using ChartJS, I want to be able to change the title on a tooltip depending on the data (mainly as I want the text in a smaller font size than the label). I don't really need a full custom HTML tooltip, just be able to change fontsize and title text.
However just setting this via a "custom" callback means the label for the dataset doesn't have the background correctly displayed
options: {
tooltips: {
custom : t => {
t.title = ['Hello'];
}
}
}
See this JSFiddle: https://jsfiddle.net/MrPurpleStreak/2n8md9Lh/
Hover over a point and see the "hello" on a black background, but the data not.
NOTE: I've found a way to accomplish my initial goal, but this struck me as a bug in chartJS?
There seems to be an issue with the custom property.
I recommend using the callbacks instead :
tooltips: {
displayColors: false,
backgroundColor: 'rgb(0,0,0,1)',
callbacks: {
title: function(tooltipItems, data) {
return 'Hello';
},
}
}
See jsFiddle

Binding loop warning on Label

I am trying the similar code to the tutorial, but I get 'QML Rectangle: Binding loop detected for property "width"' on the list view delegate. This happens only on messages where words are larger than listView.width and text wrapping happens. This happens all time. How can I fix it?
delegeate: Rectangle {
id: delegateFrame
width: Math.min(messageText.implicitWidth , listView.width)
height: messageText.implicitHeight
Label {
id: messageText
anchors.fill: parent
text: model.text
wrapMode: Label.Wrap
}
}
I am using Qt 5.8.
EDIT
Changed as Felix suggested in his answer, however it only changed the "width" word in the warning to "implictWidth".
delegeate: Rectangle {
id: delegateFrame
implicitWidth: Math.min(messageText.implicitWidth , listView.width)
implicitHeight: messageText.implicitHeight
Label {
id: messageText
width: parent.width
text: model.text
wrapMode: Label.Wrap
}
}
The cause here is probably height: messageText.implicitHeight and anchors.fill: parent. Reason:
change label height --> change delegate hight --> change anchors --> change label height ...
QML detects those loops and interrupts them. In some cases, you have to live with those, because it's the only way to archive your layout.
In your case however, there might be a solution. You can try one of the following, and see if they work:
use implicitHeight and implicitWidth in the delegate. Sometimes those remove the warnings
Instead of using anchors.fill bind the width only: width: parent.width. Since you already adjust the parents height to the child, the child does not need to change it's height to the parent
Use Layouts. For example RowLayout. They provide advanced ways of placing items and use attached properties to adjust how items are displayed

qml desktop components scaling

I want to create a user interface qtquick2 that can be scaled and includes some desktop components. As mentioned in this blogpost the default rendering for qml/qtquick2 should use distance fields and not native text rendering. I tried to scale qt quick controls. The result is rather disappointing. I was testing on ubuntu 64 and qt-5.1.1. The text on the controls is looking bad but all text in standard qml elements (Text/TextEdit) is looking good when scaled.
This leads me to think that native rendering is the default now for desktop components. Can this be turned of?
Setting render types of Qt Quick Controls will be available in Qt 5.2 using styles, e.g. in TextArea:
TextArea {
/* ... */
style: TextAreaStyle {
renderType: Text.QtRendering
}
}
Supported render types are:
Text.QtRendering
Text.NativeRendering (default)
See TextArea.qml, TextAreaStyle.qml.
For Button and ButtonStyle there is no public interface to set the render type directly in Qt 5.2. But what you can do, is overwrite the label with your own text component:
Button {
id: theButton
/* ... */
style: ButtonStyle {
label: Item {
implicitWidth: row.implicitWidth
implicitHeight: row.implicitHeight
property var __syspal: SystemPalette {
colorGroup: theButton.enabled ?
SystemPalette.Active : SystemPalette.Disabled
}
Row {
id: row
anchors.centerIn: parent
spacing: 2
Image {
source: theButton.iconSource
anchors.verticalCenter: parent.verticalCenter
}
Text {
renderType: Text.NativeRendering /* Change me */
anchors.verticalCenter: parent.verticalCenter
text: theButton.text
color: __syspal.text
}
}
}
}
This code is inspired by the default label component of ButtonStyle.qml, modified and untested.
I don't think you can change text rendering in Qt Components since they are explicitly made for the use in desktop applications.
In TextArea for example there is no renderType like in TextEdit.
On the QtDesktopComponents page I another hint:
You have to change QGuiApplication to a QApplication. This is because the components rely on certain widget-specific classes such as QStyle to do native rendering.

Create a button on Cascades with background image, BB-10

I want to create a button using Cascades on Black Berry 10 development which has an image as a background and also possibly a text with white color. I found this class button, but it seems to not support setting an image as a background on the button. What can I do? What are the alternate ways?
Maybe I should consider another library than Cascades for creating my UI??? any suggestions?
Container {
id:account
signal buttonClicked()
layout: DockLayout {
}
preferredWidth: 768.0
topMargin: 40.0
bottomMargin: 40.0
ImageButton {
id: addButton
defaultImageSource: "image/button_normal.png"
pressedImageSource: "image/button_press.png"
horizontalAlignment: HorizontalAlignment.Center
onClicked: {
buttonClicked();
}
}
Label {
text: "Add"
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Center
textStyle {
base: SystemDefaults.TextStyles.BodyText
fontSize: FontSize.Small
color: Color.create("#ffffff")
}
touchPropagationMode: TouchPropagationMode.None
}
}
You can have a button with both text and image by using the default Button class: cascades_button.html">https://developer.blackberry.com/cascades/reference/bb_cascades_button.html
Having a background image on the button with text over top is not really recommended. A button should be clear and easy to read. See the BlackBerry 10 UI Guidelines here: https://developer.blackberry.com/devzone/files/design/bb10/UI_Guidelines_BlackBerry_10.pdf
If you really want to do it, you can always build a custom component in Cascades that has an image with a label over top.
I've faced the same issue.
At the end, as PBernhardt said, I created a custom Container with an ImageView or a background image, and added a Label inside.
Then, I overrided onTouch to catch the different touch states (event.isDown(), event.isMove(), event.isUp()) and update the button graphics accordingly (text color and background image).
I'm using a Q_INVOKABLE method to bind with my C++ files.