A Tutorial for FluxJava ~ Bugs will find a way

This document will show you how to use FluxJava step by step. You can find all the sources in Github.

For someone may not familiar with Flux, here is a good place to start.

Start from BDD

In this document, I will demo the usage of FluxJava by developing a simple todo app. The process will start from a BDD flow.

First, we need to define our requirements. Below is the list of requirement for the simple todo app:

View todo list.
Switch list between different names.
Add a todo.
Close/Open a todo.

Then we need a story to describe these requirements, it should look like this:

Story: Manage todo items

Narrative:
As a user
I want to manage todo items
So I can track something to be done


Scenario 1: Add a todo
When I tap the add menu on main activity
Then I see the add todo screen

When I input todo detail and press ADD button
Then I see a new entry in list


Scenario 2: Add a todo, but cancel the action
When I tap the add menu on main activity
 And I press cancel button
Then Nothing happen


Scenario 3: Switch user
When I select a different user
Then I see the list changed


Scenario 4: Mark a todo as done
When I mark a todo as done
Then I see the todo has a check mark and strike through on title

Ok, since it is just a demo, the content of story has been simplified and it should be more complicate in the real cases.

Plan how to test

There will be one test class base on Espresso treated as UAT to verify the story, since I only wrote one story. For the non-Android component classes, they will be followed by a test class as unit test. The rest classes that base on Android component will be tested with Robolectric and treated as integration test.

In order to make the covert process from story to the test cases easier, I will use Spock Framework to replace JUnit. And Java will be replaced by Groovy, when writing the test cases.

Here is the dependencies for test:

Groovy
Spock Framework
RoboSpock
Espresso

RoboSpock is an Android testing framework which brings Spock Framework and Robolectric work together. It comes with Robolectric, so you don’t need to add the dependency of Robolectric again. But you also limited to use the version of Robolectric that RoboSpock works with.

Here is the sample for how to configure build.gradle with these frameworks:

	buildscript {
	repositories {
	jcenter()
	}
	dependencies {
	classpath 'com.android.tools.build:gradle:2.2.0'
	classpath 'org.codehaus.groovy:groovy-android-gradle-plugin:1.1.0'

	// NOTE: Do not place your application dependencies here; they belong
	// in the individual module build.gradle files
	}
	}

	apply plugin: 'com.android.application'
	apply plugin: 'groovyx.android'

	android {
	compileSdkVersion 24
	buildToolsVersion "25.0.0"

	defaultConfig {
	applicationId "com.example.sampleapp”
	minSdkVersion 9
	targetSdkVersion 24
	versionCode 1
	versionName "1.0"

	testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

	}
	testOptions {
	unitTests.returnDefaultValues = true
	}
	packagingOptions {
	exclude 'META-INF/services/org.codehaus.groovy.transform.ASTTransformation'
	exclude 'META-INF/services/org.codehaus.groovy.runtime.ExtensionModule'
	}
	buildTypes {
	release {
	minifyEnabled false
	proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
	}
	}
	}

	dependencies {
	compile fileTree(include: ['*.jar'], dir: 'libs')
	testCompile 'org.codehaus.groovy:groovy-all:2.4.7'
	testCompile 'org.spockframework:spock-core:1.0-groovy-2.4'
	testCompile 'org.robospock:robospock:1.0.1'
	androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
	exclude group: 'com.android.support', module: 'support-annotations'
	})
	androidTestCompile('com.android.support.test.espresso:espresso-contrib:2.2.2', {
	exclude group: 'com.android.support', module: 'support-annotations'
	})
	androidTestCompile 'org.codehaus.groovy:groovy:2.4.7:grooid'
	androidTestCompile('org.spockframework:spock-core:1.0-groovy-2.4') {
	exclude group: 'org.codehaus.groovy'
	exclude group: 'junit'
	}
	}

view raw build.gradle hosted with ❤ by GitHub

Create the UI

After created a empty Android project, the first thing is modify MainActivity. In this Activity, we will need a RecyclerView and a Spinner to show the data of todos and users. The list of todo can be switch from Spinner. Here is the layout:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:id="@+id/activity_main"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	android:orientation="vertical"
	tools:context=".MainActivity">

	<Spinner
	android:id="@+id/spinner"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" />

	<android.support.v7.widget.RecyclerView
	android:id="@+id/recyclerView"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	app:layoutManager="LinearLayoutManager"
	tools:listitem="@layout/item_todo" />

	</LinearLayout>

