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
Top Related