I'm Building Taskito
I'm Building Taskito

Taskito offers simple and intuitive tools to organize your daily tasks and to-do list. It combines features of project management software with productivity and time management tools. Try it out now!

Get it on Google Play Download on the App Store

Using Events in Litho

on Android

This is the fourth post in the series - Exploring Litho. In the first post - Android GIF search engine with Litho, we explored some key aspects of Litho - LayoutSpec, MountSpec, Use Glide to load images, Update RecyclerView data, etc. In the second post - Managing State in Litho, we dabbled around with state in Litho components. In the third post - Navigation with Litho, we used LithoView and components to navigate instead of an Acitivity or a Fragment. If you’re not familiar with Litho, I would suggest you to go through the previous posts.

In this small post, we will explore Litho’s Events API and different uses of it. We have been using callback interface to send events from components to MainActivity. eg. GifCallback. This interface has two methods

  1. onGifLiked(String gifId, boolean isLiked);
  2. onGifSelected(GifItem gif);

We’ll explore how Events work and replace this callback interface usage with Events.

Events

Litho provides a general purpose API to connect components through events. We can use a POJO annotated with @Event as an event class. Let’s write an event class for when the user clicks on like button.

For Litho to use the event class, the variables must be declared public.

We’ll also add an event class for when the user clicks on a GIF.

GifSelectEvent is used when the user clicks on a GIF (GifItemView component).

Let’s integreate these events in GifItemView component.

You can find complete code here - GifItemViewSpec.

For the component to dispatch an event, we need to add the event class in annotation - @LayoutSpec(events = { LikeChangeEvent.class }). We can provide multiple events also. Once we have annotated it with the event, Litho will regenerate GifItemView component and add necessary code to dispatch the event.

We’ll have dispatchLikeChangeEvent static method generated using which we can send the event and the required parameters. Litho also generates a static method - getLikeChangeEventHandler. To dispatch an event, we need to provide an EventHandler.

EventHandler

EventHandler is a generic class which uses HasEventDispatcher interface to dispatch events.

HasEventDispatcher

HasEventDispatcher is an interface to expose method to retrieve and EventDispatcher. I think it’s a weird name.

EventDispatcher

EventDispatcher is an interface to expose method to dispatch an Event.

dispatchLikeChangeEvent method calls EventHandler to get an EventDispatcher via HasEventDispatcher. Once it acquires an EventDispatcher, it calls EventDispatcher.dispatchOnEvent(EventHandler, eventState). So to recieve this event, we need to create an EventHandler instance.

We need to pass this EventHandler to GifItemView component via builder. If we have defined an event to be sent by a component, it is necessary for us to pass an EventHandler via builder. While creating an EventHandler we need to pass an id and Object[]. Due to lack of documentation, I don’t know where these things are used.

Note: Litho is completely context aware and each component has its own context and context is also bound to component. So to get events, send events, update state values, we need to right context!

Let’s hook up these events in our MainActivity and replace callbacks.

As mentioned above, we need to pass the event handler in builder while creating components. For EventHandler id, you can have the same id as it does not seem to make any difference. This would be more clear once some docs are available. We need to update FullScreenComponentSpec also.

You can find complete code here - MainAcitivity and FullScreenComponentSpec.

We have removed callback interfaces and using EventHandler so that components can send events to MainActivity.

Code

You can find current code here - LithoGifDemo - v5-events

You can find the latest code (keeps updating) here - LithoGifDemo

In the next post, we will explore how we can use events to connect different components and synchronize states. Till now, our states are not synchronized and we will use events to update states.

P.S. Litho is a bit complicated to understand but it does solve a lot of issues and most specifically the state and props are immutable.

Series

  1. Android GIF search engine with Litho
  2. Managing State in Litho
  3. Navigation with Litho
  4. Events with Litho
  5. Synchronizing state between different components

Litho - Facebook's declarative UI framework

Explore Facebook's brilliant UI framework through the journey of making an android app to search GIFs. Build your own app with Litho as we analyze Litho and learn about its Components, State, Navigation, Events and synchronization.

Read next