view raw activity_main.xml hosted with ❤ by GitHub

Create UAT

To contain the test files, we need to create a folder named groovy under androidTest and delete java one. If you make the build.gradle right, you will see the groovy folder with background color shows it is a test folder. Now, we can put our test file 'ManageTodoStory.groovy' into groovy folder with package structure.

Here, we can see the advantage brought by Spock, the codes almost the same with the origin story.

	@Title("Manage todo items")
	@Narrative("""
	As a user
	I want to manage todo items
	So I can track something to be done
	""")
	class ManageTodoStory extends Specification {

	def "Add a todo"() {
	when: "I tap the add menu on main activity"
	then: "I see the add todo screen"

	when: "I input todo detail and press ADD button"
	then: "I see a new entry in list"
	}

	def "Add a todo, but cancel the action"() {
	when: "I tap the add menu on main activity"
	and: "I press cancel button"
	then: "Nothing happen"
	}

	def "Switch user"() {
	when: "I select a different user"
	then: "I see the list changed"
	}

	def "Mark a todo as done"() {
	when: "I mark a todo as done"
	then: "I see the todo has a check mark and strike through on title"
	}
	}

view raw ManageTodoStoryA.groovy hosted with ❤ by GitHub

Then we can put the real test codes into the class as below:

	@Title("Manage todo items")
	@Narrative("""
	As a user
	I want to manage todo items
	So I can track something to be done
	""")
	class ManageTodoStory extends Specification {

	@Rule
	public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class)
	private RecyclerView mRecyclerView

	def "Add a todo"() {
	when: "I tap the add menu on main activity"
	this.mRecyclerView = (RecyclerView)this.mActivityRule.activity.findViewById(R.id.recyclerView)
	onView(withId(R.id.add)).perform(click())

	then: "I see the add todo screen"
	onView(withText(R.string.dialog_title))
	.inRoot(isDialog())
	.check(matches(isDisplayed()))
	onView(withText(R.string.title))
	.inRoot(isDialog())
	.check(matches(isDisplayed()))
	onView(withId(R.id.title))
	.inRoot(isDialog())
	.check(matches(isDisplayed()))
	onView(withText(R.string.memo))
	.inRoot(isDialog())
	.check(matches(isDisplayed()))
	onView(withId(R.id.memo))
	.inRoot(isDialog())
	.check(matches(isDisplayed()))
	onView(withText(R.string.due_date))
	.inRoot(isDialog())
	.check(matches(isDisplayed()))
	onView(withId(R.id.dueText))
	.inRoot(isDialog())
	.check(matches(isDisplayed()))
	onView(withId(android.R.id.button1))
	.inRoot(isDialog())
	.check(matches(withText(R.string.add)))
	.check(matches(isDisplayed()))
	onView(withId(android.R.id.button2))
	.inRoot(isDialog())
	.check(matches(withText(android.R.string.cancel)))
	.check(matches(isDisplayed()))

	when: "I input todo detail and press ADD button"
	onView(withId(R.id.title))
	.perform(typeText("Test title"))
	onView(withId(R.id.memo))
	.perform(typeText("Sample memo"))
	onView(withId(R.id.dueText))
	.perform(typeText("2016/1/1"), closeSoftKeyboard())
	onView(withId(android.R.id.button1)).perform(click())

	then: "I see a new entry in list"
	onView(withText(R.string.dialog_title))
	.check(doesNotExist())
	this.mRecyclerView.getAdapter().itemCount == 5
	onView(withId(R.id.recyclerView)).perform(scrollToPosition(4))
	onView(withId(R.id.recyclerView))
	.check(matches(hasDescendant(withText("Test title"))))
	}

	def "Add a todo, but cancel the action"() {
	when: "I tap the add menu on main activity"
	this.mRecyclerView = (RecyclerView)this.mActivityRule.activity.findViewById(R.id.recyclerView)
	onView(withId(R.id.add)).perform(click())

	and: "I press cancel button"
	onView(withId(android.R.id.button2)).perform(click())

	then: "Nothing happen"
	this.mRecyclerView.getAdapter().itemCount == 4
	}

	def "Switch user"() {
	when: "I select a different user"
	this.mRecyclerView = (RecyclerView)this.mActivityRule.activity.findViewById(R.id.recyclerView)
	onView(withId(R.id.spinner)).perform(click())
	onView(allOf(withText("User2"), isDisplayed()))
	.perform(click())

	then: "I see the list changed"
	this.mRecyclerView.getAdapter().itemCount == 5
	}

	def "Mark a todo as done"() {
	when: "I mark a todo as done"
	TextView target

	this.mRecyclerView = (RecyclerView)this.mActivityRule.activity.findViewById(R.id.recyclerView)
	onView(withRecyclerView(R.id.recyclerView).atPositionOnView(2, R.id.closed))
	.perform(click())
	target = (TextView)this.mRecyclerView
	.findViewHolderForAdapterPosition(2)
	.itemView
	.findViewById(R.id.title)

	then: "I see the todo has a check mark and strike through on title"
	target.getText().toString().equals("Test title 2")
	(target.getPaintFlags() & Paint.STRIKE_THRU_TEXT_FLAG) > 0
	}

	static RecyclerViewMatcher withRecyclerView(final int recyclerViewId) {
	return new RecyclerViewMatcher(recyclerViewId)
	}

	}

