button("", imageview("a.png")) {
}
I would like to change this button to a_click.png when I clickup, and return it to a.png when I clickdown.
I couldn't find a way to this event and change graphic. Help me..!
button("", imageview("a.png")) {
setOnMousePressed { graphic = imageview("a_click.png") }
setOnMouseReleased { graphic = imageview("a.png") }
}
Related
I have a Jetpack Compose for Desktop UI application that shows a popup with a list of enums, each of which has a checkbox to toggle them:
Sorry for the long code, this is as small a MCVE as I could make of it.
enum class MyEnum {
A, B, C
}
data class MyFilter(val enums: Collection<MyEnum>)
fun main() = application {
Window(onCloseRequest = ::exitApplication) {
App()
}
}
#OptIn(ExperimentalMaterialApi::class)
#Composable
fun App() {
var filter by remember { mutableStateOf(MyFilter(emptyList())) }
MaterialTheme {
var show by remember { mutableStateOf(false) }
if (show) {
val selected = remember { filter.enums.toMutableStateList() }
AlertDialog({ show = false }, text = {
Column {
MyEnum.values().forEach { e ->
Row {
val isSelected by remember { derivedStateOf { e in selected } }
Checkbox(isSelected, { if (isSelected) selected.remove(e) else selected.add(e) })
Text(e.name)
}
}
}
}, buttons = {
Button({
filter = MyFilter(selected.toList())
show = false
}) { Text("OK") }
})
}
Button({ show = true }) { Text("Open") }
}
}
The problem here is, the very first time after opening the dialog, a click on a checkbox will properly update the underlying selected list, but it won't update the UI. So the checkbox doesn't appear to change state. Every click after that will properly update the UI, including the changed state for the previous click.
This happens reliably, every single time the dialog is opened, but only on the first checkbox click.
Why does this happen, and how can I fix it?
The opening view of App is blank with a Back Button. However, the intended view will appear after complete rotation of physical device (before touching anything) or by tapping the Back Button on the displayed empty view.
This is a weird bug. After that rotation (to landscape and back to protrait) everything is peachy-keen-o.
I am aware that adding: .navigationViewStyle(StackNavigationViewStyle()) to the NavigationView will sorta resolve the problem. But this solution is a poor fix for my App's needs.
Is there a command to intentionally rotate device in code to resolve this? Or some other fix to get that first view to appear without counting on the user to rotate the device?
I've tried various solutions with no luck.
Below is a quick setup of the problem.
struct FirstView: View {
#Binding var viewNum: Int?
var body: some View {
VStack {
Text("View One")
.padding(20)
Button {
viewNum = 2
} label: {
Text("Go to 2nd view")
}
}
.onAppear {
viewNum = 1
}
}
}
struct MainView: View {
#State var selection: Int? = 1
var body: some View {
// VStack {
NavigationView {
List {
NavigationLink("First View", tag: 1, selection: $selection){ FirstView(viewNum: $selection)}
NavigationLink("Second View", tag: 2, selection: $selection){
Text("View 2").padding(20)
Button {
selection = 1
} label: {
Text("Go to first view")
}
}
}
}
// .navigationViewStyle(StackNavigationViewStyle())
//}
}
}
I need to create custom UI elements like buttons and lists with image backgrounds in Cascades Qml, However there doesn't seem to be a way to set the background of controls such as Button.
I can't find any examples of this anywhere.
It seems like this could be possible by using a container and creating a custom control, but I don't see a way of getting that container to have an onClick event.
Custom control is actually very easy in BB10. Here's an example of what you are trying to do:
Container {
property alias text: label.text
property alias image: imagev.imageSource
ImageView {
id: imagev
imageSource: "asset:///images/Button1.png"
}
Label {
id: label
text: "demo"
}
gestureHandlers: [
TapHandler {
onTapped: {
//do tapped code
}
},
LongPressHandler {
onLongPressed: {
//do long press code
}
}
]
}
Save it as "CustomButton.qml" and then in your main QML file you can access it like so:
Page {
CustomButton {
text: "my text"
image: "images/myimage.png"
}
}
You can do this by using MouseArea element:
Item {
Image {
anchors.fill: parent
source: "yourimg.png"
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log("do your action here!")
}
}
}
If you put this code in a separate QML file e.g. CustomButton.qml. You can use it in the other QML file like a custom button element:
CustomButton {
}
You can read more about this here.
I'm trying to make an easy image galleri (one photo each frame), and then two buttons to navigate right/left. When it gets to the final frame, it jumps back to the first if you click next and vice versa for left.
The problem with the code is that I'm only able to jump back to last frame, and forth to first frame again.
Here's the code.
Left button:
on (release) {
if (_currentframe = 1) {
gotoAndStop(_totalframes);
} else {
prevFrame();
}
}
Right button:
on (release) {
if (_currentframe = _totalframes) {
gotoAndStop(1);
}
else
{
nextFrame();
}
}
Made it work by altering the code a bit.
Left button:
on (release) {
if (_currentframe > 1) {
prevFrame();
} else {
gotoAndStop(_totalframes);
}
}
Right
on (release) {
if (_currentframe < _totalframes) {
nextFrame();
}
else
{
gotoAndStop(1);
}
}
Please go to: http://morningside.cardboardmonet.com/
Notice that the website drag scrolls from left to right, however when you resize the window it doesn't scale-- the page just goes blank. Does anyone know how to fix this?
Thanks!
chacelove, please add this piece of code to your js
$(document).ready(function() {
initDrag();
});
//
function resize_adjustments() {
$("#proof").css('width', '100%');
$("#proof").css('height', '100%');
$("#proof > div").each(function(i) {
if($(this).css('left') == "0px") {
current = $(this).attr('id');
$(this).css('left', '0');
} else {
$(this).css('left', $("#proof").width()+"px");
}
});
}
var resizeTimer = null;
$(window).bind('resize', function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(resize_adjustments, 500);
});
did it work?