Adapting to Tablets and Desktops - Part 2 - Transcript.pdf

Adapting to Tablets & Desktops - Part II
In this part we dig deeper into the UIAbstraction class

private FormDelegate formDelegate;
private Container cnt;
private Container decoratedContainer;
private static UIAbstraction currentUI;
public UIAbstraction(String title, Layout l) {
initUI(title, l);
}
protected void initUI(String title, Layout l) {
if(Display.getInstance().isTablet()) {
cnt = new Container(l);
if(!(l instanceof BorderLayout)) {
cnt.setScrollableY(true);
}
cnt.putClientProperty("uiabstraction", this);
decoratedContainer = cnt;
if(hasOKBack()) {
decoratedContainer = BorderLayout.center(cnt);
okButton = new Button("OK", "GreenButton");
Button cancelButton = new Button("Cancel", "GreenButton");
FontImage.setMaterialIcon(okButton, FontImage.MATERIAL_CHECK);
FontImage.setMaterialIcon(cancelButton, FontImage.MATERIAL_CANCEL);
UIAbstraction
Moving on we reach the fields of the class and the start of the UI. Lets step over those…

initUI(title, l);
}
}
if(hasOKBack()) {
UIAbstraction
First we have the form delegate instance, this is only relevant if we are in a phone mode and not in the tablet mode where we have a diﬀerent class in place

initUI(title, l);
}
}
if(hasOKBack()) {
UIAbstraction
The container is the current UI. Since Form is a subclass of Container this will work for both the form and the tablet UI mode

initUI(title, l);
}
}
if(hasOKBack()) {
UIAbstraction
Elements such as the OK/Cancel buttons are added to a Container and then the main container is “wrapped up” to include these additional buttons. This allows us to
keep the code mostly seamless but we sometimes need access to the actual decorated container for example when we need to replace it.

Don’t worry if you don’t understand this, it will be clearer as I go thru the actual code.

initUI(title, l);
}
}
if(hasOKBack()) {
UIAbstraction
This is essentially the equivalent of getCurrentForm() only in this case we get the current UIAbstraction which will work correctly.

initUI(title, l);
}
}
if(hasOKBack()) {
UIAbstraction
Lets move on to the creation code and specifically the code that occurs when working with a tablet. Notice that isTablet will return true for desktops as well so there isn’t
as much of a need for isDesktop unless you need it to be truly distinctive from tablet

initUI(title, l);
}
}
if(hasOKBack()) {
UIAbstraction
By default in Codename One the content pane of a form is scrollable on the Y axis. So I tried to replicate this behavior here so the code will feel seamless.

initUI(title, l);
}
}
if(hasOKBack()) {
UIAbstraction
The uiabstraction client property allows us to get access to the UIAbstraction class from the component. This is useful for methods that need access to navigation logic
but run from the UI code e.g. a button in the UI that triggers form navigation.

The decorated container defaults to this container…

initUI(title, l);
}
}
if(hasOKBack()) {
UIAbstraction
Unless we have a back/ok button pair in which case we create a new wrapper of the container and use the decorated container for that. We just create ok and cancel
buttons

decoratedContainer.add(BorderLayout.SOUTH,
GridLayout.encloseIn(2, cancelButton, okButton));
decoratedContainer.putClientProperty("uiabstraction", this);
UIAbstraction previous = currentUI;
okButton.addActionListener(e -> {
onOK();
previous.showBack();
});
cancelButton.addActionListener(e -> {
onBack();
});
}
} else {
formDelegate = new FormDelegate(title, l);
formDelegate.putClientProperty("uiabstraction", this);
cnt = formDelegate;
}
}
UIAbstraction
Which we add into the south of the container using a grid layout. Notice the usage of grid layout ensures both buttons will have exactly the same size which contributes
to nice aesthetics.

onOK();
});
onBack();
});
}
} else {
cnt = formDelegate;
}
}
UIAbstraction
If you recall the previous code for OK & cancel we had in the Form delegate this will seem almost identical. But then you might notice the current UI is really the
UIAbstraction class and we use showBack() from there and not from the Form!