view raw ManageTodoStoryB.groovy hosted with ❤ by GitHub

There are some steps of resources creation have been skipped.

Create the bus

According to Flux pattern, dispatcher is the central hub to deliver messages. In FluxJava, it uses bus to replace the functionality of dispatcher. So, we have to create a bus instead of a dispatcher.

There is a IFluxBus interface required by FluxJava when you create a bus. In this demo, I used EventBus from greenrobot to make the code simple. Here is the codes:

	public class Bus implements IFluxBus {

	private EventBus mBus = EventBus.getDefault();

	@Override
	public void register(final Object inSubscriber) {
	this.mBus.register(inSubscriber);
	}

	@Override
	public void unregister(final Object inSubscriber) {
	this.mBus.unregister(inSubscriber);
	}

	@Override
	public void post(final Object inEvent) {
	this.mBus.post(inEvent);
	}

	}

view raw Bus.java hosted with ❤ by GitHub

If you use Rx add-on of FluxJava, you won’t need to create a bus. There is a built-in bus class named RxBus.

Create the models

The models in this demo are two POJOs. They are used to contain single user and todo data. you can check the content of these two class from 'User.java' and 'Todo.java'.

Define the constants

This not the necessary step but it will make codes more clear. As you can see, there are two constants that point to user and todo data type. Each data type has it’s own actions base on the description from story.

	// constants for data type
	public static final int DATA_USER = 10;
	public static final int DATA_TODO = 20;

	// constants for actions of user data
	public static final int USER_LOAD = DATA_USER + 1;

	// constants for actions of todo data
	public static final int TODO_LOAD = DATA_TODO + 1;
	public static final int TODO_ADD = DATA_TODO + 2;
	public static final int TODO_CLOSE = DATA_TODO + 3;

view raw Constants.java hosted with ❤ by GitHub

DATA_USER and DATA_TODO will be used as key of StoreMap latter. In FluxJava, you can use any type of data as a key of StoreMap not just integer. It could be a string, a type of class, a instance of class.

Create the actions and stores

UserAction and TodoAction inherit from FluxAction directly. The type of their data property is List, so they can contain more then one item when they pushed by dispatcher. you can check the content of these two class from 'UserAction.java' and 'TodoAction.java'.

To create a store, you can inherit from FluxStore in FluxJava (for Rx add-on it will be RxStore) or implement IFluxStore. register and unregister of IFluxStore are provided for UI components to tell store that they need to get the event of data change.

If you have multi-instance of a store in you application, tag will be useful to distinct which instance of store you are relate to.

The methods getItem, findItem, getCount are basic operations for inquiry data to display. The reason of getItem not return a list is to avoid any list modification outside store. It still has possibility that the content of single item changed by non-store class. So, it recommends create a new instance before return from getItem method.

	@Override
	public User getItem(final int inIndex) {
	return new User(this.mList.get(inIndex));
	}

view raw getItem.java hosted with ❤ by GitHub

Now, we need to let store get actions from dispatcher. For EventBus case, you can add a method as below:

	@Subscribe(threadMode = ThreadMode.BACKGROUND)
	public void onAction(final UserAction inAction) {
	// base on input action to process data
	// in this sample only define one action
	switch (inAction.getType()) {
	case USER_LOAD:
	this.mList.clear();
	this.mList.addAll(inAction.getData());
	super.emitChange(new ListChangeEvent());
	break;
	}
	}

view raw onAction.java hosted with ❤ by GitHub

