Creating a Facebook Clone - Part VII - Transcript.pdf

Creating a Facebook Clone - Part VII
Next we have the name entry stage in the signup wizard

© Codename One 2017 all rights reserved
The name entry stage in the signup wizard is pretty trivial, there is just one interesting aspect here: The text input.

Notice that the text input looks diﬀerent in Android when we enter text and on iOS it looks completely diﬀerent. This is a part of the "magic" behind the TextComponent
class.

On Android we animate hint labels in the style of material design and in iOS we show a grouped pair.

s.content.addAll(title, rt, next);
return s;
}
public static SignupForm createName() {
SignupForm s = new SignupForm("Name", "Terms",
getCurrentForm());
Label title = new Label("What's Your Name?", "SignupSubHeader");
TextComponent first = new TextComponent().
label("First Name").columns(12);
TextComponent last = new TextComponent().
label("Last Name").columns(12);
TextModeLayout layout = new TextModeLayout(1, 2);
Container textContainer = new Container(layout, "PaddedContainer");
textContainer.add(layout.createConstraint().
widthPercentage(50), first);
widthPercentage(50), last);
last.getField().setDoneListener(e -> createBirthday().show());
s.content.addAll(title, textContainer,
s.createNextButton(e -> createBirthday().show()));
return s;
}
SignupForm
Lets go right into the createName method.

TextComponent is a text input component that combines the label and TextField into one component and automatically adapts it to the platform

return s;
}
getCurrentForm());
return s;
}
SignupForm
TextModeLayout is a layout manager designed for TextComponent it uses TableLayout on Android & BoxLayout on iOS.

This will act like adding to a TableLayout when running in Android thus placing the components side by side.

 
On iOS is would ignore the percentage value and stack the components vertically using a BoxLayout on the Y axis.

The TextModeLayout isn't really a layout as much as it is a delegate. When running in the Android mode (which we refer to as the "on top" mode) the layout is almost an
exact synonym of TableLayout and in fact delegates to an underlying table layout. In fact there is a public final TableLayout instance within the layout that you "can" refer
to directly...

There is one small diﬀerence between the TextModeLayout and the underlying TableLayout and that's our choice to default to align entries to TOP with this mode. It's
important for error handling which I didn't use here.

When working in the non-android environment we use a BoxLayout on the Y axis as the basis. There is one thing we do here that's diﬀerent from a default box layout and
that's grouping. Grouping allows the labels to align by setting them to the same width, internally it just invokes Component.setSameWidth(). Since text components hide
the labels there is a special group method there that can be used. However, this is implicit with the TextModeLayout which is pretty cool.

return s;
}
getCurrentForm());
return s;
}
SignupForm
This listens to the done button in the virtual keyboard and automatically treats it as a click on next button

FloatingHint {
font-family: "native:MainRegular";
font-size: 2mm;
padding: 2mm 2mm 0.5mm 2mm;
margin: 0px;
color: black;
}
theme.css
For this form I need to add one change to the CSS. This is the text that appears on top of the Android field when we have input there.

It's a really small label that uses regular font for visibility instead of light.

With that we finished the name form and it should "just work”...

Birthday is the form I'm currently least happy with. We are in the process of rewriting the Picker component which would hopefully allow a much better looking UI for this
Form. For now I compromised on this. When the UI is clicked on the device you will see a nice looking date picker UI though...

return s;
}
public static SignupForm createBirthday() {
SignupForm s = new SignupForm("Birthday",
"Name",
getCurrentForm());
Label title = new Label("What's Your Birthday?", "SignupSubHeader");
Picker datePicker = new Picker();
datePicker.setType(PICKER_TYPE_DATE);
int twentyYears = 60000 * 60 * 24 * 365 * 20;
datePicker.setDate(new Date(System.currentTimeMillis() -
twentyYears));
s.content.addAll(title, datePicker,
s.createNextButton(e -> createGender().show()));
return s;
}
private static RadioButton createGenderButton(ButtonGroup bg,
String label, String icon) {
Style unselectedIconStyle = UIManager.getInstance().
SignupForm
The flip side is that the code is super simple.

return s;
}
"Name",
getCurrentForm());
int twentyYears = 60000 * 60 * 24 * 365 * 20;
twentyYears));
return s;
}
SignupForm
We set the picker type to date

