Creating a Facebook Clone - Part IV - Transcript.pdf

Creating a Facebook Clone - Part IV
The next step is the login form which requires a bit more... The design of the login UI varies dramatically and in both cases it wasn't great. So I ended up taking a great
deal of creative liberty in my interpretation on how this "should look".

© Codename One 2017 all rights reserved
There are a lot of things I chose to change about the UI, most of them are due to taste and personal preference. I tried to make the code as close as possible so I would
reuse more of it but I still wanted to show how I can create very diﬀerent UI's for very diﬀerent platforms.

E.g. this is the iOS version running on a tablet, you will notice I copied a lot of the UI but you will also notice I took some inspiration from Android.

I made sure to get everything working in landscape, notice I took a very diﬀerent approach to the UI in landscape that I think looks MUCH better than the native version
which frankly looks awful.

Notice that in the iPad version in the clone I don’t move the title image doesn't move to the side like it does in other platforms when shifting to landscape.

I also ignored the top area with more functionality & languages. It doesn't exist on iOS & didn't strike me as too important

Since the login form is a complex form I chose to create a new class. For that I also chose to create a new package: com.codename1.fbclone.forms.

This class is a bit big but before I get into it I'd like to explain how I implemented this UI in the iOS version.

What we see here are two text fields grouped together so the first and the last have a rounded look while entries in the middle (which we don't have here) would not. This
is a common look in iOS although it has gone somewhat out of fashion.

In Codename One we can apply that look using the ComponentGroup class. This class is a BoxLayout container that automatically assigns special UIID's to components
so the first Component would be GroupElementFirst, the second would be GroupElement & the last would be GroupElementLast.

Notice that there is also a special UIID for button's added to the group. We don’t use it in this case so that’s just an FYI.

The iOS theme includes styling for these elements, they include rounding on the top for the first element and rounding on the bottom for the last element.

On Android this design paradigm is uncommon. As a result there is no styling for these elements on Android. The group layout acts as a regular box layout container on
Android and doesn't change the natural styling of the elements. This works seamlessly because the native iOS theme has a theme constant: ComponentGroupBool. If it
is set to true that means that the UIID's should be changed.

ComponentGroupBool is only defined on iOS and defaults to false elsewhere...

In the code I use that theme constant to decide whether to show the Android UI or the iOS UI…

public class LoginForm extends Form {
private Label logo =
new Label("uf308", "IconFont");
private TextField user = new TextField("", "Email or Phone", 30,
TextField.EMAILADDR);
private TextField password = new TextField("", "Password", 30,
TextField.PASSWORD);
private Button login = new Button("Log In");
private Button signUp = new Button("Sign Up for Facebook");
private Button needHelp = new Button("Need Help?");
public LoginForm() {
super(new BorderLayout());
getToolbar().setUIID("Container");
logo.setName("Logo");
Container logoContainer = BorderLayout.centerAbsolute(logo);
logoContainer.setUIID("LoginTitle");
add(NORTH, logoContainer);
if(!isTablet()) {
BorderLayout bl = ((BorderLayout)getLayout());
bl.defineLandscapeSwap(NORTH, EAST);
LoginForm
Lets get into the code first the class, variable & method declarations.

The logo is pretty much the same value we saw for the splash screen, it doesn't have to be the same though

if(!isTablet()) {
LoginForm
E-Mail & Password are just standard input fields

if(!isTablet()) {
LoginForm
The following buttons exist in the iOS & Android UI's although the signUp button has diﬀerent text in the Android version

if(!isTablet()) {
LoginForm
The login form uses border layout so we can place the content where we want.

Without the UIID the toolbar would appear on the top of the screen. Container is transparent with 0 padding/margin which hides the toolbar

if(!isTablet()) {
LoginForm
We set the name of the logo so the logo from the splash screen will animate into place due to the MorphTransition

if(!isTablet()) {
LoginForm
We're placing the logo on the top of the screen in the center, notice I use the LoginTitle to set the background around the logo

if(!isTablet()) {
}
if(getUIManager().
isThemeConstant("ComponentGroupBool", false)) {
Container content = BorderLayout.centerAbsolute(
BoxLayout.encloseY(
ComponentGroup.enclose(user, password),
login));
content.setUIID("PaddedContainer");
add(CENTER, content);
login.setUIID("BlueButtonOnBlueBackground");
setUIID("SplashForm");
signUp.setUIID("WhiteLinkButton");
needHelp.setUIID("WhiteLinkButton");
content.add(SOUTH, FlowLayout.encloseCenter(signUp, needHelp));
} else {
login.setUIID("BlueButton");
LoginForm
If we are on a phone I want the logo container to shift to the right side of the screen when rotating to landscape this is handled automatically by BorderLayout

if(!isTablet()) {
}
if(getUIManager().
BoxLayout.encloseY(
login));
} else {
LoginForm
If we have ComponentGroup support I'll show the iOS style UI, I prefer this to testing whether this is "iOS" since other platforms might choose to apply that look

if(!isTablet()) {
}
if(getUIManager().
BoxLayout.encloseY(
login));
} else {
LoginForm
We place the UI in a the absolute center so it's in the middle of the content. We wrap the button and ComponentGroup in a box layout on the Y axis so they stick
together in the center.

The login & password go into the ComponentGroup & the login button is placed below.

if(!isTablet()) {
}
if(getUIManager().
BoxLayout.encloseY(
login));
} else {
LoginForm
The PaddedContainer UIID allows us to create some whitespace around the components so they don't stick to the edges when running in a phone

if(!isTablet()) {
}
if(getUIManager().
BoxLayout.encloseY(
login));
} else {
LoginForm
I add the content pane to the center of the UI so it will take up the available space

if(!isTablet()) {
}
if(getUIManager().
BoxLayout.encloseY(
login));
} else {
LoginForm
We place the two signup buttons on the bottom of the UI

login));
} else {
Button forgotPassword = new Button("Forgot Password", "BlueText");
signUp.setUIID("GreenButton");
signUp.setText("Create new Facebook Account");
Container cnt = BoxLayout.encloseY(
user, password, login, forgotPassword, signUp);
cnt.setUIID("PaddedContainer");
cnt.setScrollableY(true);
add(CENTER, cnt);
}
}
protected boolean shouldPaintStatusBar() {
return false;
}
}
LoginForm
The Android version is far simpler, we place the components in a box layout Y and tweak a few UIID's/texts

login));
} else {
Button forgotPassword = new Button("Forgot Password", "BlueText");
signUp.setUIID("GreenButton");
signUp.setText("Create new Facebook Account");
Container cnt = BoxLayout.encloseY(
user, password, login, forgotPassword, signUp);
cnt.setUIID("PaddedContainer");
cnt.setScrollableY(true);
add(CENTER, cnt);
}
}
protected boolean shouldPaintStatusBar() {
return false;
}
}
LoginForm
And finally this hides the status bar line on the top of the form and lets the image occupy that space. The status bar appears on top of the Toolbar and grabs space to
push down the content to leave space for the iPhone X notch and iOS clock etc. It’s a feature of iOS only.