For RxStore, you need to overwrite onAction method:

	@Override
	protected <TAction extends IFluxAction> void onAction(TAction inAction) {
	final UserAction action = (UserAction)inAction;

	// base on input action to process data
	// in this sample only define one action
	switch (action.getType()) {
	case USER_LOAD:
	this.mList.clear();
	this.mList.addAll(action.getData());
	super.emitChange(new ListChangeEvent());
	break;
	}
	}

view raw onAction-rx.java hosted with ❤ by GitHub

The action constants defined in previous step are used here. In UserStore, for example, there is only one action - load user data. All the user data will prepared by ActionCreator in this demo and the data will be sent with action. What store need to do in USER_LOAD is put the data into list.

Then store can emit an event to tell listeners that data is ready. The events store need to emit are define inside the class in this demo.

Both EventBus and Rx case, it will need to put job into background thread to avoid block UI. In EventBus, I added an annotation attribute to specify working thread is background. In Rx, the job will be done by RxStore.

You don’t need to worry about the action type when action pass in. They will be filtered by the parameter type of method or getActionType method from RxStore. But you need to worry when there are more then one instance of store waiting to receive actions. In this case, you need to put tag information into actions before you send.

Below are the results of TodoStore for EventBus and Rx:

	@Subscribe(threadMode = ThreadMode.BACKGROUND)
	public void onAction(final TodoAction inAction) {
	// base on input action to process data
	switch (inAction.getType()) {
	case TODO_LOAD:
	this.mList.clear();
	this.mList.addAll(inAction.getData());
	super.emitChange(new ListChangeEvent());
	break;
	case TODO_ADD:
	this.mList.addAll(inAction.getData());
	super.emitChange(new ListChangeEvent());
	break;
	case TODO_CLOSE:
	for (int j = 0; j < inAction.getData().size(); j++) {
	for (int i = 0; i < this.mList.size(); i++) {
	if (this.mList.get(i).id == inAction.getData().get(j).id) {
	this.mList.set(i, inAction.getData().get(j));
	super.emitChange(new ItemChangeEvent(i));
	break;
	}
	}
	}
	break;
	}
	}

view raw TodoStore.java hosted with ❤ by GitHub

	@Override
	protected <TAction extends IFluxAction> void onAction(final TAction inAction) {
	final TodoAction action = (TodoAction)inAction;

	// base on input action to process data
	switch (action.getType()) {
	case TODO_LOAD:
	this.mList.clear();
	this.mList.addAll(action.getData());
	super.emitChange(new ListChangeEvent());
	break;
	case TODO_ADD:
	this.mList.addAll(action.getData());
	super.emitChange(new ListChangeEvent());
	break;
	case TODO_CLOSE:
	for (int j = 0; j < action.getData().size(); j++) {
	for (int i = 0; i < this.mList.size(); i++) {
	if (this.mList.get(i).id == action.getData().get(j).id) {
	this.mList.set(i, action.getData().get(j));
	super.emitChange(new ItemChangeEvent(i));
	break;
	}
	}
	}
	break;
	}
	}

view raw TodoStore-rx.java hosted with ❤ by GitHub

Two more cases were added into codes compare to UserStore. TODO_ADD is simply put the new item get from action into list and inform the listeners that list has been updated. TODO_CLOSE need to find the position of list due to getItem return a different instance. For demo purpose, I wrote a very simple loop to do the job. Once the item has been located, it will be replaced by new one and the listeners will be informed.

Create ActionHelper

ActionHelper is used to customize the process of action creation and the process will be done by ActionCreator in FluxJava.

First thing that ActionHelper can do is decide which type of action to create instance. Second part is translate the data format.

	public Class<?> getActionClass(final Object inActionTypeId) {
	Class<?> result = null;

	if (inActionTypeId instanceof Integer) {
	final int typeId = (int)inActionTypeId;

	// return action type by pre-define id
	switch (typeId) {
	case USER_LOAD:
	result = UserAction.class;
	break;
	case TODO_LOAD:
	case TODO_ADD:
	case TODO_CLOSE:
	result = TodoAction.class;
	break;
	}
	}

	return result;
	}

view raw getActionClass.java hosted with ❤ by GitHub

