Visage Android - Cleaner APIs, Cleaner UIs


Published on

Visage is the successor to the JavaFX Script Language, a domain-specific language for writing UIs. It excels at rapid application design and can be used on any platform that supports Java.

In this session you will learn how to supercharge your Android development by using Visage to create declarative UIs. Visage Android exposes the full set of Android APIs, allows you to mix Java and Visage code in the same application, and generates code that deploys to and runs on Android mobile devices.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Visage Android - Cleaner APIs, Cleaner UIs

  1. 1. Visage Android –Cleaner APIs, Cleaner UIs<br />Stephen Chin – GXS<br /><br />
  2. 2. The Visage Language<br /><ul><li>“Visage is a domain specific language (DSL) designed for the express purpose of writing user interfaces.”</li></ul>Statically Compiled Language<br />Based on F3 / JavaFX Script<br />Planning Support for Different Platforms:<br />JavaFX 2.0<br />Android<br />Apache Pivot<br />Flex<br />JSF<br />
  3. 3. Language Features<br />Declarative Object Construction<br />Code looks like the UI it is representing. <br />Data Binding<br />Variables can be bound to UI state, allowing automatic updates and behavior to be triggered. <br />Behavior Encapsulation<br />Visage provides closures to make it easy to implement event handlers or other behavior-driven logic. <br />Null Safety<br />Application logic will proceed even if intermediate variables are undefined or null. <br />
  4. 4. Visage on Android<br />Visage Runs as a Native App on Android<br />Full Access to all the Android APIs<br />Declarative Layer on Top of Android APIs<br />
  5. 5. Hello World, Visage<br />Demo A<br />
  6. 6. Step 1: Start With Java/XML<br />
  7. 7. Android XML Code<br /><?xml version="1.0" encoding="utf-8"?><br /><LinearLayoutxmlns:android="" <br />android:orientation="vertical" <br />android:layout_width="fill_parent" <br />android:layout_height="fill_parent"<br /> ><br /><TextView<br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:text="Hello World, HelloVisage"<br />/><br /></LinearLayout><br />
  8. 8. Plus some more Java…<br />public class HelloVisage extends Activity {<br />/** Called when the activity is first created. */<br />@Override<br />public void onCreate(Bundle savedIS) {<br />super.onCreate(savedIS);<br />setContentView(R.layout.main);<br /> }<br />}<br />
  9. 9. Step 2: Convert to Pure Java<br />
  10. 10. Converted XML Code (simplified)<br />public class HelloVisage extends Activity {<br /> @Override public void onCreate(Bundle savedIS) {<br />super.onCreate(savedIS);<br />Context context = getApplicationContext();<br />LinearLayout layout = new LinearLayout(context);<br />layout.setOrientation(LinearLayout.VERTICAL);<br />TextView text = new TextView(context);<br />text.setText("Hello World, Java Only");<br />layout.addView(text);<br />setContentView(layout);<br />}<br />}<br />
  11. 11. Step 3: Convert to Visage<br />
  12. 12. Straight JavaFX Conversion...<br />public class Test extends Activity {<br /> override function onCreate(savedInstanceState:Bundle) {<br />super.onCreate(savedInstanceState);<br />def context = getApplicationContext();<br />def layout = new LinearLayout(context);<br />layout.setOrientation(LinearLayout.VERTICAL);<br />def text = new TextView(context);<br />text.setText("Hello World, Hello Long Visage");<br />layout.addView(text);<br />setContentView(layout);<br />}<br />}<br />
  13. 13. Simplified JavaFX Code<br />public class HelloVisage extends Activity {<br /> override var view = LinearLayout {<br /> orientation: Orientation.VERTICAL<br /> view: TextView {<br /> text: "Hello World, Beautified Visage"<br /> }<br /> }<br />}<br />
  14. 14. Working Hello Visage Application<br />
  15. 15. Visage Language Fundamentals<br />
  16. 16. Datatype Support<br />
  17. 17. Visage Operators<br /><ul><li>Multiplication and division of two durations is allowed, but not meaningful
  18. 18. Underflows/Overflows will fail silently, producing inaccurate results
  19. 19. Divide by zero will throw a runtime exception</li></li></ul><li>Visage Operators (continued)<br />
  20. 20. Access Modifiers<br />
  21. 21. Data Binding<br />A variable or a constant can be bound to an expression<br />var x = bind a + b;<br />The bound expression is remembered<br />The dependencies of the expression is watched<br />Variable is updated lazily when possible<br />
  22. 22. Become a Visage contributor!<br />We need:<br />Compiler Developers<br />API Designers<br />Tester Users<br />For more info:<br /><br />Join the visage-dev mailing list!<br />Project Visage<br />
  23. 23. Thank You<br />Stephen Chin<br /><br />Tweet: @steveonjava<br />