i have the next sample (from groovyfx site), it's simple window.
import static groovyx.javafx.GroovyFX.start
start {
stage(title: 'GroovyFX Hello World', visible: true) {
scene(fill: BLACK, width: 700, height: 250) {
hbox(padding: 60) {
text(text: 'Groovy', font: '80pt sanserif') {
fill linearGradient(endX: 0, stops: [PALEGREEN, SEAGREEN])
}
text(text: 'FX', font: '80pt sanserif') {
fill linearGradient(endX: 0, stops: [CYAN, DODGERBLUE])
effect dropShadow(color: DODGERBLUE, radius: 25, spread: 0.25)
}
}
}
}
}
How to run it with gradle run ?
my build.gradle:
apply plugin: 'groovy'
sourceCompatibility = 1.8
targetCompatibility = 1.8
project.ext.set('javafxHome', System.env['JAVAFX_HOME'])
repositories {
mavenCentral()
}
configurations {
ivy
}
dependencies {
ivy "org.apache.ivy:ivy:2.3.0"
compile 'org.codehaus.groovy:groovy-all:2.3.6'
compile 'org.codehaus.groovyfx:groovyfx:0.4.0'
compile files("${javafxHome}/rt/lib/jfxrt.jar")
}
tasks.withType(GroovyCompile) {
groovyClasspath += configurations.ivy
}
I might run it from IDE, but how to run it with cli and then build jar with path to Main class?
It works in the following configuration.
Structure:
build.gradle
src/
main
groovy
Main.groovy
build.gradle
apply plugin: 'groovy'
sourceCompatibility = 1.8
targetCompatibility = 1.8
repositories {
mavenCentral()
}
configurations {
ivy
}
dependencies {
ivy "org.apache.ivy:ivy:2.3.0"
compile 'org.codehaus.groovy:groovy-all:2.3.6'
compile 'org.codehaus.groovyfx:groovyfx:0.4.0'
compile files("${System.getenv('JAVA_HOME')}/jre/lib/ext/jfxrt.jar")
}
tasks.withType(GroovyCompile) {
groovyClasspath += configurations.ivy
}
task run(type: JavaExec) {
main = 'Main'
classpath sourceSets.main.runtimeClasspath
}
Main.groovy
import static groovyx.javafx.GroovyFX.start
start {
stage(title: 'GroovyFX Hello World', visible: true) {
scene(fill: BLACK, width: 700, height: 250) {
hbox(padding: 60) {
text(text: 'Groovy', font: '80pt sanserif') {
fill linearGradient(endX: 0, stops: [PALEGREEN, SEAGREEN])
}
text(text: 'FX', font: '80pt sanserif') {
fill linearGradient(endX: 0, stops: [CYAN, DODGERBLUE])
effect dropShadow(color: DODGERBLUE, radius: 25, spread: 0.25)
}
}
}
}
}
Have You already seen this site?
Related
In a swiftui app, I am iterating an array of entities and showing thumbmnail images and have it set up that when one is tapped, a detail view is shown with that particular full size image. The problem is that it's always the most recent image being shown when going to the detail screen.
Main view:
if documents.count > 0 {
ScrollView(.horizontal, showsIndicators: true) {
HStack {
ForEach(documents, id: \.self.id) {(doc: Document) in
Image(uiImage: UIImage(data: doc.image)!)
.resizable()
.frame(width: 40, height: 50, alignment: .center)
.clipShape(Rectangle())
.cornerRadius(8)
.scaledToFit()
.onTapGesture {
self.showImageDetail = true
}
.padding(.all, 5)
.sheet(isPresented: self.$showImageDetail, content: {
ImageViewDetail(image: UIImage(data: doc.image)!)
})
}
}
}
}
When ImageDetailView is shown, it's alway the most recent image saved. Below is the detail view code:
import SwiftUI
struct ImageViewDetail: View {
#Environment(\.presentationMode) var presentationMode
#State var image: UIImage
#State var scale: CGFloat = 1.0
var body: some View {
VStack {
Image(uiImage: image)
.resizable()
.padding()
.scaledToFit()
.scaleEffect(scale)
.cornerRadius(8)
.gesture(MagnificationGesture()
.onChanged {value in
self.scale = value.magnitude
}
)
HStack {
Button("Back") {
self.presentationMode.wrappedValue.dismiss()
}
.buttonStyle(FillStyle(width: 86, height: 32))
.padding(.trailing, 10)
Button("Delete") {
}
.buttonStyle(FillStyle(width: 86, height: 32))
.padding(.leading, 10)
}
}
.navigationBarTitle("Image", displayMode: .inline)
}
}
Any help would be greatly appreciated - I can't seem to see why the right image is not displayed by the ImageDetailView? Many thanks in advance.
Replace the Bool state with a Document? state:
#State var selectedDocument: Document?
var body: some View {
HStack {
ForEach(documents, id: \.self.id) {(doc: Document) in
Image(uiImage: UIImage(data: doc.image)!)
.onTapGesture {
self.selectedDocument = doc
}
}
}
}
.sheet(item: $selectedDocument) {
ImageViewDetail(image: UIImage(data: $0.image)!)
}
}
Sheet can be only one in view hierarchy, so below it is relocated for HStack and it is needed to add member currentImage
Here is scratchy approach... (not tested - might be needed take care of optionals)
#State private var currentImage: UIImage = UIImage() // < needed optionals?
...
ScrollView(.horizontal, showsIndicators: true) {
HStack {
ForEach(documents, id: \.self.id) {(doc: Document) in
Image(uiImage: UIImage(data: doc.image)!)
.resizable()
.frame(width: 40, height: 50, alignment: .center)
.clipShape(Rectangle())
.cornerRadius(8)
.scaledToFit()
.onTapGesture {
self.currentImage = UIImage(data: doc.image) ?? UIImage() // < current
self.showImageDetail = true
}
.padding(.all, 5)
}
}
.sheet(isPresented: self.$showImageDetail, content: { // < one sheet
ImageViewDetail(image: self.currentImage)
})
}
I'm trying the Ctrl+Shift+Tab shortcut, and it's not working. Qt 5.7 on Linux. A simple example showing the issue:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Shortcut {
sequence: StandardKey.PreviousChild
onActivated: {
console.log("prev child")
}
}
Shortcut {
sequence: StandardKey.NextChild
onActivated: {
console.log("next child")
}
}
}
Is there something I've done wrong?
I think you have done nothing wrong. It does not work for me either. I read this http://doc-snapshots.qt.io/qt5-5.7/qkeysequence.html#keyboard-layout-issues but still can not resolve it.
I can not find the short cut keys combination for Ctrl+Shift+Tab on my global keyboard settings either.
The following hack works on my end when I directly hard code the shortcut keys sequence sequence: "Ctrl+Shift+Tab" like below.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
// Does not work
Shortcut {
sequence: StandardKey.PreviousChild
onActivated: {
console.log("prev child")
}
}
// Works but it is a hack
Shortcut {
sequence: "Ctrl+Shift+Tab"
onActivated: {
console.log("hard coded pre child")
}
}
Shortcut {
sequence: StandardKey.NextChild
onActivated: {
console.log("next child")
}
}
}
Im using the gulp-svg-sprite plugin.
https://github.com/jkphl/gulp-svg-sprite
https://github.com/jkphl/svg-sprite
I already have my classes and styles which I would like to sprite:
.header {
background: grey;
&:after {
content: "";
display: block;
height: 30px;
width: 30px;
background: url(images/icon1.svg);
}
}
This is my gulp task:
spriteConfig = {
mode : {
css : {
bust : true,
render : {
scss : true
}
}
}
};
gulp.task('sprite', function() {
gulp.src('images/svg/*.svg')
.pipe(svgSprite(spriteConfig))
.pipe(gulp.dest('dest/'));
});
The task generates this type of SASS:
%svg-common {
background: url("svg/sprite.css-c3700f6a.svg") no-repeat;
}
.svg-icon1 {
#extend %svg-common;
background-position: 50% 0;
}
.svg-icon1-dims {
width: 1024px;
height: 348px;
}
This isnt ideal as I need to import these svg- classes which I wont use on there own, and I then need to use 2 extends:
.header {
background: grey;
&:after {
content: "";
display: block;
#extend .svg-icon1;
#extend .svg-icon1-dims;
}
}
Is there a way of generating mixins instead so I could jsut have something like:
.header {
background: grey;
&:after {
content: "";
display: block;
#include svg-icon1;
}
}
As per the docs:
It comes with a set of Mustache templates for creating stylesheets in
good ol' CSS or one of the major pre-processor formats (Sass, Less and
Stylus). Tweaking the templates or even adding your own custom output
format is really easy, just as switching on the generation of an HTML
example document along with your sprite.
Have a look and customize the following file:
https://github.com/jkphl/svg-sprite/blob/master/tmpl/css/sprite.scss
Danny H was correct. Here is my code. Notice that ive also used a prefix in my spriteConfig.
spriteConfig = {
mode : {
css : {
bust : true,
prefix : "#mixin sprite-%s",
render : {
scss: {
template: 'sprite.scss.handlebars'
}
}
}
}
};
In sprite.scss.handlebars:
{{#hasMixin}}#mixin {{mixinName}} {
background: url("{{{sprite}}}") no-repeat;
}
{{#hasCommon}}.{{commonName}} {
#include {{mixinName}};
}
{{/hasCommon}}{{/hasMixin}}{{^hasMixin}}{{#hasCommon}}.{{/hasCommon}}{{^hasCommon}}#mixin {{/hasCommon}}{{commonName}} {
background: url("{{{sprite}}}") no-repeat;
}
{{/hasMixin}}{{#shapes}}{{#selector.shape}}{{expression}}{{^last}},
{{/last}}{{/selector.shape}} {
{{^hasCommon}}{{#hasMixin}}#include {{mixinName}};{{/hasMixin}}{{^hasMixin}}#include {{commonName}};{{/hasMixin}}
{{/hasCommon}}background-position: {{position.relative.xy}};{{#dimensions.inline}}
width: {{width.outer}}px;
height: {{height.outer}}px;{{/dimensions.inline}}
width: {{width.outer}}px;
height: {{height.outer}}px;
}
{{/shapes}}
I try to toggle my navigation with a toggle function. I want to change "x" position.
So here is what i got so far. But don't work. I try to use a toggle function to chnage state on click. I set two different state one that the navigation is visible and one that the navigation is hidden.
I get this error "ReferenceError: toggle is not defined"
Item {
id: toggleswitch
width: 200
height: 200
property bool on: false
function toggle() {
if (toggleswitch.state == "on")
toggleswitch.state = "off";
else
toggleswitch.state = "on";
}
Rectangle {
id: open
width: parent.width
height: 35
color: "#33000000"
Text {
anchors.centerIn: parent
text: "open"
color: "white"
font.family: "Helvetica"
font.pixelSize: 25
}
MouseArea { anchors.fill: parent; onClicked: toggle() }
}
states: [
State {
name: "on"
PropertyChanges { target: navigation; x: 0 }
PropertyChanges { target: toggleswitch; on: true }
},
State {
name: "off"
PropertyChanges { target: navigation; x: -300 }
PropertyChanges { target: toggleswitch; on: false }
}
]
}
Some small slider example:
import QtQuick 2.2
Rectangle {
width: 360
height: 360
Rectangle {
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
id: slider
state: "close"
states: [
State {
name: "close"
PropertyChanges {
target: slider
width: 50
}
},
State {
name: "open"
PropertyChanges {
target: slider
width: 360
}
}
]
transitions: [
Transition {
NumberAnimation {
target: slider
property: "width"
duration: 500
easing.type: Easing.InOutBack
}
}
]
color: "green"
}
MouseArea {
anchors.fill: parent
onClicked: {
if (slider.state == "close")
slider.state = "open";
else
slider.state = "close";
}
}
}
transitions is optional here
You can say to QML which object is your function.
Item {
id: toggleswitch
width: 200
height: 200
state: "off" //INIT YOUR STATE !!
property bool on: false
function toggle() {
if (toggleswitch.state == "on")
toggleswitch.state = "off";
else
toggleswitch.state = "on";
}
Rectangle {
id: open
width: parent.width
height: 35
color: "#33000000"
Text {
anchors.centerIn: parent
text: "open"
color: "white"
font.family: "Helvetica"
font.pixelSize: 25
}
MouseArea { anchors.fill: parent; onClicked: toggleswitch.toggle() } //here
}
states: [
State {
name: "on"
PropertyChanges { target: navigation; x: 0 }
PropertyChanges { target: toggleswitch; on: true }
},
State {
name: "off"
PropertyChanges { target: navigation; x: -300 }
PropertyChanges { target: toggleswitch; on: false }
}
]
What I would do here is not manipulate the state directly but toggle on the property directly, and bind the states to that property.
To me it feels more readable, semantical and reduce the coupling between the object and its visual states.
This also has the advantage of having states always coherent with the on property and provides a better abstraction. When using this component you can freely change the on property programmatically and the component display will update accordingly.
That's what I would probably end up with :
Item {
id: toggleswitch
width: 200
height: 200
property bool on: false
function toggle() {
on = !on //simpler toggle function
}
Rectangle {
id: open
width: parent.width
height: 35
color: "#33000000"
Text {
anchors.centerIn: parent
text: "open"
color: "white"
font.family: "Helvetica"
font.pixelSize: 25
}
MouseArea { anchors.fill: parent; onClicked: toggleswitch.toggle() }
}
states: [
State {
name: "on"
when: toggleswith.on
PropertyChanges { target: navigation; x: 0 }
},
State {
name: "off"
when: !toggleswith.on
PropertyChanges { target: navigation; x: -300 }
}
]
I have a question about javafx layout, following is my code you can run the code directly:
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.control.TextBox;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
/**
* #author Administrator
*/
var headerHeight: Number = 50;
var header: Group = Group {
var searchBox: HBox;
content: [
Rectangle {
width: bind scene.width;
height: bind headerHeight;
fill: Color.BLUE
},
searchBox = HBox {
spacing: 10
layoutY: bind (headerHeight - searchBox.layoutBounds.height) / 2;
layoutX: bind scene.width - searchBox.layoutBounds.width - 20;
var textBox: TextBox;
content: [
textBox = TextBox {
promptText: "please input search key"
columns: 20
selectOnFocus: true
}, Button {
text: "search"
strong: true
action: function() {
println("Button clicked");
}
}]
}
]
}
var rect = Rectangle {
width: bind 400;
height: bind 80;
fill: Color.YELLOW
}
var footerHeight: Number = 50;
var footer: Group = Group {
var bounds: Rectangle;
content: [
bounds = Rectangle {
width: bind scene.width;
height: bind footerHeight;
fill: Color.RED
}
]
}
var scene: Scene = Scene {
content: [
VBox {
content: [
header,
rect,
footer
]
}
]
}
function run() {
Stage {
scene: scene
}
}
The scene's height is not normal. Footer's height is 50, but seems only about 30.
what's wrong, any advise?
Thanks.
For some reason the Scene isn't resizing to fit the full contents. I'm not sure why, but you may be able to work around this by setting scene.height = headerHeight + 80 + footerHeight.
Try binding to the Stage instead of Scene.