SlideShare a Scribd company logo
1 of 12
Download to read offline
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.
codenameone.com github.com/codenameone/CodenameOne
Client Model
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.
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.
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
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
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.
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.
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
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
codenameone.com github.com/codenameone/CodenameOne
Thank You
Thanks for watching I hope you’ll enjoy the rest of the course and find it educational
Thank You
Thanks for watching I hope you’ll enjoy the rest of the course and find it educational
Thanks for watching I hope you’ll enjoy the rest of the course and find it educational

More Related Content

More from ShaiAlmog1

create-netflix-clone-04-server-continued.pdf
create-netflix-clone-04-server-continued.pdfcreate-netflix-clone-04-server-continued.pdf
create-netflix-clone-04-server-continued.pdfShaiAlmog1
 
create-netflix-clone-03-server_transcript.pdf
create-netflix-clone-03-server_transcript.pdfcreate-netflix-clone-03-server_transcript.pdf
create-netflix-clone-03-server_transcript.pdfShaiAlmog1
 
create-netflix-clone-02-server.pdf
create-netflix-clone-02-server.pdfcreate-netflix-clone-02-server.pdf
create-netflix-clone-02-server.pdfShaiAlmog1
 
create-netflix-clone-05-client-model.pdf
create-netflix-clone-05-client-model.pdfcreate-netflix-clone-05-client-model.pdf
create-netflix-clone-05-client-model.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part II.pdf
Creating a Whatsapp Clone - Part II.pdfCreating a Whatsapp Clone - Part II.pdf
Creating a Whatsapp Clone - Part II.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part IX - Transcript.pdf
Creating a Whatsapp Clone - Part IX - Transcript.pdfCreating a Whatsapp Clone - Part IX - Transcript.pdf
Creating a Whatsapp Clone - Part IX - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part II - Transcript.pdf
Creating a Whatsapp Clone - Part II - Transcript.pdfCreating a Whatsapp Clone - Part II - Transcript.pdf
Creating a Whatsapp Clone - Part II - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part V - Transcript.pdf
Creating a Whatsapp Clone - Part V - Transcript.pdfCreating a Whatsapp Clone - Part V - Transcript.pdf
Creating a Whatsapp Clone - Part V - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part IV - Transcript.pdf
Creating a Whatsapp Clone - Part IV - Transcript.pdfCreating a Whatsapp Clone - Part IV - Transcript.pdf
Creating a Whatsapp Clone - Part IV - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part IV.pdf
Creating a Whatsapp Clone - Part IV.pdfCreating a Whatsapp Clone - Part IV.pdf
Creating a Whatsapp Clone - Part IV.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part I - Transcript.pdf
Creating a Whatsapp Clone - Part I - Transcript.pdfCreating a Whatsapp Clone - Part I - Transcript.pdf
Creating a Whatsapp Clone - Part I - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part IX.pdf
Creating a Whatsapp Clone - Part IX.pdfCreating a Whatsapp Clone - Part IX.pdf
Creating a Whatsapp Clone - Part IX.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part VI.pdf
Creating a Whatsapp Clone - Part VI.pdfCreating a Whatsapp Clone - Part VI.pdf
Creating a Whatsapp Clone - Part VI.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part III - Transcript.pdf
Creating a Whatsapp Clone - Part III - Transcript.pdfCreating a Whatsapp Clone - Part III - Transcript.pdf
Creating a Whatsapp Clone - Part III - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part XI - Transcript.pdf
Creating a Whatsapp Clone - Part XI - Transcript.pdfCreating a Whatsapp Clone - Part XI - Transcript.pdf
Creating a Whatsapp Clone - Part XI - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part VII.pdf
Creating a Whatsapp Clone - Part VII.pdfCreating a Whatsapp Clone - Part VII.pdf
Creating a Whatsapp Clone - Part VII.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part XIII - Transcript.pdf
Creating a Whatsapp Clone - Part XIII - Transcript.pdfCreating a Whatsapp Clone - Part XIII - Transcript.pdf
Creating a Whatsapp Clone - Part XIII - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part V.pdf
Creating a Whatsapp Clone - Part V.pdfCreating a Whatsapp Clone - Part V.pdf
Creating a Whatsapp Clone - Part V.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part X - Transcript.pdf
Creating a Whatsapp Clone - Part X - Transcript.pdfCreating a Whatsapp Clone - Part X - Transcript.pdf
Creating a Whatsapp Clone - Part X - Transcript.pdfShaiAlmog1
 
Creating a Whatsapp Clone - Part X.pdf
Creating a Whatsapp Clone - Part X.pdfCreating a Whatsapp Clone - Part X.pdf
Creating a Whatsapp Clone - Part X.pdfShaiAlmog1
 

More from ShaiAlmog1 (20)

create-netflix-clone-04-server-continued.pdf
create-netflix-clone-04-server-continued.pdfcreate-netflix-clone-04-server-continued.pdf
create-netflix-clone-04-server-continued.pdf
 
create-netflix-clone-03-server_transcript.pdf
create-netflix-clone-03-server_transcript.pdfcreate-netflix-clone-03-server_transcript.pdf
create-netflix-clone-03-server_transcript.pdf
 
