Creating a Facebook Clone - Part XIII - Transcript.pdf

Creating a Facebook Clone - Part XIII
The hardest part in the mockup is behind us. The next stage is the FriendsContainer which lists friend requests and potential friend suggestions.

© Codename One 2017 all rights reserved
The friends container is a simple UI & a simple class. We have a few UIID’s within this class that I’ll cover soon when I get to the CSS related changes

public class FriendsContainer extends Container {
public FriendsContainer() {
super(BoxLayout.y());
setScrollableY(true);
init();
addPullToRefresh(() -> {
removeAll();
init();
revalidate();
});
}
private void init() {
int friendCount = ServerAPI.me().friendRequests.size();
int imageSize = convertToPixels(18);
EncodedImage placeholder = EncodedImage.createFromImage(
Image.createImage(imageSize, imageSize), false);
add(createTitle("FRIEND REQUESTS", friendCount));
if(friendCount == 0) {
Container padded = new Container(new BorderLayout(),
FriendsContainer
Lets look at the code…

We extend Container instead of InfiniteContainer as we don’t need it in this case. Technically I could have gone with an infinite approach but I wanted to keep things
simple

init();
removeAll();
init();
revalidate();
});
}
FriendsContainer
The Container arranges elements vertically using box layout, since this isn’t a form it's not scrollable by default so we need to enable scrollability because the parent form
isn't scrollable.

init();
removeAll();
init();
revalidate();
});
}
FriendsContainer
addPullToRefresh removes the elements and re-creates the UI

revalidate();
});
}
"PaddedContainer");
padded.add(CENTER,
new Label("No new Friend Requests", "CenterLabel"));
} else {
for(User u : ServerAPI.me().friendRequests) {
Image i = URLImage.createCachedImage(u.id.get() +
"-avatar.jpg",
u.avatar.get(), placeholder,
URLImage.FLAG_RESIZE_SCALE_TO_FILL);
add(friendRequestEntry(u, i, true));
add(UIUtils.createHalfSpace());
FriendsContainer
init() fills up the Container. It's invoked when the class is created or refreshed

revalidate();
});
}
"PaddedContainer");
padded.add(CENTER,
} else {
"-avatar.jpg",
FriendsContainer
The avatar in the side of the friend appears as an 18 millimeter image

revalidate();
});
}
"PaddedContainer");
padded.add(CENTER,
} else {
"-avatar.jpg",
FriendsContainer
We use a blank image as the placeholder for the URLImage so the avatar will download dynamically to the locale cache

"PaddedContainer");
padded.add(CENTER,
} else {
"-avatar.jpg",
}
}
add(createTitle("PEOPLE YOU MAY KNOW", 0));
for(User u : ServerAPI.me().peopleYouMayKnow) {
FriendsContainer
If we have friend suggestions we loop over friend requests and add them with the avatar for each one. Notice we used the URLImage.createCachedImage() API to fetch
the avatar URL instead of getAvatar(). Facebook used square images here so it made sense to use something else for this functionality.

padded.add(CENTER,
} else {
"-avatar.jpg",
}
}
add(createTitle("PEOPLE YOU MAY KNOW", 0));
for(User u : ServerAPI.me().peopleYouMayKnow) {
Image i = URLImage.createCachedImage(u.id.get() + "-avatar.jpg",
add(friendRequestEntry(u, i, false));
}
}
private Container friendRequestEntry(User u, Image avatar,
FriendsContainer
We do the same for the friend suggestion list under a diﬀerent title

}
}
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");
} else {
confirm = new Button("Add Friend", "FriendConfirm");
delete = new Button("Remove", "FriendDelete");
}
Container cnt =
BoxLayout.encloseY(name,
GridLayout.encloseIn(2, confirm, delete));
cnt.setUIID("PaddedContainer");
return BorderLayout.centerEastWest(cnt, null,
new Label(avatar, "Container"));
}
FriendsContainer
Next we have the friendRequestEntry method…

}
}
boolean request) {
Button confirm;
Button delete;
if(request) {
} else {
}
Container cnt =
}
FriendsContainer
We create the button labels based on the type of request

}
}
boolean request) {
Button confirm;
Button delete;
if(request) {
} else {
}
Container cnt =
}
FriendsContainer
We place the name above the buttons using a box layout on the Y axis then place the two buttons within a grid layout giving them the same size

}
}
boolean request) {
Button confirm;
Button delete;
if(request) {
} else {
}
Container cnt =
}
FriendsContainer
The avatar is placed in the west since its size is constant, we place the content in the center which gives it space to grow

