Building native mobile apps for all platforms using Codename One - Shai Almog, Codename One
-
Upload
codemotion-tel-aviv -
Category
Technology
-
view
194 -
download
0
Transcript of 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 [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
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/