Visage Android Hands-on Lab

Visage Android Hands-on LabStephen Chin – GXShttp://steveonjava.com/

The Visage Language2“Visage is a domain specific language (DSL) designed for the express purpose of writing user interfaces.”Statically Compiled LanguageBased on F3 / JavaFX ScriptPlanning Support for Different Platforms:JavaFX 2.0AndroidApache PivotFlexJSF

Language FeaturesDeclarative Object ConstructionCode looks like the UI it is representing. Data BindingVariables can be bound to UI state, allowing automatic updates and behavior to be triggered. Behavior EncapsulationVisage provides closures to make it easy to implement event handlers or other behavior-driven logic. Null SafetyApplication logic will proceed even if intermediate variables are undefined or null. 3

Hello World VisageStage { title: "Hello World" Scene { Text { "Hello World" } }}4

Visage on Android5Visage Runs as a Native App on AndroidFull Access to all the Android APIsDeclarative Layer on Top of Android APIs

Language SimilaritiesJava is…Statically typedCompiled to bytecodesRuns on the JVMHas a large libraryVisage is…Statically typedCompiled to bytecodesRuns on the JVMCan call Java libraries7

Integrating Visage and JavaCalling Java from VisageCan call Java interface or classes directlyAutomatic conversion to and from Arrays and CollectionsCan even extend Java interfaces and classesCalling Visage from JavaEasiest way is to create a Java interface that Visage extendsCan invoke Visage as a script and get results back9

Exercise 1.A – Android SetupSetup and run the VirtualBox imageCreate an emulator instanceCreate a new Android project from the command lineRun the project in the emulator11

Setting Up Your MachineCopy these files off the USB stick:VirtualBox for your platform (mac or windows)VisageLab folderDecompress VisageLab/Visage Dev2.vdi.zipInstall VirtualBoxOpen Visage Dev.vbox12

Setting Up Your MachineDownload and Install the Android SDKhttp://developer.android.com/sdk/index.htmlDownload the Visage SDKhttp://code.google.com/p/visage/downloads/listInstall the Android/Visage SDKOn the USB stick13

Set Up Your Device for DebuggingAnd mount it from:Devices > USB Devices > (your-device-name)1414

Or Create a Virtual Android Device15Launch the AVD Manager by typing: android

Setting Up Your ProjectProject creation command:android create project –t 1 –p HelloVisage –k org.test –a HelloVisageArguments:n : Project name (optional)t : Target ID of the new project (required)p : Project directory (required)k : Package name for the application (required)a : Name of the default Activity (required)16

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" ><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Hello World, HelloVisage"/></LinearLayout>17

Plus some more Java…public class HelloVisage extends Activity {/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedIS) {super.onCreate(savedIS);setContentView(R.layout.main); }}18

Run Your Projectcd HelloVisageant installOpen it in the applications menu19

Exercise 1.B – All Java ConversionMake sure you have the basic project running firstConvert the XML Code to JavaRun the all Java projectYou should get identical results20

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

(and here are the imports…)import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.widget.LinearLayout;import android.widget.TextView;22

Exercise 1.C – DDMS DebuggingSo you made a mistake in your code… the compiler can’t catch everything(even if you didn’t make a mistake, force one… a beautiful NullPointerException will do)Launch DDMS and select your emulator/device23

