Visage Android –Cleaner APIs, Cleaner UIs

Stephen Chin – GXShttp://steveonjava.com/

The Visage Language

• Statically Compiled Language

• Based on F3 / JavaFX Script

• Planning Support for Different Platforms:–JavaFX 2.0

–Android

–Apache Pivot

–Flex

–JSF

> “Visage is a domain specific language (DSL) designed for the express purpose of writing user interfaces.”

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.

Visage on Android

Visage Java Bytecode

Dalvik Bytecode

• Visage Runs as a Native App on Android

• Full Access to all the Android APIs

• Declarative Layer on Top of Android APIs

HELLO WORLD, VISAGE

Demo A

Step 1: Start With Java/XML

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>

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);

}

}

Step 2: Convert to Pure Java

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);

}

}

Step 3: Convert to Visage

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);

}

}

Simplified JavaFX Code

public class HelloVisage extends Activity {

override var view = LinearLayout {

orientation: Orientation.VERTICAL

view: TextView {

text: "Hello World, Beautified Visage"

}

}

}

Working Hello Visage Application

Visage Language Fundamentals

Datatype SupportDataType Java Equivalent Range Examples

Boolean boolean true or false true, false

Integer int -2147483648 to 2147483647 2009, 03731, 0x07d9

Number Float 1.40×10-45 and 3.40×1038 3.14, 3e8, 1.380E-23

String String N/A "java's", 'in"side"er'

Duration <None> -263 to 263-1 milliseconds 1h, 5m, 30s, 500ms

Length <None> dp, sp, em, %, mm, cm, in 2mm, 5sp, 1in

Angle <None> rad, deg, turn 1rad, 30deg

Color <None> #RRGGBB, #RGB,#RRGGBB|AA, #RGB|A

#CCCCCC, #202020|D0

Character char 0 to 65535 0, 20, 32

Byte byte -128 to 127 -5, 0, 5

Short short -32768 to 32767 -300, 0, 521

Long long -263 to 263-1 2009, 03731, 0x07d9

Float float 1.40×10-45 and 3.40×1038 3.14, 3e8, 1.380E-23

Double double 4.94×10-324 and 1.80×10308 3.14, 3e231, 1.380E-123

Visage Operators

Operator Meaning Precedence Examples ++ Pre/post increment 1 ++i, i++ -- Pre/post decrement 1 --i, i-- not Boolean negation 2 not (cond) * Multiply 3 2 * 5, 1h * 4 / Divide 3 9 / 3, 1m / 3 mod Modulo 3 20 mod 3 + Add 4 0 + 2, 1m + 20s - Subtract (or negate) 4 (2) -2, 32 -3, 1h -5m

> 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

Visage Operators (continued)

Operator Meaning Precedence Examples == Equal 5 value1 == value2, 4 == 4 != Not equal 5 value1 != value2, 5 != 4 < Lessthan 5 value1 < value2, 4 < 5 <= Lessthanorequal 5 value1 <= value2, 5 <= 5 > Greater than 5 value1 > value2, 6 > 5 >= Greater than or equal 5 value1 >= value2, 6 >= 6 instanceof Is instance of class 6 node instanceof Text as Typecast to class 6 node as Text and Boolean and 7 cond1 and cond2 or Boolean or 8 cond1 or cond2 += Add and assign 9 value += 5 -= Subtract and assign 9 value -= 3 *= Multiply and assign 9 value *= 2 /= Divide and assign 9 value /=4 = Assign 9 value = 7

Access Modifiers

Modifier Name Description<default> Script only access Only accessible within the same script file

package Package access Only accessible within the same package

protected Protected access Only accessible within the same package or by subclasses.

public Public access Can be accessed anywhere.

public-read Read access modifier Var/def modifier to allow a variable to be read anywhere

public-init Init access modifier Var/def modifier to allow a variable to be initialized or read anywhere

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

• 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

Stephen Chinhttp://steveonjava.com/Tweet: @steveonjava

Thank You