6. 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.
7. 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),
"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 differ
8. 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),
"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
The text entry is just one text field so the UI is pretty trivial
9. 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),
"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
Notice I use constraint which will determine the type of virtual keyboard I’ll use
10. 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),
"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 ->
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
11. 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),
"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 ->
createPassword(TextArea.PHONENUMBER == constraint,
textEntry.getText()).show()));
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"
12. 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),
"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 ->
createPassword(TextArea.PHONENUMBER == constraint,
textEntry.getText()).show()));
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
stuff it will be further clarified with the actual calls to this method:
13. 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
These are the labels we show in the Form
14. 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
The text input constraint, in this case it's a phone number. In the other case it will be an email address constraint
15. 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
Navigation to the "other" Form here we navigate to the email entry form and there we'll navigate to the number
16. mobile.addActionListener(goToOther);
s.south.addComponent(0, mobile);
s.content.addAll(title, textContainer,
s.createNextButton(e ->
createPassword(TextArea.PHONENUMBER == constraint,
textEntry.getText()).show()));
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.
17. 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...
19. "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").
columns(20);
Container textContainer = new Container(new TextModeLayout(1, 1),
"PaddedContainer");
textContainer.add(password);
s.content.addAll(title, textContainer,
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.
20. "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").
columns(20);
Container textContainer = new Container(new TextModeLayout(1, 1),
"PaddedContainer");
textContainer.add(password);
s.content.addAll(title, textContainer,
s.createNextButton(e -> createConfirmation(phone, value).show()));
return s;
}
public static SignupForm createConfirmation(
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!
21. s.content.addAll(title, textContainer,
s.createNextButton(e -> createConfirmation(phone, value).show()));
return s;
}
public static SignupForm createConfirmation(
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
23. s.content.addAll(title, textContainer,
s.createNextButton(e -> createConfirmation(phone, value).show()));
return s;
}
public static SignupForm createConfirmation(
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 subtitle can span lines here depending on the size of the phone screen
24. 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");
}
TextComponent confirm = new TextComponent().
label("Confirmation Code").
columns(20).
constraint(TextArea.NUMERIC);
Container textContainer = new Container(new TextModeLayout(1, 1),
"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
25. 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");
}
TextComponent confirm = new TextComponent().
label("Confirmation Code").
columns(20).
constraint(TextArea.NUMERIC);
Container textContainer = new Container(new TextModeLayout(1, 1),
"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
27. 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