Creating a Facebook Clone - Part VIII - Transcript.pdf

Creating a Facebook Clone - Part VIII
We are nearing the end of the signup wizard UI

© Codename One 2017 all rights reserved
The next stage would be

Your mobile number but that’s a bit of a special case

Because it leads to the email address & both of these are eﬀectively the same form

They both look pretty similar to one another and similar between iOS/Android with the obvious platform diﬀerences.

s.createNextButton(e -> createNumber().show()));
return s;
}
public static SignupForm createNumber() {
return createMobileOrEmail("Mobile Number",
"What's Your Mobile Number?",
"Sign Up With Email Address",
TextArea.PHONENUMBER,
e -> createEmail().show());
}
private static SignupForm createMobileOrEmail(String formTitle,
String subtitle, String signUpWith, int constraint,
ActionListener goToOther) {
SignupForm s = new SignupForm(formTitle, getCurrentForm().getTitle(),
getCurrentForm());
Label title = new Label(subtitle, "SignupSubHeader");
TextComponent textEntry = new TextComponent().
label(formTitle).
columns(20).
constraint(constraint);
Container textContainer = new Container(new TextModeLayout(1, 1),
SignupForm
This is createNumber() notice that it delegates all of the work to createMobileOrEmail so lets start there first and come back.

}
getCurrentForm());
label(formTitle).
columns(20).
"PaddedContainer");
textContainer.add(textEntry);
Button mobile = new Button(signUpWith, "BoldBlueLink");
mobile.addActionListener(goToOther);
s.south.addComponent(0, mobile);
s.content.addAll(title, textContainer,
s.createNextButton(e ->
SignupForm
We can reach this Form either from gender or from Email/Number based on going back & forth. So the title of the back command can diﬀer

}
getCurrentForm());
label(formTitle).
columns(20).
"PaddedContainer");
SignupForm
The text entry is just one text field so the UI is pretty trivial

}
getCurrentForm());
label(formTitle).
columns(20).
"PaddedContainer");
SignupForm
Notice I use constraint which will determine the type of virtual keyboard I’ll use

getCurrentForm());
label(formTitle).
columns(20).
"PaddedContainer");
createPassword(TextArea.PHONENUMBER == constraint,
textEntry.getText()).show()));
return s;
}
SignupForm
We pass the action listener on the link, it will navigate to the "other" form. E.g. If we are in phone entry it will go to email entry

getCurrentForm());
label(formTitle).
columns(20).
"PaddedContainer");
return s;
}
SignupForm
We add a button to the south Container. This is the "Sign Up With Email Address" link or the similar "Sign Up With Mobile Number"

getCurrentForm());
label(formTitle).
columns(20).
"PaddedContainer");
return s;
}
SignupForm
We pass true if this is a phone number & false for email. We also pass the text of the phone/email. We'll display that in the confirmation Form. That was mostly standard
stuﬀ it will be further clarified with the actual calls to this method:

return s;
}
}
getCurrentForm());
label(formTitle).
columns(20).
SignupForm
These are the labels we show in the Form

return s;
}
}
getCurrentForm());
label(formTitle).
columns(20).
SignupForm
The text input constraint, in this case it's a phone number. In the other case it will be an email address constraint

return s;
}
}
getCurrentForm());
label(formTitle).
columns(20).
SignupForm
Navigation to the "other" Form here we navigate to the email entry form and there we'll navigate to the number

