1. Visage
Declarative Language for
expressing user interfaces

2. What is Visage ?
● Language Based on F3/JavaFX Script
● Statically Compiled Language
● A Domain Specific Language for writing
GUI in a Natural way

3. Why Visage?
● Make the UI design simpler and let the
developer to work on more artistic things
● You are documenting the code even
though you are not aware of it.
● Supports Closure
● Application will run with the default values.
Null & Undefined won't stop the App.
● CSS Support

4. Visage the JavaFX Hybrid
● Foolproof Default Values.
● New variables:
Angles: 90deg,18rad,5turn
Colors: #FFF,#GDY53RT|AA
Length:
● Null & undefined Value Checker.

5. Platforms to be Support
We are planning to Support these platforms,
● JavaFX2.0
● Vaadin
● Android

6. Advantages
● Any JavaFX script programmer would feel
at home.
● Graphical Structure of writing is self
contained and understandable.
● Easy to learn and implement
● Stable Compiler
● Easy Programming Constructs such as
binding and transitions etc.
● Less code, More Productive.

7. Prerequisites
● JDK1.7
● JavaFX 2.0+
● Visage Compiler
● VisageFX.jar(Bindings for JAvaFX)
● IDE(Netbeans,Sublime or Notepad)

8. Philosophy

9. Visage Datatypes

10. Visage Operators

11. Visage Operators

12. Access Modifiers

13. Introduction to Scene Graph
● Its a Tree Data Structure
● It maintains the internal model of graphical
objects in an application(retained mode)
● To reduce code system automatically
handles the rendering details using Scene
Graph API
● Elements within scene graph are called as
nodes and each can be treated
individually.

14. Sample Node
Root,Branch and Leaf
Nodes
Specific Root,Branch and
Leaf Classes

15. Build Tools/IDE Support
● Ant
i. Download the Test Project from the repository
ii. Open it in Netbeans IDE
iii. Add the lines mentioned below as a task in
build.xml
iv. <target name="jfxsa-run" depends="run"/>
Note:Ant must be installed and ANT_HOME
must be set as environment variable.

16. Build Tool/IDE Support
● Gradel
a. Its a Gradel Plugin for building as well as running
the VisageFX Application
b. You just need to include build.gradel into your
project folder
c. Instructions related to Gradel is available on
GitHub at
Prerequisites
1. JDK7
2. Gradel
3. VisageFX.jar / VIsage Compiler.

17. Build Tool/IDE Support
● Use your Favourite Code Editor
● We Recommend you to use Sublime or
Vim Editor for your purpose.
● Since the language highlighting is
supported in most of the JavaScript
Editors
● Netbeans can also be used for the
purpose of Development and
enhancement.

18. Hello Visage
Stage {
title: "Hello Beautiful Visage"
Scene
{ width: 700
height: 600
fill: Color.LIGHTGREY
Group {
[Text{text:"Hello Visage" x: 500 y: 500 } ]
}
}
}

19. Hello Lazy JavaFX
public void start(Stage primaryStage) {
Text t = new Text();
t.setText("Hello Lazy JavaFX");
StackPane root = new StackPane();
root.getChildren().add(t);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello Lazy JavaFx!");
primaryStage.setScene(scene);
primaryStage.show();
}

20. Vaadin in Visage

21. Why Vaadin
○ Rich Set of UI Controls
○ Java->Javascript Compiler
Write Custom UI Components in Visage
○ Vaadin Brings Visage to the Web!

22. Java Vaadin Application
public class SimpleApplication extends Application {
@Override
public void init() {
Window mainWindow = new Window("Simple
Application");
Label label = new Label("Hello 33rd Degrees!");
mainWindow.addComponent(label);
setMainWindow(mainWindow);
}
}

23. Visage Vaadin App [Unoptimized]
public class VisagevaadinApplication extends
Application {
override function init() {
def mainWindow = new Window("Unoptimized
Visage Vaadin Application");
def label = new Label("Hello Visage User");
mainWindow.addComponent(label);
setMainWindow(mainWindow);
}
}

24. Visage Vaadin App [Optimized]
public class VisagevaadinApplication2 extends
Application {
override var window = Window {
caption: "Optimized Visage Vaadin Application"
Label {
content: "Hello Expert Visage Coder"
}
}
}

25. Visage Vaadin Address Book Demo

26. Visage For Android

27. Visage On Android
Visage Java Byte Code Dalvik Byte Code
● Visage Runs as a Native App on Android
● Full Access to all the Android APIs
● Declarative Layer on Top of Android APIs

28. Android XML Code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.
com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World, HelloVisage"
/>
</LinearLayout>

29. Java Code
public class HelloVisage extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedIS) {
super.onCreate(savedIS);
setContentView(R.layout.main);
}
}

30. JavaFx Conversion
public class HelloVisage extends Activity {
override function onCreate(savedInstanceState:
Bundle) {
super.onCreate(savedInstanceState);
def context = getApplicationContext();
def layout = new LinearLayout(context);
layout.setOrientation(LinearLayout.VERTICAL);
def text = new TextView(context);
text.setText("Hello World, Long Visage");
layout.addView(text);
setContentView(layout);
}
}

31. Android JavaFX Code
public class HelloVisage extends Activity {
override var view = LinearLayout {
orientation: Orientation.VERTICAL
view: TextView {
text: "Hello World, Beautified Visage"
}
}
}

32. Working Hello Visage Application

33. Follow these people for VisageFX
● @steveonjava
● @William_Antonio
● @rajonjava
● @arivu86
● @shivkumarganesh

34. Thank You

35. Contact Us
@shivkumarganesh-gshiv.sk@gmail.com
@arivu86-arivu86@gmail.com