Facebook Clone Settings Code

Creating a Facebook Clone - Part XXXVI
A big missing piece is the settings code.

© Codename One 2017 all rights reserved
One of the important things we need to expose is the ability to customize information about the user. Ideally this should be as flexible as possible so when we add
additional attributes to track they can be incorporated right into the UI.

I simplified a lot of the UI Facebook had and tried to focus on two big ticket items:

The Image Pickers & the generic user settings

public class ImagePicker {
private String fileName;
private EncodedImage img;
private int mode = GALLERY_IMAGE;
public ImagePicker() {
}
public ImagePicker(int mode) {
this.mode = mode;
}
public void pickImage(SuccessCallback<EncodedImage> onPick) {
Display.getInstance().openGallery(e -> {
if(e == null) {
return;
}
String s = (String)e.getSource();
if(s != null) {
try(InputStream i = openFileInputStream(s);) {
img = EncodedImage.create(i, (int)getFileLength(s));
fileName = s;
onPick.onSucess(img);
} catch(IOException err) {
ImagePicker
I've encapsulated image picking in the ImagePicker class, this is convenient as we might want to make it more elaborate in the future. At the moment it simply picks from
the device gallery.

We don't need a class in terms of implementation. It's there to encapsulate the meta-data of the image in a single operation

}
this.mode = mode;
}
if(e == null) {
return;
}
if(s != null) {
fileName = s;
ImagePicker
The filename is useful for the upload process as we maintain that meta-data in the server for reference

}
this.mode = mode;
}
if(e == null) {
return;
}
if(s != null) {
fileName = s;
ImagePicker
openGallery launches the OS native picker code in this case using image mode

}
this.mode = mode;
}
if(e == null) {
return;
}
if(s != null) {
fileName = s;
Log.e(err);
}
}
}, mode);
}
public void upload(SuccessCallback<String> mediaId) {
ServerAPI.uploadMedia("image/jpeg", "photo", "public", fileName,
ImagePicker
We keep the fileName & the image object

this.mode = mode;
}
if(e == null) {
return;
}
if(s != null) {
fileName = s;
Log.e(err);
}
}
}, mode);
}
public void upload(SuccessCallback<String> mediaId) {
ServerAPI.uploadMedia("image/jpeg", "photo", "public", fileName,
img.getImageData(), mediaId);
}
}
ImagePicker
This class encapsulates the upload feature too so the filename can remain encapsulated. That's pretty simple, we could possibly do more by oﬀering an option to launch
the camera etc.

public class SettingsForm extends Form {
private Label cover = new Label(" ", "LoginTitle");
private Label avatar = new Label("", "LabelFrame");
private Button changeCover =
new Button(MATERIAL_CAMERA_ALT, "CameraLabel");
private Button changeAvatar =
public SettingsForm() {
super("", BoxLayout.y());
Form previous = getCurrentForm();
getToolbar().setBackCommand("Back", e -> previous.showBack());
User me = ServerAPI.me();
avatar.setIcon(me.getAvatar(12));
if(me.cover.get() != null) {
me.fetchCoverImage(i -> {
cover.getAllStyles().setBgImage(i);
repaint();
});
}
changeAvatar.addActionListener(e -> pickAvatar(avatar));
SettingsForm
The settings UI is encapsulated in the SettingsForm class.

repaint();
});
}
SettingsForm
cover & avatar represent the two images in the settings UI, the background cover image and avatar image

repaint();
});
}
SettingsForm
The two change fields represent the camera change buttons that allow us to replace the avatar images

repaint();
});
}
changeCover.addActionListener(e -> pickCover(cover));
Container coverContainer = LayeredLayout.encloseIn(
cover,
FlowLayout.encloseRightBottom(changeCover)
);
coverContainer.setUIID("SettingsMargin");
Container avatarContainer = LayeredLayout.encloseIn(
avatar,
SettingsForm
Next lets explore the constructor code, it's mostly standard and creates the main settings UI for replacing the images. Here we bind the back button behavior

repaint();
});
}
cover,
);
avatar,
SettingsForm
The current avatar is set into the avatar label

repaint();
});
}
cover,
);
avatar,
SettingsForm
If a cover image is set we fetch the image asynchronously

repaint();
});
}
cover,
);
avatar,
SettingsForm
Both image buttons delegate to picker methods so we can replace that logic in the future