return s;
}
"Name",
getCurrentForm());
int twentyYears = 60000 * 60 * 24 * 365 * 20;
twentyYears));
return s;
}
SignupForm
Twenty years ago is a good place to start for an age picker by default so that’s what I did. That's trivial and includes no changes to the CSS.

The gender form is pretty simple, we have a couple of UIID’s for the gender toggle & icons.

twentyYears));
return s;
}
getComponentStyle("GenderIcons");
Style selectedIconStyle = UIManager.getInstance().
getComponentSelectedStyle("GenderIcons");
FontImage unIcon =
FontImage.create(icon, unselectedIconStyle);
FontImage selIcon =
FontImage.create(icon, selectedIconStyle);
RadioButton rb = RadioButton.createToggle(label, unIcon, bg);
rb.setTextPosition(BOTTOM);
rb.setRolloverIcon(selIcon);
rb.setPressedIcon(selIcon);
rb.setUIID("GenderToggle");
return rb;
}
public static SignupForm createGender() {
SignupForm
Before we can go into it I created a small helper method to make the two gender buttons. Toggle buttons in Codename One can be radio buttons. That means that we
can pick only one of them, when we click on female the male entry is deselected

twentyYears));
return s;
}
FontImage unIcon =
FontImage selIcon =
return rb;
}
SignupForm
We create the font icon based on a separate UIID because we want it to be much bigger than the text on the button. So we can't just use setMaterialIcon.

twentyYears));
return s;
}
FontImage unIcon =
FontImage selIcon =
return rb;
}
SignupForm
Here we create the radio button and set the text positioning. A radio button belongs to a group & only one member of the group can be selected

return rb;
}
SignupForm s = new SignupForm("Gender",
"Birthday",
getCurrentForm());
Label title = new Label("What's Your Gender?", "SignupSubHeader");
ButtonGroup bg = new ButtonGroup();
RadioButton female = createGenderButton(bg, "Female", "ue800");
RadioButton male = createGenderButton(bg, "Male", "ue801");
Container buttons = GridLayout.encloseIn(2, female, male);
buttons.setUIID("PaddedContainer");
s.content.addAll(title, buttons,
s.createNextButton(e -> createNumber().show()));
return s;
}
SignupForm
That's mostly simple boilerplate code. The Form code is even simpler.

return rb;
}
"Birthday",
getCurrentForm());
return s;
}
SignupForm
We use ButtonGroup to tie two or more radio buttons together. Only one of the radio buttons in a group can be selected

return rb;
}
"Birthday",
getCurrentForm());
return s;
}
SignupForm
GridLayout gives both buttons the exact same size

GenderIcons {
cn1-derive: IconFont;
color: #587EBE;
}
GenderIcons.selected, GenderIcons.pressed {
color: white;
}
GenderToggle {
text-align: center;
border-radius: 3mm;
padding: 4mm;
background: white;
margin: 2mm;
border-color: #cccccc;
border-width: 1px;
}
GenderToggle.selected, GenderToggle.pressed {
background: #587EBE;
border-width: 1px;
}
theme.css
The last piece for this form is the CSS for the UIID's we defined.

The gender icon uses the same icon settings as the logo with a diﬀerent color

GenderIcons {
color: #587EBE;
}
color: white;
}
GenderToggle {
text-align: center;
border-radius: 3mm;
padding: 4mm;
background: white;
margin: 2mm;
border-width: 1px;
}
border-width: 1px;
}
theme.css
We have a special case for the selected/pressed versions of the UIID to make the icon white

GenderIcons {
color: #587EBE;
}
color: white;
}
GenderToggle {
text-align: center;
border-radius: 3mm;
padding: 4mm;
background: white;
margin: 2mm;
border-width: 1px;
}
border-width: 1px;
}
theme.css
The GenderToggle UIID uses a round rect border with a gray line surrounding it

Once we did all of that we can run the app and we would be halfway through the wizard!

Creating a Facebook Clone - Part VII - Transcript.pdf

Recommended

Recommended

More Related Content

More from ShaiAlmog1

More from ShaiAlmog1 (20)

Creating a Facebook Clone - Part VII - Transcript.pdf