In above codes, the ActionHelper choose the type of action by the constants defined by previous step.

	public Object wrapData(final Object inData) {
	Object result = inData;

	// base on data type to convert data into require form
	if (inData instanceof Integer) {
	result = this.getRemoteData((int)inData, -1);
	}
	if (inData instanceof String) {
	final String[] command = ((String)inData).split(":");
	final int action;
	final int position;

	action = Integer.valueOf(command[0]);
	position = Integer.valueOf(command[1]);
	result = this.getRemoteData(action, position);
	}
	if (inData instanceof Todo) {
	final ArrayList<Todo> todoList = new ArrayList<>();

	this.updateRemoteTodo();
	todoList.add((Todo)inData);
	result = todoList;
	}

	return result;
	}

view raw wrapData.java hosted with ❤ by GitHub

There are more jobs to be done in the second part of ActionHelper. In Flux documents said, you can make a remote call to get data in Actions Creator before create an action. To follow this, you can write the remote API calls in wrapData of ActionHelper.

Another usage of wrapData shows in above codes. It could be different format when get data from UI components. For example, it will be an integer when asking load user data, a string when asking load todo data, a todo item when modify todo. It is a good place in wrapData to change these forms into uniform one.

If you don’t like what ActionCreator in FluxJava did, you can inherit it and overwrite the methods. Then put your own ActionCreator instance into FluxContext when initializing it.

Put the components together

It’s time to put all things together. The Flux flow is cover all the application lifecycle in the demo, it is good choice put initialize jobs in Application class.

I wrote a AppConfig inherits from Application and modified the 'AndroidManifest.xml' to make it work. In AppConfig, there is a method call setupFlux as below:

	private void setupFlux() {
	HashMap<Object, Class<?>> storeMap = new HashMap<>();

	storeMap.put(DATA_USER, UserStore.class);
	storeMap.put(DATA_TODO, TodoStore.class);

	// setup relationship of components in framework
	FluxContext.getBuilder()
	.setBus(new Bus())
	.setActionHelper(new ActionHelper())
	.setStoreMap(storeMap)
	.build();
	}

view raw setupFlux.java hosted with ❤ by GitHub

How you put all components together is using builder inside FluxContext and pass the instance of classes that were created in previous steps.

Create the adapters

The adapters are used to feed data to Spinner and RecyclerView in MainActivity. They also play a role to connect the FluxJava framework. In this demo, they will be the views of Flux pattern.

I wrote two adapters UserAdapter and TodoAdapter. The former provides user data for Spinner to display. And the other provides todo data for RecyclerView. Before create these adapters, we need to create item layout first. Check the content in 'item_user.xml' and 'item_todo.xml'.

Here is complete UserAdapter:

	public class UserAdapter extends BaseAdapter {

	private UserStore mStore;

	public UserAdapter() {
	// get the instance of store that will provide data
	this.mStore = (UserStore)FluxContext.getInstance().getStore(DATA_USER, null, this);
	}

	@Override
	public int getCount() {
	return this.mStore.getCount();
	}

	@Override
	public Object getItem(final int inPosition) {
	return this.mStore.getItem(inPosition);
	}

	@Override
	public long getItemId(final int inPosition) {
	return inPosition;
	}

	@Override
	public View getView(final int inPosition, final View inConvertView, final ViewGroup inParent) {
	View itemView = inConvertView;

	// bind data into item view of Spinner
	if (itemView == null) {
	itemView = LayoutInflater
	.from(inParent.getContext())
	.inflate(R.layout.item_user, inParent, false);
	}

	if (itemView instanceof TextView) {
	((TextView)itemView).setText(this.mStore.getItem(inPosition).name);
	}

	return itemView;
	}

	@Subscribe(threadMode = ThreadMode.MAIN)
	public void onEvent(final UserStore.ListChangeEvent inEvent) {
	super.notifyDataSetChanged();
	}

	public void dispose() {
	// Clear object reference to avoid memory leak issue
	FluxContext.getInstance().unregisterStore(this.mStore, this);
	}

	}

view raw UserAdapter.java hosted with ❤ by GitHub

The UserAdapter get the store instance in constructor. The first parameter of getStore is USER_DATA that was defined in 'Constants.java' and also a key of StoreMap. So FluxContext can get the store that we want.

The second one is tag for getting store instance, but we don’t use here, so pass null. The last one need pass a instance of view that want to get events from store. You also can do it by your self after get store instance using it’s register method.

In the rest part of UserAdapter, store keeps the data list for adapter, so UserAdapter just call store when it need.

There is a similar method with the stores in the end of UserAdapter. It utilize EventBus to get events too. In the same manner, the parameter type will limit the events passed in. By specify the annotation attribute, the execution back to the main thread in order to access UI components and only one thing need to do in this demo - notify Spinner that data has been changed.

