1. Creating a Netflix Clone
V
We’re finally at the client side which is also pretty simple, this time we’ll start with the model and move to the UI rather than the other direction which is what we normally
cover.
3. codenameone.com github.com/codenameone/CodenameOne
Client Model
We’re starting with the model side not the UI
It’s a direct continuation of the server work
We use property business objects for the networking/JSON code
We’re finally at the client side which is also pretty simple, this time we’ll start with the model and move to the UI rather than the other direction which is what we normally
cover.
Since we did the server work first this fits pretty directly after that which makes it easier to start with that portion.
The model is pretty much property business objects to match the Lombok objects in the server side. While some of the terse aspects of Lombok are missed properties
make up for it by being far more powerful overall.
4. public class Server {
private static final String SERVER_URL = "http://localhost:8080/";
public static void fetchContent(OnComplete<ContentCollection> fetch) {
Rest.get(SERVER_URL + "video/list").
jsonContent().fetchAsProperties(callback -> {
fetch.completed((ContentCollection)callback.getResponseData());
}, ContentCollection.class);
}
}
Source Listing - Server
codenameone.com github.com/codenameone/CodenameOne
We start with the server class which abstracts our connection to the server.
Since we have one method in the server web service this is continued here. We fetch the content from the server asynchronously using the Rest API. This API translates
the response to JSON almost seamlessly
5. public class Server {
private static final String SERVER_URL = "http://localhost:8080/";
public static void fetchContent(OnComplete<ContentCollection> fetch) {
Rest.get(SERVER_URL + "video/list").
jsonContent().fetchAsProperties(callback -> {
fetch.completed((ContentCollection)callback.getResponseData());
}, ContentCollection.class);
}
}
Source Listing - Server
codenameone.com github.com/codenameone/CodenameOne
We say that the response should be in the form of the ContentCollection class. This means the JSON will be parsed into that class which we’ll examine next
6. public class ContentCollection implements PropertyBusinessObject {
public final Property<Content, ContentCollection> lead =
new Property<>("lead", Content.class);
public final ListProperty<Content, ContentCollection> popular =
new ListProperty<>("popular", Content.class);
public final ListProperty<Content, ContentCollection> myList =
new ListProperty<>("myList", Content.class);
public final ListProperty<Content, ContentCollection> recommended =
new ListProperty<>("recommended", Content.class);
private PropertyIndex idx = new PropertyIndex(this,
"ContentCollection", lead, popular, myList, recommended);
@Override
public PropertyIndex getPropertyIndex() {
return idx;
}
}
Source Listing - ContentCollection
codenameone.com github.com/codenameone/CodenameOne
The content collection is a standard property business object. It maps almost directly to the class with the same name on the server side. The main difference is that the
properties use our object syntax.
7. public class ContentCollection implements PropertyBusinessObject {
public final Property<Content, ContentCollection> lead =
new Property<>("lead", Content.class);
public final ListProperty<Content, ContentCollection> popular =
new ListProperty<>("popular", Content.class);
public final ListProperty<Content, ContentCollection> myList =
new ListProperty<>("myList", Content.class);
public final ListProperty<Content, ContentCollection> recommended =
new ListProperty<>("recommended", Content.class);
private PropertyIndex idx = new PropertyIndex(this,
"ContentCollection", lead, popular, myList, recommended);
@Override
public PropertyIndex getPropertyIndex() {
return idx;
}
}
Source Listing - ContentCollection
codenameone.com github.com/codenameone/CodenameOne
These match their definition in the server side and include the exact same data. The entire class is a pretty standard property business object.
8. public class Content implements PropertyBusinessObject {
public final Property<String, Content> id = new Property<>("id");
public final Property<EncodedImage, Content> heroImage = new Property<>("heroImage", EncodedImage.class);
public final Property<EncodedImage, Content> icon = new Property<>("icon", EncodedImage.class);
public final Property<EncodedImage, Content> logo = new Property<>("logo", EncodedImage.class);
public final Property<String, Content> name = new Property<>("name");
public final Property<String, Content> description = new Property<>("description");
public final MapProperty<String, String, Content> videoUrls = new MapProperty<>("videoUrls", String.class, String.class);
private final PropertyIndex idx = new PropertyIndex(this, "Content", id, heroImage, icon, logo, name, description, videoUrls);
@Override
public PropertyIndex getPropertyIndex() {
return idx;
}
}
Source Listing - Content
codenameone.com github.com/codenameone/CodenameOne
Finally the last properties object we have is the content object which is the same as the one in the server
9. public enum VideoQuality {
NONE,
LOW,
MEDIUM,
HIGH
}
Source Listing - ContentCollection
codenameone.com github.com/codenameone/CodenameOne
The final piece is the enum that matches the one in the server. With that our communication layer is complete and we can move on to the UI elements