This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

1. Creating an Uber Clone - Part XXI
Next we’ll bring these changes into the MapForm class which handles the actual heavy lifting of search…

2. private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
First we need to add a couple of members to the class. Some of these variables already exist In the method body, I just moved them into the class level. I'm skipping that
code since it's pretty trivial.
We use MapContainer to place a pin and position it. We can track map position events using this object

3. private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
We need the lastFocused entry so we can set the text in the field when the user drags the map to point at a location

4. private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
The listener is important for cleanup to prevent multiple listener instances, that way we always have at most one

5. private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
The timer instance allows us to cancel it, we use it to delay WebService requests so we don't send them too frequently

6. private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
The "Where to?" Button. We need to hide it when the search UI is showing and show it again when it’s done…

7. private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
We place a lot of elements in that layer on top of the map, it's pretty useful

8. private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
Indicates whether we are in the navigation mode or in another mode such as map or browse mode. This is important as we can't enter navigation mode twice

9. void showNavigationToolbar() {
final Container layer = getLayeredPane(MapForm.class, true);
layer.setName("MapFormLayer");
layer.setLayout(new BorderLayout());
final Container pinLayer = getLayeredPane(AutoCompleteAddressInput.class, false);
pinLayer.setName("PinLayer");
pinLayer.setLayout(new BorderLayout(CENTER_BEHAVIOR_CENTER_ABSOLUTE));
Image pin = Resources.getGlobalResources().getImage("Pin.png");
Label pinLabel = new Label(pin);
MapLayout.setHorizontalAlignment(pinLabel, MapLayout.HALIGN.CENTER);
MapLayout.setVerticalAlignment(pinLabel, MapLayout.VALIGN.BOTTOM);
pinLayer.add(CENTER, pinLabel);
Button back = new Button("", "TitleCommand");
FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK);
CompletionContainer cc = new CompletionContainer();
AutoCompleteAddressInput from =
new AutoCompleteAddressInput("Current Location", "From",layer,cc);
AutoCompleteAddressInput to =
new AutoCompleteAddressInput("", "Where To?", layer, cc);
from.setCurrentLocation(LocationService.getCurrentLocation());
Image circle = Image.createImage(square.getWidth(),square.getHeight(),0);
Graphics g = circle.getGraphics();
showNavigationToolbar
Now that we have these variables in place lets look at the code
We created and placed a new layer for the pin image placement. This allows us to drag the CompletionContainer down and see the pin image on the map. That also
means we can remove it easily once we exit the search UI

10. void showNavigationToolbar() {
final Container layer = getLayeredPane(MapForm.class, true);
layer.setName("MapFormLayer");
layer.setLayout(new BorderLayout());
final Container pinLayer = getLayeredPane(AutoCompleteAddressInput.class, false);
pinLayer.setName("PinLayer");
pinLayer.setLayout(new BorderLayout(CENTER_BEHAVIOR_CENTER_ABSOLUTE));
Image pin = Resources.getGlobalResources().getImage("Pin.png");
Label pinLabel = new Label(pin);
MapLayout.setHorizontalAlignment(pinLabel, MapLayout.HALIGN.CENTER);
MapLayout.setVerticalAlignment(pinLabel, MapLayout.VALIGN.BOTTOM);
pinLayer.add(CENTER, pinLabel);
Button back = new Button("", "TitleCommand");
FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK);
CompletionContainer cc = new CompletionContainer();
AutoCompleteAddressInput from =
new AutoCompleteAddressInput("Current Location", "From",layer,cc);
AutoCompleteAddressInput to =
new AutoCompleteAddressInput("", "Where To?", layer, cc);
from.setCurrentLocation(LocationService.getCurrentLocation());
Image circle = Image.createImage(square.getWidth(),square.getHeight(),0);
Graphics g = circle.getGraphics();
showNavigationToolbar
I refactored the text fields to use this new API and set the location to the current location be default. Normally a user wouldn't enter the origin address only the
destination so using the current location makes sense

