VisageDeclarative Language forexpressing user interfaces
What is Visage ?● Language Based on F3/JavaFX Script● Statically Compiled Language● A Domain Specific Language for writing...
Why Visage?●   Make the UI design simpler and let the    developer to work on more artistic things●   You are documenting ...
Visage the JavaFX Hybrid● Foolproof Default Values.● New variables:       Angles: 90deg,18rad,5turn       Colors: #FFF,#GD...
Platforms to be SupportWe are planning to Support these platforms,● JavaFX2.0● Vaadin● Android
Advantages● Any JavaFX script programmer would feel  at home.● Graphical Structure of writing is self  contained and under...
Prerequisites●   JDK1.7●   JavaFX 2.0+●   Visage Compiler●   VisageFX.jar(Bindings for JAvaFX)●   IDE(Netbeans,Sublime or ...
Philosophy
Visage Datatypes
Visage Operators
Visage Operators
Access Modifiers
Introduction to Scene Graph● Its a Tree Data Structure● It maintains the internal model of graphical  objects in an applic...
Sample Node                            Root,Branch and Leaf                            Nodes Specific Root,Branch and Leaf...
Build Tools/IDE Support● Ant      i. Download the Test Project from the repository     ii. Open it in Netbeans IDE    iii....
Build Tool/IDE Support● Gradel  a. Its a Gradel Plugin for building as well as running     the VisageFX Application  b. Yo...
Build Tool/IDE Support● Use your Favourite Code Editor● We Recommend you to use Sublime or  Vim Editor for your purpose.● ...
Hello VisageStage {    title: "Hello Beautiful Visage"        Scene        {    width: 700             height: 600        ...
Hello Lazy JavaFXpublic void start(Stage primaryStage) {     Text t = new Text();     t.setText("Hello Lazy JavaFX");     ...
Vaadin in Visage
Why Vaadin  ○   Rich Set of UI Controls  ○   Java->Javascript Compiler          Write Custom UI Components in Visage  ○   ...
Java Vaadin Applicationpublic class SimpleApplication extends Application {   @Override   public void init() {       Windo...
Visage Vaadin App [Unoptimized]public class VisagevaadinApplication extendsApplication {   override function init() {     ...
Visage Vaadin App [Optimized]public class VisagevaadinApplication2 extendsApplication {   override var window = Window {  ...
Visage Vaadin Address Book Demo
Visage For Android
Visage On Android    Visage         Java Byte Code   Dalvik Byte Code●   Visage Runs as a Native App on Android●   Full Ac...
Android XML Code<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr...
Java Codepublic class HelloVisage extends Activity {  /** Called when the activity is first created. */  @Override  public...
JavaFx Conversionpublic class HelloVisage extends Activity {  override function onCreate(savedInstanceState:Bundle) {    s...
Android JavaFX Codepublic class HelloVisage extends Activity {  override var view = LinearLayout {     orientation: Orient...
Working Hello Visage Application
Follow these people for VisageFX●   @steveonjava●   @William_Antonio●   @rajonjava●   @arivu86●   @shivkumarganesh
Thank You
Contact Us@shivkumarganesh-gshiv.sk@gmail.com@arivu86-arivu86@gmail.com
Upcoming SlideShare
Loading in …5
×

Visage fx

893 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
893
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Visage fx

  1. 1. VisageDeclarative Language forexpressing user interfaces
  2. 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. 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 wont stop the App.● CSS Support
  4. 4. Visage the JavaFX Hybrid● Foolproof Default Values.● New variables: Angles: 90deg,18rad,5turn Colors: #FFF,#GDY53RT|AA Length:● Null & undefined Value Checker.
  5. 5. Platforms to be SupportWe are planning to Support these platforms,● JavaFX2.0● Vaadin● Android
  6. 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. 7. Prerequisites● JDK1.7● JavaFX 2.0+● Visage Compiler● VisageFX.jar(Bindings for JAvaFX)● IDE(Netbeans,Sublime or Notepad)
  8. 8. Philosophy
  9. 9. Visage Datatypes
  10. 10. Visage Operators
  11. 11. Visage Operators
  12. 12. Access Modifiers
  13. 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. 14. Sample Node Root,Branch and Leaf Nodes Specific Root,Branch and Leaf Classes
  15. 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_HOMEmust be set as environment variable.
  16. 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 atPrerequisites1. JDK72. Gradel3. VisageFX.jar / VIsage Compiler.
  17. 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. 18. Hello VisageStage { title: "Hello Beautiful Visage" Scene { width: 700 height: 600 fill: Color.LIGHTGREY Group { [Text{text:"Hello Visage" x: 500 y: 500 } ] } } }
  19. 19. Hello Lazy JavaFXpublic 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. 20. Vaadin in Visage
  21. 21. Why Vaadin ○ Rich Set of UI Controls ○ Java->Javascript Compiler Write Custom UI Components in Visage ○ Vaadin Brings Visage to the Web!
  22. 22. Java Vaadin Applicationpublic class SimpleApplication extends Application { @Override public void init() { Window mainWindow = new Window("SimpleApplication"); Label label = new Label("Hello 33rd Degrees!"); mainWindow.addComponent(label); setMainWindow(mainWindow); }}
  23. 23. Visage Vaadin App [Unoptimized]public class VisagevaadinApplication extendsApplication { override function init() { def mainWindow = new Window("UnoptimizedVisage Vaadin Application"); def label = new Label("Hello Visage User"); mainWindow.addComponent(label); setMainWindow(mainWindow); }}
  24. 24. Visage Vaadin App [Optimized]public class VisagevaadinApplication2 extendsApplication { override var window = Window { caption: "Optimized Visage Vaadin Application" Label { content: "Hello Expert Visage Coder" } }}
  25. 25. Visage Vaadin Address Book Demo
  26. 26. Visage For Android
  27. 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. 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. 29. Java Codepublic 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. 30. JavaFx Conversionpublic 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. 31. Android JavaFX Codepublic class HelloVisage extends Activity { override var view = LinearLayout { orientation: Orientation.VERTICAL view: TextView { text: "Hello World, Beautified Visage" } }}
  32. 32. Working Hello Visage Application
  33. 33. Follow these people for VisageFX● @steveonjava● @William_Antonio● @rajonjava● @arivu86● @shivkumarganesh
  34. 34. Thank You
  35. 35. Contact Us@shivkumarganesh-gshiv.sk@gmail.com@arivu86-arivu86@gmail.com

×