onOK();
});
onBack();
});
}
} else {
cnt = formDelegate;
}
}
UIAbstraction
This is the else statement that runs in case of regular forms or in phone mode. It just defers everything to the form delegate.

public void show() {
if(formDelegate != null) {
formDelegate.show();
} else {
TabletUI.getInstance().showContainer(decoratedContainer, true);
currentUI = this;
}
}
public void showBack() {
formDelegate.showBack();
} else {
currentUI = this;
}
}
public Container add(Object con, Component cmp) {
return cnt.add(con, cmp);
}
public Container add(Component cmp) {
return cnt.add(cmp);
}
UIAbstraction
Moving on we can see the common methods for show are implemented normally as one would expect by calling show or showBack respectively

} else {
currentUI = this;
}
}
} else {
TabletUI.getInstance().showContainer(decoratedContainer, false);
currentUI = this;
}
}
}
}
UIAbstraction
But there is something interesting here… Tablet UI which we use to implement the show logic. TabletUI is the equivalent for the form delegate for tablets but unlike that
class it’s a single form that never changes. I’ll go to that class soon

} else {
currentUI = this;
}
}
} else {
TabletUI.getInstance().showContainer(decoratedContainer, false);
currentUI = this;
}
}
}
}
UIAbstraction
Other delegates work seamlessly with the container… Notice that add on a form will work well and so will add on a container. So in this case we can just seamlessly
delegate.

protected boolean shouldPaintStatusBar() {
return UIManager.getInstance().isThemeConstant("paintsTitleBarBool", false);
}
public Container getContainer() {
return cnt;
}
public void bindFab(FloatingActionButton fab) {
fab.bindFabToContainer(formDelegate.getContentPane());
} else {
decoratedContainer = fab.bindFabToContainer(decoratedContainer);
}
}
public void bindFabTopRight(FloatingActionButton fab) {
fab.bindFabToContainer(formDelegate.getContentPane(), RIGHT, TOP);
} else {
decoratedContainer = fab.bindFabToContainer(decoratedContainer, RIGHT,
TOP);
}
}
UIAbstraction
Bind fab works exactly as we would expect for a form but with the tablet we need to re-wrap the decorated container and use that as the new decorated container. To
understand why you need to understand that fab wraps the content of a Container and adds a layered layout where it resides. If the parent is a form already then we have
a layered pane and it just uses that… But if it’s not then we need to use the container that the fab returns which is where the delegate container comes in really handy…

public void setLayout(Layout newLayout) {
cnt.setLayout(newLayout);
}
public static UIAbstraction getUIAbstraction(Container parent) {
return (UIAbstraction)parent.getClientProperty("uiabstraction");
}
protected void initToolbar(Toolbar tb) {
}
protected void onOK() {
}
protected void onBack() {
}
protected boolean hasOKBack() {
return false;
}
protected void setScrollableY(boolean b) {
cnt.setScrollableY(b);
}
protected void addSubmitButton(Validator val) {
if(okButton != null) {
val.addSubmitButtons(okButton);
}
}
UIAbstraction
Finally all of these methods are just callbacks that we invoke in the code

public void setLayout(Layout newLayout) {
cnt.setLayout(newLayout);
}
public static UIAbstraction getUIAbstraction(Container parent) {
return (UIAbstraction)parent.getClientProperty("uiabstraction");
}
protected void initToolbar(Toolbar tb) {
}
protected void onOK() {
}
protected void onBack() {
}
protected boolean hasOKBack() {
return false;
}
protected void setScrollableY(boolean b) {
cnt.setScrollableY(b);
}
protected void addSubmitButton(Validator val) {
if(okButton != null) {
val.addSubmitButtons(okButton);
}
}
UIAbstraction
The submit button validation is handled here so it will work with the internal OK button without exposing a button component that might be fragile.

Adapting to Tablets and Desktops - Part 2 - Transcript.pdf

More Related Content

More from ShaiAlmog1 (20)

Recently uploaded (20)

Adapting to Tablets and Desktops - Part 2 - Transcript.pdf