11. from.setCurrentLocation(LocationService.getCurrentLocation());
Image circle = Image.createImage(square.getWidth(),square.getHeight(),0);
Graphics g = circle.getGraphics();
g.setColor(0xa4a4ac);
g.setAntiAliased(true);
g.fillArc(0, 0, circle.getWidth(), circle.getHeight(), 0, 360);
final Label fromSelected = new Label(circle);
final Label toSelected = new Label(square);
SearchService.nameMyCurrentLocation(
LocationService.getCurrentLocation(), name -> from.setTextNoEvent(name));
to.requestFocus();
lastFocused = to;
from.addFocusListener(new FocusListener() {
@Override
public void focusGained(Component cmp) {
fromSelected.setIcon(square);
lastFocused = from;
}
@Override
public void focusLost(Component cmp) {
fromSelected.setIcon(circle);
}
showNavigationToolbar
I'm using the nameMyCurrentLocation method to fetch the name of the location of origin

12. @Override
public void focusLost(Component cmp) {
toSelected.setIcon(circle);
}
});
addMapListener((source, zoom, center) -> {
if(lastTimer != null) {
lastTimer.cancel();
}
lastTimer = UITimer.timer(500, false, () -> {
lastTimer = null;
SearchService.nameMyCurrentLocation(
new Location(center.getLatitude(), center.getLongitude()),
name -> {
lastFocused.setTextNoEvent(name);
lastFocused.setCurrentLocation(
new Location(center.getLatitude(), center.getLongitude()));
});
});
});
Container navigationToolbar = BoxLayout.encloseY(back,
showNavigationToolbar
The map listener is used for the point location on the map functionality, if I drag the map it will fetch the location from there and set it to the last focused text field.
However, we wait 500ms before doing that so we don't send too many WebService requests. We cancel the timer if there is one that's already in the waiting stage

13. lastFocused.setCurrentLocation(
new Location(center.getLatitude(), center.getLongitude()));
});
});
});
Container navigationToolbar = BoxLayout.encloseY(back,
BorderLayout.centerCenterEastWest(from, null, fromSelected),
BorderLayout.centerCenterEastWest(to, null, toSelected)
);
navigationToolbar.setUIID("WhereToToolbar");
navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> {
g1.setAlpha(255);
g1.setColor(0xffffff);
if(dropShadow != null) {
if(((BorderLayout)layer.getLayout()).getCenter() != null) {
g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight());
}
g1.drawImage(dropShadow, rect.getX() - shadowHeight, rect.getY() +
rect.getHeight() - dropShadow.getHeight() / 4 * 3);
g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getY() +
rect.getHeight() - shadowHeight);
} else {
showNavigationToolbar
This used to be if(layer.getComponentCount() > 1) but that doesn't make sense anymore as the CompletionContainer is always there only folded or expanded. So I check
if the CompletionContainer is in the CENTER or SOUTH

14. g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getY() +
rect.getHeight() - shadowHeight);
} 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);
});
cc.addCompletionListener(e -> {
if(to.getCurrentLocation() != null) {
SearchService.directions(from.getCurrentLocation(), to.getCurrentLocation(),
(path, duration, distance) -> {
enterNavigationMode(pinLayer, navigationToolbar, layer, path,
from.getText(), to.getText(), duration);
});
}
showNavigationToolbar
When a button is pressed in the search completion we get an event to begin navigation at which point we ask for directions and enter navigation mode. I'll discuss the
whole navigation mode in the route section

15. SearchService.directions(from.getCurrentLocation(), to.getCurrentLocation(),
(path, duration, distance) -> {
enterNavigationMode(pinLayer, navigationToolbar, layer, path,
from.getText(), to.getText(), duration);
});
}
});
back.addActionListener(e -> {
pinLayer.removeAll();
navigationToolbar.setY(-navigationToolbar.getHeight());
layer.getComponentAt(1).setY(getDisplayHeight());
navigationToolbar.getParent().animateUnlayout(200, 120, () -> {
layer.removeAll();
revalidate();
});
});
layer.add(NORTH, navigationToolbar);
navigationToolbar.setWidth(getDisplayWidth());
navigationToolbar.setHeight(getPreferredH());
navigationToolbar.setY(-navigationToolbar.getHeight());
getAnimationManager().addAnimation(layer.createAnimateLayout(200),
() -> cc.showCompletionBar(layer));
}
showNavigationToolbar
I use the animation completion event to show the completion bar which also has an animation in place

16. private void addMapListener(MapListener ml) {
if(lastMapListener != null) {
mc.removeMapListener(lastMapListener);
}
lastMapListener = ml;
mc.addMapListener(ml);
}
addMapListener
One thing I neglected to mention is the map listener which we bind using this new method. This prevents duplicate map listeners and allows us to easily clear the
selection.