visage fx

VisageDeclarative Language for expressing user interfaces

● Language Based on F3/JavaFX Script● Statically Compiled Language● A Domain Specific Language for writing

GUI in a Natural way

What is 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

Why Visage?

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

Visage the JavaFX Hybrid

We are planning to Support these platforms,

● JavaFX2.0● Vaadin● Android

Platforms to be Support

● 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.

Advantages

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

Prerequisites

Philosophy

Visage Datatypes

Visage Operators

Visage Operators

Access Modifiers

● 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.

Introduction to Scene Graph

Sample Node

Root,Branch and Leaf Nodes

Specific Root,Branch and Leaf Classes

● Anti. Download the Test Project from the repositoryii. Open it in Netbeans IDEiii. Add the lines mentioned below as a task in

build.xmliv. <target name="jfxsa-run" depends="run"/>

Note:Ant must be installed and ANT_HOME must be set as environment variable.

Build Tools/IDE Support

● Gradela. Its a Gradel Plugin for building as well as running

the VisageFX Applicationb. You just need to include build.gradel into your

project folderc. Instructions related to Gradel is available on

GitHub at Prerequisites1. JDK72. Gradel3. VisageFX.jar / VIsage Compiler.

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.

Build Tool/IDE Support

Stage { title: "Hello Beautiful Visage" Scene

{ width: 700 height: 600 fill: Color.LIGHTGREY

Group { [Text{text:"Hello Visage" x: 500 y: 500 } ]

}}

}

Hello Visage

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(); }

Hello Lazy JavaFX

Vaadin in Visage

Why Vaadin

○ Rich Set of UI Controls○ Java->Javascript Compiler

Write Custom UI Components in Visage○ Vaadin Brings Visage to the Web!

public class SimpleApplication extends Application {@Overridepublic void init() {

Window mainWindow = new Window("Simple Application");

Label label = new Label("Hello 33rd Degrees!");mainWindow.addComponent(label);setMainWindow(mainWindow);

}}

Java Vaadin Application

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);

}}

Visage Vaadin App [Unoptimized]

public class VisagevaadinApplication2 extends Application {

override var window = Window {caption: "Optimized Visage Vaadin Application"Label {

content: "Hello Expert Visage Coder"}

}}

Visage Vaadin App [Optimized]

Visage Vaadin Address Book Demo

Visage For Android

Visage On Android

● Visage Runs as a Native App on Android● Full Access to all the Android APIs● Declarative Layer on Top of Android APIs

Visage Java Byte Code Dalvik Byte 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>

Android XML 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); }}

Java Code

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); }}

JavaFx Conversion

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

Android JavaFX Code

Working Hello Visage Application

● @steveonjava● @William_Antonio● @rajonjava● @arivu86● @shivkumarganesh

Follow these people for VisageFX

Thank You

@shivkumarganesh-gshiv.sk@gmail.com@arivu86-arivu86@gmail.com

Contact Us