Creating an Uber - Part VI - Transcript.pdf

Creating an Uber Clone - Part VI
In this part we’ll go into SMS Activation flow

Enter Mobile Number
© Codename One 2017 all rights reserved
The first form in the SMS activation flow is the enter mobile number form. It’s a simple form even though there are some interesting subtle features here. The cool thing is
that we did almost all of the work for this element already

public class EnterMobileNumberForm extends Form {
public EnterMobileNumberForm() {
super(BoxLayout.y());
Form previous = getCurrentForm();
getToolbar().setBackCommand("", Toolbar.BackCommandPolicy.AS_ARROW,
e -> previous.showBack());
add(new Label("Enter your mobile number", "FlagButton"));
CountryCodePicker countryCodeButton = new CountryCodePicker();
TextField phoneNumber = new TextField("", "050-123-4567", 40,
TextField.PHONENUMBER);
add(BorderLayout.centerEastWest(
phoneNumber,
null,
countryCodeButton));
Style ps = phoneNumber.getUnselectedStyle();
Style cs = countryCodeButton.getUnselectedStyle();
int pl = cs.getPaddingLeft(isRTL());
int pr = cs.getPaddingRight(isRTL());
countryCodeButton.getAllStyles().setPaddingUnit(Style.UNIT_TYPE_PIXELS);
countryCodeButton.getAllStyles().setPadding(ps.getPaddingTop(),
ps.getPaddingBottom(), pl, pr);
EnterMobileNumberForm
Let’s jump right into the code that makes that form…

We use standard back navigation since the toolbar is pretty standard here

phoneNumber,
null,
The phone number text field is right next to the country code button. We place it in the center of a border layout so it will take up all available space

phoneNumber,
null,
I want the padding on the text field and button to match so they align properly. Once paddings are set they are always in pixels so we need to change the style to use
pixels. I don't want to impact the left/right padding values so I extract them first and save them so I can restore them into the UI. I could technically create a separate
UIID to align both but I wanted to do this in the code so future changes to the theme won't break alignment

Just so you’ll get a sense of why this exists this screenshot shows side by side how this looks with and without the alignment code. Guess which is the right one…

setEditOnShow(phoneNumber);
FloatingActionButton fab = FloatingActionButton.createFAB(
FontImage.MATERIAL_ARROW_FORWARD);
fab.bindFabToContainer(this);
fab.addActionListener(e -> {
String number = phoneNumber.getText();
if(number.startsWith("0")) {
number = number.substring(1);
}
new EnterSMSVerificationDigitsForm(countryCodeButton.getText() +
"-" + number).show();
});
}
}
You can start editing a text field by invoking startEditing. However, this is a bit more challenging to do with a form that isn't showing yet so we have a special case for
that: setEditOnShow.

And this is pretty much it for this form…

SMS Verification
Once the number is entered we move to the SMS verification stage or password entry stage. In this case I’ve hardcoded the SMS verification stage. I didn’t do the SMS
re-send countdown but I did do the number input. Notice that the text fields look like Android text fields but have a sort of center alignment structure. Also notice that the
error mode spans the 4 text elements…

Lets jump into the code and look at how this was done.

public class EnterSMSVerificationDigitsForm extends Form {
public EnterSMSVerificationDigitsForm(String phone) {
super(new BorderLayout());
Container box = new Container(BoxLayout.y());
box.setScrollableY(true);
box.add(new SpanLabel("Enter the 4-digit code sent to you at " + phone,
"FlagButton"));
TextField[] digits = createDigits(4);
setEditOnShow(digits[0]);
box.add(BoxLayout.encloseX(digits));
SpanLabel error = new SpanLabel("The SMS passcode you've entered is incorrect",
"ErrorLabel");
error.setVisible(false);
box.add(error);
add(CENTER, box);
Label resend = new Label("Resend code in 00:12", "ResendCode");
add(SOUTH, resend);
EnterSMSVerificationDigitsForm
The EnterSMSVerificationDigitsForm is a bit of a mouthful but it describes the function of the form rather well. Lets go over this form line by line…

We use a border layout and place a box in the center which we make scrollable on the Y axis. The reason for the border layout is so we can stick the countdown label in
the south. Otherwise I would have used box layout for the entire form.

Notice I set the container to be scrollable on the Y axis, this is important for containers where we have text input. It allows our keyboard code to resize the container
properly when the keyboard shows.

I’d like to also point out that I used the standard back command in the toolbar.

"FlagButton"));
"ErrorLabel");
box.add(error);
add(CENTER, box);
add(SOUTH, resend);
We create an array of text fields to loop over. This allows us to easily change the code to accept 6 digits. I’ll discuss the createDigits method soon

"FlagButton"));
"ErrorLabel");
box.add(error);
add(CENTER, box);
add(SOUTH, resend);
Yes, this works! It adds all the components in the array so it will add the 4 digit text fields

"FlagButton"));
"ErrorLabel");
box.add(error);
add(CENTER, box);
add(SOUTH, resend);
The error label is always there we just hide it

"FlagButton"));
"ErrorLabel");
box.add(error);
add(CENTER, box);
add(SOUTH, resend);
For now I don't animate the resend text. Again, notice that I use BorderLayout to position the resend label at the bottom and place the rest of the stuﬀ in a BoxLayout in
the center