You also need to put tag into events, if you have more than one store will emit events.

The last one method is used to release references that will avoid memory leak issue.

For Rx add-on, you won’t need to add a method to receive events, instead you can call subscribe from the Observable that exposed by toObservable of RxStore.

	public UserAdapter() {
	// get the instance of store that will provide data
	this.mStore = (UserStore)FluxContext.getInstance().getStore(DATA_USER, null, null);
	this.mStore.toObservable(UserStore.ListChangeEvent.class)
	.observeOn(AndroidSchedulers.mainThread())
	.subscribe(
	new Action1<UserStore.ListChangeEvent>() {
	@Override
	public void call(UserStore.ListChangeEvent inEvent) {
	UserAdapter.super.notifyDataSetChanged();
	}
	},
	new Action1<Throwable>() {
	@Override
	public void call(Throwable inThrowable) {
	// put error handle here
	}
	});
	}

view raw UserAdapter-rx.java hosted with ❤ by GitHub

The content of another adapter, TodoAdapter, show as below:

	public class TodoAdapter extends RecyclerView.Adapter<TodoAdapter.ViewHolder> {

	static class ViewHolder extends RecyclerView.ViewHolder {
	TextView title;
	TextView dueDate;
	TextView memo;
	CheckBox closed;

	ViewHolder(final View inItemView) {
	super(inItemView);
	this.title = (TextView)inItemView.findViewById(R.id.title);
	this.dueDate = (TextView)inItemView.findViewById(R.id.dueDate);
	this.memo = (TextView)inItemView.findViewById(R.id.memo);
	this.closed = (CheckBox)inItemView.findViewById(R.id.closed);
	}
	}

	private TodoStore mStore;

	public TodoAdapter() {
	// get the instance of store that will provide data
	this.mStore = (TodoStore)FluxContext.getInstance().getStore(DATA_TODO, null, this);
	}

	@Override
	public ViewHolder onCreateViewHolder(final ViewGroup inParent, final int inViewType) {
	final View itemView = LayoutInflater
	.from(inParent.getContext()).inflate(R.layout.item_todo, inParent, false);

	// use custom ViewHolder to display data
	return new ViewHolder(itemView);
	}

	@Override
	public void onBindViewHolder(final ViewHolder inViewHolder, final int inPosition) {
	final Todo item = this.mStore.getItem(inPosition);

	// bind data into item view of RecyclerView
	inViewHolder.title.setText(item.title);
	inViewHolder.dueDate.setText(item.dueDate);
	inViewHolder.memo.setText(item.memo);
	inViewHolder.closed.setOnCheckedChangeListener(null);
	inViewHolder.closed.setChecked(item.closed);
	}

	@Override
	public int getItemCount() {
	return this.mStore.getCount();
	}

	@Subscribe(threadMode = ThreadMode.MAIN)
	public void onEvent(final TodoStore.ListChangeEvent inEvent) {
	super.notifyDataSetChanged();
	}

	@Subscribe(threadMode = ThreadMode.MAIN)
	public void onEvent(final TodoStore.ItemChangeEvent inEvent) {
	super.notifyItemChanged(inEvent.position);
	}

	public void dispose() {
	// Clear object reference to avoid memory leak issue
	FluxContext.getInstance().unregisterStore(this.mStore, this);
	}

	}

view raw TodoAdapter.java hosted with ❤ by GitHub

There are not much need to explain, just one method was added and it is used to get another event. It can make RecyclerView to distinct what to refresh, the whole list or just one item.

Want to work with Rx add-on? Like UserAdapter, just use subscribe instead of add methods. See the sources here.

