SlideShare a Scribd company logo
1 of 12
Download to read offline
Adapting to Tablets & Desktops - Part I
© Codename One 2017 all rights reserved
Before
© Codename One 2017 all rights reserved
After
After
Architecture
✦In the current app every UI element derives from
form and stands alone, in the tablet app we want
to have one form for the entire app
✦Instead of deriving from Form we derive from a
common base class
✦Every feature we need in Form is abstracted so
we can keep common code together
© Codename One 2017 all rights reserved
public class BaseNavigationForm extends UIAbstraction {
private static DishListForm dishForm;
private static BillingForm billingForm;
private static DetailsForm detailsForm;
private static AppForm appForm;
private static AboutForm aboutForm;
private final AppSettings app;
public BaseNavigationForm(AppSettings app, Layout l) {
super();
this.app = app;
initUI(Restaurant.getInstance().name.get(), l);
}
public static void showAppForm(AppSettings app) {
if(appForm == null) {
appForm = new AppForm(app);
}
appForm.show();
}
BaseNavigationForm
public class UIAbstraction {
private Button okButton;
class FormDelegate extends Form {
public FormDelegate(String title, Layout l) {
super(title, l);
initToolbar(getToolbar());
if(hasOKBack()) {
Form previousForm = Display.getInstance().getCurrent();
getToolbar().addMaterialCommandToLeftBar(“",
FontImage.MATERIAL_ARROW_BACK, e -> {
onBack();
previousForm.showBack();
});
Command cmd = getToolbar().addMaterialCommandToRightBar("",
FontImage.MATERIAL_CHECK, e -> {
onOK();
previousForm.showBack();
});
okButton = getToolbar().findCommandComponent(cmd);
}
}
UIAbstraction
public class UIAbstraction {
private Button okButton;
class FormDelegate extends Form {
public FormDelegate(String title, Layout l) {
super(title, l);
initToolbar(getToolbar());
if(hasOKBack()) {
Form previousForm = Display.getInstance().getCurrent();
getToolbar().addMaterialCommandToLeftBar(“",
FontImage.MATERIAL_ARROW_BACK, e -> {
onBack();
previousForm.showBack();
});
Command cmd = getToolbar().addMaterialCommandToRightBar("",
FontImage.MATERIAL_CHECK, e -> {
onOK();
previousForm.showBack();
});
okButton = getToolbar().findCommandComponent(cmd);
}
}
UIAbstraction
public class UIAbstraction {
private Button okButton;
class FormDelegate extends Form {
public FormDelegate(String title, Layout l) {
super(title, l);
initToolbar(getToolbar());
if(hasOKBack()) {
Form previousForm = Display.getInstance().getCurrent();
getToolbar().addMaterialCommandToLeftBar(“",
FontImage.MATERIAL_ARROW_BACK, e -> {
onBack();
previousForm.showBack();
});
Command cmd = getToolbar().addMaterialCommandToRightBar("",
FontImage.MATERIAL_CHECK, e -> {
onOK();
previousForm.showBack();
});
okButton = getToolbar().findCommandComponent(cmd);
}
}
UIAbstraction
public class UIAbstraction {
private Button okButton;
class FormDelegate extends Form {
public FormDelegate(String title, Layout l) {
super(title, l);
initToolbar(getToolbar());
if(hasOKBack()) {
Form previousForm = Display.getInstance().getCurrent();
getToolbar().addMaterialCommandToLeftBar(“",
FontImage.MATERIAL_ARROW_BACK, e -> {
onBack();
previousForm.showBack();
});
Command cmd = getToolbar().addMaterialCommandToRightBar("",
FontImage.MATERIAL_CHECK, e -> {
onOK();
previousForm.showBack();
});
okButton = getToolbar().findCommandComponent(cmd);
}
}
UIAbstraction
public class UIAbstraction {
private Button okButton;
class FormDelegate extends Form {
public FormDelegate(String title, Layout l) {
super(title, l);
initToolbar(getToolbar());
if(hasOKBack()) {
Form previousForm = Display.getInstance().getCurrent();
getToolbar().addMaterialCommandToLeftBar(“",
FontImage.MATERIAL_ARROW_BACK, e -> {
onBack();
previousForm.showBack();
});
Command cmd = getToolbar().addMaterialCommandToRightBar("",
FontImage.MATERIAL_CHECK, e -> {
onOK();
previousForm.showBack();
});
okButton = getToolbar().findCommandComponent(cmd);
}
}
UIAbstraction
protected Component createStatusBar() {
Component c = super.createStatusBar();
c.setUIID("Container");
return c;
}
@Override
protected void initGlobalToolbar() {
if(Toolbar.isGlobalToolbar()) {
setToolbar(new Toolbar(isLayeredToolbar()) {
@Override
protected void initTitleBarStatus() {
}
});
}
}
@Override
protected boolean shouldPaintStatusBar() {
return UIAbstraction.this.shouldPaintStatusBar();
}
}
UIAbstraction

More Related Content

Similar to Adapting to Tablets and Desktops - Part 1.pdf

Similar to Adapting to Tablets and Desktops - Part 1.pdf (20)

Action bar
Action barAction bar
Action bar
 
Creating an Uber Clone - Part IX.pdf
Creating an Uber Clone - Part IX.pdfCreating an Uber Clone - Part IX.pdf
Creating an Uber Clone - Part IX.pdf
 
Adapting to Tablets and Desktops - Part 3.pdf
Adapting to Tablets and Desktops - Part 3.pdfAdapting to Tablets and Desktops - Part 3.pdf
Adapting to Tablets and Desktops - Part 3.pdf
 
4.Spring IoC&DI(Spring Ioc실습_어노테이션 기반)
4.Spring IoC&DI(Spring Ioc실습_어노테이션 기반)4.Spring IoC&DI(Spring Ioc실습_어노테이션 기반)
4.Spring IoC&DI(Spring Ioc실습_어노테이션 기반)
 
Adapting to Tablets and Desktops - Part 3 - Transcript.pdf
Adapting to Tablets and Desktops - Part 3 - Transcript.pdfAdapting to Tablets and Desktops - Part 3 - Transcript.pdf
Adapting to Tablets and Desktops - Part 3 - Transcript.pdf
 
Dagger 2 vs koin
Dagger 2 vs koinDagger 2 vs koin
Dagger 2 vs koin
 
To-Do App With Flutter: Step By Step Guide
To-Do App With Flutter: Step By Step GuideTo-Do App With Flutter: Step By Step Guide
To-Do App With Flutter: Step By Step Guide
 
Creating an Uber Clone - Part XIX - Transcript.pdf
Creating an Uber Clone - Part XIX - Transcript.pdfCreating an Uber Clone - Part XIX - Transcript.pdf
Creating an Uber Clone - Part XIX - Transcript.pdf
 
Initial UI Mockup - Part 2 - Transcript.pdf
Initial UI Mockup - Part 2 - Transcript.pdfInitial UI Mockup - Part 2 - Transcript.pdf
Initial UI Mockup - Part 2 - Transcript.pdf
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
 
Sharper Better Faster Dagger ‡ - Droidcon SF
Sharper Better Faster Dagger ‡ - Droidcon SFSharper Better Faster Dagger ‡ - Droidcon SF
Sharper Better Faster Dagger ‡ - Droidcon SF
 
A GWT Application with MVP Pattern Deploying to CloudFoundry using Spring Roo
A GWT Application with MVP Pattern Deploying to CloudFoundry using  Spring Roo A GWT Application with MVP Pattern Deploying to CloudFoundry using  Spring Roo
A GWT Application with MVP Pattern Deploying to CloudFoundry using Spring Roo
 
21 android2 updated
21 android2 updated21 android2 updated
21 android2 updated
 
Day 5
Day 5Day 5
Day 5
 
How to code to code less
How to code to code lessHow to code to code less
How to code to code less
 
Net conf BG xamarin lecture
Net conf BG xamarin lectureNet conf BG xamarin lecture
Net conf BG xamarin lecture
 
Creating an Uber Clone - Part XXXIV.pdf
Creating an Uber Clone - Part XXXIV.pdfCreating an Uber Clone - Part XXXIV.pdf
Creating an Uber Clone - Part XXXIV.pdf
 
Building a Native Camera Access Library - Part II.pdf
Building a Native Camera Access Library - Part II.pdfBuilding a Native Camera Access Library - Part II.pdf
Building a Native Camera Access Library - Part II.pdf
 
Sylius and Api Platform The story of integration
Sylius and Api Platform The story of integrationSylius and Api Platform The story of integration
Sylius and Api Platform The story of integration
 
22Flutter.pdf
22Flutter.pdf22Flutter.pdf
22Flutter.pdf
 

More from ShaiAlmog1

More from ShaiAlmog1 (20)

The Duck Teaches Learn to debug from the masters. Local to production- kill ...
The Duck Teaches  Learn to debug from the masters. Local to production- kill ...The Duck Teaches  Learn to debug from the masters. Local to production- kill ...
The Duck Teaches Learn to debug from the masters. Local to production- kill ...
 
create-netflix-clone-06-client-ui.pdf
create-netflix-clone-06-client-ui.pdfcreate-netflix-clone-06-client-ui.pdf
create-netflix-clone-06-client-ui.pdf
 
create-netflix-clone-01-introduction_transcript.pdf
create-netflix-clone-01-introduction_transcript.pdfcreate-netflix-clone-01-introduction_transcript.pdf
create-netflix-clone-01-introduction_transcript.pdf
 
create-netflix-clone-02-server_transcript.pdf
create-netflix-clone-02-server_transcript.pdfcreate-netflix-clone-02-server_transcript.pdf
create-netflix-clone-02-server_transcript.pdf
 
create-netflix-clone-04-server-continued_transcript.pdf
create-netflix-clone-04-server-continued_transcript.pdfcreate-netflix-clone-04-server-continued_transcript.pdf
create-netflix-clone-04-server-continued_transcript.pdf
 
create-netflix-clone-01-introduction.pdf
create-netflix-clone-01-introduction.pdfcreate-netflix-clone-01-introduction.pdf
create-netflix-clone-01-introduction.pdf
 
create-netflix-clone-06-client-ui_transcript.pdf
create-netflix-clone-06-client-ui_transcript.pdfcreate-netflix-clone-06-client-ui_transcript.pdf
create-netflix-clone-06-client-ui_transcript.pdf
 
create-netflix-clone-03-server.pdf
create-netflix-clone-03-server.pdfcreate-netflix-clone-03-server.pdf
create-netflix-clone-03-server.pdf
 
create-netflix-clone-04-server-continued.pdf
create-netflix-clone-04-server-continued.pdfcreate-netflix-clone-04-server-continued.pdf
create-netflix-clone-04-server-continued.pdf
 
create-netflix-clone-05-client-model_transcript.pdf
create-netflix-clone-05-client-model_transcript.pdfcreate-netflix-clone-05-client-model_transcript.pdf
create-netflix-clone-05-client-model_transcript.pdf
 
create-netflix-clone-03-server_transcript.pdf
create-netflix-clone-03-server_transcript.pdfcreate-netflix-clone-03-server_transcript.pdf
create-netflix-clone-03-server_transcript.pdf
 
create-netflix-clone-02-server.pdf
create-netflix-clone-02-server.pdfcreate-netflix-clone-02-server.pdf
create-netflix-clone-02-server.pdf
 
create-netflix-clone-05-client-model.pdf
create-netflix-clone-05-client-model.pdfcreate-netflix-clone-05-client-model.pdf
create-netflix-clone-05-client-model.pdf
 
Creating a Whatsapp Clone - Part II.pdf
Creating a Whatsapp Clone - Part II.pdfCreating a Whatsapp Clone - Part II.pdf
Creating a Whatsapp Clone - Part II.pdf
 
Creating a Whatsapp Clone - Part IX - Transcript.pdf
Creating a Whatsapp Clone - Part IX - Transcript.pdfCreating a Whatsapp Clone - Part IX - Transcript.pdf
Creating a Whatsapp Clone - Part IX - Transcript.pdf
 
Creating a Whatsapp Clone - Part II - Transcript.pdf
Creating a Whatsapp Clone - Part II - Transcript.pdfCreating a Whatsapp Clone - Part II - Transcript.pdf
Creating a Whatsapp Clone - Part II - Transcript.pdf
 
Creating a Whatsapp Clone - Part V - Transcript.pdf
Creating a Whatsapp Clone - Part V - Transcript.pdfCreating a Whatsapp Clone - Part V - Transcript.pdf
Creating a Whatsapp Clone - Part V - Transcript.pdf
 
Creating a Whatsapp Clone - Part IV - Transcript.pdf
Creating a Whatsapp Clone - Part IV - Transcript.pdfCreating a Whatsapp Clone - Part IV - Transcript.pdf
Creating a Whatsapp Clone - Part IV - Transcript.pdf
 
Creating a Whatsapp Clone - Part IV.pdf
Creating a Whatsapp Clone - Part IV.pdfCreating a Whatsapp Clone - Part IV.pdf
Creating a Whatsapp Clone - Part IV.pdf
 
Creating a Whatsapp Clone - Part I - Transcript.pdf
Creating a Whatsapp Clone - Part I - Transcript.pdfCreating a Whatsapp Clone - Part I - Transcript.pdf
Creating a Whatsapp Clone - Part I - Transcript.pdf
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 

Adapting to Tablets and Desktops - Part 1.pdf

