This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

1. Creating a Facebook Clone - Part XI
It will take a bit of work to implement the server and proper abstraction. However, it's a good idea to put things in the right place to begin with. Using a ServerAPI class
will help us organize things correctly piece by piece. We can then replace mockups with implementations and see things working almost instantaneously!

2. public class ServerAPI {
private static User me;
private static final String avatarUrl =
"https://www.codenameone.com/images/diverseui-avatars/";
private static final long initTime =
System.currentTimeMillis();
private final static User[] dummyUsers;
static {
dummyUsers = new User[] {
new User().id.set("TODO-2").
firstName.set("David").
familyName.set("Something").
avatar.set(avatarUrl + "image-1.png"),
new User().id.set("TODO-3").
firstName.set("Dana").
familyName.set("Something Else").
avatar.set(avatarUrl + "image-3.png"),
new User().id.set("TODO-4").
firstName.set("Carl").
familyName.set("Not Something").
ServerAPI
Currently the ServerAPI class serves as a mockup. It's a static class that hides the server connection. I'm blocking API calls within this class as they are easier to
integrate into the InfiniteContainer which I will introduce soon.
The currently logged in user is a global state in the application which is a pretty standard practice

3. public class ServerAPI {
private static User me;
private static final String avatarUrl =
"https://www.codenameone.com/images/diverseui-avatars/";
private static final long initTime =
System.currentTimeMillis();
private final static User[] dummyUsers;
static {
dummyUsers = new User[] {
new User().id.set("TODO-2").
firstName.set("David").
familyName.set("Something").
avatar.set(avatarUrl + "image-1.png"),
new User().id.set("TODO-3").
firstName.set("Dana").
familyName.set("Something Else").
avatar.set(avatarUrl + "image-3.png"),
new User().id.set("TODO-4").
firstName.set("Carl").
familyName.set("Not Something").
ServerAPI
I've setup a few images from the diverseui project so we can have fake users with Avatars in the app. Check out the divrseui project diverseui.com its goal is to feature
more diversity in app mockups

4. public class ServerAPI {
private static User me;
private static final String avatarUrl =
"https://www.codenameone.com/images/diverseui-avatars/";
private static final long initTime =
System.currentTimeMillis();
private final static User[] dummyUsers;
static {
dummyUsers = new User[] {
new User().id.set("TODO-2").
firstName.set("David").
familyName.set("Something").
avatar.set(avatarUrl + "image-1.png"),
new User().id.set("TODO-3").
firstName.set("Dana").
familyName.set("Something Else").
avatar.set(avatarUrl + "image-3.png"),
new User().id.set("TODO-4").
firstName.set("Carl").
familyName.set("Not Something").
ServerAPI
We need times in the timeline etc. to start from a reasonable enough date so I use "now" as the baseline

5. private static final long initTime =
System.currentTimeMillis();
private final static User[] dummyUsers;
static {
dummyUsers = new User[] {
new User().id.set("TODO-2").
firstName.set("David").
familyName.set("Something").
avatar.set(avatarUrl + "image-1.png"),
new User().id.set("TODO-3").
firstName.set("Dana").
familyName.set("Something Else").
avatar.set(avatarUrl + "image-3.png"),
new User().id.set("TODO-4").
firstName.set("Carl").
familyName.set("Not Something").
avatar.set(avatarUrl + "image-2.png"),
new User().id.set("TODO-5").
firstName.set("Donna").
familyName.set("Enough with Something").
avatar.set(avatarUrl + "image-4.png")
};
}
public static User me() {
if(me == null) {
ServerAPI
We'll setup 4 User objects that we can use soon

6. avatar.set(avatarUrl + "image-3.png"),
new User().id.set("TODO-4").
firstName.set("Carl").
familyName.set("Not Something").
avatar.set(avatarUrl + "image-2.png"),
new User().id.set("TODO-5").
firstName.set("Donna").
familyName.set("Enough with Something").
avatar.set(avatarUrl + "image-4.png")
};
}
public static User me() {
if(me == null) {
me = new User().
id.set("TODO-1").
firstName.set("Shai").
familyName.set("Almog");
me.friendRequests.add(dummyUsers[0]);
me.friendRequests.add(dummyUsers[1]);
me.peopleYouMayKnow.add(dummyUsers[2]);
me.peopleYouMayKnow.add(dummyUsers[3]);
}
return me;
}
public static List<Post> fetchTimelinePosts(long since, int amount) {
ServerAPI
This method returns the current user after lazily initializing it

7. avatar.set(avatarUrl + "image-3.png"),
new User().id.set("TODO-4").
firstName.set("Carl").
familyName.set("Not Something").
avatar.set(avatarUrl + "image-2.png"),
new User().id.set("TODO-5").
firstName.set("Donna").
familyName.set("Enough with Something").
avatar.set(avatarUrl + "image-4.png")
};
}
public static User me() {
if(me == null) {
me = new User().
id.set("TODO-1").
firstName.set("Shai").
familyName.set("Almog");
me.friendRequests.add(dummyUsers[0]);
me.friendRequests.add(dummyUsers[1]);
me.peopleYouMayKnow.add(dummyUsers[2]);
me.peopleYouMayKnow.add(dummyUsers[3]);
}
return me;
}
public static List<Post> fetchTimelinePosts(long since, int amount) {
ServerAPI
This is the shorthand "builder" constructor where I set a hardcoded user

8. familyName.set("Not Something").
avatar.set(avatarUrl + "image-2.png"),
new User().id.set("TODO-5").
firstName.set("Donna").
familyName.set("Enough with Something").
avatar.set(avatarUrl + "image-4.png")
};
}
public static User me() {
if(me == null) {
me = new User().
id.set("TODO-1").
firstName.set("Shai").
familyName.set("Almog");
me.friendRequests.add(dummyUsers[0]);
me.friendRequests.add(dummyUsers[1]);
me.peopleYouMayKnow.add(dummyUsers[2]);
me.peopleYouMayKnow.add(dummyUsers[3]);
}
return me;
}
public static List<Post> fetchTimelinePosts(long since, int amount) {
if(since >= initTime) {
Comment firstPost = new Comment().
date.set(System.currentTimeMillis()).
text.set("First post!!!").
ServerAPI
I add friends and people I may know which I'll use later in the friends view

9. me.peopleYouMayKnow.add(dummyUsers[3]);
}
return me;
}
public static List<Post> fetchTimelinePosts(long since, int amount) {
if(since >= initTime) {
Comment firstPost = new Comment().
date.set(System.currentTimeMillis()).
text.set("First post!!!").
id.set("Comment1").
userId.set(ServerAPI.me().id.get());
Post dummyPost = new Post().
user.set(ServerAPI.me()).
content.set("This is a <b>POST</b> that includes HTML").
date.set(System.currentTimeMillis() - 60000).
id.set("Post1").
likes.add(ServerAPI.me()).
comments.add(firstPost);
List<Post> response = new ArrayList<>();
response.add(dummyPost);
return response;
}
return null;
}
ServerAPI
This method fetches the posts in the current timeline

10. me.peopleYouMayKnow.add(dummyUsers[3]);
}
return me;
}
public static List<Post> fetchTimelinePosts(long since, int amount) {
if(since >= initTime) {
Comment firstPost = new Comment().
date.set(System.currentTimeMillis()).
text.set("First post!!!").
id.set("Comment1").
userId.set(ServerAPI.me().id.get());
Post dummyPost = new Post().
user.set(ServerAPI.me()).
content.set("This is a <b>POST</b> that includes HTML").
date.set(System.currentTimeMillis() - 60000).
id.set("Post1").
likes.add(ServerAPI.me()).
comments.add(firstPost);
List<Post> response = new ArrayList<>();
response.add(dummyPost);
return response;
}
return null;
}
ServerAPI
The method accepts the time of the last post so we can fetch the posts "since" that time

11. return me;
}
public static List<Post> fetchTimelinePosts(long since, int amount) {
if(since >= initTime) {
Comment firstPost = new Comment().
date.set(System.currentTimeMillis()).
text.set("First post!!!").
id.set("Comment1").
userId.set(ServerAPI.me().id.get());
Post dummyPost = new Post().
user.set(ServerAPI.me()).
content.set("This is a <b>POST</b> that includes HTML").
date.set(System.currentTimeMillis() - 60000).
id.set("Post1").
likes.add(ServerAPI.me()).
comments.add(firstPost);
List<Post> response = new ArrayList<>();
response.add(dummyPost);
return response;
}
return null;
}
}
ServerAPI
We add a comment so the comment count wouldn't be 0. There is still no comment view though

12. return me;
}
public static List<Post> fetchTimelinePosts(long since, int amount) {
if(since >= initTime) {
Comment firstPost = new Comment().
date.set(System.currentTimeMillis()).
text.set("First post!!!").
id.set("Comment1").
userId.set(ServerAPI.me().id.get());
Post dummyPost = new Post().
user.set(ServerAPI.me()).
content.set("This is a <b>POST</b> that includes HTML").
date.set(System.currentTimeMillis() - 60000).
id.set("Post1").
likes.add(ServerAPI.me()).
comments.add(firstPost);
List<Post> response = new ArrayList<>();
response.add(dummyPost);
return response;
}
return null;
}
}
ServerAPI
The post itself doesn't include much either, just some HTML for the post content

13. }
public static List<Post> fetchTimelinePosts(long since, int amount) {
if(since >= initTime) {
Comment firstPost = new Comment().
date.set(System.currentTimeMillis()).
text.set("First post!!!").
id.set("Comment1").
userId.set(ServerAPI.me().id.get());
Post dummyPost = new Post().
user.set(ServerAPI.me()).
content.set("This is a <b>POST</b> that includes HTML").
date.set(System.currentTimeMillis() - 60000).
id.set("Post1").
likes.add(ServerAPI.me()).
comments.add(firstPost);
List<Post> response = new ArrayList<>();
response.add(dummyPost);
return response;
}
return null;
}
}
ServerAPI
We return null when there is no further information. That's it, we are almost ready to implement the newsfeed!

