GroovyFX - Groove JavaFX

GroovyFX-GrooveJavaFX_AlexanderKlein

1

Aboutme

AlexanderKleinBranchmanager

codecentricAGCuriestr.270563Stuttgart,Germany

+49(0)[email protected]

www.codecentric.deblog.codecentric.de

@saschaklein

2

mailto:[email protected]

WhatisGroovyFX

3

GroovyFX

libraryforJavaFXusingGroovyGroovyBuilderPatternDSLontopofJavaFX

declarativesimplertowriteeasiertoreadmorenatural

http://groovyfx.org

https://github.com/groovyfx-project/groovyfx

http://groovy.jmiguel.eu/groovy.codehaus.org/GroovyFX.html

4

http://groovyfx.org/

https://github.com/groovyfx-project/groovyfx

http://groovy.jmiguel.eu/groovy.codehaus.org/GroovyFX.html

Examplegroovyx.javafx.GroovyFX.start{stage(title:'HelloGroovyFX',visible:true){scene(fill:DARKSLATEGREY,width:860,height:430){borderPane{top{hbox(padding:[20,60,20,60]){text(text:'Hello',font:'80ptsanserif'){filllinearGradient(endX:0,stops:[PALEGREEN,SEAGREEN])}text(text:'GroovyFX',font:'80ptsanserif'){filllinearGradient(endX:0,stops:[CYAN,DODGERBLUE])effectdropShadow(color:DODGERBLUE,radius:25,spread:0.25)}}}group(id:'logo',scaleX:2,scaleY:2){transitions=parallelTransition()stardelegate,12,[LIGHTGREEN,GREEN]*.brighter()stardelegate,6,[LIGHTBLUE,BLUE]*.brighter()stardelegate,0,[YELLOW,ORANGE]fxLabeldelegateonMouseClicked{transitions.playFromStart()}}}}}transitions.delay=Duration.seconds(1)transitions.playFromStart()transitions.delay=Duration.seconds(0)}

5

Example

6

SimpleScene

Generalcontract

importstaticgroovyx.javafx.GroovyFX.start

start{stage(title:'HelloGroovyFX',visible:true){scene{stylesheets('groovyfx.css')label('HelloGroovyFX',styleClass:'big')}}}

[containername](value?,attributes*){[subcontainername](value?,attributes*){[nodename](value?,attributes*)}}

7

SimpleScene

8

Formsandcomponents

9

SimpleFormimportstaticgroovyx.javafx.GroovyFX.startstart{stage(title:'Simpleform',visible:true){scene{stylesheets('groovyfx.css')vbox{label('Name')textField(onAction:{evt->result.text=evt.source.text})label(id:'result')}}}}

10

SimpleForm

11

Bindingimportstaticgroovyx.javafx.GroovyFX.startstart{stage(title:'Simpleformbinding',visible:true){scene{stylesheets('groovyfx.css')vbox{label('Name')deftextField=textField()labeltext:bind(textField.textProperty())labeltext:bind(textField.text())labeltext:bind{textField.text}labeltext:bind(textField,'text')labeltext:bind(textField,'text').using{"Text:$it"}labelid:'lastLabel'

bindlastLabel.text()totextField.text()}}}}

12

Binding

13

BeanBindingimportjava.time.LocalDateimportgroovyx.javafx.beans.FXBindable

@FXBindableclassPerson{StringnameLocalDatebirth}

defperson=newPerson(name:'Sascha',birth:newLocalDate(1975,4,1))groovyx.javafx.GroovyFX.start{stage(title:'Beanbinding',visible:true){scene{stylesheets('groovyfx.css')vbox{label'Name'textField(text:bind(person,'name'))label'Birthday'datePicker(value:bind(person.birth()))labeltext:bind{person.birth&&person.name}.using{"$person.nameis${LocalDate.now().year-person.birth.year}yearsold"}}}}}

14

BeanBinding

15

Layoutingimportstaticgroovyx.javafx.GroovyFX.start

