This document discusses building native mobile apps for all platforms using Codename One. Codename One is an open source tool that allows developers to write Java code once and deploy to multiple platforms including iOS, Android and Windows Phone. It provides GUI components, theme support, localization tools and abstracts away differences between devices. The document demonstrates how to generate a sample project, make simple UI modifications, add a camera capture feature, and install the app on devices. It concludes with pointers for additional Codename One resources.

1. Introduction
Devices
Codename One
Application
Deployment
Questions
Building Native Mobile Apps For
All Platforms Using Codename
One
Shai Almog
@Codename_One

2. Introduction
Devices
Codename One
Application
Deployment
Questions
Who Am I?
Shai Almog
shai@codenameone.com
Co-founder & CEO of Codename One
JavaOne Rockstar, DZone MVB, JavaZone top speaker…
Worked on mobile development tools since the 90’s at Sun
Member of original WTK team, co-creator of LWUIT project
Worked with Sun/Oracle, IBM, DoCoMo, Nokia, Samsung,
Verizon, Sprint, Vodafone, Sony Ericsson and more
Open source hacker, Java developer since 96
Over 20 years of professional software development
experience

3. Introduction
Devices
Codename One
Application
Deployment
Questions
Why Is Mobile Different
• DPI - Density
• iOS requires Mac, Windows Phone requires Windows
• Changes
• Certificates - provisioning

4. Introduction
Devices
Codename One
Application
Deployment
Questions
Why Is Mobile Different
• DPI - Density
• iOS requires Mac, Windows Phone requires Windows
• Changes
• Certificates - provisioning

5. Introduction
Devices
Codename One
Application
Deployment
Questions
What Is Codename One
• Open source - Java for all devices
• Supports iOS, Android & Windows Phone
• Integrates with Eclipse, NetBeans & IntelliJ
• GUI builder, theme editor, localization tools
• API abstracting device
• Designed for Tablets/Phones
• Cloud based compilation

6. Introduction
Problem
Codename One
Competitors
Market
Final Words
How Does It Work?

7. Introduction
Problem
Codename One
Competitors
Market
Final Words
Java Developer
How Does It Work?

8. Introduction
Problem
Codename One
Competitors
Market
Final Words
How Does It Work?
Build App With
Any IDE

9. Introduction
Problem
Codename One
Competitors
Market
Final Words
How Does It Work?
Generate native
code in the cloud

10. Introduction
Problem
Codename One
Competitors
Market
Final Words
How Does It Work?
In the case of
iOS the Java bytecode is
translated to C and
compiled using Xcode

11. Introduction
Devices
Codename One
Application
Deployment
Questions
Demo
Apps On Devices

12. Introduction
Devices
Codename One
Application
Deployment
Questions
Lets Build an App…

13. Introduction
Devices
Codename One
Application
Deployment
Questions
Generating Project

14. Introduction
Devices
Codename One
Application
Deployment
Questions
Generating Project

15. Introduction
Devices
Codename One
Application
Deployment
Questions
Generating Project

16. Introduction
Devices
Codename One
Application
Deployment
Questions
Generated Project Starting Point
public void start() {
if(current != null){
current.show();
return;
}
Form hi = new Form("Hi World");
hi.addComponent(new Label("Hi World"));
hi.show();
}

17. Introduction
Devices
Codename One
Application
Deployment
Questions
Generated Project Starting Point
public void start() {
if(current != null){
current.show();
return;
}
Form hi = new Form("Hi World");
hi.addComponent(new Label("Hi World"));
hi.show();
}
Hi World

18. Introduction
Devices
Codename One
Application
Deployment
Questions
Generated Project Starting Point
public void start() {
if(current != null){
current.show();
return;
}
Form hi = new Form("Hi World");
hi.addComponent(new Label("Hi World"));
hi.show();
}
Hi World

19. Introduction
Devices
Codename One
Application
Deployment
Questions
Generated Project Starting Point
Form hi = new Form("Rounder");
hi.setLayout(new BorderLayout());
final Label picture = new Label("");
picture.getUnselectedStyle().setPadding(0, 0, 0, 0);
picture.getUnselectedStyle().setMargin(0, 0, 0, 0);
hi.addComponent(BorderLayout.CENTER, picture);
hi.addCommand(new Command("Picture") {
public void actionPerformed(ActionEvent evt) {
captureRoundImage(picture);
}
});
hi.show();