Ok, we are ready to connect adapters with UI components. Here is the MainActivity:

	public class MainActivity extends AppCompatActivity {

	private UserAdapter mUserAdapter;
	private TodoAdapter mTodoAdapter;

	@Override
	protected void onCreate(final Bundle inSavedInstanceState) {
	super.onCreate(inSavedInstanceState);
	super.setContentView(R.layout.activity_main);
	this.setupRecyclerView();
	this.setupSpinner();
	}

	@Override
	protected void onStart() {
	super.onStart();
	// ask to get the list of user
	FluxContext.getInstance().getActionCreator().sendRequestAsync(USER_LOAD, USER_LOAD);
	}

	@Override
	protected void onStop() {
	super.onStop();

	// release resources
	if (this.mUserAdapter != null) {
	this.mUserAdapter.dispose();
	}
	if (this.mTodoAdapter != null) {
	this.mTodoAdapter.dispose();
	}
	}

	private void setupSpinner() {
	final Spinner spinner = (Spinner)super.findViewById(R.id.spinner);

	if (spinner != null) {
	// configure spinner to show data
	this.mUserAdapter = new UserAdapter();
	spinner.setAdapter(this.mUserAdapter);
	spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
	@Override
	public void onItemSelected(final AdapterView<?> inParent, final View inView,
	final int inPosition, final long inId) {
	// when user change the selection of spinner, change the list of recyclerView
	FluxContext.getInstance()
	.getActionCreator()
	.sendRequestAsync(TODO_LOAD, TODO_LOAD + ":" + inPosition);
	}

	@Override
	public void onNothingSelected(final AdapterView<?> inParent) {
	// Do nothing
	}
	});
	}
	}

	private void setupRecyclerView() {
	final RecyclerView recyclerView = (RecyclerView)super.findViewById(R.id.recyclerView);

	if (recyclerView != null) {
	// configure recyclerView to show data
	this.mTodoAdapter = new TodoAdapter();
	recyclerView.setAdapter(this.mTodoAdapter);
	}
	}

	}

view raw MainActivity.java hosted with ❤ by GitHub

As you see, nothing special when setup RecyclerView and Spinner. There will be a chain reaction from onStart. First, a request will be sent out to load user data. After user data loaded, Spinner will trigger a request to load todo data. Then you can see the data shows in the Spinner and RecyclerView.

Why did I put the request in onStart I want to make sure the Activity get the most update data when it back to foreground, no matter it was changed or not.

The dispose method of Adapters are called in onStop of Activity to release resource before it close, then we will get free from memory leak issue.

Create integration test

To make apps more testable is one of the reasons I introduce Flux in my codes. When running a integration test, we don’t want to use real data. Isolate stores is an option when we make integration test.

In this demo, it shows how to archive this goal in FluxJava. Robolectric provides a convenient way to inject stub Application when a test start. So I wrote a StubAppConfig and specify in annotation attribute:

	@Config(constants = BuildConfig, sdk = 21, application = StubAppConfig)
	class MainActivitySpec extends GradleRoboSpecification {

	}

view raw MainActivitySpec.groovy hosted with ❤ by GitHub

In StubAppConfig, I replaced the production classes with test ones. After did this, the data retrieved by UI components are from the test data source.

	public class StubAppConfig extends Application {

	@Override
	public void onCreate() {
	super.onCreate();
	this.setupFlux();
	}

	private void setupFlux() {
	HashMap<Object, Class<?>> storeMap = new HashMap<>();

	storeMap.put(DATA_USER, StubUserStore.class);
	storeMap.put(DATA_TODO, StubTodoStore.class);

	FluxContext.getBuilder()
	.setBus(new Bus())
	.setActionHelper(new StubActionHelper())
	.setStoreMap(storeMap)
	.build();
	}

	}

view raw StubAppConfig.java hosted with ❤ by GitHub

If you want to do the same thing in UAT or Espresso, you can replace the Application class too. But the different is you have to create a custom JUnitRunner as below:
The last step is specify the new JUnitRunner in Configurations of Android Studio:

When you run the UAT, you will see the different with the production one:


Production		Test

Create add todo feature

Let’s continue to enhance the app. It is a simple process for how to add a todo, just let user tap the add item in menu and show a AlertDialog to get data, then done. Obviously we need create a menu layout first:

	<?xml version="1.0" encoding="utf-8"?>
	<menu xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto">

	<item
	android:id="@+id/add"
	android:title="@string/add"
	app:showAsAction="always" />

	</menu>

view raw menu.xml hosted with ❤ by GitHub

Then put the menu into MainActivity:

	@Override
	public boolean onCreateOptionsMenu(final Menu inMenu) {
	super.getMenuInflater().inflate(R.menu.menu_main, inMenu);

	return true;
	}

view raw onCreateOptionsMenu.java hosted with ❤ by GitHub

I used DialogFragment to show the AlertDialog, so here is the layout:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:padding="16dp">

	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal">

	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/title" />

	<EditText
	android:id="@+id/title"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:layout_marginLeft="8dp"
	android:layout_marginStart="8dp"
	android:inputType="text" />

	</LinearLayout>

	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal">

	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/memo" />

	<EditText
	android:id="@+id/memo"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:layout_marginLeft="8dp"
	android:layout_marginStart="8dp"
	android:inputType="text" />

	</LinearLayout>

	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal">

	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/due_date" />

	<EditText
	android:id="@+id/dueText"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:layout_marginLeft="8dp"
	android:layout_marginStart="8dp"
	android:inputType="text" />

	</LinearLayout>

	</LinearLayout>