Button delete;
if(request) {
} else {
}
Container cnt =
}
private Component createTitle(String title, int count) {
Label titleLabel = new Label(title, "FriendSubtitle");
if(count > 0) {
Label countLabel = new Label("" + count, "SmallRedCircle");
return FlowLayout.encloseMiddle(titleLabel, countLabel);
}
return titleLabel;
}
}
FriendsContainer
The titles above the listings are created in the init() method with this code block

Button delete;
if(request) {
} else {
}
Container cnt =
}
private Component createTitle(String title, int count) {
Label titleLabel = new Label(title, "FriendSubtitle");
if(count > 0) {
Label countLabel = new Label("" + count, "SmallRedCircle");
return FlowLayout.encloseMiddle(titleLabel, countLabel);
}
return titleLabel;
}
}
FriendsContainer
This handles the red circle with the number next to the title

FriendSubtitle {
color: #999999;
font-size: 3mm;
font-family: "native:MainRegular";
padding: 1.5mm;
}
SmallRedCircle {
border: cn1-round-border;
background-color: red;
padding: 1mm;
margin: 1mm;
color: white;
font-size: 2.2mm;
}
FriendName {
color: black;
font-size: 3mm;
font-family: "native:MainLight";
}
FriendConfirm {
padding: 2mm;
theme.css
In order to complete this we need a few CSS changes.

The subtitle is just a gray slightly larger font

FriendSubtitle {
color: #999999;
font-size: 3mm;
padding: 1.5mm;
}
SmallRedCircle {
padding: 1mm;
margin: 1mm;
color: white;
font-size: 2.2mm;
}
FriendName {
color: black;
font-size: 3mm;
}
FriendConfirm {
padding: 2mm;
theme.css
The red circle has padding that is large enough to make it visible. The size is close enough so it will align reasonably with the FriendSubtitle

SmallRedCircle {
padding: 1mm;
margin: 1mm;
color: white;
font-size: 2.2mm;
}
FriendName {
color: black;
font-size: 3mm;
}
FriendConfirm {
padding: 2mm;
margin: 1mm;
border-radius: 1mm;
background: #587EBE;
cn1-derive: BaseButton;
font-size: 2mm;
}
FriendDelete {
background: white;
theme.css
FriendName looks smaller than FriendSubtitle but it's really because FriendSubtitle is written in uppercase

font-size: 2.2mm;
}
FriendName {
color: black;
font-size: 3mm;
}
FriendConfirm {
padding: 2mm;
margin: 1mm;
border-radius: 1mm;
font-size: 2mm;
}
FriendDelete {
background: white;
border-color: #999999;
border-width: 1px;
color: #999999;
cn1-derive: FriendConfirm;
}
theme.css
The confirm button is a standard button with rounded corners and a specific background

font-size: 2.2mm;
}
FriendName {
color: black;
font-size: 3mm;
}
FriendConfirm {
padding: 2mm;
margin: 1mm;
border-radius: 1mm;
font-size: 2mm;
}
FriendDelete {
background: white;
border-color: #999999;
border-width: 1px;
color: #999999;
cn1-derive: FriendConfirm;
}
theme.css
The delete button removes the background and adds a pixel wide border around it. With that the friend suggestion UI should work and run as expected.

Creating a Facebook Clone - Part XIII - Transcript.pdf

Recommended

Recommended

More Related Content

Similar to Creating a Facebook Clone - Part XIII - Transcript.pdf

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

More from ShaiAlmog1

More from ShaiAlmog1 (20)

Recently uploaded

Recently uploaded (20)

Creating a Facebook Clone - Part XIII - Transcript.pdf