create-netflix-clone-02-server.pdf
create-netflix-clone-02-server.pdfcreate-netflix-clone-02-server.pdf
create-netflix-clone-02-server.pdf
 
create-netflix-clone-05-client-model.pdf
create-netflix-clone-05-client-model.pdfcreate-netflix-clone-05-client-model.pdf
create-netflix-clone-05-client-model.pdf
 
Creating a Whatsapp Clone - Part II.pdf
Creating a Whatsapp Clone - Part II.pdfCreating a Whatsapp Clone - Part II.pdf
Creating a Whatsapp Clone - Part II.pdf
 
Creating a Whatsapp Clone - Part IX - Transcript.pdf
Creating a Whatsapp Clone - Part IX - Transcript.pdfCreating a Whatsapp Clone - Part IX - Transcript.pdf
Creating a Whatsapp Clone - Part IX - Transcript.pdf
 
Creating a Whatsapp Clone - Part II - Transcript.pdf
Creating a Whatsapp Clone - Part II - Transcript.pdfCreating a Whatsapp Clone - Part II - Transcript.pdf
Creating a Whatsapp Clone - Part II - Transcript.pdf
 
Creating a Whatsapp Clone - Part V - Transcript.pdf
Creating a Whatsapp Clone - Part V - Transcript.pdfCreating a Whatsapp Clone - Part V - Transcript.pdf
Creating a Whatsapp Clone - Part V - Transcript.pdf
 
Creating a Whatsapp Clone - Part IV - Transcript.pdf
Creating a Whatsapp Clone - Part IV - Transcript.pdfCreating a Whatsapp Clone - Part IV - Transcript.pdf
Creating a Whatsapp Clone - Part IV - Transcript.pdf
 
Creating a Whatsapp Clone - Part IV.pdf
Creating a Whatsapp Clone - Part IV.pdfCreating a Whatsapp Clone - Part IV.pdf
Creating a Whatsapp Clone - Part IV.pdf
 
Creating a Whatsapp Clone - Part I - Transcript.pdf
Creating a Whatsapp Clone - Part I - Transcript.pdfCreating a Whatsapp Clone - Part I - Transcript.pdf
Creating a Whatsapp Clone - Part I - Transcript.pdf
 
Creating a Whatsapp Clone - Part IX.pdf
Creating a Whatsapp Clone - Part IX.pdfCreating a Whatsapp Clone - Part IX.pdf
Creating a Whatsapp Clone - Part IX.pdf
 
Creating a Whatsapp Clone - Part VI.pdf
Creating a Whatsapp Clone - Part VI.pdfCreating a Whatsapp Clone - Part VI.pdf
Creating a Whatsapp Clone - Part VI.pdf
 
Creating a Whatsapp Clone - Part III - Transcript.pdf
Creating a Whatsapp Clone - Part III - Transcript.pdfCreating a Whatsapp Clone - Part III - Transcript.pdf
Creating a Whatsapp Clone - Part III - Transcript.pdf
 
Creating a Whatsapp Clone - Part XI - Transcript.pdf
Creating a Whatsapp Clone - Part XI - Transcript.pdfCreating a Whatsapp Clone - Part XI - Transcript.pdf
Creating a Whatsapp Clone - Part XI - Transcript.pdf
 
Creating a Whatsapp Clone - Part VII.pdf
Creating a Whatsapp Clone - Part VII.pdfCreating a Whatsapp Clone - Part VII.pdf
Creating a Whatsapp Clone - Part VII.pdf
 
Creating a Whatsapp Clone - Part XIII - Transcript.pdf
Creating a Whatsapp Clone - Part XIII - Transcript.pdfCreating a Whatsapp Clone - Part XIII - Transcript.pdf
Creating a Whatsapp Clone - Part XIII - Transcript.pdf
 
Creating a Whatsapp Clone - Part V.pdf
Creating a Whatsapp Clone - Part V.pdfCreating a Whatsapp Clone - Part V.pdf
Creating a Whatsapp Clone - Part V.pdf
 
Creating a Whatsapp Clone - Part X - Transcript.pdf
Creating a Whatsapp Clone - Part X - Transcript.pdfCreating a Whatsapp Clone - Part X - Transcript.pdf
Creating a Whatsapp Clone - Part X - Transcript.pdf
 
Creating a Whatsapp Clone - Part X.pdf
Creating a Whatsapp Clone - Part X.pdfCreating a Whatsapp Clone - Part X.pdf
Creating a Whatsapp Clone - Part X.pdf
 

create-netflix-clone-05-client-model_transcript.pdf

  • 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.
  • 2. codenameone.com github.com/codenameone/CodenameOne Client Model 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
  • 10. codenameone.com github.com/codenameone/CodenameOne Thank You Thanks for watching I hope you’ll enjoy the rest of the course and find it educational
  • 11. Thank You Thanks for watching I hope you’ll enjoy the rest of the course and find it educational
  • 12. Thanks for watching I hope you’ll enjoy the rest of the course and find it educational