view raw dialog_add.xml hosted with ❤ by GitHub

And the codes:

	public class AddDialogFragment extends AppCompatDialogFragment {

	@Nullable
	@Override
	public View onCreateView(final LayoutInflater inInflater,
	@Nullable final ViewGroup inContainer,
	@Nullable final Bundle inSavedInstanceState) {
	return inInflater.inflate(R.layout.dialog_add, inContainer);
	}

	@NonNull
	@Override
	public Dialog onCreateDialog(final Bundle inSavedInstanceState) {
	final AlertDialog.Builder builder = new AlertDialog.Builder(super.getActivity());
	final LayoutInflater inflater = super.getActivity().getLayoutInflater();
	final ViewGroup nullParent = null;

	// display an alertDialog for input a new todo item
	builder.setView(inflater.inflate(R.layout.dialog_add, nullParent))
	.setTitle(R.string.dialog_title)
	.setPositiveButton(R.string.add, new DialogInterface.OnClickListener() {
	@Override
	public void onClick(final DialogInterface inDialog, final int inId) {
	final AlertDialog alertDialog = (AlertDialog)inDialog;
	final Todo todo = new Todo();
	final EditText title = (EditText)alertDialog.findViewById(R.id.title);
	final EditText memo = (EditText)alertDialog.findViewById(R.id.memo);
	final EditText dueDate = (EditText)alertDialog.findViewById(R.id.dueText);

	if (title != null) {
	todo.title = title.getText().toString();
	}
	if (memo != null) {
	todo.memo = memo.getText().toString();
	}
	if (dueDate != null) {
	todo.dueDate = dueDate.getText().toString();
	}
	// the input data will be sent to store by using bus
	FluxContext.getInstance()
	.getActionCreator()
	.sendRequestAsync(TODO_ADD, todo);
	}
	})
	.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
	public void onClick(final DialogInterface inDialog, final int inId) {
	// Do nothing
	}
	});

	return builder.create();
	}

	}

view raw AddDialogFragment.java hosted with ❤ by GitHub

Add codes in MainActivity to show the AlertDialog when user tap the menu:

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	boolean result;

	switch (item.getItemId()) {
	case R.id.add:
	AddDialogFragment addDialog = new AddDialogFragment();

	// display an input dialog to get a new todo
	addDialog.show(super.getSupportFragmentManager(), "Add");
	result = true;
	break;
	default:
	result = super.onOptionsItemSelected(item);
	break;
	}

	return result;
	}

view raw onOptionsItemSelected.java hosted with ❤ by GitHub

After running the test, we know we finished the add todo feature, cool!

Create close todo feature

It’s the last feature we are not complete. To make it happen just back to TodoAdapter, modify onBindViewHolder as below:

	@Override
	public void onBindViewHolder(final ViewHolder inViewHolder, final int inPosition) {
	final Todo item = this.mStore.getItem(inPosition);

	// bind data into item view of RecyclerView
	inViewHolder.title.setText(item.title);
	if (item.closed) {
	inViewHolder.title.setPaintFlags(
	inViewHolder.title.getPaintFlags() \| Paint.STRIKE_THRU_TEXT_FLAG);
	} else {
	inViewHolder.title.setPaintFlags(
	inViewHolder.title.getPaintFlags() & (~ Paint.STRIKE_THRU_TEXT_FLAG));
	}
	inViewHolder.dueDate.setText(item.dueDate);
	inViewHolder.memo.setText(item.memo);
	inViewHolder.closed.setOnCheckedChangeListener(null);
	inViewHolder.closed.setChecked(item.closed);
	inViewHolder.closed.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
	@Override
	public void onCheckedChanged(final CompoundButton inButtonView, final boolean inIsChecked) {
	item.closed = inIsChecked;
	FluxContext.getInstance()
	.getActionCreator()
	.sendRequestAsync(TODO_CLOSE, item);
	}
	});
	}

view raw onBindViewHolder.java hosted with ❤ by GitHub

Run the test, you will find all the cases passed. All done, have fun!

Bugs will find a way

Share experiences of software development.

2016/11/16

A Tutorial for FluxJava