repaint();
});
}
cover,
);
avatar,
FlowLayout.encloseRightBottom(changeAvatar)
);
add(LayeredLayout.encloseIn(
coverContainer,
FlowLayout.encloseCenterBottom(avatarContainer)
SettingsForm
The cover label places the change button on top using a LayeredLayout & wraps the button in a flow layout so it will align to the bottom right

repaint();
});
}
cover,
);
avatar,
);
coverContainer,
SettingsForm
We do the exact same thing with the avatar image and its picker button

});
}
cover,
);
avatar,
);
coverContainer,
));
add(new Label(me.fullName(), "CenterLargeThinLabel"));
add(createButtonBar());
}
private Container createButtonBar() {
Button activity = new Button(MATERIAL_HISTORY, "CleanButton");
Button settings = new Button(MATERIAL_SETTINGS, "CleanButton");
Button viewAs = new Button(MATERIAL_ACCOUNT_CIRCLE, "CleanButton");
SettingsForm
We then wrap both of those LayeredLayout’s in another layered layout and the avatar in a FlowLayout to align it to the bottom center region.

The LayeredLayout usage raises the obvious question of why not use one layered layout instead of three?

That would be hard to accomplish with the picker button. We would have a hard time aligning the picker button of the avatar to the bottom right corner since the parent
layout would be too big.

));
add(new Label(me.fullName(), "CenterLargeThinLabel"));
add(createButtonBar());
}
private Container createButtonBar() {
Button activity = new Button(MATERIAL_HISTORY, "CleanButton");
Button settings = new Button(MATERIAL_SETTINGS, "CleanButton");
Button more = new Button(MATERIAL_MORE_HORIZ, "CleanButton");
settings.addActionListener(e ->
showUserEditForm(ServerAPI.me()));
return GridLayout.encloseIn(4, activity, settings, viewAs, more);
}
private void pickAvatar(Label l) {
ImagePicker p = new ImagePicker();
p.pickImage(img -> {
p.upload(mediaId -> {
ServerAPI.me().avatar.set(mediaId);
ServerAPI.setAvatar(mediaId);
Image temp = img.fill(l.getIcon().getWidth(),
l.getIcon().getHeight());
temp = temp.applyMask(ServerAPI.me().
SettingsForm
Next up are the buttons we create at the bottom of the UI as mentioned at the end of the constructor.

The button bar are just 4 buttons in a horizontal grid, we only map the settings to functionality of full editing in showUserEditForm

}
getAvatarMask(temp.getWidth()).createMask());
l.setIcon(temp);
});
});
}
private void pickCover(Label l) {
SettingsForm
ImagePicker does most of the heavy lifting here we launch it and get an image object back if it proceeded

}
l.setIcon(temp);
});
});
}
SettingsForm
We upload the image and get a callback with the media id value

}
l.setIcon(temp);
});
});
}
SettingsForm
The avatar is set both locally & remotely so we don't need a server refresh call

}
l.setIcon(temp);
});
});
}
SettingsForm
We do refresh the icon though and make sure to shape it as it was before

l.setIcon(temp);
});
});
}
ServerAPI.me().cover.set(mediaId);
ServerAPI.setCover(mediaId);
l.getAllStyles().setBgImage(img);
});
});
}
@Override
protected void initGlobalToolbar() {
Toolbar tb = new Toolbar(true);
tb.setUIID("Container");
setToolbar(tb);
}
SettingsForm
Cover picking is very similar but has simpler code as we don't need to shape the resulting image & have a simpler API

});
});
}
@Override
setToolbar(tb);
}
private void showUserEditForm(User me) {
InstantUI iu = new InstantUI();
iu.excludeProperties(me.authtoken, me.avatar, me.cover,
me.friendRequests, me.friends, me.peopleYouMayKnow, me.id,
me.password, me.birthday);
iu.setMultiChoiceLabels(me.gender, "Male", "Female", "Other");
iu.setMultiChoiceValues(me.gender, "Male", "Female", "Other");
Container cnt = iu.createEditUI(me, true);
cnt.setUIID("PaddedContainer");
SettingsForm
Next we override this method to have a custom toolbar

});
});
}
@Override
setToolbar(tb);
}
SettingsForm
The toolbar is created using the "layered" mode (the true argument) which makes the content run under it

});
});
}
@Override
setToolbar(tb);
}
SettingsForm
We use the Container UIID for the `Toolbar` to make it transparent

setToolbar(tb);
}
cnt.setScrollableY(true);
Form edit = new Form("Edit", new BorderLayout());
edit.add(BorderLayout.CENTER, cnt);
edit.getToolbar().setBackCommand("Back", e -> {
showBack();
UiBinding.unbind(me);
callSerially(() -> ServerAPI.update(me));
});
edit.show();
}
}
SettingsForm
Finally the last piece of code is the showUserEditForm(). Since there is still a lot to cover here I’ll continue in the next lesson

Facebook Clone Settings Code

Recommended

Recommended

More Related Content

Similar to Facebook Clone Settings Code

Similar to Facebook Clone Settings Code (20)

More from ShaiAlmog1

More from ShaiAlmog1 (20)

Recently uploaded

Recently uploaded (20)

Facebook Clone Settings Code