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.

1. Visage Android –Cleaner APIs, Cleaner UIs Stephen Chin – GXS http://steveonjava.com/

3. Language Features Declarative Object Construction Code looks like the UI it is representing. Data Binding Variables can be bound to UI state, allowing automatic updates and behavior to be triggered. Behavior Encapsulation Visage provides closures to make it easy to implement event handlers or other behavior-driven logic. Null Safety Application logic will proceed even if intermediate variables are undefined or null.

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

5. Hello World, Visage Demo A

6. Step 1: Start With Java/XML

7. Android XML Code <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns: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>

8. Plus 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); } }

9. Step 2: Convert to Pure Java

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

11. Step 3: Convert to Visage

12. Straight JavaFX Conversion... public class Test 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, Hello Long Visage"); layout.addView(text); setContentView(layout); } }

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

14. Working Hello Visage Application

15. Visage Language Fundamentals

16. Datatype Support

18. Underflows/Overflows will fail silently, producing inaccurate results

20. Access Modifiers

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

22. Become a Visage contributor! We need: Compiler Developers API Designers Tester Users For more info: http://visage-lang.org/ Join the visage-dev mailing list! Project Visage

23. Thank You Stephen Chin http://steveonjava.com/ Tweet: @steveonjava