return s;
}
public static SignupForm createEmail() {
return createMobileOrEmail("Email Address",
"What's Your Email Address?",
"Sign Up With Mobile Number",
TextArea.EMAILADDR,
e -> createNumber().show());
}
public static SignupForm createPassword(boolean phone, String value) {
SignupForm s = new SignupForm("Password",
getCurrentForm().getTitle(),
getCurrentForm());
Label title = new Label("Choose a Password", "SignupSubHeader");
TextComponent password = new TextComponent().
label("Password").
SignupForm
As you can see the email version is practically identical.

BoldBlueLink {
cn1-derive: BlueLink;
font-family: "native:MainBold";
}
theme.css
That's pretty much it for these two forms, we will need one CSS entry though. It's the same as `BlueLink` only bold. Once we do this email/number toggle should work...

There is nothing interesting here. I considered making a generic method that would generate this and the phone number/email form but decided against that. I think that
would have overgeneralized. It would have created overly confusing code.

TextArea.EMAILADDR,
}
getCurrentForm());
label("Password").
columns(20);
"PaddedContainer");
textContainer.add(password);
s.createNextButton(e -> createConfirmation(phone, value).show()));
return s;
}
public static SignupForm createConfirmation(
SignupForm
The code is pretty much text book boilerplate. Nothing much to talk about.

TextArea.EMAILADDR,
}
getCurrentForm());
label("Password").
columns(20);
"PaddedContainer");
textContainer.add(password);
return s;
}
SignupForm
The only thing worth noticing in this form is the `phone` & `value` variables that are passed right through the method to the confirmation form. We can now move to the
last stage of signup as there is no CSS or anything else to this form!

return s;
}
boolean phone, String value) {
SignupForm s = new SignupForm("Account Confirmation", "Password",
getCurrentForm());
SpanLabel title;
if(phone) {
title = new SpanLabel("Enter the code from your mobile phone",
"SignupSubHeader");
} else {
title = new SpanLabel("Enter the code from your email",
"SignupSubHeader");
}
SpanLabel line;
if(phone) {
line = new SpanLabel("Let us know this phone belongs to you. "
+ "Enter the code in the SMS sent to " + value, "CenterLabel");
} else {
line = new SpanLabel("Let us know this email belongs to you. "
+ "Enter the code in the message sent to " + value,
"CenterLabel");
SignupForm
The final stage of the signup process is the account confirmation Form

This is a trivial form as well but it does include minor things to notice.

return s;
}
boolean phone, String value) {
SignupForm s = new SignupForm("Account Confirmation", "Password",
getCurrentForm());
SpanLabel title;
if(phone) {
"SignupSubHeader");
} else {
"SignupSubHeader");
}
SpanLabel line;
if(phone) {
} else {
"CenterLabel");
SignupForm
The subtitle can span lines here depending on the size of the phone screen

"SignupSubHeader");
} else {
"SignupSubHeader");
}
SpanLabel line;
if(phone) {
} else {
"CenterLabel");
}
TextComponent confirm = new TextComponent().
label("Confirmation Code").
columns(20).
constraint(TextArea.NUMERIC);
"PaddedContainer");
textContainer.add(confirm);
SignupForm
We have a special center aligned message that includes the content we passed from the phone/email stage of the wizard

SpanLabel line;
if(phone) {
} else {
"CenterLabel");
}
TextComponent confirm = new TextComponent().
label("Confirmation Code").
columns(20).
constraint(TextArea.NUMERIC);
"PaddedContainer");
textContainer.add(confirm);
Button done = s.createNextButton(e -> UIController.showMainUI());
done.setText("Confirm");
s.content.addAll(title, line, textContainer, done);
return s;
}
}
SignupForm
When done we show the main UI, I’ll add a stub for this method soon

CenterLabel {
text-align: center;
font-size: 2.2mm;
}
theme.css
We just have one more tiny change to the CSS, we need to add the new CenterLabel style

public static void showSignup() {
SignupForm.createTerms().show();
}
public static void showMainUI() {
}
UIController
Finally we need to add some wiring to show the signup process. In UIController we'll add a new signup call and we will also need a stub for showMainUI() so the signup
wizard will compile

signUp.addActionListener(e -> UIController.showSignup());
LoginForm
And finally we bind the signup wizrd to the LoginForm constructor using this code…

With that the signup process mockup is done and we can move to mocking up the main UI.

Creating a Facebook Clone - Part VIII - Transcript.pdf

More Related Content

Similar to Creating a Facebook Clone - Part VIII - Transcript.pdf (14)

More from ShaiAlmog1 (20)

Recently uploaded (20)

Creating a Facebook Clone - Part VIII - Transcript.pdf