  • 1. Adapting to Tablets & Desktops - Part I
  • 2. © Codename One 2017 all rights reserved Before
  • 3. © Codename One 2017 all rights reserved After
  • 5. Architecture ✦In the current app every UI element derives from form and stands alone, in the tablet app we want to have one form for the entire app ✦Instead of deriving from Form we derive from a common base class ✦Every feature we need in Form is abstracted so we can keep common code together © Codename One 2017 all rights reserved
  • 6. public class BaseNavigationForm extends UIAbstraction { private static DishListForm dishForm; private static BillingForm billingForm; private static DetailsForm detailsForm; private static AppForm appForm; private static AboutForm aboutForm; private final AppSettings app; public BaseNavigationForm(AppSettings app, Layout l) { super(); this.app = app; initUI(Restaurant.getInstance().name.get(), l); } public static void showAppForm(AppSettings app) { if(appForm == null) { appForm = new AppForm(app); } appForm.show(); } BaseNavigationForm
  • 7. public class UIAbstraction { private Button okButton; class FormDelegate extends Form { public FormDelegate(String title, Layout l) { super(title, l); initToolbar(getToolbar()); if(hasOKBack()) { Form previousForm = Display.getInstance().getCurrent(); getToolbar().addMaterialCommandToLeftBar(“", FontImage.MATERIAL_ARROW_BACK, e -> { onBack(); previousForm.showBack(); }); Command cmd = getToolbar().addMaterialCommandToRightBar("", FontImage.MATERIAL_CHECK, e -> { onOK(); previousForm.showBack(); }); okButton = getToolbar().findCommandComponent(cmd); } } UIAbstraction
  • 8. public class UIAbstraction { private Button okButton; class FormDelegate extends Form { public FormDelegate(String title, Layout l) { super(title, l); initToolbar(getToolbar()); if(hasOKBack()) { Form previousForm = Display.getInstance().getCurrent(); getToolbar().addMaterialCommandToLeftBar(“", FontImage.MATERIAL_ARROW_BACK, e -> { onBack(); previousForm.showBack(); }); Command cmd = getToolbar().addMaterialCommandToRightBar("", FontImage.MATERIAL_CHECK, e -> { onOK(); previousForm.showBack(); }); okButton = getToolbar().findCommandComponent(cmd); } } UIAbstraction
  • 9. public class UIAbstraction { private Button okButton; class FormDelegate extends Form { public FormDelegate(String title, Layout l) { super(title, l); initToolbar(getToolbar()); if(hasOKBack()) { Form previousForm = Display.getInstance().getCurrent(); getToolbar().addMaterialCommandToLeftBar(“", FontImage.MATERIAL_ARROW_BACK, e -> { onBack(); previousForm.showBack(); }); Command cmd = getToolbar().addMaterialCommandToRightBar("", FontImage.MATERIAL_CHECK, e -> { onOK(); previousForm.showBack(); }); okButton = getToolbar().findCommandComponent(cmd); } } UIAbstraction
  • 10. public class UIAbstraction { private Button okButton; class FormDelegate extends Form { public FormDelegate(String title, Layout l) { super(title, l); initToolbar(getToolbar()); if(hasOKBack()) { Form previousForm = Display.getInstance().getCurrent(); getToolbar().addMaterialCommandToLeftBar(“", FontImage.MATERIAL_ARROW_BACK, e -> { onBack(); previousForm.showBack(); }); Command cmd = getToolbar().addMaterialCommandToRightBar("", FontImage.MATERIAL_CHECK, e -> { onOK(); previousForm.showBack(); }); okButton = getToolbar().findCommandComponent(cmd); } } UIAbstraction
  • 11. public class UIAbstraction { private Button okButton; class FormDelegate extends Form { public FormDelegate(String title, Layout l) { super(title, l); initToolbar(getToolbar()); if(hasOKBack()) { Form previousForm = Display.getInstance().getCurrent(); getToolbar().addMaterialCommandToLeftBar(“", FontImage.MATERIAL_ARROW_BACK, e -> { onBack(); previousForm.showBack(); }); Command cmd = getToolbar().addMaterialCommandToRightBar("", FontImage.MATERIAL_CHECK, e -> { onOK(); previousForm.showBack(); }); okButton = getToolbar().findCommandComponent(cmd); } } UIAbstraction
  • 12. protected Component createStatusBar() { Component c = super.createStatusBar(); c.setUIID("Container"); return c; } @Override protected void initGlobalToolbar() { if(Toolbar.isGlobalToolbar()) { setToolbar(new Toolbar(isLayeredToolbar()) { @Override protected void initTitleBarStatus() { } }); } } @Override protected boolean shouldPaintStatusBar() { return UIAbstraction.this.shouldPaintStatusBar(); } } UIAbstraction