Why we Need the Content Container
One item I skimmed over when reviewing the iOS look code is why we need the content container?

We could have just used the form which is already in BorderLayout and just changed it to use CENTER_BEHAVIOR_CENTER_ABSOLUTE. That would have worked for
portrait but not for landscape…

Since south takes up the space below EAST & WEST it would have produced this image which isn’t what we want.

#Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
capsButtonUiids:"BlueText,GreenButton,BlueButton";
}
theme.css
The next big thing is setting the CSS values. Before I go into the new UIID’s we'll start with one change to an existing CSS selector. This allows the buttons in Android to
appear in all caps.

These are the UIID's that should be considered as buttons.

Since the Button class is very common we don't apply the caps behavior to all buttons by default. If the UIID isn't Button we need to explicitly declare that we are
interested in the text becoming uppercase. Notice this will only apply to platforms where buttons are caps to begin with so if we use BlueText on iOS it won't be
capitalized.

Before we go into the full set of CSS changes here is a map of the UIID’s I’ll mention. You can reference this map if something isn’t clear when I review the code.

LoginTitle {
background-image: url(images/login-banner.jpg);
cn1-source-dpi: 0;
cn1-background-type: cn1-image-scaled-fill;
margin: 0px;
padding: 8mm;
}
PaddedContainer {
padding: 3mm;
margin: 0mm;
background: transparent;
}
BaseButton {
text-align: center;
font-family: "native:MainRegular";
font-size: 2.6mm;
padding: 1.4mm;
margin: 2mm;
color: white;
}
BlueButtonOnBlueBackground {
border-radius: 1mm;
theme.css
We need to add the following to the CSS file to support all the new UIID's, there is quite a lot of code here…

This automatically adds the file to the Resources the login banner is this jpeg which you should place in css/images in your project

LoginTitle {
cn1-source-dpi: 0;
margin: 0px;
padding: 8mm;
}
PaddedContainer {
padding: 3mm;
margin: 0mm;
}
BaseButton {
text-align: center;
font-size: 2.6mm;
padding: 1.4mm;
margin: 2mm;
color: white;
}
border-radius: 1mm;
theme.css
By default the plugin adds multi-images where we can specify the DPI of the source image. By setting the DPI to 0 I state I want a regular image.

Multi Images are great but for a background that would be scaled to fill anyway the pixel perfect scaling of multi-images will probably be wasted.

Multi Images take extra space in the resource file and thus in ram. JPEG is especially eﬃcient in terms of size and for relatively large background images it can be the
ideal option.

LoginTitle {
cn1-source-dpi: 0;
margin: 0px;
padding: 8mm;
}
PaddedContainer {
padding: 3mm;
margin: 0mm;
}
BaseButton {
text-align: center;
font-size: 2.6mm;
padding: 1.4mm;
margin: 2mm;
color: white;
}
border-radius: 1mm;
theme.css
The title image fills available space which should look decent regardless of the resolution for this type of image

LoginTitle {
cn1-source-dpi: 0;
margin: 0px;
padding: 8mm;
}
PaddedContainer {
padding: 3mm;
margin: 0mm;
}
BaseButton {
text-align: center;
font-size: 2.6mm;
padding: 1.4mm;
margin: 2mm;
color: white;
}
border-radius: 1mm;
theme.css
I use a pretty big padding value to give the title area space in both orientations so the image background will show

LoginTitle {
cn1-source-dpi: 0;
margin: 0px;
padding: 8mm;
}
PaddedContainer {
padding: 3mm;
margin: 0mm;
}
BaseButton {
text-align: center;
font-size: 2.6mm;
padding: 1.4mm;
margin: 2mm;
color: white;
}
border-radius: 1mm;
theme.css
We shouldn't change the Container UIID so I added this generic UIID for spacing out the UI a bit

LoginTitle {
cn1-source-dpi: 0;
margin: 0px;
padding: 8mm;
}
PaddedContainer {
padding: 3mm;
margin: 0mm;
}
BaseButton {
text-align: center;
font-size: 2.6mm;
padding: 1.4mm;
margin: 2mm;
color: white;
}
border-radius: 1mm;
theme.css
I use this as the base UIID for buttons as they have a lot of properties in common such as center alignment etc.

I usually prefer to derive UIID's from my own style and avoid deriving from builtin UIID's as those might change in unpredictable ways.

padding: 1.4mm;
margin: 2mm;
color: white;
}
border-radius: 1mm;
background: #587EBE;
cn1-derive: BaseButton;
}
BlueButton {
background: #587EBE;
font-family: "native:MainBold";
}
BlueText {
color: #385898;
}
GreenButton {
background: #00A400;
}
theme.css
We derive the base button UIID. We customize the background color & use a round rect for the border. This pattern repeats in almost all of the following UIID's

}
GreenButton {
}
WhiteLinkButton {
font-family: "native:MainLight";
margin: 0px;
}
TextHint {
font-size: 2.6mm;
padding: 2mm;
}
TextField {
margin: 2mm;
}
GroupElementFirst {
padding: 3mm;
}
GroupElementLast {
padding: 3mm;
}
theme.css
The default TextHint looked bad so we need to customize it to have better fonts/padding. This is the text that appears before we type in the text field

GreenButton {
}
WhiteLinkButton {
margin: 0px;
}
TextHint {
font-size: 2.6mm;
padding: 2mm;
}
TextField {
margin: 2mm;
}
GroupElementFirst {
padding: 3mm;
}
GroupElementLast {
padding: 3mm;
}
theme.css
Additional padding/margin is needed in the text field & the group elements to make them fit better into the UI

public static void showLoginForm() {
new LoginForm().show();
}
UIController
With these changes we are nearly done. There is just one last change to make this all work. We just create and show the login form for now, no extra logic

With that we can run the code and see the UI running.

Next I'll continue with the signup process…

Creating a Facebook Clone - Part IV - Transcript.pdf

More Related Content

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

More from ShaiAlmog1 (20)

Recently uploaded (20)

Creating a Facebook Clone - Part IV - Transcript.pdf