20. Introduction
Devices
Codename One
Application
Deployment
Questions
Generated Project Starting Point
Form hi = new Form("Rounder");
hi.setLayout(new BorderLayout());
final Label picture = new Label("");
picture.getUnselectedStyle().setPadding(0, 0, 0, 0);
picture.getUnselectedStyle().setMargin(0, 0, 0, 0);
hi.addComponent(BorderLayout.CENTER, picture);
hi.addCommand(new Command("Picture") {
public void actionPerformed(ActionEvent evt) {
captureRoundImage(picture);
}
});
hi.show();
Changed Title
Set Layout
Removed
Spacing From
Label
Command
handles menu
functionality

21. Introduction
Devices
Codename One
Application
Deployment
Questions
Generated Project Starting Point
Form hi = new Form("Rounder");
hi.setLayout(new BorderLayout());
final Label picture = new Label("");
picture.getUnselectedStyle().setPadding(0, 0, 0, 0);
picture.getUnselectedStyle().setMargin(0, 0, 0, 0);
hi.addComponent(BorderLayout.CENTER, picture);
hi.addCommand(new Command("Picture") {
public void actionPerformed(ActionEvent evt) {
captureRoundImage(picture);
}
});
hi.show();
Changed Title
Set Layout
Removed
Spacing From
Label
Command
handles menu
functionality

22. Introduction
Devices
Codename One
Application
Deployment
Questions
private void captureRoundImage(Label result) {
try {
int width = Display.getInstance().getDisplayWidth();
Image capturedImage =
Image.createImage(Capture.capturePhoto(width, -1));
Image roundMask =
Image.createImage(width, capturedImage.getHeight(),
0xff000000);
Graphics gr = roundMask.getGraphics();
gr.setColor(0xffffff);
gr.fillArc(0, 0, width, width, 0, 360);
Object mask = roundMask.createMask();
capturedImage = capturedImage.applyMask(mask);
result.setIcon(capturedImage);
} catch(IOException err) {
err.printStackTrace();
}
}
Generated Project Starting Point

23. Introduction
Devices
Codename One
Application
Deployment
Questions
private void captureRoundImage(Label result) {
try {
int width = Display.getInstance().getDisplayWidth();
Image capturedImage =
Image.createImage(Capture.capturePhoto(width, -1));
Image roundMask =
Image.createImage(width, capturedImage.getHeight(),
0xff000000);
Graphics gr = roundMask.getGraphics();
gr.setColor(0xffffff);
gr.fillArc(0, 0, width, width, 0, 360);
Object mask = roundMask.createMask();
capturedImage = capturedImage.applyMask(mask);
result.setIcon(capturedImage);
} catch(IOException err) {
err.printStackTrace();
}
}
Generated Project Starting Point
Capture
a picture at
device width
with aspect
ratio
Create an
image we can
modify into a
mask
Apply the
mask to the
captured image
and set to
label

24. Introduction
Devices
Codename One
Application
Deployment
Questions
private void captureRoundImage(Label result) {
try {
int width = Display.getInstance().getDisplayWidth();
Image capturedImage =
Image.createImage(Capture.capturePhoto(width, -1));
Image roundMask =
Image.createImage(width, capturedImage.getHeight(),
0xff000000);
Graphics gr = roundMask.getGraphics();
gr.setColor(0xffffff);
gr.fillArc(0, 0, width, width, 0, 360);
Object mask = roundMask.createMask();
capturedImage = capturedImage.applyMask(mask);
result.setIcon(capturedImage);
} catch(IOException err) {
err.printStackTrace();
}
}
Generated Project Starting Point
Capture
a picture at
device width
with aspect
ratio
Create an
image we can
modify into a
mask
Apply the
mask to the
captured image
and set to
label

25. Introduction
Devices
Codename One
Application
Deployment
Questions
Install On Devices

26. Introduction
Devices
Codename One
Application
Deployment
Questions
Q&A
Thank You!
Further Reading
How Do I - http://codenameone.com/how-do-i.html
Developer Guide - http://codenameone.com/developer-guide.html
Discussion Forum - http://www.codenameone.com/discussion-forum.html
Course (free for pro users) - http://udemy.com/codenameone101/
Source code/Issue tracker - http://code.google.com/p/codenameone/
JavaDocs - https://codenameone.googlecode.com/svn/trunk/CodenameOne/javadoc/index.html
Blog - http://codenameone.com/blog
Shai Almog @Codename_One
http://www.codenameone.com/