Cleaner APIs, Cleaner UIswith VisageStephen ChinChief Agile Methodologist – GXShttp://steveonjava.com/Tweet: @steveonjava
The Visage Language                      http://visage-lang.org/                              Statically Compiled        ...
What Does Visage Look Like? Stage {   var input:TextBox;   title: bind input.text   Scene {     input = TextBox {       co...
What Does Visage Look Like? Stage {   var input:TextBox;   title: bind input.text   Scene {                  Hierarchy Mod...
What Does Visage Look Like? Stage {   var input:TextBox;   title: bind input.text   Scene {                  User Interfac...
What Does Visage Look Like? Stage {   var input:TextBox;   title: bind input.text   Scene {     input = TextBox {      Bui...
What Does Visage Look Like? Stage {   var input:TextBox;   title: bind input.text   Scene {     input = TextBox {      No ...
What Does Visage Look Like? Stage {   var input:TextBox;   title: bind input!.text   Scene {     input = TextBox {       U...
JavaFX With Visage                     9
Java vs. Visage DSL                                                                                      var circles:Circl...
How about JavaFX on… VisageStage {  title: "Vanishing Circles"  scene: Scene {    width: 800    height: 600    fill: BLACK...
How about JavaFX on… VisageStage {  title: "Vanishing Circles"  scene: Scene {    width: 800    height: 600    fill: BLACK...
How about JavaFX on… VisageStage {  title: "Vanishing Circles"  Scene {    width: 800    height: 600    fill: BLACK    Gro...
Vanishing Circles Demo
Visage is JavaFX Script++ Default Parameters New Literal Syntax For: - Angles – 35deg, 4rad, 1turn - Colors – #DDCCBB, #...
And Made for JavaFX 2.0… Enhanced Binding - Retains lazy evaluation properties with additional   expressive power Integr...
Why Vaadin Rich Set of UI Controls Java->Javascript Compiler - Write Custom UI Components in Visage           Vaadin Bri...
Java Vaadin Applicationpublic class SimpleApplication extends Application {   @Override   public void init() {       Windo...
Visage Vaadin Application (unoptimized)public class VisagevaadinApplication extends Application {   override function init...
Visage Vaadin Application (optimized!)public class VisagevaadinApplication2 extends Application {   override var window = ...
Visage Vaadin Address Book Demo
A Popular Linux-based TabletOS With VISAGE
Visage on Android Visage Runs as a Native App on Android Full Access to all the Android APIs Declarative Layer on Top o...
Demo 1Hello World, Visage                      25
AndroidA            XML Code<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/...
PlusP      some more Java…public class HelloVisage extends Activity {  /** Called when the activity is first created. */  ...
All Java Conversion                      28
Converted XML Code (simplified)public class HelloVisage extends Activity {  @Override public void onCreate(Bundle savedIS)...
Visage Port              30
Straight JavaFX Conversion...public class HelloVisage extends Activity {  override function onCreate(savedInstanceState:Bu...
Straight JavaFX Conversion...public class HelloVisage extends Activity {  override function onCreate(savedInstanceState:Bu...
Straight JavaFX Conversion...public class HelloVisage extends Activity {  override function onCreate(savedInstanceState:Bu...
Straight JavaFX Conversion...public class HelloVisage extends Activity {  override function onCreate(savedInstanceState:Bu...
Straight JavaFX Conversion...public class HelloVisage extends Activity {  override function onCreate(savedInstanceState:Bu...
Android JavaFX Codepublic class HelloVisage extends Activity {  override var view = LinearLayout {     orientation: Orient...
Working Hello Visage Application                            37
Demo 2CONTROLS AND SETTINGS                    38
Android Controls Create a Text Field Create an Edit Box Wire them up using Binding                               39
Bound Controls (1)override var view = LinearLayout {  orientation: Orientation.VERTICAL  var secret:String;  view: [     E...
Bound Controls (2)        }        TextView {          text: "Is Revealed!!!"        }        TextView {          text: bi...
Button Handler Create a Button Control Add an onClick handler Make something happen (maybe a bind)                     ...
Button onClick handlerButton {  text: "Launch Settings"  onClick: function() {     startActivity(new Intent(this, Settings...
Android Settings Create a Settings Activity Populate it with the following preferences: - Text - Password - List Launch...
Settings Classpublic class Settings extends PreferenceActivity {  var usernamePref:EditTextPreference;  var passwordPref:E...
Text PreferencePreferenceCategory {  title: "Preferences"  preferences: [      usernamePref = EditTextPreference {        ...
Password PreferencepasswordPref = EditTextPreference {  title: "Password"  key: "passwordPref"  summary: bind passwordPref...
List PreferencepollingPref = ListPreference {  title: "Polling Interval"  key: "pollingPref"  defaultValue: "60000"  entri...
Working Settings Panel                         49
Sequence Puzzlers  What is the size of this sequence:   [1..10 step -1]  What does this evaluate to:   [10..<20 step 2][...
Thank You!Stephen Chinhttp://steveonjava.comTweet: @steveonjavaVisage Project: http://visage-lang.org/                    ...
Lesson 1Visage LanguageFundamentals                  52
Datatype Support                   53
Visage Operators>   Multiplication and division of two durations is allowed, but not    meaningful>   Underflows/Overflows...
Visage Operators (continued)                               55
Access Modifiers                   56
Data Binding A variable or a constant can be bound to an  expression - var x = bind a + b; The bound expression is remem...
What Bind Updatesvar x = bind if(a) then b else c x is updated if a or b or c changesvar x = bind for (i in [a..b]) { i *...
Binding to Expressions Binding to a block Bound block may contain any number of defs  followed by one expression Depend...
Binding to Object Literalsvar   a = 3; var b = 4;var   p = bind Point { x: a, y: b };var   q = bind Point { x: bind a, y: ...
Integrating Visage and Java Calling Java from Visage - Can call Java interface or classes directly - Automatic conversion...
Lesson 2Advanced Javafx sequences                        62
Visage Sequences Represents collections of homogeneous data A fundamental container data type Rich set of language faci...
Creating Sequences Explicit sequence expression - [1, 3, 5, 7, 9] Elements are separated by commas Comma may be omitted...
Creating Sequences Numeric sequence with range expressions: - [1..10]                1 2 3 4 5 6 7 8 9 10 Can have a ste...
Getting Info from Sequencesints = [1, 3, 5, 7, 9]              1 3 5 7 9              [0] [1] [2] [3] [4] sizeof ints is ...
Getting Slices from Sequencesints = [1, 3, 5, 7, 9]               1 3 5 7 9              [0] [1] [2] [3] [4] ints[0..2] i...
Getting Subsets from Sequencesints = [1, 3, 5, 7, 9]               1 3 5 7 9              [0] [1] [2] [3] [4] ints[k | k ...
Inserting into Sequencesints = [1, 3, 5, 7, 9]    1 3 5 7 9insert 20 into ints       1 3 5 7 9 20insert 30 before ints[2] ...
Deleting from Sequences ints = [1, 3, 5, 7, 9]         1 3 5 7 9 delete 7 from ints             1 3 5 7 9 delete ints[0...
Cleaner APIs, Cleaner UIs with Visage (33rd Degrees)
Upcoming SlideShare
Loading in...5
×

Cleaner APIs, Cleaner UIs with Visage (33rd Degrees)

6,966

Published on

Visage is a JVM language designed specifically for UI development, with special syntax for hierarchically describing UIs, binding data and behavior, and representing UI specific concepts such as animation, layout, and styles. It also is a full-featured language with a full compiler tool-chain, static compilation to JVM bytecodes, and IDE plug-ins. This talk will demonstrate how to use the Visage language to build UIs for JavaFX 2.0, Vaadin, and Android. Find out how you can take control of your UI development by writing cleaner, more maintainable UI code using the Visage language in your existing Java projects.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,966
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Stage.add??
  • Cleaner APIs, Cleaner UIs with Visage (33rd Degrees)

    1. 1. Cleaner APIs, Cleaner UIswith VisageStephen ChinChief Agile Methodologist – GXShttp://steveonjava.com/Tweet: @steveonjava
    2. 2. The Visage Language http://visage-lang.org/  Statically Compiled Language  Based on F3 / JavaFX Script  Planning Support for Different Platforms: - JavaFX 2.0> "Visage is a domain - Vaadin specific language (DSL) designed for the express - A Popular Linux-based purpose of writing user Tablet OS interfaces." 2
    3. 3. What Does Visage Look Like? Stage { var input:TextBox; title: bind input.text Scene { input = TextBox { color: #DDCC33 } } } 3
    4. 4. What Does Visage Look Like? Stage { var input:TextBox; title: bind input.text Scene { Hierarchy Models Your User Interface input = TextBox { color: #DDCC33 } } } 4
    5. 5. What Does Visage Look Like? Stage { var input:TextBox; title: bind input.text Scene { User Interface Updates Automatically input = TextBox { color: #DDCC33 } } } 5
    6. 6. What Does Visage Look Like? Stage { var input:TextBox; title: bind input.text Scene { input = TextBox { Built-in Constructs for Building UIs color: #DDCC33 } } } 6
    7. 7. What Does Visage Look Like? Stage { var input:TextBox; title: bind input.text Scene { input = TextBox { No more NPEs! color: #DDCC33 } } } 7
    8. 8. What Does Visage Look Like? Stage { var input:TextBox; title: bind input!.text Scene { input = TextBox { Unless you add an exclamation mark! color: #DDCC33 } } } 8
    9. 9. JavaFX With Visage 9
    10. 10. Java vs. Visage DSL var circles:Circle[]; ublic class VanishingCircles extends Application { Stage { title: "Vanishing Circles" Scene { public static void main(String[] args) { width: 800 height: 600 Application.launch(args); fill: BLACK Group { } circles = for (i in [1..50]) { def c:Circle = Circle { centerX: random() * 800 centerY: random() * 600 @Override radius: 150 fill: color(random(), random(), random(), .2) public void start(Stage primaryStage) { effect: BoxBlur { height: 10 primaryStage.setTitle("Vanishing Circles"); width: 10 iterations: 3 40 Lines Group root = new Group(); Scene scene = new Scene(root, 800, 600, Color.BLACK); } 35 Lines stroke: WHITE strokeWidth: bind if (c.hover) 5 else 0 1299 Characters 487 Characters onMouseClicked: function(e) { List<Circle> circles = new ArrayList<Circle>(); Timeline {at (3s) {c.radius => 0}}.play() } for (int i = 0; i < 50; i++) { } } final Circle circle = new Circle(150); } } circle.setCenterX(Math.random() * 800); } circle.setCenterY(Math.random() * 600); Timeline { for (circle in circles) at (40s) { circle.setFill(new Color(Math.random(), Math.random(), Math.random(), .2)); circle.centerX => random() * 800; circle.centerY => random() * 600 circle.setEffect(new BoxBlur(10, 10, 3)); } }.play() circle.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() { public void handle(MouseEvent t) { KeyValue collapse = new KeyValue(circle.radiusProperty(), 0); new Timeline(new KeyFrame(Duration.seconds(3), collapse)).play(); } }); circle.setStroke(Color.WHITE); 10 circle.strokeWidthProperty().bind(Bindings.when(circle.hoverProperty())
    11. 11. How about JavaFX on… VisageStage { title: "Vanishing Circles" scene: Scene { width: 800 height: 600 fill: BLACK content: Group { circles = for (i in [1..50]) { Circle { centerX: random() * 800 centerY: random() * 600 } } } }} 11
    12. 12. How about JavaFX on… VisageStage { title: "Vanishing Circles" scene: Scene { width: 800 height: 600 fill: BLACK content: Group { circles = for (i in [1..50]) { Circle { centerX: random() * 800 centerY: random() * 600 } } } }} 12
    13. 13. How about JavaFX on… VisageStage { title: "Vanishing Circles" Scene { width: 800 height: 600 fill: BLACK Group { circles = for (i in [1..50]) { Circle { centerX: random() * 800 centerY: random() * 600 } } } }} 13
    14. 14. Vanishing Circles Demo
    15. 15. Visage is JavaFX Script++ Default Parameters New Literal Syntax For: - Angles – 35deg, 4rad, 1turn - Colors – #DDCCBB, #AA33AA|CC - Lengths – 5px, 2pt, 3in, 4sp Null-check Dereference - var width = rect.!width Built-in Bindable Maps (coming soon!) - var fruitMap = ["red" : apple, "yellow" : banana] - var fruit = bind fruitMap["red"] 15
    16. 16. And Made for JavaFX 2.0… Enhanced Binding - Retains lazy evaluation properties with additional expressive power Integrated Collections - Sequences and Maps automatically convert between JavaFX Observable Lists/Maps Built-in Animation Syntax - Ties into JavaFX animation subsystem - Provides consistent, clean APIs 16
    17. 17. Why Vaadin Rich Set of UI Controls Java->Javascript Compiler - Write Custom UI Components in Visage Vaadin Brings Visage to the Web!
    18. 18. 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); }} 19
    19. 19. Visage Vaadin Application (unoptimized)public class VisagevaadinApplication extends Application { override function init() { def mainWindow = new Window("Unoptimized VisageVaadin Application"); def label = new Label("Hello Visage User"); mainWindow.addComponent(label); setMainWindow(mainWindow); }} 20
    20. 20. Visage Vaadin Application (optimized!)public class VisagevaadinApplication2 extends Application { override var window = Window { caption: "Optimized Visage Vaadin Application" Label { content: "Hello Expert Visage Coder" } }} 21
    21. 21. Visage Vaadin Address Book Demo
    22. 22. A Popular Linux-based TabletOS With VISAGE
    23. 23. 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 24
    24. 24. Demo 1Hello World, Visage 25
    25. 25. AndroidA 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> 26
    26. 26. PlusP some more Java…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); }} 27
    27. 27. All Java Conversion 28
    28. 28. Converted XML Code (simplified)public class HelloVisage extends Activity { @Override public void onCreate(Bundle savedIS) { super.onCreate(savedIS); Context context = getApplicationContext(); LinearLayout layout = new LinearLayout(context); layout.setOrientation(LinearLayout.VERTICAL); TextView text = new TextView(context); text.setText("Hello World, Java Only"); layout.addView(text); setContentView(layout); }} 29
    29. 29. Visage Port 30
    30. 30. Straight 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
    31. 31. Straight JavaFX Conversion...public class HelloVisage extends Activity { override function onCreate(savedInstanceState:Bundle) { super.onCreate(savedInstanceState); def context = getApplicationContext(); Override is a built-in def layout = new LinearLayout(context); keyword layout.setOrientation(LinearLayout.VERTICAL); def text = new TextView(context); text.setText("Hello World, Long Visage"); layout.addView(text); setContentView(layout); }} 32
    32. 32. Straight JavaFX Conversion...public class HelloVisage extends Activity { override function onCreate(savedInstanceState:Bundle) { super.onCreate(savedInstanceState); def context = getApplicationContext(); Functions begin with the def layout = new LinearLayout(context); keyword "function" layout.setOrientation(LinearLayout.VERTICAL); def text = new TextView(context); text.setText("Hello World, Long Visage"); layout.addView(text); setContentView(layout); }} 33
    33. 33. Straight JavaFX Conversion...public class HelloVisage extends Activity { override function onCreate(savedInstanceState:Bundle) { super.onCreate(savedInstanceState); def context = getApplicationContext(); def layout = new LinearLayout(context); after variable Type layout.setOrientation(LinearLayout.VERTICAL); colon) (separated by def text = new TextView(context); text.setText("Hello World, Long Visage"); layout.addView(text); setContentView(layout); }} 34
    34. 34. Straight 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); Variables declarations setContentView(layout); start with "def" or "var" }} 35
    35. 35. Android JavaFX Codepublic class HelloVisage extends Activity { override var view = LinearLayout { orientation: Orientation.VERTICAL view: TextView { text: "Hello World, Beautified Visage" } }} 36
    36. 36. Working Hello Visage Application 37
    37. 37. Demo 2CONTROLS AND SETTINGS 38
    38. 38. Android Controls Create a Text Field Create an Edit Box Wire them up using Binding 39
    39. 39. Bound Controls (1)override var view = LinearLayout { orientation: Orientation.VERTICAL var secret:String; view: [ EditText { hint: "Super Secret Text" password: true text: bind secret with inverse 40
    40. 40. Bound Controls (2) } TextView { text: "Is Revealed!!!" } TextView { text: bind secret } ]} 41
    41. 41. Button Handler Create a Button Control Add an onClick handler Make something happen (maybe a bind) 42
    42. 42. Button onClick handlerButton { text: "Launch Settings" onClick: function() { startActivity(new Intent(this, Settings.class)); setting = "Launching..."; }}TextView { text: "Setting is:"}TextView { text: bind setting} 43
    43. 43. Android Settings Create a Settings Activity Populate it with the following preferences: - Text - Password - List Launch it from the Button control 44
    44. 44. Settings Classpublic class Settings extends PreferenceActivity { var usernamePref:EditTextPreference; var passwordPref:EditTextPreference; var pollingPref:ListPreference; override var screen = PreferenceScreen { preferences: [ … 45
    45. 45. Text PreferencePreferenceCategory { title: "Preferences" preferences: [ usernamePref = EditTextPreference { title: "Username" key: "usernamePref" summary: bind if (usernamePref.text == "")"Currently undefined" else "Current value:{usernamePref.text}" } 46
    46. 46. Password PreferencepasswordPref = EditTextPreference { title: "Password" key: "passwordPref" summary: bind passwordPref.text.replaceAll(".","*");} 47
    47. 47. List PreferencepollingPref = ListPreference { title: "Polling Interval" key: "pollingPref" defaultValue: "60000" entries: ["30 seconds", "1 minute", "5 minutes","10 minutes", "15 minutes", "30 minutes", "1 hour"] entryValues: ["30000", "60000", "300000","600000", "900000", "1800000", "3600000"] summary: bind pollingPref.entry} 48
    48. 48. Working Settings Panel 49
    49. 49. Sequence Puzzlers What is the size of this sequence:  [1..10 step -1] What does this evaluate to:  [10..<20 step 2][k|k>17] What is the size of this sequence:  sizeof [20..1 step -3]
    50. 50. Thank You!Stephen Chinhttp://steveonjava.comTweet: @steveonjavaVisage Project: http://visage-lang.org/ 51
    51. 51. Lesson 1Visage LanguageFundamentals 52
    52. 52. Datatype Support 53
    53. 53. Visage Operators> Multiplication and division of two durations is allowed, but not meaningful> Underflows/Overflows will fail silently, producing inaccurate results> Divide by zero will throw a runtime exception 54
    54. 54. Visage Operators (continued) 55
    55. 55. Access Modifiers 56
    56. 56. Data Binding A variable or a constant can be bound to an expression - var x = bind a + b; The bound expression is remembered The dependencies of the expression is watched Variable is updated lazily when possible 57
    57. 57. What Bind Updatesvar x = bind if(a) then b else c x is updated if a or b or c changesvar x = bind for (i in [a..b]) { i * i } Not everything is recalculated If a = 1 and b = 2, x is [1, 4] If b changes to 3, only the added element is calculated 1 4 9 58
    58. 58. Binding to Expressions Binding to a block Bound block may contain any number of defs followed by one expression Dependencies of block is backtraced from the expression Binding to function invocation expression - Regular function: dependencies are parameters - Bound function: backtraced from final expression inside function 59
    59. 59. Binding to Object Literalsvar a = 3; var b = 4;var p = bind Point { x: a, y: b };var q = bind Point { x: bind a, y: b };var r = bind Point { x: bind a, y: bind b }; When a changes:- p gets a new instance of Point- q and r keep the old instance with a new x value- r will never get a new instance of Point - (the outer bind in r is useless) 60
    60. 60. Integrating Visage and Java Calling Java from Visage - Can call Java interface or classes directly - Automatic conversion to and from Arrays and Collections - Can even extend Java interfaces and classes Calling Visage from Java - Easiest way is to create a Java interface that Visage extends - Can invoke Visage as a script and get results back 61
    61. 61. Lesson 2Advanced Javafx sequences 62
    62. 62. Visage Sequences Represents collections of homogeneous data A fundamental container data type Rich set of language facilities Contributor to declarative syntax Automatic conversion to and from Java Arrays and Collections 63
    63. 63. Creating Sequences Explicit sequence expression - [1, 3, 5, 7, 9] Elements are separated by commas Comma may be omitted if element ends with brace 1 3 5 7 9 64
    64. 64. Creating Sequences Numeric sequence with range expressions: - [1..10] 1 2 3 4 5 6 7 8 9 10 Can have a step: - [1..10 step 2] 1 3 5 7 9 - [0.0..0.9 step 0.1] 0 .1 .2 .3 .4 .5 .6 .7 .8 .9 Can be decreasing: - [10..1 step -3] 10 7 4 1 Beware of step that goes opposite direction: - [10..1] is [] Exclusive right end - [1..<5] 1 2 3 4
    65. 65. Getting Info from Sequencesints = [1, 3, 5, 7, 9] 1 3 5 7 9 [0] [1] [2] [3] [4] sizeof ints is 5 ints[0] is 1, ints[1] is 3, ..., ints[4] is 9 ints[-1] is 0 (default value of Integer), so is ints[5] Object sequence has a default of null 66
    66. 66. Getting Slices from Sequencesints = [1, 3, 5, 7, 9] 1 3 5 7 9 [0] [1] [2] [3] [4] ints[0..2] is [1, 3, 5] ints[0..<2] is [1, 3] ints[2..] is [5, 7, 9] ints[2..<] is [5, 7] ints[2..0], ints[-2..-1], ints[5..6] are all []s 67
    67. 67. Getting Subsets from Sequencesints = [1, 3, 5, 7, 9] 1 3 5 7 9 [0] [1] [2] [3] [4] ints[k | k > 6] is: - [7, 9] (k > 6 is a condition) ints[k | indexof k < 2] is: - [1, 3] ints[k | k > 10] is: - [] 68
    68. 68. Inserting into Sequencesints = [1, 3, 5, 7, 9] 1 3 5 7 9insert 20 into ints 1 3 5 7 9 20insert 30 before ints[2] 1 3 30 5 7 9 20insert 40 after ints[4] 1 3 30 5 7 40 9 20insert [50, 60] into ints 1 3 30 5 7 40 9 20 50 60
    69. 69. Deleting from Sequences ints = [1, 3, 5, 7, 9] 1 3 5 7 9 delete 7 from ints 1 3 5 7 9 delete ints[0] 1 3 5 9 delete ints[0..1] 3 5 9 delete ints: ints becomes [] 9
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×