Data Binding – Part 5

转载 2015年11月17日 17:34:11


Styling Android

A technical guide to improving the UI and UX of Android apps

Skip to content

Data Binding – Part 5

At Google I/O 2015 a number of new Android libraries and tools were announced. One of them was the all new Data Binding library and in this series we’ll take a look at the library and explore some of the powerful features it provides.

We’ve covered some pretty useful aspects of Data Binding so far but there is a feature that makes it even more powerful still: Observables.

Observables are really useful when it comes to data which may change over time. To demonstrate this let’s pretend that the Twitter API does not actually return the quoted status within the twitter4j.Status object and we need to perform a separate network call to retrieve it (Twitter doesn’t work like this, but indluge me!). It would not make sense to fetch these up-front, we should only retrieve those that the user wants to retrieve by tapping on the quoted status. We wired the click handler previously – so we would then need to retrieve the quoted status and then update the UI once it was retrieved.

Observables remove the need for us to have to refresh the UI manually when the underlying data changes. As the name suggests an Observable can be observed by another component and that component will receive a callback whenever the Observable changes.

While we can make the entire ModelView class an Observable we can also make individual fileds Observable for use-cases where only a part of the data is likely to change.

Let’s extend our ModelView class to add an additional field plus some methods whihc will allow us to change it:

We already created the field representing the quoted status and we used this previously to enable us to only display the quoted text box when the item has a quoted status, but we didn’t actually expose the quoted status data itself.

Next we’l change our click handler to toggle the contents of the Observable between set and null. If we did actually have to perform a network call here we would initiate it, update the UI to indicate a loading state, and then wait. When the network call completed we’d simply update the contents of the Observable.

Finally we’ll add the additional Views required to display the quoted status. These are pretty much identical to the ones we already have to display the main status – they are just bound to the values within the Observable instead. We also have some visibility bindings to toggle the visibility based on whether the Observable contains data or a null .data.Status object:

That’s it – we don’t need to do anything more. The UI will automatically update whenever theObservable changes:

That completes our basic overview of the new Data Binding library. I must confess that I was initially skeptical when the Data Binding was announced as it immediately reminded me of JSP (and I still have the emotional scars from developing those). It is for this reason that I advocate keeping the actual logic outside of the layout files as much as possible. However having had a play with it for this series I am pleasantly surprised and it seems to do an awful lot right. Once it exits beta, I would certainly consider using it on commercial projects.

The source code for this article is available here.

© 2015, Mark Allison. All rights reserved. This article originally appeared on Styling Android.

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License

Share

CC BY-NC-SA 4.0 
Data Binding – Part 5 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at http://blog.stylingandroid.com/license-information.

2 thoughts on “Data Binding – Part 5

  1. Albert Braun

    Thanks for highlighting and explaining the observable feature of data binding. (It’s yet another aspect of data binding I had no clue about.)

    Also, thanks for offering optimism on the general viability and quality of data binding. I want to believe (but, as we all know too well, sometimes a new Android SDK feature doesn’t quite merit our confidence…)

    Reply 
  2. Amit

    Hello

    Nice tutorial.

    I am also trying to implement data binding concept. I would like to fetch the value form model which contain list of another model and want value from that.
    for e.x.
    Lets say Status model has one property arrayList , image contain Url and image name and i am passing status model to my xml layout. so how can i get value from arraylist of Images.

    Please help me out. I am stuck with this.

    Reply 

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA Image
Refresh Image

*

 

 

<iframe name="oauth2relay596121036" id="oauth2relay596121036" src="https://accounts.google.com/o/oauth2/postmessageRelay?parent=https%3A%2F%2Fblog.stylingandroid.com#rpctoken=479104353&amp;forcesecure=1" tabindex="-1" style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; font-size: 14px; vertical-align: baseline; max-width: 100%; color: rgb(68, 68, 68); font-family: 'Open Sans', Helvetica, Arial, sans-serif; line-height: 14px; width: 1px; height: 1px; position: absolute; top: -100px;"></iframe>

Styling Android

A technical guide to improving the UI and UX of Android apps

Skip to content

Data Binding – Part 5

At Google I/O 2015 a number of new Android libraries and tools were announced. One of them was the all new Data Binding library and in this series we’ll take a look at the library and explore some of the powerful features it provides.

We’ve covered some pretty useful aspects of Data Binding so far but there is a feature that makes it even more powerful still: Observables.

Observables are really useful when it comes to data which may change over time. To demonstrate this let’s pretend that the Twitter API does not actually return the quoted status within the twitter4j.Status object and we need to perform a separate network call to retrieve it (Twitter doesn’t work like this, but indluge me!). It would not make sense to fetch these up-front, we should only retrieve those that the user wants to retrieve by tapping on the quoted status. We wired the click handler previously – so we would then need to retrieve the quoted status and then update the UI once it was retrieved.

Observables remove the need for us to have to refresh the UI manually when the underlying data changes. As the name suggests an Observable can be observed by another component and that component will receive a callback whenever the Observable changes.

While we can make the entire ModelView class an Observable we can also make individual fileds Observable for use-cases where only a part of the data is likely to change.

Let’s extend our ModelView class to add an additional field plus some methods whihc will allow us to change it:

We already created the field representing the quoted status and we used this previously to enable us to only display the quoted text box when the item has a quoted status, but we didn’t actually expose the quoted status data itself.

