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 II

2. Goals
✦Native UI Look
✦Screen flow
✦Tablet & Orientation
✦Plain Text Password
© Codename One 2017 all rights reserved

3. Goals
✦Signup
✦Newsfeed
✦Friends
✦Notifications
✦Settings
✦Text Posts
© Codename One 2017 all rights reserved
✦Picture posts
✦Video posts
✦Camera
✦Simple search
✦Likes
✦Comments

4. What we Won't Cover
✦Events
✦Camera Special Effects
✦Additional apps
✦Find friends & complex searches
✦Hashtags & complex posts
✦Privacy & Visibility
✦Pretty much all the details
© Codename One 2017 all rights reserved

5. Architecture Strategy
✦Use Properties
✓ Store data
✓ Transmit data
✓ Automatically create UI's from data
✦UI Controller
© Codename One 2017 all rights reserved

6. © Codename One 2017 all rights reserved
Mockup

7. CSS
✦CSS Is Changing
✦https://github.com/shannah/cn1-css
© Codename One 2017 all rights reserved

8. Facebook Logo & Gender Icons
✦Icon Font
✦fontello.com
✦Add Facebook Logo & Gender Icons
© Codename One 2017 all rights reserved

9. Facebook Logo & Gender Icons
© Codename One 2017 all rights reserved

10. Facebook Logo & Gender Icons
© Codename One 2017 all rights reserved

11. Facebook Logo & Gender Icons
© Codename One 2017 all rights reserved

12. #Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
}
StatusBar {
background: transparent;
}
Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
theme.css

13. #Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
}
StatusBar {
background: transparent;
}
Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
theme.css

14. #Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
}
StatusBar {
background: transparent;
}
Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
theme.css

15. #Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
}
StatusBar {
background: transparent;
}
Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
theme.css

16. #Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
}
StatusBar {
background: transparent;
}
Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
theme.css

17. #Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
}
StatusBar {
background: transparent;
}
Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
theme.css

18. #Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
}
StatusBar {
background: transparent;
}
Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
theme.css

19. Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
IconFont {
font-family: "facebook";
font-size: 13mm;
color: white;
background-color: transparent;
}
Form {
background-color: white;
margin: 0px;
padding: 0px;
}
theme.css

20. Container {
background: transparent;
}
Default {
color: black;
font-family: "native:MainLight";
font-size: 2.6mm;
}
@font-face {
font-family: "facebook";
src: url(res/facebook.ttf);
}
IconFont {
font-family: "facebook";
font-size: 13mm;
color: white;
background-color: transparent;
}
Form {
background-color: white;
margin: 0px;
padding: 0px;
}
theme.css