Creating an Uber Clone - Part IX - Transcript.pdf

Creating an Uber Clone - Part IX
The “Where to?” UI is a pretty big piece of the puzzle and it also includes the navigation UI which is the bottom portion

Destination UI
© Codename One 2017 all rights reserved
Up until now we focused on this part of the toolbar area

Destination UI
Now we need to do this portion. The destination UI toggle is a huge part of the navigation UI. It's the bottom section of the form that contains the list of destinations. We
can build it on top of the code we wrote for the navigation UI and place it in the center of the layer so it will play nicely with the rest of the UI.

Destination UI
For now I’ll ignore this potion as it’s mostly a specialization of other things and can be done relatively easily if you understand the rest of the things I did

private void showToNavigationBar(Container parentLayer) {
MultiButton addHome = new MultiButton("Add Home");
addHome.setUIID("Container");
addHome.setUIIDLine1("WhereToButtonLine1");
addHome.setIconUIID("WhereToButtonIcon");
FontImage.setMaterialIcon(addHome, FontImage.MATERIAL_HOME);
MultiButton addWork = new MultiButton("Add Work");
addWork.setUIID("Container");
addWork.setUIIDLine1("WhereToButtonLine1");
addWork.setIconUIID("WhereToButtonIcon");
FontImage.setMaterialIcon(addWork, FontImage.MATERIAL_WORK);
MultiButton savedPlaces = new MultiButton("Saved Places");
savedPlaces.setUIID("Container");
savedPlaces.setUIIDLine1("WhereToButtonLineNoBorder");
savedPlaces.setEmblemUIID("WhereToButtonLineNoBorder");
savedPlaces.setIconUIID("WhereToButtonIcon");
savedPlaces.setEmblem(FontImage.createMaterial(
FontImage.MATERIAL_NAVIGATE_NEXT,
savedPlaces.getIconComponent().getUnselectedStyle()));
FontImage.setMaterialIcon(savedPlaces,
FontImage.MATERIAL_STAR_BORDER);
Destination UI
Let’s jump right in to the “showNavigationBar” method.

The top elements are relatively simple multi-buttons, we use Container as their UIID so they will be transparent with 0 padding/margin.

Label whereSeparator = new Label("", "WhereSeparator");
whereSeparator.setShowEvenIfBlank(true);
MultiButton history1 = new MultiButton("Mikve Yisrael Str...");
history1.setUIID("Container");
history1.setUIIDLine1("WhereToButtonLine1");
history1.setIconUIID("WhereToButtonIcon");
FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY);
Container result = BoxLayout.encloseY(addHome, addWork,
savedPlaces, whereSeparator, history1);
result.setUIID("Form");
result.setScrollableY(true);
result.setScrollVisible(false);
result.setY(getDisplayHeight());
Destination UI
The separator is just a label with a specific style. Notice that blank labels/buttons etc. are hidden by default in Codename One and you should invoke
setShowEvenIfBlank if you want such a label to still render

Destination UI
We can reuse the Form UIID here because that's eﬀectively what we want. We want this UI to appear as if it's a Form

Destination UI
We need this to be scrollable but we don't want the scrollbar on the side as it might cause aesthetic issues

result.setWidth(getDisplayWidth());
result.setHeight(result.getPreferredH());
parentLayer.add(CENTER, result);
parentLayer.animateLayout(200);
}
Destination UI
The showing of this element is animated from the bottom of the Form

WhereToButtonLine1
While this UI is very simple it did define a few UIID's. Let's start with WhereToButtonLine1 which represents the entries in the list of elements and also adds the underline.
The color is just black over transparent which in this case leads to white

WhereToButtonLine1
The padding on the left side is relatively low since the icon will take the extra padding. On the other sides we have typical 4 millimeter padding

WhereToButtonLine1
Margin is 0 as usual

WhereToButtonLine1
We put the underline here because the design placed the underline only under the text and didn't place it under the icon which has a diﬀerent UIID. The underline is a
gray 2 pixel high line

WhereToButtonLine1
The font is the standard 3 millimeter light font

WhereToButtonIcon
The WhereToButtonIcon style applies to the icon which has less horizontal padding so it won’t drift too far from the text but identical vertical padding so it will align
properly with the text