Next we’l change our click handler to toggle the contents of the Observable between set and null. If we did actually have to perform a network call here we would initiate it, update the UI to indicate a loading state, and then wait. When the network call completed we’d simply update the contents of the Observable.

Finally we’ll add the additional Views required to display the quoted status. These are pretty much identical to the ones we already have to display the main status – they are just bound to the values within the Observable instead. We also have some visibility bindings to toggle the visibility based on whether the Observable contains data or a null .data.Status object:

That’s it – we don’t need to do anything more. The UI will automatically update whenever theObservable changes:

That completes our basic overview of the new Data Binding library. I must confess that I was initially skeptical when the Data Binding was announced as it immediately reminded me of JSP (and I still have the emotional scars from developing those). It is for this reason that I advocate keeping the actual logic outside of the layout files as much as possible. However having had a play with it for this series I am pleasantly surprised and it seems to do an awful lot right. Once it exits beta, I would certainly consider using it on commercial projects.

The source code for this article is available here.

© 2015, Mark Allison. All rights reserved. This article originally appeared on Styling Android.

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License

Share

CC BY-NC-SA 4.0 
Data Binding – Part 5 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at http://blog.stylingandroid.com/license-information.

2 thoughts on “Data Binding – Part 5

  1. Albert Braun

    Thanks for highlighting and explaining the observable feature of data binding. (It’s yet another aspect of data binding I had no clue about.)

    Also, thanks for offering optimism on the general viability and quality of data binding. I want to believe (but, as we all know too well, sometimes a new Android SDK feature doesn’t quite merit our confidence…)

    Reply 
  2. Amit

    Hello

    Nice tutorial.

    I am also trying to implement data binding concept. I would like to fetch the value form model which contain list of another model and want value from that.
    for e.x.
    Lets say Status model has one property arrayList , image contain Url and image name and i am passing status model to my xml layout. so how can i get value from arraylist of Images.

    Please help me out. I am stuck with this.

    Reply 

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA Image
Refresh Image

*

 

 

<iframe name="oauth2relay596121036" id="oauth2relay596121036" src="https://accounts.google.com/o/oauth2/postmessageRelay?parent=https%3A%2F%2Fblog.stylingandroid.com#rpctoken=479104353&amp;forcesecure=1" tabindex="-1" style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; font-size: 14px; vertical-align: baseline; max-width: 100%; color: rgb(68, 68, 68); font-family: 'Open Sans', Helvetica, Arial, sans-serif; line-height: 14px; width: 1px; height: 1px; position: absolute; top: -100px;"></iframe>
阅读全文

Android Data Binding Library 官方文档(译)

Data Binding Library (数据绑定库),旨在减少绑定应用程序逻辑和布局所需的一些耦合性代码 最低支持Android 2.1 (API Level 7)...
  • jjwwmlp456
  • jjwwmlp456
  • 2017年02月07日 21:01
  • 2199

Data Binding 从入门到精通

原文出自:http://blog.csdn.net/xx326664162/article/details/62048543 薛瑄的博客虽然官方给出了教程,Data Binding Library(...
  • xx326664162
  • xx326664162
  • 2017年03月15日 19:06
  • 2730

Jackson应用一 Simple data binding

Jackson 是一个高性能的JSON Java 库,网址参考:http://wiki.fasterxml.com/JacksonHome先看看最简单的Simple data binding怎么使用。...
  • sheismylife
  • sheismylife
  • 2012年04月06日 10:23
  • 8102

Data binding的使用(二)-----事件的绑定监听

上一篇文章Data binding的使用(一)讲了一些基础的关于如何开始使用Data Binding做了一些介绍,这篇文章继续讲解使用Data Binding的一些其他操作,比如点击事件,或者监听对象...
  • xiaxiayige
  • xiaxiayige
  • 2017年04月12日 16:29
  • 1547

Data Binding 的使用之一:简单的数据绑定

android中Data Binding的简单使用
  • yeah0126
  • yeah0126
  • 2017年02月06日 17:00
  • 793

Android Data Binding实战(一)

在今年Google I/O大会上,Google推出Design Library库的同时也推出了Android Data Binding,那么什么是Data Binding?其名曰数据绑定,使用它我们可...
  • u010687392
  • u010687392
  • 2015年08月05日 16:07
  • 3191

Caliburn Micro Part 2: Data Binding and Events

In my previous blog post I showed you how to get started with using the Caliburn Micro Framework i...
  • NarutoInspire
  • NarutoInspire
  • 2015年08月24日 15:35
  • 352

Android Data Binding 技术

Data Binding即数据绑定,Data Binding 库实现在布局文件中实现数据绑定申明,使数据的变化引起视图的自动更新,减少了逻辑代码,在Android中可以很方便的实现MVVM的开发模式。...
  • jmq_0000
  • jmq_0000
  • 2015年06月28日 00:21
  • 8330

Data Binding(数据绑定)---学习笔记

使用前提 添加Data Binding 到gradle构建文件里 android { .... dataBinding { enabled = true ...
  • AxtonSun
  • AxtonSun
  • 2016年09月23日 19:27
  • 493

为什么会出现警告:Data binding will not be able to detect assignments to “**”

当我们做类的绑定时,有可能会出现Data binding will not be able to detect  assignments to 的错误,为什么呢?首先我们了解一下FLEX编译文件的步骤...
  • lucifish
  • lucifish
  • 2010年05月17日 15:20
  • 1644