In the previous post we have seen an example on how to make a Hello World JavaFX but without going into much detail about a few lines of code, now continue with some examples and explain a bit about this Declarative Syntax, for example an object can be created with an object literal. That means a concise declarative syntax similar to JavaScript, instead of explaining "how" to do something (the algorithm in imperative languages), we describe "what" that something is. For example, in HTML, you declare the content page, but did not explain how this will be displayed on the screen. Now we will see some examples to clarify this.
examples
We will develop an almost line by line, to be feeling the simplicity of language and go see some effects, for this example we use an image that can be found at the following link , let us begin.
Step 1:
import
javafx.stage.Stage;
Stage {width: 400
height: 400}
with the few lines above we have already defined an instance of an object Stage, which is needed to render a window.
Step 2:
javafx.stage.Stage import, import
javafx.scene.Scene;
javafx.scene.image.ImageView import, import
javafx.scene.image.Image;
var image =
Image {url: "{} JavaFX.png __DIR__"
} {
Stage width: 400 height
: 400
scene: Scene {
content: [ImageView {
x: 75
and: 60
image:
image}]}
}
here we have complicated a little thing, but we will see more details first import Scene, Image and ImageView are needed for the following reasons.
Scene is the object which allows us to render the graphical elements within the ImageView is the container for a given image, and finally the Image is the image itself. If we notice the definition of Scene, we see that their property content (Here we draw the graphical elements), we have added an instance of ImageView already have assigned the image previously loaded into the image variable. As you can see all the syntax is very simple and we always worry about the statement of what we want and not how to generate all this.
The code so far we create a window with the image positioned in the center but our Scene by default has a white background color, if seen in previous posts will see that we assign colors as gradients, as well that we as the next step.
Step 3:
javafx.stage.Stage import, import
javafx.scene.Scene;
javafx.scene.image.ImageView import, import
javafx.scene.image.Image;
javafx import. scene.paint.LinearGradient;
javafx.scene.paint.Stop import, import
javafx.scene.paint.Color;
/ ** * @ author SoftDesign
* / var
image = Image {url: " JavaFX.png __DIR__} {"
} {
Stage width: 400
height: 400
scene: Scene {
content: [
ImageView {
x: 75
y: 60
image: image
}
]
fill: LinearGradient {
startX : 0.0
startY : 0.0
endX : 0.0
endY : 1.0
stops: [
Stop {
color : Color.WHITE
offset: 0.0
},
Stop {
color : Color.BLACK
offset: 1.0
}
]
}}}
If we fill the object property Scene, we realize that we are assigning a LinearGradient to this property as we can deduce that generate a linear gradient for average property startx StartY, EndX, Endy linear direction defined by the stops defined that use different Stop, Stop defines each property needs its color and offset property which indicated when the gradient stop.
Many times when we're retouching images or making some effect raises the need for a mirror effect on the water or material, JavaFX comes with many of these problems resolved as it gives various effects to be applied to our images, to see this effect we will use Reflection to be able to reflect our image.
Step 4:
import
javafx.stage.Stage;
javafx.scene.Scene import, import
javafx.scene.image.ImageView;
javafx.scene.image.Image import, import
javafx . scene.paint.LinearGradient;
javafx.scene.paint.Stop import;
javafx.scene.paint.Color import, import
javafx.scene.effect.Reflection;
/ ** * @ author SoftDesign
* / var
image = Image {url: "{} JavaFX.png __DIR__"
}
Stage {
width: 400
height: 600
scene: Scene {
content: [
ImageView {
x: 75
y: 60
image: image
effect: Reflection {
fraction: 0.75
topOffset: 0.0
topOpacity: 0.5
bottomOpacity: 0.0
}
}
]
fill: LinearGradient {
startX : 0.0
startY : 0.0
endX : 0.0
endY : 1.0
stops: [Stop {
color: Color.white
offset: 0.0
}, Stop {
color: Color.Black
offset: 1.0
}
]
}}}
Now we have our image a Reflection effect, it is assigned to the ImageView and that is the container of the image and now explain each property for this purpose.
fraction: fraction is shown reflected image based on the original (percentage value).
topOffset: is the distance between the image and the onset of reflex (free value).
topOpacity: opacity is the beginning of the reflex (percentage value).
bottomOpacity: is the final opacity of the reflection (percentage value).
example to be ending as the last detail, we show two effects simultaneously, which should be a DropShadow and Reflection effect.
Step 5:
javafx.stage.Stage import, import
javafx.scene.Scene;
javafx.scene.image.ImageView import, import
javafx.scene.image.Image;
javafx import. scene.paint.LinearGradient;
javafx.scene.paint.Stop import;
import javafx.scene.paint.Color;
import javafx.scene.effect.Reflection;
import javafx.scene.effect.DropShadow;
/**
* @author softdesigner
*/
var image = Image {
url: "{__DIR__}JavaFX.png"
}
Stage {
width: 400
height: 600
scene: Scene {
content: [
ImageView {
x: 75
y: 60
image: image
effect: Reflection {
fraction: 0.75
topOffset: 0.0
topOpacity: 0.5
bottomOpacity: 0.0
input: DropShadow {
offsetX: 10
offsetY: 10
color: Color.BLACK
radius: 10
}
}
}
]
fill: LinearGradient {
startX : 0.0
startY : 0.0
endX : 0.0
endY : 1.0
stops: [
Stop {
color : Color.WHITE
offset: 0.0
}, Stop
{color: Color.Black
offset: 1.0
}
]
}}}
If we read about the effect of ImageView property will discover that only accepts an object effect, and here we enter the doubt how to do more to add two effects simultaneously, for most purposes it has a property input which receives an effect, so if we wanted to go chaining purposes should do so through this property, in the upper code notes that the effect Reflection receives an input of a DropShadow, properties the DrowShadow are:
offsetX: Number of pixels on the x axis
offsetY: Number of pixels on the y axis
color: Fill Color of the shadow.
radius: Radio blur for the shadow.
This We'll complete this minimal explanation and demonstration on offers JavaFX declarative syntax and simplicity and power of this language.
I leave a link to the example of netbeans project, then will try to leave the jnlp so they can download. Project
DeclarativeSyntax.rar
Greetings
0 comments:
Post a Comment