home.


Tagged: java


A loading spinner for XMLHTTPRequest

Take this CSS which will show a loading spinner similar to iPhone’s. It takes up the entire background, and has 0.5 transparency.

#cover {
  background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center rgba(255, 255, 255, 0.5);
  position: absolute;
  height: 100%;
  width: 100%;
}

Now place the html below your holding div <div v-show="loading" id="cover"></div>.

The v-show is vuejs saying only show it when the loading variable is true. But you can turn it on and off however you please.

Let’s turn it on and off – via this.loading=true/false – in our XMLHTTPREQUEST.

I have a very simple reactive observe, onNext and onError. But simply we turn it just before we send the request and turn it off when we receive something back.

observe: function(receiver) {
  var xhttp = new XMLHttpRequest()
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) receiver.onNext(xhttp.response)
    else if(this.readyState ==4 && this.status!=200) receiver.onError(xhttp.statusText)
  }
  xhttp.open("GET", "https://whatever", true)
  xhttp.send()
  this.loading = true
},
onNext: function(pagination) {
  this.loading = false
  ...
},
onError: function(message) {
  this.loading = false
  ...
}
css javascript vuejs

Docker: install Java8 automatically on ubuntu/debian

If you want to create a docker image with Java, then there’s a problem: it’ll ask you manually confirm that you agree to the terms and conditions.

To automatically do this, add some debconf-set-selections to your script.

So the steps are now update, install software properties utils, add the webupd8team repo, set the debconf selections, update again, install java.

apt-get update
apt-get -y install software-properties-common
add-apt-repository -y ppa:webupd8team/java
echo debconf shared/accepted-oracle-license-v1-1 select true | debconf-set-selections
echo debconf shared/accepted-oracle-license-v1-1 seen true | debconf-set-selections
apt-get update
apt-get -y install oracle-java8-installer
docker java

Android, RxJava and Retrofit: Wait for multiple network calls to finish

Say you have multiple network calls you need to make–cals to get Github user information and Github user events for example.

And you want to wait for each to return before updating the UI. RxJava can help you here.

Let’s first define our Retrofit object to access Github’s API, then setup two observables for the two network requests above:

Retrofit repo = new Retrofit.Builder()
        .baseUrl("https://api.github.com")
        .addConverterFactory(GsonConverterFactory.create())
        .addCallAdapterFactory(RxJavaCallAdapterFactory.create())
        .build();

Observable<JsonObject> userObservable = repo
        .create(GitHubUser.class)
        .getUser(loginName)
        .subscribeOn(Schedulers.newThread())
        .observeOn(AndroidSchedulers.mainThread());

Observable<JsonArray> eventsObservable = repo
        .create(GitHubEvents.class)
        .listEvents(loginName)
        .subscribeOn(Schedulers.newThread())
        .observeOn(AndroidSchedulers.mainThread());

The Retrofit interfaces are simple enough:

public interface GitHubUser {
  @GET("users/{user}")
  Observable<JsonObject> getUser(@Path("user") String user);
}

public interface GitHubEvents {
  @GET("users/{user}/events")
  Observable<JsonArray> listEvents(@Path("user") String user);
}

Lately we use RxJava’s zip method to combine our two Observables and wait for them to complete before creating a new Observable.

Observable<UserAndEvents> combined = Observable.zip(userObservable, eventsObservable, new Func2<JsonObject, JsonArray, UserAndEvents>() {
  @Override
  public UserAndEvents call(JsonObject jsonObject, JsonArray jsonElements) {
    return new UserAndEvents(jsonObject, jsonElements);
  }
});

What’s the UserAndEvents? It’s just a simple POJO to combine the two objects:

public class UserAndEvents {
  public UserAndEvents(JsonObject user, JsonArray events) {
    this.events = events;
    this.user = user;
  }

  public JsonArray events;
  public JsonObject user;
}

Finally let’s call the subscribe method on our new combined Observable:

combined.subscribe(new Subscriber<UserAndEvents>() {
          ...
          @Override
          public void onNext(UserAndEvents o) {
            // You can access the results of the 
            // two observabes via the POJO now
          }
        });

No more waiting in threads etc for network calls to finish. RxJava has done all that for you in zip().

android android-rxjava android-retrofit

Android: Retrofit 2.0 and RxJava

If you want to use all of the above buzzwords your code would look like the below.

Note I’m putting it all in one statement, for some mindless fun, rather than advocating such a practice, unless you really want to.

new Retrofit.Builder()
        .baseUrl("https://api.github.com")
        .addConverterFactory(GsonConverterFactory.create())
        .addCallAdapterFactory(RxJavaCallAdapterFactory.create())
        .build()
        .create(GitHubService.class)
        .listRepos("octocat")
        .subscribeOn(Schedulers.newThread()) // Create a new Thread
        .observeOn(AndroidSchedulers.mainThread()) // Use the UI thread
        .subscribe(new Subscriber<User>() {
          @Override public void onCompleted() { }

          @Override
          public void onError(Throwable e) {
            Log.d("HIYA", "An error!: " + e.getMessage());
          }

          @Override
          public void onNext(User user) {
            Log.d("HIYA", "So we've not got some text: " + user.avatar_url);
          }
        });

So we start by configuring retrofit, with the url, gson converster, RxJava adapter, and finally create and list the call, eventually subscribing to the Observable in a new thread, and observing it in the UI thread.

To ensure we return the an Observable, the interface is easy enough:

public interface GitHubService {
  @GET("users/{user}")
  Observable<User> listRepos(@Path("user") String user);
}

And the User is just a POJO with a public String called avatar_url.

Your gradle dependencies should look like this:

compile 'io.reactivex:rxjava:1.1.1'
compile 'io.reactivex:rxandroid:1.1.0'
compile 'com.squareup.retrofit2:retrofit:2.0.0-beta4'
compile 'com.squareup.retrofit2:converter-gson:2.0.0-beta4'
compile 'com.squareup.retrofit2:adapter-rxjava:2.0.0-beta'4
androd androd-retrofit android-rxjava

Javascript: Convert a NodeList to an Array

Unless you can use ES6–in which you can just do Array.from(nodelist).forEach()–you have to do this:

var things = document.querySelectorAll(".things");
Array.prototype.slice.call(things, 0).forEach(...

Or, if you’re a fan of line noise:

Array.prototype.slice.call(document.querySelectorAll(".things"), 0).forEach(...
javascript

Page 1 of 12
Next