ngAndroid

Additional

Language
Java
Version
N/A
Created
Jan 13, 2015
Updated
Apr 18, 2017 (Retired)
Owner
Tyler Davis (davityle)
Contributors
gitter-badger
bryant1410
mattbutlar
lambertjamesd
4
Activity
Badge
Generate
Download
Source code
APK file

Blurb

NgAndroid

NgAndroid provides two-way data binding and MVC to Android. It accomplishes this using compile time annotation processing and Java source generation which makes the bindings type safe and effecient.

the latest version NgAndroid is in an unstable beta and is subject to API changes. The readme to a more stable version can be found here

NgAndroid can be added as a gradle dependency:

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.neenbedankt.gradle.plugins:android-apt:1.4'
    }
}

allprojects {
    repositories {
        maven {
            url 'http://oss.sonatype.org/content/repositories/snapshots'
        }
    }
}
apply plugin: 'com.neenbedankt.android-apt'

dependencies {
    compile 'com.github.davityle:ngandroid:1.0.10-SNAPSHOT'
    apt 'com.github.davityle:ng-processor:1.0.10-SNAPSHOT'
}

Usage

NgAndoid works by generating a controller class and event binding models using two annotations (subject to change) @NgModel and @NgScope. You can read more about them below. After you have annotated a class with @NgScope and referenced it in your xml file a controller will be generated for that xml file. If I created a scope class MyScope and referenced it in an xml layout login.xml a controller called LoginController would be created for the xml layout. To bind your scope to your layout you would instaniate the controller, passing in the scope, and call LoginController#attach(android.view.View view) passing in the view. For example

View v = inflater.inflate(R.layout.login, container, false);
MyScope scope = new MyScope();
LoginController controller = new LoginController(new NgOptions.Builder().build(), scope)
controller.attach(v);

@NgModel

@NgModel marks a field within a scope as a model that can be bound to views. Any field that is marked as a model will be injected into the scope automatically. This is imporant because ngAndroid will create a subclass of the Model that triggers events when it is changed and somthing is listening to those changes.

The type of any field marked with @NgModel should have getters and setters declared for each of it's fields.

@NgScope

@NgScope marks a class as a scope. A scope is the base reference for any data binding reference.

@NgScope(name="Login")
public class LoginScope {

    @NgModel
    User user;

    void onSubmit(/*any paramaters*/) {
        // submission code
    }

}

To use a scope you set the ngScope attribute in your xml to the name of the scope. For example if I were to use the above scope I would add

<RelativeLayout ...
    xmlns:x="http://schemas.android.com/apk/res-auto"
    x:ngScope="Login">

to my layout. I could then reference any methods or models declared in the scope in my xml bindings.

<EditText ...
    x:ngModel="user.username" />

<EditText
    x:ngModel="user.password"/>

<Button ...
    x:ngDisabled="user.username.length() &lt; 6 || user.password.length() &lt; 6"
    x:ngClick="onSubmit($view.context)"/>

Attributes

NgModel Two way data bindingNgText One way data to text view bindingNgClick Click event bindingNgLongClick Long click event bindingNgDisabled Two way boolean data binding to view disabled stateNgInvisible Two way boolean data binding to view invisible stateNgGone Two way boolean data binding to view gone stateNgFocus Two way boolean data binding to view focus stateCommon Gotchas










Coming Soon

ngRepeat
ngChange
deep integration with injection of scopes and models using Dagger 2


ngModel

<!-- add xml attributes -->

<EditText
    android:id="@+id/edit_text"
    x:ngModel="input.input"
    ... />
    
<TextView
    android:id="@+id/text_view"
    x:ngModel="input.input"
    .../>