The document discusses the architectural changes needed to adapt applications for tablets and desktops, emphasizing a unified form structure. It introduces a base navigation form and a user interface abstraction to streamline common code. Key features include a customizable toolbar and handling of navigation commands.

1. Adapting to Tablets & Desktops - Part I

2. © Codename One 2017 all rights reserved
Before

3. © Codename One 2017 all rights reserved
After

4. 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