Embed Size (px)
DESCRIPTION
Citation preview
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