start{stage(title:'BorderPaneDemo',visible:true){scene{stylesheets('groovyfx.css')borderPane{top{label('Header')}//center{textField(id:'tf')//}bottom{labeltext:bind(tf.textProperty())}right{imageView('GroovyFX_logo.png')}}}}}

16

Layouting

17

GridLayoutgroovyx.javafx.GroovyFX.start{stage(title:'GridLayoutform',visible:true){scene{stylesheets('groovyfx.css')gridPane(hgap:5,vgap:10,padding:25,alignment:TOP_CENTER){columnConstraints(minWidth:50,halignment:RIGHT)columnConstraints(prefWidth:250,hgrow:'always')label("Pleasesendusyourfeedback",style:"-fx-font-size:18px;",row:0,columnSpan:2,halignment:"center",margin:[0,0,10]){onMouseEntered{e->e.source.parent.gridLinesVisible=true}onMouseExited{e->e.source.parent.gridLinesVisible=false}}label("Name",hgrow:"never",row:1,column:0)textField(promptText:"Yourname",row:1,column:1)

label("Email",row:2,column:0)textField(promptText:"Youremailaddress",row:2,column:1)

label("Message",row:3,column:0,valignment:"baseline")textArea(prefRowCount:8,row:3,column:1,vgrow:'always')

button("SendMessage",row:4,column:1,halignment:"right")}}}}

18

GridLayout

19

Lists@FXBindableclassSelectionHolder{defselected}

defselectionHolder=newSelectionHolder()defcolors=['blue','green','red']start{primaryStage->stage(title:"GroovyFXListDemo",width:400,height:200,visible:true){scene(fill:WHITE){vbox(padding:10,spacing:5){choiceBox(value:bind(selectionHolder.selected()),items:colors)listView(id:'myList',items:colors){onSelect{control,item->selectionHolder.selected=item}}selectionHolder.selected().onChange{source,oldValue,newValue->myList.selectionModel.select(newValue)}label(text:bind(selectionHolder.selected()))}}}}

20

Lists

21

Colorsstart{primaryStage->defcolors=[BLUE,GREEN,RED,hsb(67,0.8,0.91),rgb(39,209,100),rgba(20,100,150,0.60),delegate."#AA4411"]stage(title:"GroovyFXTableDemo",visible:true){scene(fill:WHITE){vbox(padding:9,spacing:5){//...

22

TablestableView(selectionMode:"single",cellSelectionEnabled:true,items:colors){tableColumntext:"Color",prefWidth:50,cellValueFactory:{newReadOnlyObjectWrapper(it.value)},cellFactory:{column->Rectanglerect=rectangle(width:40,height:20)newTableCell<Color,Color>(){voidupdateItem(Colorcolor,booleanempty){rect.fill=empty?Color.TRANSPARENT:colorsetGraphic(rect)}}}tableColumntext:"Web",prefWidth:80,cellValueFactory:{Colorcolor=it.valueintr=Math.round(color.red*255.0)intg=Math.round(color.green*255.0)intb=Math.round(color.blue*255.0)newReadOnlyObjectWrapper(String.format("#%02X%02X%02X",r,g,b))}tableColumn(property:"opacity",text:"Opacity",prefWidth:70,converter:{from->"${Math.round(from*100)}%"})tableColumn(property:"hue",text:"Hue",prefWidth:120)tableColumn(property:"brightness",text:"Brightness",prefWidth:120)tableColumn(property:"saturation",text:"Saturation",prefWidth:120)}}}}}

23

Tables

24

Actionsstart{actions{fxaction(id:'saveAction',name:'Save',description:'Thissavessomething',accelerator:'Ctrl+S',enabled:false,onAction:{println"Save"})fxaction(id:'exitAction',name:'Exit',onAction:{primaryStage.close()})fxaction(id:'copyAction',name:'Copy',icon:'icons/copy.png',onAction:{println"Copy"})fxaction(id:'pasteAction',name:'Paste',icon:'icons/paste.png',onAction:{println"Paste"})fxaction(id:'checkAction',name:'Check',selected:true,onAction:{println"Check"})}//...

25

Actionsstage(title:"GroovyFXMenuDemo",width:650,height:450,visible:true){scene(fill:WHITE){borderPane{top{menuBar{menu("File"){menuItem("Open",onAction:{println"Open"}){rectangle(width:16,height:16,fill:RED)}menuItem(saveAction){graphic(circle(radius:8,fill:BLUE))}separatorMenuItem()menuItem(exitAction)}menu(text:"Edit"){menuItem(text:"Cut",onAction:{println"Cut"}){imageView('/icons/cut.png')}menuItem(copyAction)menuItem(pasteAction)separatorMenuItem()checkMenuItem(checkAction)deftoggleGroup=newToggleGroup()radioMenuItem("Radio1",toggleGroup:toggleGroup,selected:true)radioMenuItem("Radio2",toggleGroup:toggleGroup)menu("Foo"){menuItem("Bar")menuItem("FooBar")}}}}//...

26

Actionscenter{vbox(spacing:20,padding:10){checkBox("Enable'Save'menu",id:'cb')bean(saveAction,enabled:bind(cb.selectedProperty()))}}bottom{toolBar{button(onAction:{println"Cut"}){graphicimageView('/icons/cut.png')}button(copyAction,skipName:true)button(pasteAction,skipName:true)}}}}}}

27

Actions

28

ChartsdefpieData=FXCollections.observableArrayList([newPieChart.Data("Yours",42),newPieChart.Data("Mine",58)])start{Mapdata=[first:0.25f,second:0.25f,third:0.25f]stage(title:'ChartDemo',visible:true,width:1024,height:960){scene{stylesheets('groovyfx.css')stackPane{scrollPane{tilePane(padding:10,prefTileWidth:480,prefColumns:2){pieChart(data:[first:0.25f,second:0.25f,third:0.25f])

stackPane(alignment:TOP_RIGHT){pieChart(data:pieData,animated:true)button('AddSlice'){onAction{pieData.add(newPieChart.Data('Other',25))}}}//...

29

ChartslineChart(data:[First:[0,0.25,0.5,1.5,2,1],Second:[0.25,0,0.5,0.5,1.5,0.75]])finalyAxis=numberAxis(label:"YAxis",lowerBound:-1.2,upperBound:1.2,tickUnit:0.2,autoRanging:false)lineChart(xAxis:categoryAxis(label:"XAxis"),yAxis:yAxis){series(name:'FirstSeries',data:["A",0,"B",1,"C",-1])series(name:'SecondSeries',data:[["A",0],["B",-1],["C",1],["D",0]])}areaChart{series(name:'FirstSeries',data:[0,0,0.5,0.2,1.5,0.6,2,0.8])series(name:'SecondSeries',data:[0,0,0.25,0.2,0.5,0.6,2.25,0.4])}bubbleChart{series(name:'FirstSeries',data:[[0,0.2,0.1],[0.5,0.2,0.25],[1.5,0.1,0.5]])series(name:'SecondSeries',data:[[0,0.1,0.25],[0.2,0.5,0.2]])}scatterChart{series(name:'FirstSeries',data:[0,0,0.5,0.2,1.5,0.6,2,0.8])series(name:'SecondSeries',data:[0,0,0.25,0.2,0.5,0.6,2.25,0.4])}barChart(barGap:0,categoryGap:0){series(name:'2010',data:['Q1',1534,'Q2',2698,'Q3',1945,'Q4',3156])series(name:'2012',data:['Q1',2200,'Q2',2750,'Q3',2125,'Q4',3100])}}}}}}}

30

Charts

DEMO

31

Graphicsandanimations

32

Pathsstart{stage(title:"GroovyFXPathDemo",visible:true){scene(fill:BLACK){path(translateX:0,translateY:493.672+10,fill:WHITE,stroke:GREY,strokeWidth:1,strokeLineCap:StrokeLineCap.BUTT,strokeLineJoin:StrokeLineJoin.MITER,strokeMiterLimit:4.00000000){moveTo(x:105.367,y:-493.672)cubicCurveTo(controlX1:128.507,controlY1:-478.22,controlX2:151.465,controlY2:-462.40,x:173.917,y:-446.100)cubicCurveTo(controlX1:128.862,controlY1:-466.995,controlX2:79.407,controlY2:-482.018,x:24.547,y:-490.346)//...

33

PathscubicCurveTo(controlX1:71.244,controlY1:-463.626,controlX2:116.143,controlY2:-434.766,x:160.252,y:-404.822)cubicCurveTo(controlX1:123.049,controlY1:-422.855,controlX2:82.772,controlY2:-437.042,x:38.650,y:-446.192)cubicCurveTo(controlX1:96.868,controlY1:-411.870,controlX2:148.018,controlY2:-373.727,x:193.360,y:-331.986)cubicCurveTo(controlX1:136.020,controlY1:-284.773,controlX2:86.295,controlY2:-227.283,x:45.790,y:-157.820)cubicCurveTo(controlX1:72.900,controlY1:-182.110,controlX2:100.700,controlY2:-205.365,x:128.658,y:-228.500)cubicCurveTo(controlX1:81.942,controlY1:-172.640,controlX2:45.050,controlY2:-106.990,x:20.200,y:-29.865)cubicCurveTo(controlX1:40.560,controlY1:-54.485,controlX2:61.188,controlY2:-78.068,x:82.105,y:-100.682)cubicCurveTo(controlX1:126.805,controlY1:-168.167,controlX2:171.672,controlY2:-247.792,x:230.961,y:-271.100)cubicCurveTo(controlX1:201.351,controlY1:-240.392,controlX2:167.601,controlY2:-195.936,x:132.711,y:-152.955)cubicCurveTo(controlX1:173.701,controlY1:-193.392,controlX2:215.801,controlY2:-230.415,x:259.126,y:-264.467)cubicCurveTo(controlX1:320.724,controlY1:-193.977,controlX2:369.883,controlY2:-115.087,x:411.271,y:-28.594)cubicCurveTo(controlX1:404.533,controlY1:-73.388,controlX2:394.475,controlY2:-115.978,x:381.241,y:-156.260)lineTo(x:427.685,y:-90.730)//...

34

PathscubicCurveTo(controlX1:427.685,controlY1:-90.730,controlX2:401.648,controlY2:-163.420,x:384.025,y:-192.717)cubicCurveTo(controlX1:424.785,controlY1:-136.807,controlX2:462.233,controlY2:-78.289,x:496.353,y:-17.512)cubicCurveTo(controlX1:477.679,controlY1:-106.966,controlX2:445.841,controlY2:-187.284,x:397.460,y:-255.736)cubicCurveTo(controlX1:432.366,controlY1:-221.046,controlX2:466.097,controlY2:-184.636,x:498.390,y:-146.691)cubicCurveTo(controlX1:465.048,controlY1:-223.173,controlX2:423.580,controlY2:-290.180,x:372.214,y:-345.000)cubicCurveTo(controlX1:412.438,controlY1:-370.887,controlX2:453.694,controlY2:-394.730,x:496.077,y:-416.783)cubicCurveTo(controlX1:464.052,controlY1:-411.223,controlX2:433.587,controlY2:-403.863,x:404.071,y:-394.849)cubicCurveTo(controlX1:425.907,controlY1:-411.022,controlX2:448.481,controlY2:-426.973,x:471.095,y:-442.372)cubicCurveTo(controlX1:433.108,controlY1:-430.462,controlX2:396.462,controlY2:-416.597,x:362.028,y:-400.939)cubicCurveTo(controlX1:404.696,controlY1:-428.612,controlX2:448.348,controlY2:-454.607,x:493.032,y:-479.541)lineTo(x:493.029,y:-479.541)cubicCurveTo(controlX1:425.559,controlY1:-461.486,controlX2:362.199,controlY2:-437.351,x:304.031,y:-405.993)cubicCurveTo(controlX1:247.737,controlY1:-447.783,controlX2:182.021,controlY2:-477.780,x:105.368,y:-493.673)lineTo(x:105.367,y:-493.672)closePath()}}}}

35

Paths

36

Shapesstart{stage(title:"GroovyFXShapeDemo",width:400,height:400,visible:true){scene(fill:BLACK){group(id:'group'){rectanglex:25,y:25,width:150,height:75,arcWidth:20,arcHeight:20,fill:GROOVYBLUE,stroke:ORANGE,strokeWidth:2circlecenterX:150,centerY:100,radius:20,fill:REDsvgPathcontent:"""\M248.9150c11.882-.00623.8751.01835.8573.1385.20715.025152.07781.895167.102167.10215.02385.208-24.944170.917-99.874214.178-32.78218.927-69.25427.996-105.46327.553-46.555-.57-92.675-16.865-129.957-48.15l30.855-36.768c50.9542.75122.96849.05180.56615.79757.597-33.25488.152-98.77776.603-164.274-11.55-65.497-62.672-116.62-128.17-128.168-51.656-9.108-103.3237.98-139.1743.862L185192H57V64l46.3446.342C141.75871.962194.1750.03248.9150z""",translateX:-130,translateY:-200,scaleX:0.1,scaleY:0.1,fill:WHITE,stroke:WHITE,strokeWidth:2//...

37

ShapesandAnimationspolygon(id:'triangle',points:[0,-10,10,10,-10,10,0,-10],translateX:70,translateY:60,scaleX:2.0,scaleY:2.0,fill:BLUE,onMousePressed:{if(rotation.status==Animation.Status.RUNNING)rotation.pause()elserotation.play()}){rotation=rotateTransition2.s,tween:LINEAR,to:-360,cycleCount:INDEFINITE}parallelTransition(onFinished:{println"paralleldone"}){translateTransition3.s,tween:EASE_OUT,to:100,onFinished:{println"translatedone"}scaleTransition3.s,interpolator:EASE_IN,to:2.0,onFinished:{println"scaledone"}}.playFromStart()}}}}

38

Shapes

39

Effectsstart{stage(title:'AnimationDemo',visible:true){scene{rectangle(width:800,height:600,effect:blend(mode:"screen"){topInput{imageInput(source:"background-ripples.png",x:0,y:0)}bottomInput{color=colorInput(paint:radialGradient(center:[0.7,0.05],radius:0.6,stops:["#767A7B","#222222"]).build(),x:0,y:0,width:800,height:600)}})//...

40

AnimatedObjectscircleid:'circle',radius:60,fill:radialGradient(center:[0.5,0.5],radius:0.7,stops:[ORANGE,DARKORANGE]),effect:glow(level:0.5)noparent{path(id:'thePath',translateX:50,translateY:5){moveTo(x:100,y:100)arcTo(x:300,y:100,radiusX:5,radiusY:10)lineTo(x:600,y:200)lineTo(x:300,y:500)arcTo(x:150,y:200,radiusX:50,radiusY:100)closePath()}}}}pathTransition(10.s,delay:100.ms,node:circle,path:thePath,orientation:PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT).play()//...

41

AnimatedBackgroundtimeline(cycleCount:-1,autoReverse:true){at(4.s){change(color,"paint")to(x:0.3,y:0.95)tweennewCenterInterpolator()onFinished{println"4secondselapsed"}}}.play()}classCenterInterpolatorextendsInterpolator{@OverrideObjectinterpolate(ObjectstartValue,ObjectendValue,doublefraction){RadialGradients=startValuereturnnewRadialGradient(s.focusAngle,s.focusDistance,EASE_BOTH.interpolate(s.centerX,endValue.x,fraction),EASE_BOTH.interpolate(s.centerY,endValue.y,fraction),s.radius,s.proportional,s.cycleMethod,s.stops)}@Overrideprotecteddoublecurve(doublet){return0}}

42

Animations

43

Animations

DEMO

44

EnhancingGroovyFX

45

Usingcustomcomponentsstart{defcolors=[BLUE,GREEN,RED,hsb(67,0.8,0.91),rgb(39,209,100),rgba(20,100,150,0.60),delegate."#AA4411"]asObservableListstage(title:'CustomComponentsDemo',visible:true){scene(){borderPane{treeView(id:'tree',showRoot:false,prefHeight:300){treeItem(expanded:true,value:"Root"){treeItem(value:"one"){treeItem(value:"one.one")treeItem(value:"one.two")treeItem(value:"one.three")graphic{rectangle(width:20,height:20,fill:RED)}}treeItem(value:"two"){treeItem(value:"two.one")treeItem(value:"two.two")treeItem(value:"two.three")graphic{rectangle(width:20,height:20,fill:GREEN)}}}}//...

46

Usingcustomcomponentstree.selectionModel.selectionMode=SelectionMode.SINGLEtop{nodenewBreadCrumbBar(tree.root),selectedCrumb:bind(tree.selectionModel,'selectedItem'),prefHeight:30}bottom{containernewMigPane("wrap2","20[]5[fill,grow]20",""),{4.times{button("Button$it")}}}}}}}

47

Usingcustomcomponents

48

OwnFactoriesimportgroovyfx.javafx.factory.MessageFactoryimportorg.controlsfx.control.GridViewimportorg.controlsfx.control.cell.ColorGridCell

groovyx.javafx.GroovyFX.start{delegate.registerBeanFactory('gridView',GridView)delegate.registerFactory('message',newMessageFactory())stage(title:'CustomFactoryDemo',visible:true){scene{stylesheets('groovyfx.css')vbox{label('HelloGroovyFX',styleClass:'big')gridView(items:[RED,GREEN,YELLOW,SLATEGREY],prefHeight:200,cellFactory:{newColorGridCell()})message(message:'Thisisamessage')}}}}

49

OwnFactories

50

ThinkBig

ApplicationFrameworkJava,GroovyandKotlinJavaFX,Swing,Pivot,Lanterna

MVC,MVVC,PresentationModelalotofusefullstuffhttp://griffon-framework.org

51

http://griffon-framework.org/

Questions?

AlexanderKleinBranchmanager

codecentricAGCuriestr.270563Stuttgart,Germany

+49(0)[email protected]

www.codecentric.deblog.codecentric.de

@saschaklein

52

mailto:[email protected]

Date post:	05-Apr-2017
Category:	Software
Upload:	saschaklein
View:	104 times
Download:	2 times

GroovyFX - Groove JavaFX

Software