ScheduleJS & FlexGanttFX APIs
Migrez facilement grâce à la compatibilité de l'API de ScheduleJS avec l'API FlexGanttFX.
MÊME NOM QUE LES CLASSES DU MODÈLE
MÊME NOM POUR LES MÉTHODES ET LES PARAMÈTRES
MÊMES CAPACITÉS DE TYPAGE GÉNÉRIQUE
Implémentation
| Implémentation FlexGanttFX | Implémentation ScheduleJS | |
|---|---|---|
| Itérateurs | Certaines méthodes renvoient des itérateurs Java | La même API renvoie des tableaux en Javascript |
| Constructeurs | Certaines classes ont plusieurs constructeurs avec différents jeux de paramètres. | Dans Typescript, il n'est possible d'avoir qu'un seul constructeur par classe, mais Typescript permet d'utiliser des arguments par défaut. |
| Gestion du temps | Les classes Java Instant sont utilisées pour représenter tous les timings. | Les "number" Javascript sont utilisés pour représenter tous les timings. Nous utilisons la bibliothèque spécifique JodaJs pour gérer les conversions de fuseaux horaires et le formatage pour obtenir les textes associés. |
| Overriding de méthodes | Java permet de définir plusieurs fois une méthode en utilisant différents jeux de paramètres. | Dans Typescript, il n'est possible de définir qu'une seule fois une méthode avec un nom donné. Les arguments par défaut permettent d'atténuer ce point, mais certaines méthodes ont dû être nommées différemment pour des implémentations spécifiques. |
| JavaFX ObservableList | Dans certains cas, FlexGanttFX utilise ObservableList | Dans ScheduleJS, dans la plupart des cas, la fonction renvoie un tableau |
| Propriétés JavaFX | Dans FlexGanttFX, la plupart des éléments du framework qui peuvent être personnalisés par les développeurs sont exposés en tant qu'objets "JavaFX Properties". Ces propriétés sont utilisées pour permettre au framework de prendre automatiquement en compte les nouvelles valeurs et de redessiner l'écran automatiquement | Dans ScheduleJs, après avoir mis à jour une propriété, il faudra que le développeur code le fait que le framework doit redessiner automatiquement l'écran |
public void start(Stage stage) {
GanttChart<Aircraft> gantt = new GanttChart<Aircraft>(new Aircraft("ROOT"));
Layer layer = new Layer("Flights");
gantt.getLayers().add(layer);
gantt.getRoot().getChildren().setAll(generateCustomData(layer));
Timeline timeline = gantt.getTimeline();
timeline.showTemporalUnit(ChronoUnit.DAYS, 50);
GraphicsBase<Aircraft> graphics = gantt.getGraphics();
graphics.setActivityRenderer(Flight.class, GanttLayout.class,
new ActivityBarRenderer<>(graphics, "Flight Renderer"));
graphics.showEarliestActivities();
...
}
readonly gantt: GanttChart<Aircraft> = new GanttChart<Aircraft>(new Aircraft("ROOT"));
public start(): void {
const layer: Layer = new Layer("Flights");
this.gantt.getLayers().push(layer);
this.gantt.addRows(...this.generateCustomDataSet(layer, true));
const timeline = this.gantt.getTimeline();
timeline.showTemporalUnit(ChronoUnit.DAYS, 50);
const graphics = this.gantt.getGraphics();
graphics.setActivityRenderer(Flight, GanttLayout,
new ActivityBarRenderer(graphics, "Flight Renderer"));
graphics.showEarliestActivities();
}public void start(Stage stage) {
...
Scene scene = new Scene(gantt);
stage.setScene(scene);
stage.sizeToScene();
stage.centerOnScreen();
stage.show();
}
<div class="tutorial-aircraft-flight-content-container">
<div class="tutorial-aircraft-flight-time-line-info-filler">
</div>
<div class="tutorial-aircraft-flight-time-line">
<schedule-date-line class="tutorial-aircraft-flight-date-line"
[gantt]="gantt">
</schedule-date-line>
<schedule-event-line class="tutorial-aircraft-flight-event-line"
[gantt]="gantt">
</schedule-event-line>
</div>
<default-schedule-gantt-graphic class="tutorial-aircraft-flight-graphic"
[gantt]="gantt"
[ganttcontainerelement]="nativeElement">
</default-schedule-gantt-graphic>
<default-schedule-button-bar class="tutorial-aircraft-flight-actions-bar"
[gantt]="gantt">
</default-schedule-button-bar>
</div>protected ActivityBounds drawActivity(
ActivityRef<NetworkBookingActivity> activityRef, Position position,
GraphicsContext gc, double x, double y, double w, double h,
boolean selected, boolean hover, boolean highlighted,
boolean pressed) {
NetworkBookingActivity activity = activityRef.getActivity();
ScheduleNetworkBookingBean booking = activity.getUserObject();
y += 0;
/*
* Do not use entire height, align with top.
*/
h -= 5;
setBarHeight(h);
if (isNetworkBooking(booking)) {
gc.setFill(Color.STEELBLUE);
} else {
gc.setFill(Color.LIGHTSTEELBLUE);
}
gc.fillRect(x, y, w, h);
if (isPossibleToDrawText(w)) {
gc.setFontSmoothingType(FontSmoothingType.LCD);
setTextFill(Color.BLACK);
drawText(activityRef, booking.getLabel(),
TextPosition.CENTER, gc, x,
y, w, h, selected, hover, highlighted, pressed);
}
// border
gc.setStroke(Color.BLACK);
gc.strokeRect(x, y, w, h);
return new ActivityBounds(activityRef, x, y, w, h);
}
protected drawActivity(
activityRef: ActivityRef<NetworkBookingActivity>, position: ViewPosition,
ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
selected: boolean, hover: boolean, highlighted: boolean,
pressed: boolean): ActivityBounds {
const activity = activityRef.getActivity();
const booking = activity.getUserObject();
y += 0;
/*
* Do not use entire height, align with top.
*/
h -= 5;
this.setBarHeight(h);
if (this.isNetworkBooking(booking)) {
ctx.fillStyle = Color.STEELBLUE.toCssString();
} else {
ctx.fillStyle = Color.LIGHTSTEELBLUE.toCssString();
}
ctx.fillRect(x, y, w, h);
if (this.isPossibleToDrawText(w)) {
this.setTextFill(Color.BLACK);
this.drawText(activityRef, booking.name,
ActivityBarRendererTextPosition.CENTER, ctx, x,
y, w, h, selected, hover, highlighted, pressed);
}
// border
ctx.strokeStyle = Color.BLACK.toCssString();
ctx.strokeRect(x, y, w, h);
return new ActivityBounds(activityRef, x, y, w, h);
}