Android Phone and Tablet Recycler Views Tutorial

As Head of Mobile R&D in Seeking Alpha I’m being asked constantly by developers and product managers alike if we can implement a feature on both the phone and the tablet.
For example, here is the Seeking Alpha Android application showing the portfolio page on a phone and on a tablet:

Seeking Alpha's Android app - phone

Seeking Alpha’s Android app – phone

Seeking Alpha's Android app - tablet

Seeking Alpha’s Android app – tablet

Continue reading

How I Found A Job With Node + Angular, Part 6: Going Production

The previous post in this series was almost a year and a half ago. A lot has happened in this time. The tension took some 2 months to resolve, and the new job that I got demanded some attention. I know I promised to enhance the mapping functionality and show some filtering tricks, but I decided to write this post about deploying the app to a production server, and share my findings with you.

For the production server, I choose to go with DigitalOcean. You can read here about some of the reasons behind this decision. To get started, you should create you’re account with DigitalOcean, and when you are ready to start your droplet, you are presented with a lot of pre-built stacks to choose from:

digital-ocean-stacksI choose the node stack and the weakest server possible (5$/month). With a sign in coupon of 10$ you get 2 months of server usage for free. Continue reading

Mobile Development In The Year 2002

mobile-world-001No this is not a mistake. It is not supposed to be 2022, and this is not a futuristic post about how mobile development will look a few years from now. It is about how we developed applications back then, in 2002. I found this magazine in a pile of old papers I was about to throw to the recycling bin, and suddenly it hit me – I wrote this piece on how to develop mobile apps more than 13 years ago! So it is a visit down nostalgia lane, bringing long forgotten memories from what seems to be now a tons of technological generations ago. Continue reading

Android Dependency Assassin – Part 1: Butter Knife

A good knife man know his tools. The dagger is sharp and fierce while the butter knife is blunt and mellow. The sword is noble and swift while the Swiss army knife is handy and quick.

This post series will focus on reducing dependencies in Android application development using dependency injections frameworks. In the first post I’ll discuss the Butter Knife framework.

How many time have you found yourself writing over and over again the same boilerplate code for handling views in your UI classes (Activity or Fragment)? Something like that:

public class MyActivity extends Activity {
    TextView mDoSomethingView;
    ListView mDoSomethingElseView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        ...
        mDoSomethingView = (TextView) findViewById(R.id.expandable_text);
        mDoSomethingView.setOnClickListener(new DoSomethingClickListener());
        ...
        mDoSomethingElseView = (ListView) findViewById(R.id.list_item);
        mDoSomethingElseView.setOnClickListener(new DoSomethingClickListener());
        ...
    }

    ...

    public class DoSomethingClickListener implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            // Hey, we're doing something!!!
            ...
        }
    }

    public class DoSomethingElseClickListener implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            // Hey, we're doing something else!!!
            ...
        }
    }

}

butterknifeButter knife enables you to “inject” the views and event callback or listener easily, without having to repeat the boilerplate code over and over again. Strictly speaking it will not actually inject the views, but will generate the boilerplate code for you behind the scene (this why we labeled it “injection” above). With butter knife the above sample will be reduced to the following:

public class MyActivity extends Activity {
    @InjectView(R.id.do_something) TextView mDoSomethingView;
    @InjectView(R.id.do_something_else) ListView mDoSomethingElseView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        ButterKnife.inject(this);
        ...
    }

    ...

    @OnClick(R.id.do_something)
    public void imDoingSomething(TextView doer) {
        // Hey, we're doing something!!!
        ...
    }

    @OnClick(R.id.do_something_else)
    public void imDoingAnotherThing(ListView anotherDoer) {
        // Hey, we're doing something else!!!
        ...
    }


}

Much shorter, cleaner, readable and maintainable code.
Butter knife doesn’t use reflections. Instead it generate the boilerplate code in compile time and use it in run time, so it is fully debug-able and visible for you.

There are other view injection frameworks that will do what Butter knife is doing, such as RoboGuice, Android Annotations and more. Each has its pros and cons. Search the internet for comparisons (like this one, or this) and select the one that fits you best.

It is beyond the scope of this post to explain the benefits of dependency injection in software development, such as loose coupling, inversion of control and more. I encourage you to read more on this to understand the value of dependency injection.

In the next post I will discuss Dagger. Stay tuned.

The Tale Of Daddy And The Gator In The Ocean

Since the internet was having it’s first days of public appearance, I realized the importance of the changes it will bring. So from the early 90s I had some sort of a personal web site presence at all times.ophir-tripod
In the beginning it was a simple personal web site hosted on some free web hosting provider. The ones that I recall now are the late GeoCities (and this was the original url), Tripod (with this url or this one) and Batcave.

Continue reading

Event Inheritance in EventBus

If you are not using pub/sub framework for your Android client, this post is not for you. But then again, if you are a mobile developer you should ask yourself why your mobile clients applications aren’t using pub/sub framework? This deserve a separate post that will explain the benefits of such architecture. If you are into pub/sub for Android clients you are probably using Otto or EventBus.
EventBusSome of my team were using EventBus and encountered a weird event dispatch situation: some subscribers would get multiple invocations for a single event post.
The code could be simplified to the following sample:

