SlideShare a Scribd company logo

Creating a Facebook Clone - Part XXX - Transcript.pdf

S
ShaiAlmog1

The document discusses implementing contact uploads and friend requests in a Facebook clone application. It describes creating a user interface with a Floating Action Button for uploading contacts, handling events for sending friend requests, and managing notifications. Additionally, it details necessary CSS changes for the button styling and outlines the process of fetching notifications from the server.

Technology
1 of 20
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Creating a Facebook Clone - Part XXX How do we get friends? We already implemented contact upload both in the server and the ServerAPI class. We need to map that to the UI though. Facebook nags about uploading contacts all over the place which is probably something you should do too if you are building a social network. I don't want to get into the deep level of nagging so I decided to add a FloatingActionButton to the friends container. This is a bit tricky though...
public class MainForm extends Form { private Tabs mainUI = new Tabs(); public MainForm() { super("", new BorderLayout()); mainUI.addTab("", MATERIAL_WEB, 5f, new NewsfeedContainer()); FloatingActionButton fab = FloatingActionButton.createFAB(MATERIAL_IMPORT_CONTACTS); Container friends = fab.bindFabToContainer(new FriendsContainer()); fab.addActionListener(e -> uploadContacts()); mainUI.addTab("", MATERIAL_PEOPLE_OUTLINE, 5f, friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MainForm Normally when we add a FloatingActionButton we add it to a Form. This hides some complexity, it seems like we are adding it to a Form but in fact it's added to a hidden layered pane. When we want to add it only to a specific tab we need a better understanding of the underlying implementation. The FloatingActionButton wraps the given Container in a layered layout and places itself on top. It then returns a new Container which you should use instead of the original Container. Normally that's pretty easy to do but it's obviously impossible to do within FriendsContainer as it's the Container... The solution is to implement this code in the MainForm class. Here we create a fab for the contact upload
public class MainForm extends Form { private Tabs mainUI = new Tabs(); public MainForm() { super("", new BorderLayout()); mainUI.addTab("", MATERIAL_WEB, 5f, new NewsfeedContainer()); FloatingActionButton fab = FloatingActionButton.createFAB(MATERIAL_IMPORT_CONTACTS); Container friends = fab.bindFabToContainer(new FriendsContainer()); fab.addActionListener(e -> uploadContacts()); mainUI.addTab("", MATERIAL_PEOPLE_OUTLINE, 5f, friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MainForm We bind the fab and grab the return value instead of the FriendsContainer instance
public class MainForm extends Form { private Tabs mainUI = new Tabs(); public MainForm() { super("", new BorderLayout()); mainUI.addTab("", MATERIAL_WEB, 5f, new NewsfeedContainer()); FloatingActionButton fab = FloatingActionButton.createFAB(MATERIAL_IMPORT_CONTACTS); Container friends = fab.bindFabToContainer(new FriendsContainer()); fab.addActionListener(e -> uploadContacts()); mainUI.addTab("", MATERIAL_PEOPLE_OUTLINE, 5f, friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MainForm Pressing the fab will invoke the uploadContacts method
public class MainForm extends Form { private Tabs mainUI = new Tabs(); public MainForm() { super("", new BorderLayout()); mainUI.addTab("", MATERIAL_WEB, 5f, new NewsfeedContainer()); FloatingActionButton fab = FloatingActionButton.createFAB(MATERIAL_IMPORT_CONTACTS); Container friends = fab.bindFabToContainer(new FriendsContainer()); fab.addActionListener(e -> uploadContacts()); mainUI.addTab("", MATERIAL_PEOPLE_OUTLINE, 5f, friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MainForm Notice we add the returned friends Container that we wrapped with the fab
friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MATERIAL_CHAT, 4, e -> {}); Button searchButton = new Button("Search", "TitleSearch"); setMaterialIcon(searchButton, MATERIAL_SEARCH); getToolbar().setTitleComponent(searchButton); searchButton.addActionListener(e -> new SearchForm().show()); } private void uploadContacts() { startThread(() -> { Contact[] cnt = Display.getInstance(). getAllContacts(true, true, false, true, true, false); ServerAPI.uploadContacts(cnt); }, "ContactUploader").start(); } } MainForm Now that we have that we can implement the uploadContacts method
friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MATERIAL_CHAT, 4, e -> {}); Button searchButton = new Button("Search", "TitleSearch"); setMaterialIcon(searchButton, MATERIAL_SEARCH); getToolbar().setTitleComponent(searchButton); searchButton.addActionListener(e -> new SearchForm().show()); } private void uploadContacts() { startThread(() -> { Contact[] cnt = Display.getInstance(). getAllContacts(true, true, false, true, true, false); ServerAPI.uploadContacts(cnt); }, "ContactUploader").start(); } } MainForm We need to fetch contacts from the system, it makes sense to do this on a separate thread as this is a heavy task
friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MATERIAL_CHAT, 4, e -> {}); Button searchButton = new Button("Search", "TitleSearch"); setMaterialIcon(searchButton, MATERIAL_SEARCH); getToolbar().setTitleComponent(searchButton); searchButton.addActionListener(e -> new SearchForm().show()); } private void uploadContacts() { startThread(() -> { Contact[] cnt = Display.getInstance(). getAllContacts(true, true, false, true, true, false); ServerAPI.uploadContacts(cnt); }, "ContactUploader").start(); } } MainForm When we fetch the contacts we specify the fields we are interested in, if we specify fewer fields the fetch operation will be faster
friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MATERIAL_CHAT, 4, e -> {}); Button searchButton = new Button("Search", "TitleSearch"); setMaterialIcon(searchButton, MATERIAL_SEARCH); getToolbar().setTitleComponent(searchButton); searchButton.addActionListener(e -> new SearchForm().show()); } private void uploadContacts() { startThread(() -> { Contact[] cnt = Display.getInstance(). getAllContacts(true, true, false, true, true, false); ServerAPI.uploadContacts(cnt); }, "ContactUploader").start(); } } MainForm Despite the name of the startThread method we still need to invoke start on the returned thread… Once this is done pressing that button should automatically prompt for permission and upload the contacts from your phone.
padding: 1.5mm; text-align: center; font-family: "native:MainRegular"; font-size: 3.5mm; } SmallLabel { font-family: "native:MainLight"; font-size: 2mm; } FloatingActionButton { background: #587EBE; padding: 1.5mm; text-align: center; } Comment { color: black; font-family: "native:MainThin"; font-size: 2.6mm; border: cn1-pill-border; background-color: #dbdbdb; padding: 1mm 3mm 1mm 3mm; margin: 1mm; theme.css In order to make the FAB look good we'll also need a couple of CSS changes. This mostly sets the FAB to Facebook style blue color.
add(UIUtils.createHalfSpace()); } } private Container friendRequestEntry(User u, Image avatar, boolean request) { Label name = new Label(u.fullName(), "FriendName"); Button confirm; Button delete; if(request) { confirm = new Button("Confirm", "FriendConfirm"); delete = new Button("Delete", "FriendDelete"); bindConfirmDeleteEvent(u, confirm, delete); } else { confirm = new Button("Add Friend", "FriendConfirm"); delete = new Button("Remove", "FriendDelete"); bindAddRemoveFriendEvent(u, confirm, delete); } Container cnt = BoxLayout.encloseY(name, GridLayout.encloseIn(2, confirm, delete)); cnt.setUIID("PaddedContainer"); return BorderLayout.centerEastWest(cnt, null, new Label(avatar, "Container")); } FriendsContainer Each friend suggestion has a button to accept or remove the suggestion. Each friend request has similar button pairs. We added the bindConfirmDeleteEvent or bindAddRemoveFriendEvent call to bind event listing to the buttons
} else { confirm = new Button("Add Friend", "FriendConfirm"); delete = new Button("Remove", "FriendDelete"); bindAddRemoveFriendEvent(u, confirm, delete); } Container cnt = BoxLayout.encloseY(name, GridLayout.encloseIn(2, confirm, delete)); cnt.setUIID("PaddedContainer"); return BorderLayout.centerEastWest(cnt, null, new Label(avatar, "Container")); } private Container findParent(Container button) { if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); FriendsContainer When we remove or add a button we need to remove the Container of the friend from the hierarchy but at the stage where we bind the event we don't have an instance of that Container yet. A workaround is to locate that Container by traversing through the hierarchy of the components. Here we recursively look through parent containers, we stop when the parent is the FriendsContainer itself. This relies on the fact that a friend suggestion is added directly to the parent FriendsContainer.
if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); ToastBar.showMessage("Sent friend request", FontImage.MATERIAL_INFO); ServerAPI.refreshMe(); }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( FriendsContainer Once we have this implementing bindAddRemoveFriendEvent & bindConfirmDeleteEvent becomes trivial.
if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); ToastBar.showMessage("Sent friend request", FontImage.MATERIAL_INFO); ServerAPI.refreshMe(); }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( FriendsContainer We send a friend request to the server when the button is pressed
if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); ToastBar.showMessage("Sent friend request", FontImage.MATERIAL_INFO); ServerAPI.refreshMe(); }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( FriendsContainer After removing the Container with the friend suggestion we animate the remaining UI into place
if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); ToastBar.showMessage("Sent friend request", FontImage.MATERIAL_INFO); ServerAPI.refreshMe(); }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( FriendsContainer We refresh the me() object as it might be stale after this change
ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( User u, Button add, Button remove) { add.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); if(ServerAPI.acceptFriendRequest(u.id.get())) { ServerAPI.refreshMe(); ToastBar.showMessage("You are now friends with " + u.fullName(), FontImage.MATERIAL_INFO); } }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().friendRequests.remove(u); ServerAPI.update(ServerAPI.me()); }); } private Component createTitle(String title, int count) { FriendsContainer The rest of the code is nearly identical, we invoke the `ServerAPI` code to trigger the appropriate server changes. With this we can now send and accept friend requests.
public class NotificationsContainer extends InfiniteContainer { @Override public Component[] fetchComponents(int index, int amount) { int page = index / amount; if(index % amount > 0) { page++; } List<Notification> response = ServerAPI.listNotifications(page, amount); if(response == null) { return null; } Component[] notifications = new Component[response.size()]; int iter = 0; for(Notification n : response) { notifications[iter] = createNotificationEntry(n); iter++; } return notifications; } private Container createNotificationEntry(Notification n) { NotificationContainer The last piece in the UI mapping is notification support. This is pretty trivial now that we finished everything else...
public class NotificationsContainer extends InfiniteContainer { @Override public Component[] fetchComponents(int index, int amount) { int page = index / amount; if(index % amount > 0) { page++; } List<Notification> response = ServerAPI.listNotifications(page, amount); if(response == null) { return null; } Component[] notifications = new Component[response.size()]; int iter = 0; for(Notification n : response) { notifications[iter] = createNotificationEntry(n); iter++; } return notifications; } private Container createNotificationEntry(Notification n) { NotificationContainer Just like before we no longer need the lastTime value and can use the paging support instead
public class NotificationsContainer extends InfiniteContainer { @Override public Component[] fetchComponents(int index, int amount) { int page = index / amount; if(index % amount > 0) { page++; } List<Notification> response = ServerAPI.listNotifications(page, amount); if(response == null) { return null; } Component[] notifications = new Component[response.size()]; int iter = 0; for(Notification n : response) { notifications[iter] = createNotificationEntry(n); iter++; } return notifications; } private Container createNotificationEntry(Notification n) { NotificationContainer We iterate over the notification objects and create entry components for each one. New notifications will arrive via push when we implement the push support later on. With that we are effectively done with the first part of the app! We have a fully working client/server mockup, there are still a lot of missing pieces but this just became a process of filling in the gaps. It's much easier to fill in the gaps once the foundation is laid out in place.

More Related Content

PDF
Creating a Facebook Clone - Part XXX.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XLIII.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XLIII - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XIII - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XXVIII - Transcript.pdf
ShaiAlmog1
 
PDF
How do I - Create a List of Items - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part V - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XLVI.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XXX.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XLIII.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XLIII - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XIII - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XXVIII - Transcript.pdf
ShaiAlmog1
 
How do I - Create a List of Items - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part V - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XLVI.pdf
ShaiAlmog1
 

Similar to Creating a Facebook Clone - Part XXX - Transcript.pdf (20)

PDF
Creating a Facebook Clone - Part XVI - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XXXVI - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XIII.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XLVI - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XXIX - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part IV - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part V.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XXXVI.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part IV.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part IX.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part VI - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part X - Transcript.pdf
ShaiAlmog1
 
PDF
How do I - Create a List of Items.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part IX - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part XXVIII.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XXXX - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Facebook Clone - Part III - Transcript.pdf
ShaiAlmog1
 
PDF
Android App Development 03 : Widget &amp; UI
Anuchit Chalothorn
 
PDF
Creating a Facebook Clone - Part VIII - Transcript.pdf
ShaiAlmog1
 
PDF
Android Best Practices
Yekmer Simsek
 
Creating a Facebook Clone - Part XVI - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XXXVI - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XIII.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XLVI - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XXIX - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part IV - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part V.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XXXVI.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part IV.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part IX.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part VI - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part X - Transcript.pdf
ShaiAlmog1
 
How do I - Create a List of Items.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part IX - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part XXVIII.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXXX - Transcript.pdf
ShaiAlmog1
 
Creating a Facebook Clone - Part III - Transcript.pdf
ShaiAlmog1
 
Android App Development 03 : Widget &amp; UI
Anuchit Chalothorn
 
Creating a Facebook Clone - Part VIII - Transcript.pdf
ShaiAlmog1
 
Android Best Practices
Yekmer Simsek
 
Ad

More from ShaiAlmog1 (20)

PDF
The Duck Teaches Learn to debug from the masters. Local to production- kill ...
ShaiAlmog1
 
PDF
create-netflix-clone-06-client-ui.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-01-introduction_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-02-server_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-04-server-continued_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-01-introduction.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-06-client-ui_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-03-server.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-04-server-continued.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-05-client-model_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-03-server_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-02-server.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-05-client-model.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part II.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part II - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part IV - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part IV.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part I - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part IX.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part VI.pdf
ShaiAlmog1
 
The Duck Teaches Learn to debug from the masters. Local to production- kill ...
ShaiAlmog1
 
create-netflix-clone-06-client-ui.pdf
ShaiAlmog1
 
create-netflix-clone-01-introduction_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-02-server_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-04-server-continued_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-01-introduction.pdf
ShaiAlmog1
 
create-netflix-clone-06-client-ui_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-03-server.pdf
ShaiAlmog1
 
create-netflix-clone-04-server-continued.pdf
ShaiAlmog1
 
create-netflix-clone-05-client-model_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-03-server_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-02-server.pdf
ShaiAlmog1
 
create-netflix-clone-05-client-model.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part II.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part II - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part IV - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part IV.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part I - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part IX.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part VI.pdf
ShaiAlmog1
 
Ad

Recently uploaded (20)

PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PDF
KodekX | Application Modernization Development
KodekX
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
KodekX | Application Modernization Development
KodekX
 
Cloud computing and distributed systems.
kkkkkhan
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Approach and Philosophy of On baking technology
30anthuong17
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 

Creating a Facebook Clone - Part XXX - Transcript.pdf

  • 1. Creating a Facebook Clone - Part XXX How do we get friends? We already implemented contact upload both in the server and the ServerAPI class. We need to map that to the UI though. Facebook nags about uploading contacts all over the place which is probably something you should do too if you are building a social network. I don't want to get into the deep level of nagging so I decided to add a FloatingActionButton to the friends container. This is a bit tricky though...
  • 2. public class MainForm extends Form { private Tabs mainUI = new Tabs(); public MainForm() { super("", new BorderLayout()); mainUI.addTab("", MATERIAL_WEB, 5f, new NewsfeedContainer()); FloatingActionButton fab = FloatingActionButton.createFAB(MATERIAL_IMPORT_CONTACTS); Container friends = fab.bindFabToContainer(new FriendsContainer()); fab.addActionListener(e -> uploadContacts()); mainUI.addTab("", MATERIAL_PEOPLE_OUTLINE, 5f, friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MainForm Normally when we add a FloatingActionButton we add it to a Form. This hides some complexity, it seems like we are adding it to a Form but in fact it's added to a hidden layered pane. When we want to add it only to a specific tab we need a better understanding of the underlying implementation. The FloatingActionButton wraps the given Container in a layered layout and places itself on top. It then returns a new Container which you should use instead of the original Container. Normally that's pretty easy to do but it's obviously impossible to do within FriendsContainer as it's the Container... The solution is to implement this code in the MainForm class. Here we create a fab for the contact upload
  • 3. public class MainForm extends Form { private Tabs mainUI = new Tabs(); public MainForm() { super("", new BorderLayout()); mainUI.addTab("", MATERIAL_WEB, 5f, new NewsfeedContainer()); FloatingActionButton fab = FloatingActionButton.createFAB(MATERIAL_IMPORT_CONTACTS); Container friends = fab.bindFabToContainer(new FriendsContainer()); fab.addActionListener(e -> uploadContacts()); mainUI.addTab("", MATERIAL_PEOPLE_OUTLINE, 5f, friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MainForm We bind the fab and grab the return value instead of the FriendsContainer instance
  • 4. public class MainForm extends Form { private Tabs mainUI = new Tabs(); public MainForm() { super("", new BorderLayout()); mainUI.addTab("", MATERIAL_WEB, 5f, new NewsfeedContainer()); FloatingActionButton fab = FloatingActionButton.createFAB(MATERIAL_IMPORT_CONTACTS); Container friends = fab.bindFabToContainer(new FriendsContainer()); fab.addActionListener(e -> uploadContacts()); mainUI.addTab("", MATERIAL_PEOPLE_OUTLINE, 5f, friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MainForm Pressing the fab will invoke the uploadContacts method
  • 5. public class MainForm extends Form { private Tabs mainUI = new Tabs(); public MainForm() { super("", new BorderLayout()); mainUI.addTab("", MATERIAL_WEB, 5f, new NewsfeedContainer()); FloatingActionButton fab = FloatingActionButton.createFAB(MATERIAL_IMPORT_CONTACTS); Container friends = fab.bindFabToContainer(new FriendsContainer()); fab.addActionListener(e -> uploadContacts()); mainUI.addTab("", MATERIAL_PEOPLE_OUTLINE, 5f, friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MainForm Notice we add the returned friends Container that we wrapped with the fab
  • 6. friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MATERIAL_CHAT, 4, e -> {}); Button searchButton = new Button("Search", "TitleSearch"); setMaterialIcon(searchButton, MATERIAL_SEARCH); getToolbar().setTitleComponent(searchButton); searchButton.addActionListener(e -> new SearchForm().show()); } private void uploadContacts() { startThread(() -> { Contact[] cnt = Display.getInstance(). getAllContacts(true, true, false, true, true, false); ServerAPI.uploadContacts(cnt); }, "ContactUploader").start(); } } MainForm Now that we have that we can implement the uploadContacts method
  • 7. friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MATERIAL_CHAT, 4, e -> {}); Button searchButton = new Button("Search", "TitleSearch"); setMaterialIcon(searchButton, MATERIAL_SEARCH); getToolbar().setTitleComponent(searchButton); searchButton.addActionListener(e -> new SearchForm().show()); } private void uploadContacts() { startThread(() -> { Contact[] cnt = Display.getInstance(). getAllContacts(true, true, false, true, true, false); ServerAPI.uploadContacts(cnt); }, "ContactUploader").start(); } } MainForm We need to fetch contacts from the system, it makes sense to do this on a separate thread as this is a heavy task
  • 8. friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MATERIAL_CHAT, 4, e -> {}); Button searchButton = new Button("Search", "TitleSearch"); setMaterialIcon(searchButton, MATERIAL_SEARCH); getToolbar().setTitleComponent(searchButton); searchButton.addActionListener(e -> new SearchForm().show()); } private void uploadContacts() { startThread(() -> { Contact[] cnt = Display.getInstance(). getAllContacts(true, true, false, true, true, false); ServerAPI.uploadContacts(cnt); }, "ContactUploader").start(); } } MainForm When we fetch the contacts we specify the fields we are interested in, if we specify fewer fields the fetch operation will be faster
  • 9. friends); mainUI.addTab("", MATERIAL_NOTIFICATIONS_NONE, 5f, new NotificationsContainer()); mainUI.addTab("", MATERIAL_MENU, 5f, new MoreContainer()); add(CENTER, mainUI); getToolbar().addMaterialCommandToLeftBar("", MATERIAL_CAMERA_ALT, 4, e -> {}); getToolbar().addMaterialCommandToRightBar("", MATERIAL_CHAT, 4, e -> {}); Button searchButton = new Button("Search", "TitleSearch"); setMaterialIcon(searchButton, MATERIAL_SEARCH); getToolbar().setTitleComponent(searchButton); searchButton.addActionListener(e -> new SearchForm().show()); } private void uploadContacts() { startThread(() -> { Contact[] cnt = Display.getInstance(). getAllContacts(true, true, false, true, true, false); ServerAPI.uploadContacts(cnt); }, "ContactUploader").start(); } } MainForm Despite the name of the startThread method we still need to invoke start on the returned thread… Once this is done pressing that button should automatically prompt for permission and upload the contacts from your phone.
  • 10. padding: 1.5mm; text-align: center; font-family: "native:MainRegular"; font-size: 3.5mm; } SmallLabel { font-family: "native:MainLight"; font-size: 2mm; } FloatingActionButton { background: #587EBE; padding: 1.5mm; text-align: center; } Comment { color: black; font-family: "native:MainThin"; font-size: 2.6mm; border: cn1-pill-border; background-color: #dbdbdb; padding: 1mm 3mm 1mm 3mm; margin: 1mm; theme.css In order to make the FAB look good we'll also need a couple of CSS changes. This mostly sets the FAB to Facebook style blue color.
  • 11. add(UIUtils.createHalfSpace()); } } private Container friendRequestEntry(User u, Image avatar, boolean request) { Label name = new Label(u.fullName(), "FriendName"); Button confirm; Button delete; if(request) { confirm = new Button("Confirm", "FriendConfirm"); delete = new Button("Delete", "FriendDelete"); bindConfirmDeleteEvent(u, confirm, delete); } else { confirm = new Button("Add Friend", "FriendConfirm"); delete = new Button("Remove", "FriendDelete"); bindAddRemoveFriendEvent(u, confirm, delete); } Container cnt = BoxLayout.encloseY(name, GridLayout.encloseIn(2, confirm, delete)); cnt.setUIID("PaddedContainer"); return BorderLayout.centerEastWest(cnt, null, new Label(avatar, "Container")); } FriendsContainer Each friend suggestion has a button to accept or remove the suggestion. Each friend request has similar button pairs. We added the bindConfirmDeleteEvent or bindAddRemoveFriendEvent call to bind event listing to the buttons
  • 12. } else { confirm = new Button("Add Friend", "FriendConfirm"); delete = new Button("Remove", "FriendDelete"); bindAddRemoveFriendEvent(u, confirm, delete); } Container cnt = BoxLayout.encloseY(name, GridLayout.encloseIn(2, confirm, delete)); cnt.setUIID("PaddedContainer"); return BorderLayout.centerEastWest(cnt, null, new Label(avatar, "Container")); } private Container findParent(Container button) { if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); FriendsContainer When we remove or add a button we need to remove the Container of the friend from the hierarchy but at the stage where we bind the event we don't have an instance of that Container yet. A workaround is to locate that Container by traversing through the hierarchy of the components. Here we recursively look through parent containers, we stop when the parent is the FriendsContainer itself. This relies on the fact that a friend suggestion is added directly to the parent FriendsContainer.
  • 13. if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); ToastBar.showMessage("Sent friend request", FontImage.MATERIAL_INFO); ServerAPI.refreshMe(); }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( FriendsContainer Once we have this implementing bindAddRemoveFriendEvent & bindConfirmDeleteEvent becomes trivial.
  • 14. if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); ToastBar.showMessage("Sent friend request", FontImage.MATERIAL_INFO); ServerAPI.refreshMe(); }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( FriendsContainer We send a friend request to the server when the button is pressed
  • 15. if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); ToastBar.showMessage("Sent friend request", FontImage.MATERIAL_INFO); ServerAPI.refreshMe(); }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( FriendsContainer After removing the Container with the friend suggestion we animate the remaining UI into place
  • 16. if(button.getParent() != this) { return findParent(button.getParent()); } return button; } private void bindAddRemoveFriendEvent( User u, Button add, Button remove) { add.addActionListener(e -> { ServerAPI.sendFriendRequest(u.id.get()); findParent(remove.getParent()).remove(); animateLayout(150); ToastBar.showMessage("Sent friend request", FontImage.MATERIAL_INFO); ServerAPI.refreshMe(); }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( FriendsContainer We refresh the me() object as it might be stale after this change
  • 17. ServerAPI.me().peopleYouMayKnow.remove(u); ServerAPI.update(ServerAPI.me()); }); } private void bindConfirmDeleteEvent( User u, Button add, Button remove) { add.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); if(ServerAPI.acceptFriendRequest(u.id.get())) { ServerAPI.refreshMe(); ToastBar.showMessage("You are now friends with " + u.fullName(), FontImage.MATERIAL_INFO); } }); remove.addActionListener(e -> { findParent(remove.getParent()).remove(); animateLayout(150); ServerAPI.me().friendRequests.remove(u); ServerAPI.update(ServerAPI.me()); }); } private Component createTitle(String title, int count) { FriendsContainer The rest of the code is nearly identical, we invoke the `ServerAPI` code to trigger the appropriate server changes. With this we can now send and accept friend requests.
  • 18. public class NotificationsContainer extends InfiniteContainer { @Override public Component[] fetchComponents(int index, int amount) { int page = index / amount; if(index % amount > 0) { page++; } List<Notification> response = ServerAPI.listNotifications(page, amount); if(response == null) { return null; } Component[] notifications = new Component[response.size()]; int iter = 0; for(Notification n : response) { notifications[iter] = createNotificationEntry(n); iter++; } return notifications; } private Container createNotificationEntry(Notification n) { NotificationContainer The last piece in the UI mapping is notification support. This is pretty trivial now that we finished everything else...
  • 19. public class NotificationsContainer extends InfiniteContainer { @Override public Component[] fetchComponents(int index, int amount) { int page = index / amount; if(index % amount > 0) { page++; } List<Notification> response = ServerAPI.listNotifications(page, amount); if(response == null) { return null; } Component[] notifications = new Component[response.size()]; int iter = 0; for(Notification n : response) { notifications[iter] = createNotificationEntry(n); iter++; } return notifications; } private Container createNotificationEntry(Notification n) { NotificationContainer Just like before we no longer need the lastTime value and can use the paging support instead
  • 20. public class NotificationsContainer extends InfiniteContainer { @Override public Component[] fetchComponents(int index, int amount) { int page = index / amount; if(index % amount > 0) { page++; } List<Notification> response = ServerAPI.listNotifications(page, amount); if(response == null) { return null; } Component[] notifications = new Component[response.size()]; int iter = 0; for(Notification n : response) { notifications[iter] = createNotificationEntry(n); iter++; } return notifications; } private Container createNotificationEntry(Notification n) { NotificationContainer We iterate over the notification objects and create entry components for each one. New notifications will arrive via push when we implement the push support later on. With that we are effectively done with the first part of the app! We have a fully working client/server mockup, there are still a lot of missing pieces but this just became a process of filling in the gaps. It's much easier to fill in the gaps once the foundation is laid out in place.