14. public class UIUtils {
public static final long HOUR = 60 * 60000;
public static final long DAY = 24 * HOUR;
public static Label createSpace() {
Label l = new Label("", "PaddedSeparator");
l.setShowEvenIfBlank(true);
return l;
}
public static Label createHalfSpace() {
Label l = new Label("", "HalfPaddedSeparator");
l.setShowEvenIfBlank(true);
return l;
}
public static String formatTimeAgo(long time) {
long current = System.currentTimeMillis() - time;
if(current < HOUR) {
long minutes = current / 60000;
if(minutes < 2) {
return "Just now";
}
return minutes + " minutes ago";
}
UIUtils
Before I start with the newsfeed itself I'd like a couple of utility methods. For that I'll add a UIUtils class as such.
I use these to present time logic more effectively

15. public class UIUtils {
public static final long HOUR = 60 * 60000;
public static final long DAY = 24 * HOUR;
public static Label createSpace() {
Label l = new Label("", "PaddedSeparator");
l.setShowEvenIfBlank(true);
return l;
}
public static Label createHalfSpace() {
Label l = new Label("", "HalfPaddedSeparator");
l.setShowEvenIfBlank(true);
return l;
}
public static String formatTimeAgo(long time) {
long current = System.currentTimeMillis() - time;
if(current < HOUR) {
long minutes = current / 60000;
if(minutes < 2) {
return "Just now";
}
return minutes + " minutes ago";
}
UIUtils
These create a gray spacer that's used in several places in the Facebook UI

16. l.setShowEvenIfBlank(true);
return l;
}
public static Label createHalfSpace() {
Label l = new Label("", "HalfPaddedSeparator");
l.setShowEvenIfBlank(true);
return l;
}
public static String formatTimeAgo(long time) {
long current = System.currentTimeMillis() - time;
if(current < HOUR) {
long minutes = current / 60000;
if(minutes < 2) {
return "Just now";
}
return minutes + " minutes ago";
}
if(current < HOUR * 10) {
return (current / HOUR) + " hours ago";
}
return L10NManager.getInstance().
formatDateTimeShort(new Date(time));
}
}
UIUtils
This method formats time as statements such as "just now", "15 minutes ago" etc. then falls back to standard date & time values. We use this when displaying time on
posts. We'll use these in the NewsfeedContainer class.

17. PaddedSeparator {
background: #DCDEE3;
padding: 0.5mm;
margin: 0px;
}
HalfPaddedSeparator {
cn1-derive: PaddedSeparator;
padding: 0.25mm;
}
theme.css
But before we get there there we have the missing CSS statements for the UIID's we used in the listing. These separators have the gray background and right amount of
padding to match the UI