WhereToButtonIcon
It derives from WhereToButtonLine1 so they will fit together well

WhereToButtonNoBorder
We need the no border version of the style so it will remove the underline border on the last entry. Otherwise we can see an out of place underline in that one last entry in
the list

WhereToButtonNoBorder
We derive from the same style so everything else is identical

WhereSeparator
The WhereSeparator is just a gray padded line, so it has the right gray color and is completely opaque with no background transparency.

WhereSeparator
It’s exactly 2 millimeters tall so it will stand out but won’t take out an entire line.

WhereSeparator
Margin is 0 so it can reach the edge of the parent container

from.addFocusListener(new FocusListener() {
public void focusGained(Component cmp) {
fromSelected.setIcon(square);
if(layer.getComponentCount() > 1) {
Component c = layer.getComponentAt(1);
c.setY(getDisplayHeight());
layer.animateUnlayout(200, 150, () -> {
c.remove();
revalidate();
});
}
}
public void focusLost(Component cmp) {
fromSelected.setIcon(circle);
}
});
to.addFocusListener(new FocusListener() {
toSelected.setIcon(square);
showToNavigationBar(layer);
}
toSelected.setIcon(circle);
}
});
Focus Listener
Now that we added this we need to show this UI and hide it when the user toggles the focus in the text fields. We can do this by binding focus listeners to the to and
from text fields.

When focus is lost/gained we toggle between the square and circle modes by setting the icon to the appropriate labels

c.remove();
revalidate();
});
}
}
}
});
}
}
});
Focus Listener
We always have one container in the layer except for the case where the second component is the where to container. It's always the second component because it's
always added last.

c.remove();
revalidate();
});
}
}
}
});
}
}
});
Focus Listener
We set the position of this container below the forms

c.remove();
revalidate();
});
}
}
}
});
}
}
});
Focus Listener
Animate "unlayout" moves the component outside of the screen to the position we asked for using a smooth animation

c.remove();
revalidate();
});
}
}
}
});
}
}
});
Focus Listener
This callback is invoked when the unlayout completes. At this point we have an invalid UI that needs a layout but before we do that we remove the component that we
animated out of the form

back.addActionListener(e -> {
navigationToolbar.setY(-navigationToolbar.getHeight());
layer.getComponentAt(1).setY(getDisplayHeight());
}
navigationToolbar.getParent().animateUnlayout(200, 120, () -> {
layer.removeAll();
revalidate();
});
});
Back
Now that the UI appears we also need to remove it when going back so I'll update the back action listener from above to handle the "Where to?" UI as well.

This is the exact same unlayout operation we did before

navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> {
g1.setAlpha(255);
g1.setColor(0xffffff);
if(dropShadow != null) {
g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight());
}
g1.drawImage(dropShadow, rect.getX(), rect.getY() +
rect.getHeight() - dropShadow.getHeight(), rect.getWidth(),
dropShadow.getHeight());
g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight() -
dropShadow.getHeight() / 2);
} else {
g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight());
}
g1.setColor(0xa4a4ac);
g1.setAntiAliased(true);
int x = fromSelected.getAbsoluteX() + fromSelected.getWidth() / 2 - 1;
int y = fromSelected.getAbsoluteY() + fromSelected.getHeight() / 2 +
circle.getHeight() / 2;
g1.fillRect(x, y, 2, toSelected.getAbsoluteY() - y +
toSelected.getHeight() / 2 - circle.getHeight() / 2);
});
Background Painter
And finally we need to make a subtle but important change to the background painter code from before.

Because of the drop shadow a gap is formed between the top and bottom pieces so a special case here paints a white rectangle under the shadow to hide the gap.
Without that the shadow would appear on top of the map and not on top of a white background.

Once this is done opening the "Where To?" UI and toggling the fields should work as expected.

Creating an Uber Clone - Part IX - Transcript.pdf

More Related Content

Similar to Creating an Uber Clone - Part IX - Transcript.pdf (20)

More from ShaiAlmog1 (20)

Recently uploaded (20)

Creating an Uber Clone - Part IX - Transcript.pdf