if(!isValid(toString(digits))) {
error.setVisible(true);
errorFields(digits);
repaint();
return;
}
new EnterPasswordForm().show();
});
}
private TextField[] createDigits(int count) {
TextField[] response = new TextField[count];
for(int iter = 0 ; iter < count ; iter++) {
TextField t = new TextField("", "0", 1, TextField.NUMERIC);
t.setUIID("Digit");
t.getHintLabel().getAllStyles().setAlignment(CENTER);
response[iter] = t;
}
When the floating action button is pressed we validate the input so we can decide whether to show an error or proceed

if(!isValid(toString(digits))) {
error.setVisible(true);
errorFields(digits);
repaint();
return;
}
new EnterPasswordForm().show();
});
}
t.setUIID("Digit");
response[iter] = t;
}
The generic creation code creates the array of numeric text fields and aligns the hints to the center

t.setUIID("Digit");
response[iter] = t;
}
for(int iter = 0 ; iter < count - 1 ; iter++) {
onTypeNext(response[iter], response[iter + 1]);
}
return response;
}
private void errorFields(TextField... fields) {
for(TextField f : fields) {
f.getAllStyles().setBorder(Border.createUnderlineBorder(2, 0xcc0000));
f.getSelectedStyle().setBorder(Border.createUnderlineBorder(4, 0xcc0000));
}
}
This logic makes sure that once we type a character the input will automatically move to the next text field

t.setUIID("Digit");
response[iter] = t;
}
for(int iter = 0 ; iter < count - 1 ; iter++) {
onTypeNext(response[iter], response[iter + 1]);
}
return response;
}
}
}
In case of an error we just change the underline style. We could have also done this by invoking setUIID which might have been more elegant

}
}
private String toString(TextField[] digits) {
StringBuilder s = new StringBuilder();
for(TextField t : digits) {
s.append(t.getAsInt(0));
}
return s.toString();
}
public boolean isValid(String s) {
return s.startsWith("0");
}
private void onTypeNext(TextField current, TextField next) {
current.addDataChangedListener((i, ii) -> {
if(current.getText().length() == 1) {
current.stopEditing();
next.startEditingAsync();
}
});
We bind a listener to each text field and if the length of the text is 1 we stop editing and move to the next text field. And this is pretty much it with the exception of the
styles we had to add to make this happen…

Digit
The Digit style is a special case of the text field specifically designed for this form. The main reason for a special style is the problematic center alignment in text field.
Because of the way this works I preferred using a 1 millimeter padding on the sides to give the feel of center alignment in this case.

Center alignment works in text area, label etc. However, it's flaky in text fields because it's really hard to get the position right when moving from lightweight to native
editing

Digit
Another important bit is the smaller margin that makes the fields stand closer to one another

Digit
As I mentioned before since this is a specialization of text field we derive from the text field class.

One thing to notice is that in the selected style we need to override the border as well to implement a 4 pixel underline border. It’s because we derive from the unselected
digit and not from the selected version of text field so we need to re-define how a selected digit entry looks

Digit
However, we also override the font size to make it slightly smaller and thus more consistent with the native Uber app

ErrorLabel
The error label is just a red on white label

ErrorLabel
It has a bit of a smaller padding so it can use up space

ErrorLabel
It still has 0 margin like most components

ErrorLabel
But it has a smaller light font at 2.8 millimeters which is more consistent with the material design aesthetic

ResendCode
The ResendCode style just pads the text so it will align properly with the FloatingActionButton

ResendCode
It leaves margin as 0 by default

ResendCode
But it has smaller text size than a typical label

Password Entry Form
The last form in the SMS activation flow is the password entry form. It’s a trivial form after the others we’ve been through here so I’ll gloss over it relatively quickly.

public class EnterPasswordForm extends Form {
public EnterPasswordForm() {
box.add(new SpanLabel("Welcome back, signin to continue", "FlagButton"));
TextField password = new TextField("", "Enter your password", 80, TextField.PASSWORD);
setEditOnShow(password);
box.add(password);
SpanLabel error = new SpanLabel("Password error", "ErrorLabel");
box.add(error);
add(CENTER, box);
Button forgot = new Button("I forgot my password", "ForgotPassword");
Button account = new Button("I don't have an account", "ForgotPassword");
add(SOUTH, BoxLayout.encloseY(forgot, account));
new MapForm().show();
});
}
}
EnterPasswordForm
This is the entire form code literally in one page. After the activation form there is literally nothing new or interesting here.

The only aspect that’s here and wasn’t there is the “ForgotPassword” UIID which we align with the floating action button. In this case we have 2 elements that we enclose
in a box layout Y in the south. Most of the work here is in the UIID itself.

ForgotPassword
The forgot password buttons have a bluish color and are transparent

ForgotPassword
The padding is carefully measured to align properly with the floating action button

ForgotPassword
Margin is zero as usual

ForgotPassword
The font is a relatively small 2.5 millimeter size. And that concludes the SMS activation UI flow mockup!

Creating an Uber - Part VI - Transcript.pdf

Recommended

Recommended

More Related Content

Similar to Creating an Uber - Part VI - Transcript.pdf

Similar to Creating an Uber - Part VI - Transcript.pdf (20)

More from ShaiAlmog1

More from ShaiAlmog1 (20)

Recently uploaded

Recently uploaded (20)

Creating an Uber - Part VI - Transcript.pdf