Building native mobile apps for all platforms using Codename One - Shai Almog, Codename One

Introduction Devices Codename One Application Deployment Questions

Building Native Mobile Apps For All Platforms Using Codename One Shai Almog @Codename_One

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

Introduction Devices Codename One Application Deployment Questions

Why Is Mobile Different

• DPI - Density

• iOS requires Mac, Windows Phone requires Windows

• Changes

• Certificates - provisioning

Introduction Devices Codename One Application Deployment Questions

Why Is Mobile Different

• DPI - Density

• iOS requires Mac, Windows Phone requires Windows

• Changes

• Certificates - provisioning

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

Introduction Problem Codename One Competitors Market Final Words

How Does It Work?

Introduction Problem Codename One Competitors Market Final Words

Java Developer

How Does It Work?

Introduction Problem Codename One Competitors Market Final Words

How Does It Work?

Build App With Any IDE

Introduction Problem Codename One Competitors Market Final Words

How Does It Work?

Generate native code in the cloud

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

Introduction Devices Codename One Application Deployment Questions

DemoApps On Devices

Introduction Devices Codename One Application Deployment Questions

Lets Build an App…

Introduction Devices Codename One Application Deployment Questions

Generating Project

Introduction Devices Codename One Application Deployment Questions

Generating Project

Introduction Devices Codename One Application Deployment Questions

Generating Project

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(); }

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

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

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

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

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

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

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 PointCapture

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

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 PointCapture

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

Introduction Devices Codename One Application Deployment Questions

Install On Devices

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_Onehttp://www.codenameone.com/