This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

1. Creating a Facebook Clone - Part IV

2. © Codename One 2017 all rights reserved

3. © Codename One 2017 all rights reserved

4. © Codename One 2017 all rights reserved

5. © Codename One 2017 all rights reserved

6. 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());
LoginForm

7. 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());
LoginForm

8. 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());
LoginForm

9. 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());
LoginForm

10. 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());
LoginForm

11. 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());
LoginForm

12. 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);
}
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 {
LoginForm

13. 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);
}
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 {
LoginForm

14. 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);
}
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 {
LoginForm

15. 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);
}
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 {
LoginForm

16. 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);
}
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 {
LoginForm

17. 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);
}
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 {
LoginForm

18. 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");
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

19. 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");
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

20. Why we Need the Content Container
© Codename One 2017 all rights reserved

21. #Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
capsButtonUiids:"BlueText,GreenButton,BlueButton";
}
theme.css

22. © Codename One 2017 all rights reserved

23. 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 {
theme.css

24. 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 {
theme.css

25. 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 {
theme.css

26. 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 {
theme.css

27. 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 {
theme.css

28. 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 {
theme.css

29. padding: 1.4mm;
margin: 2mm;
color: white;
}
BlueButtonOnBlueBackground {
border-radius: 1mm;
background: #587EBE;
cn1-derive: BaseButton;
}
BlueButton {
background: #587EBE;
font-family: "native:MainBold";
cn1-derive: BaseButton;
}
BlueText {
cn1-derive: BaseButton;
font-family: "native:MainBold";
color: #385898;
background: transparent;
}
GreenButton {
cn1-derive: BaseButton;
font-family: "native:MainBold";
background: #00A400;
theme.css

30. }
GreenButton {
cn1-derive: BaseButton;
font-family: "native:MainBold";
background: #00A400;
}
WhiteLinkButton {
cn1-derive: BaseButton;
font-family: "native:MainLight";
margin: 0px;
}
TextHint {
font-family: "native:MainLight";
font-size: 2.6mm;
padding: 2mm;
}
TextField {
margin: 2mm;
}
GroupElementFirst {
padding: 3mm;
}
GroupElementLast {
padding: 3mm;
theme.css

31. GreenButton {
cn1-derive: BaseButton;
font-family: "native:MainBold";
background: #00A400;
}
WhiteLinkButton {
cn1-derive: BaseButton;
font-family: "native:MainLight";
margin: 0px;
}
TextHint {
font-family: "native:MainLight";
font-size: 2.6mm;
padding: 2mm;
}
TextField {
margin: 2mm;
}
GroupElementFirst {
padding: 3mm;
}
GroupElementLast {
padding: 3mm;
}
theme.css

32. public static void showLoginForm() {
new LoginForm().show();
}
UIController