Break the code (change in bold)public class HelloVisage extends Activity { @Override public void onCreate(Bundle savedIS) {super.onCreate(savedIS);Context context = getApplicationContext();LinearLayoutlayout = null;//new LinearLayout(context);layout.setOrientation(LinearLayout.VERTICAL);TextView text = new TextView(context);text.setText("Hello World, HelloVisage");layout.addView(text);setContentView(layout);}}24

DDMS Displaying a Stack Trace25

Exercise 1.D – Visage PortModify the build script to compile VisageCopy the Visage Runtime librariesConvert the Java code to VisageRun on device/emulator26

Modify the Build Script (1)<target name="-post-compile"> <path id="android.classpath"> <filesetdir="./libs" includes="*.jar" /> <path refid="android.target.classpath"/> <pathelement location="${out.classes.absolute.dir}"/> </path> <pathconvertrefid="android.classpath" property="androidcpath"/> <path id="visage.sources"> <filesetdir="${source.absolute.dir}" includes="**/*.fx"/> </path>27

Modify the Build Script (2) <pathconvertrefid="visage.sources" property="visagepath" pathsep=" "/> <exec executable="${visagehome}/bin/javafxc${binary.extension}" failonerror="true" logerror="true"> <arg value="-d"/> <arg value="${out.classes.absolute.dir}"/> <arg value="-cp"/> <arg value="${androidcpath}"/> <arg line="${visagepath}"/> </exec></target>28

Add Some Properties…local.properties:visagehome=/home/visage/visage-sdkbinary.extension=29

Copy Over the Runtime JARCopy:javafxrt.jarFrom:$visagehome/lib/shared/To:$projectdir/libs30

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

Rename your source file*.java -> *.fx32

Exercise 1.E – Simplified VisageInclude the visage-android jarModify the Visage code to use the new APIsRun on device/emulator33

Copy the visage-android JARCopy:visage-android.jarFrom:/home/visage/visage-android/dist/To:$projectdir/libs34

Android JavaFX Codepublic class HelloVisage extends Activity { override var view = LinearLayout { orientation: Orientation.VERTICAL view: TextView { text: "Hello World, Beautified Visage" } }}35

And change the imports…org.visage.android.app.Activity;org.visage.android.widget.LinearLayout;org.visage.android.widget.Orientation;org.visage.android.widget.TextView;36

Working Hello Visage Application37

Visage Language FundamentalsLesson 238

Visage Operators40Multiplication 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 exceptionVisage Operators (continued)41

Data BindingA variable or a constant can be bound to an expressionvar x = bind a + b;The bound expression is rememberedThe dependencies of the expression is watchedVariable is updated lazily when possible43

CONTROLS AND SETTINGSModule 244

Exercise 2.A – NetBeans IntegrationCreate a new JavaFXNetBeans projectMerge in build scripts from Android projectStart coding!45

Create a new JavaFX ProjectFile > New Project…Name the project “ConfigReporter”In package "org.test"46

Merging Project FoldersCopy these files over:*.propertiesAndroidManifest.xmlres/libs/proguard.cfgbuild.xml [replace]47

Merging Build ScriptsUpdate the build.xml file:Set the project name to “ConfigReporter”Update the strings.xml file:Set the app_name to “ConfigReporter”Load the NetBeans property files (in build.xml):<property file="nbproject/private/config.properties"/><property file="nbproject/private/configs/${config}.properties"/><property file="nbproject/private/private.properties"/><property file="${user.properties.file}"/><property file="nbproject/configs/${config}.properties"/><property file="nbproject/project.properties"/>48

Alias NetBeans Targets:<target name="launch" depends="install”> <exec executable="${adb}" failonerror="true"> <arg line="${adb.device.arg}"/> <arg value="shell"/> <arg value="am"/> <arg value="start"/> <arg value="-n"/> <arg value=”org.test/.ConfigReporter"/> <arg value="-a"/> <arg value="android.intent.action.MAIN"/> </exec></target><target name="jar" depends="compile"/><target name="run" depends="launch"/>49

Update AndroidManifest.xmlChange project name to "ConfigReporter"50

Modify Project PropertiesSet JavaFX Platform to “Visage_SDK”Add Libraries:“libs” folderandroid.jar51

Update ConfigReporter.fxMake it extend the visage Activity classFor now, you can copy the logic from HelloVisage52

Exercise 2.C – Android ControlsCreate a Text FieldCreate an Edit BoxWire them up using Binding53

Bound Controls (1)override var view = LinearLayout {orientation: Orientation.VERTICALvarsecret:String;view: [EditText {hint: "Super Secret Text”password: truetext: bind secret with inverse54

Bound Controls (2)}TextView {text: "Is Revealed!!!”}TextView {text: bind secret}]}55

Exercise 2.D – Button HandlerCreate a Button ControlAdd an onClick handlerMake something happen (maybe a bind)56

Button onClick handlerButton { text: "Launch Settings"onClick: function() {startActivity(new Intent(this, Settings.class)); setting = "Launching..."; }}TextView { text: "Setting is:"}TextView { text: bind setting}57

Exercise 2.E – Android SettingsCreate a Settings ActivityPopulate it with the following preferences:TextPasswordListLaunch it from the Button control58

Settings Classpublic class Settings extends PreferenceActivity {varusernamePref:EditTextPreference;varpasswordPref:EditTextPreference;varpollingPref:ListPreference; override var screen = PreferenceScreen { preferences: [ …59

Text PreferencePreferenceCategory { title: "Preferences" preferences: [usernamePref = EditTextPreference { title: "Username" key: "usernamePref" summary: bind if (usernamePref.text == "") "Currently undefined" else "Current value: {usernamePref.text}"}60

Password PreferencepasswordPref = EditTextPreference { title: "Password” key: "passwordPref” summary: bind passwordPref.text.replaceAll(".", "*");}61

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}62

Service MetadataUpdate AndroidManifest.xml:<activity android:name=".Settings" android:label="@string/settings_label"/>Update string.xml:<string name="settings_label">Settings</string>63

Invoke the new serviceIn the onClick handler:startActivity(new Intent(this, Settings.class));64

Advanced Javafx sequencesLesson 366

What Bind Updatesvar x = bind if(a) then b else cx is updated if a or b or c changesvar x = bind for (i in [a..b]) { i * i }Not everything is recalculatedIf a = 1 and b = 2, x is [1, 4]If b changes to 3, only the added element is calculated67149

Binding to ExpressionsBinding to a blockBound block may contain any number of defs followed by one expressionDependencies of block is backtraced from the expressionBinding to function invocation expressionRegular function: dependencies are parametersBound function: backtraced from final expression inside function68

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 Pointq and r keep the old instance with a new x valuer will never get a new instance of Point(the outer bind in r is useless)69

Visage SequencesRepresents collections of homogeneous dataA fundamental container data typeRich set of language facilitiesContributor to declarative syntaxAutomatic conversion to and from Java Arrays and Collections70

Creating SequencesExplicit sequence expression[1, 3, 5, 7, 9]Elements are separated by commasComma may be omitted if element ends with brace7113579

Creating SequencesNumeric sequence with range expressions:[1..10]Can have a step:[1..10 step 2][0.0..0.9 step 0.1]Can be decreasing:[10..1 step -3]Beware of step that goes opposite direction:[10..1] is []Exclusive right end[1..<5]7212345678910135790.1.2.3.4.5.6.7.8.9107411234

Getting Info from Sequencesints = [1, 3, 5, 7, 9]sizeofintsis 5ints[0] is 1, ints[1] is 3, ..., ints[4] is 9ints[-1] is 0 (default value of Integer), so is ints[5]For a sequence of objects, the default is null7313579[0][1][2][3][4]

Getting Slices from Sequencesints = [1, 3, 5, 7, 9]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 []s7413579[0][1][2][3][4]

Getting Subsets from Sequencesints = [1, 3, 5, 7, 9]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:[]7513579[0][1][2][3][4]

Inserting into Sequencesints = [1, 3, 5, 7, 9]insert 20 into intsinsert 30 before ints[2]insert 40 after ints[4]insert [50, 60] into ints1357913579201357920301357920304013579203040506076

Deleting from Sequencesints = [1, 3, 5, 7, 9]delete 7 from intsdelete ints[0]delete ints[0..1]delete ints: ints becomes []135791357913593599

Sequence PuzzlersWhat 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]781A: 02A: [18]3A: 1

Module 3EXTENDING VISAGE ANDROID APIs79Become a Visage contributor!Join me in the Hackergartenafter the session

Visage Android Hands-on Lab

More Related Content

What's hot (20)

Similar to Visage Android Hands-on Lab (20)

More from Stephen Chin (20)

Recently uploaded (20)

Visage Android Hands-on Lab