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


Who Am I?

Shai Almog [email protected]

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

mailto:[email protected]


Why Is Mobile Different

• DPI - Density

• iOS requires Mac, Windows Phone requires Windows

• Changes

• Certificates - provisioning


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?


Java Developer

How Does It Work?


How Does It Work?

Build App With Any IDE


How Does It Work?

Generate native code in the cloud


How Does It Work?In the case of

iOS the Java bytecode is translated to C and

compiled using Xcode


DemoApps On Devices


Lets Build an App…


Generating Project


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



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



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



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


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



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


Install On Devices


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/

http://codenameone.com/blog

http://www.codenameone.com

building native mobile apps for all platforms using codename one - shai almog, codename one

Technology