Creating an Uber Clone - Part XXIV - Transcript.pdf

Creating an Uber Clone - Part XXIV
Now that we have a path on the map we can move forward to the hailing process

Hailing
© Codename One 2017 all rights reserved
The hailing process is relatively simple, we tint the UI show a beacon and during that time we ask the server for a car.

blackButton.addActionListener(e -> {
exitNavigationMode(layer, fromComponent, toComponent, pathObject);
Label searching = new Label("Finding your ride",
Resources.getGlobalResources().getImage("searching-cab-icon.png"),
"SearchingDialog");
pinLayer.add(SOUTH, searching);
pinLayer.getUnselectedStyle().setBgColor(0);
pinLayer.getUnselectedStyle().setBgTransparency(120);
pinLayer.add(CENTER, new BlinkDot());
LocationService.hailRide(from, to, car -> {
pinLayer.removeAll();
});
});
enterNavigationMode
We can start by adding an event handler to the blackButton from the enterNavigationMode method

We are eﬀectively coloring the pin layer to create the tint eﬀect

"SearchingDialog");
});
});
enterNavigationMode
We added a new BlinkDot class to implement the pulsing blue dot eﬀect

"SearchingDialog");
});
});
enterNavigationMode
Another new API the hailRide method in LocationService allows us to hail a ride...

"SearchingDialog");
});
});
enterNavigationMode
Notice I don't show anything when the ride is hailed, I'll add that workflow with the driver app later

SearchingDialog
There is one UIID we need to cover here and it's the SearchingDialog UIID. Technically this UI element isn't a Dialog it's a Label but it looks like a Dialog.

SearchingDialog
Padding is pretty standard for a label

SearchingDialog
We have some margin on the sides to space it out from the edges

SearchingDialog
Most of this UIID is pretty standard except for the use of the special mode of the RoundRectBorder. The top only mode allows only the top portion to be rounded and the
bottom appears square. Usually we use it to combine two borders together with diﬀerent colors or UIID’s. In this case we give the component a feel of “peeking” from the
bottom of the Form.

SearchingDialog
The font is the standard font just like any other label

public class BlinkDot extends Component {
private int value;
private Motion growth;
public BlinkDot() {
setUIID("Label");
}
@Override
protected void initComponent() {
super.initComponent();
getComponentForm().registerAnimated(this);
}
@Override
protected void deinitialize() {
getComponentForm().deregisterAnimated(this);
super.deinitialize();
}
@Override
public boolean animate() {
if(growth == null || growth.isFinished()) {
growth = Motion.createEaseInOutMotion(3, getWidth() / 2, 1000);
growth.start();
}
int newValue = growth.getValue();
if(newValue != value) {
value = newValue;
return true;
}
BlinkDot
The BlinkDot class is pretty trivial. I could have used an animated gif but instead I just did this.

This is mostly for transparency we don't really use the UIID here

private int value;
public BlinkDot() {
setUIID("Label");
}
@Override
}
@Override
}
@Override
growth.start();
}
value = newValue;
return true;
}
BlinkDot
I use low level animations here so the best practice is to register/remove with initComponent/deinitialize

private int value;
public BlinkDot() {
setUIID("Label");
}
@Override
}
@Override
}
@Override
growth.start();
}
value = newValue;
return true;
}
BlinkDot
The motion class represents a timed motion between values which allows us to animate a value from point X to point Y. In this case I'm just growing the circle using the
value. Notice only the animate method mutates values as the paint method can be invoked more than once per cycle in theory

growth.start();
}
value = newValue;
return true;
}
return false;
}
@Override
public void paint(Graphics g) {
g.setAlpha(255);
g.setColor(0x297aa7);
int s = convertToPixels(2);
g.setAntiAliased(true);
g.fillArc(getX() + getWidth() / 2 - s / 2, getY() + getHeight() / 2 -
s / 2, s, s, 0, 360);
g.drawArc(getX() + getWidth() / 2 - value,
getY() + getHeight() / 2 - value, value * 2, value * 2, 0, 360);
g.drawArc(getX() + getWidth() / 2 - value - 1, getY() + getHeight() / 2 -
value - 1, value * 2 + 1, value * 2 + 1, 0, 360);
}
@Override
protected Dimension calcPreferredSize() {
int s = convertToPixels(15);
return new Dimension(s, s);
}
BlinkDot
The drawing logic is mostly hardcoded, I would have used the shape API to get a more refined eﬀect but it would have made things more complicated

Creating an Uber Clone - Part XXIV - Transcript.pdf

Recommended

Recommended

More Related Content

Similar to Creating an Uber Clone - Part XXIV - Transcript.pdf

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

More from ShaiAlmog1

More from ShaiAlmog1 (20)

Recently uploaded

Recently uploaded (20)

Creating an Uber Clone - Part XXIV - Transcript.pdf