Networking with JSON and Java

index.html

<input data-bind="value: user, valueUpdate: 'afterkeydown'"
  placeholder="Your own ID?">
</input> 
<input type="submit" data-bind="click: addToList, enable: validUser" value="Add!">


<h3>
Code Snippets for 
  <select 
    data-bind="options: names, value: current, optionsCaption: 'Select real ID!'">
  </select>
</h3>

<!-- iterate through list of Gists and show their id and description -->
<ul data-bind="foreach: gists">
  <li>
    <span data-bind="text: id"></span> -
    <a data-bind="attr: { href: html_url }, text: description" target="gists"></a>
      - try as a <a data-bind="attr: { href: dew_url }" target="_blank">Dew</a>
  </li>
</ul>

ListGists.java

package dew.demo.gists;

import java.util.Arrays;
import net.java.html.json.*;

@Model(className="UI", properties={
  @Property(name="user",type=String.class),
  @Property(name="current",type=String.class),
  @Property(name="names", type=String.class, array = true),
  @Property(name="gists",type=Gist.class, array = true)
})
class ListGists {
  /** Generates class Gist which is a Java representation
  * of appropriate JSON object send from the server.
  */
  @Model(className="Gist", properties={
    @Property(name="id", type=String.class),
    @Property(name="url", type=String.class),
    @Property(name="html_url", type=String.class),
    @Property(name="description", type=String.class)
  })
  static class GistImpl {
    @ComputedProperty static String dew_url(String id) {
      return "http://dew.apidesign.org/dew/#" + id;
    }
  }
  
  @ComputedProperty static boolean validUser(String user) {
    return user != null && !user.isEmpty();
  }
  
  /** Generates method <b>gists</b> into the associated model
  * class UI which connects to here in specified URL, obtains
  * results (asynchronously) and when list of gists is here,
  * calls back to this method.
  */
  @OnReceive(url = "https://api.github.com/users/{user}/gists")
  static void gists(UI ui, Gist[] gists) {
    // replace list of gists with new list
    ui.getGists().clear();
    ui.getGists().addAll(Arrays.asList(gists));
  }
  
  @Function static void addToList(UI model) {
    // when Add! button is pressed
    model.getNames().add(0, model.getUser());
    model.setCurrent(model.getUser());
    model.setUser(null);
  }  
  
  @OnPropertyChange("current")
  static void computeGists(UI model) {
    // when current user is changed
    // query for gists of specified user
    if (model.getCurrent() != null) {
      model.gists(model.getCurrent());
    }
  }
  
  static {
    UI m = new UI(null, null,
      "jtulach", "tmysik", "ivargrimstad",
      "rosvit", "eppleton"
    );
    m.applyBindings();
  }
}

See the live snippet by visiting its DEW at http://dew.apidesign.org/dew/#7138581

It no longer works, throws NPE. 😢

It does. Alas, you have to "Run" it twice. I am sorry.