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
SAME METHODS AND PARAMETERS
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 |
Une transition facile de JavaFX vers TypeScript
Le superset TypeScript implémente des types obligatoires, dans JavaScript. La syntaxe de ScheduleJS est aussi proche que possible de son prédécesseur FlexGanttFX. Nous avons réussi a traduire toutes les API FlexGanttFX existantes pour préserver la flexibilité et la facilité d'utilisation du framework.
Le role principale du code TypeScript est de charger les structures de données et gérer les intéractions des utilisateurs. L'exemple suivant montre comment implémenter un simple diagramme de Gantt pour des avions dans FlexGanttFX et ScheduleJS.
Cherchez les différences entre ces deux blocs de code: elle sont minimes!
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();
}De JavaFX vers le web...
ScheduleJS est fait avec les technologies HTML, JS et CSS. En plus de ce que le web a à offrir, la librairie propose un ensemble de composants de grande valeur pour personnaliser vos graphiques comme vous le souhaitez. Les développeurs peuvent créer de fantastiques scénarios UI/UX en utilisant à la fois les possibilités offertes par les technologies web et les composants ScheduleJS.
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>The same renderer architecture
The ScheduleJS renderer architecture is the same as its FlexGanttFX counterpart. The HTML Canvas API being really close in design to the JavaFX Canvas API, all your FlexGanttFX renderers can be migrated 1 to 1 with almost no effort and time.
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);
}