public class MyActivity extends Activity {
   ...
   public class BaseEvent {}
   public class DerivedEvent extends BaseEvent {}
   ...
   @Override
   public void onStart() {
      super.onStart();
      EventBus.getDefault().register(this);
   }

   @Override
   public void onStop() {
      EventBus.getDefault().unregister(this);
      super.onStop();
   }

   public void onEvent(BaseEvent event) {
      // Handle base event
   }

   public void onEvent(DerivedEvent event) {
      // Handle derived event
   }
   ...
}

One could argue the need for inheritance in the events object. If you use EventBus extensively, you will learn that you need a lot of event objects to replace all those listeners that infested your code before you used EventBus. Usually, you will have a lot of events but some of them need to pass the same information to the subscriber (say a String or a List). Writing the boilerplate code for instantiation and getters/setters for each separate event class could be time consuming, and error prone:

public class Evnet1 {
   private final String foo;
   public Event1(String bar) {
      this.foo = bar;
   }
   public String getFoo() {
      return foo;
   }
}

Now imagine repeating this for Event2 to Event100. Not a lovely though, isn’t it?
We would rather have Event2 to Event100 extend Event1 and that’s all. This was the base idea of the code sample presented above for MyActivity.
Now somewhere else in your code there will be a publisher that will do this:

...
EventBus.getDefault().post(new DerivedEvent());
...

And for some reason both onEvent methods in MyActivity will be called! WTF? If you dig into EventBus internals, you will understand why this happens (If you don’t understand this drop me a line). So does it mean we can’t use event inheritance with EventBus? Absolutely not!! The solution is simple: don’t ever subscribe to base event object. This will solve all your problems. i.e.:

...
public abstract class BaseEvent() {}
public final class DerivedEvent1() {}
public final class DerivedEvent2() {}
@Override
public void onEvent(DerivedEvent1 event) {
   // Do something with the event, what you normally intended for the base
   // event in the previous sample
}
@Override
public void onEvent(DerivedEvent2 event) {
   // Do something with the event, as it was the DerivedEvent from the
   // previous sample
}
...

Now if you fire the DerivedEvent2:

EventBus.getDefault().post(new DerivedEvent2());

Only the event handle for this event (line 11) will be called.

To prevent inheriting the derived events, label the classes final, and to prevent instantiating the base event classes label them abstract.

How I Found A Job With Node + Angular, Part 5: Mind The Map

In this post I would like to start adding some mapping functionality to our application. As always, there are a lot of different ways to achieve this goal, but I have chosen to go with Google Maps as the mapping solution provider, because of their clean and simple API, the visualization layers, and frankly – because I have used it in the past and know it a little bit. Even with that decided – there still a lot of ways to incorporate the Google Map in our application. Let’s try an Angular add-on that will aBowerdd Google Maps directives to Angular. It is called Google Maps for AngularJS, and before we can use it, let’s install another package and dependency manager that will ease the add-on installation – Bower. You can install it yourself by placing the add-on JS in your js sub folder, but you will need to install some dependencies as well (lodash in this case). Bower packages will be placed under the “bower_components” sub folder.

> npm install -g bower
...
> bower install angular-google-maps

After the packages are installed, you can reference them directly from the install folders:
bower-packages Continue reading

How I Found A Job With Node + Angular, Part 4: Strap The Boot

In the previous posts we learned some Node.JS (and express) basics, incorporated CouchDB as our database and used some Angular.JS code to present our list of jobs.

But the final result we got is not a pretty sight, and not very usable or friendly. Those who know me, agree that I’m not that strong in UI desigbootstrapn or implementation, so to make our application prettier and more usable, let’s use some framework for that. There are a lots of frameworks out there, but I had my eye on Bootstrap. Maybe it’s my strong mobile orientation, maybe the ease of use or maybe it’s just one of the frameworks I encountered first. In any case, I like the thinking of Bootstrap makers, I like that it is a remarkable responsive UI framework, and that it is fairly easy to us. So you can download Bootstrap from here, and lets make some changes to our application, using Bootstrap styles:

<html ng-app="geojob">
<head>
  <title>GeoJob Finder - Bootstrap GeoJob</title>
  <link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" href="css/geojob.css" />
</head>
<body>
  <section class="container"  ng-controller="JobsController">
    <div class="header"><h1>GeoJob Finder <small>Bootstrap GeoJob</small></h1></div>
    We have a total of: {{jobs.total_rows}} jobs
    <div class="list-group">
      <a href="#" class="list-group-item" ng-repeat="job in jobs.rows">{{job.key}}</a>
    </div>
  </section>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/geojob-app.js"></script>
</body>
</html>

Continue reading

How I Found A Job With Node + Angular, Part 3: The Angular Angle

In the first post, I explained my frustration about seeking possible close (geographically) and awesome future employers. I started my journey towards geo aware job finding application by discussing Node.JS basics. In the previous post we added some database functionality with CouchDB.jquery

Now it is time to start showing some UI, to display the jobs stored in our database. There are many modern UI/Web frameworks that can do the job. My favorites are jQuery (mainly because of jQuery mobile anjquery-mobiled me being mobile oriented) and Angular.JS. I’ve chosen Angular for this tutorial. Download and install the Angular files. I would also recommend the excelleAngularJS-largent Angular free tutorial to get you started with basic Angular concepts.

Continue reading