ScheduleJS & FlexGanttFX APIs
Pour une librairie TypeScript Gantt
Migrer facilement grâce à la compatibilité de ScheduleJS
avec l'API FlexGanttFX pour la librairie Typescript Gantt.
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 une librairie de Gantt TypeScript
La librairie TypeScript Gantt met en œuvre les types obligatoires en JavaScript. La syntaxe ScheduleJS est aussi proche que possible de son homologue FlexGanttFX. Nous avons réussi à traduire toutes les API existantes de FlexGanttFX afin de préserver la flexibilité et la facilité d'utilisation du framework.
Le rôle principal du code TypeScript est de gérer les structures de données et les interactions au sein des graphiques. L'exemple suivant montre comment mettre en œuvre une librairie Gantt simple pour l'aéronautique à partir de zéro 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 une librairie composée de HTML, JavaScript et CSS. Elle offre un ensemble complet de composants de grande valeur conçus pour personnaliser vos graphiques. Cela permet aux développeurs de créer des expériences UI/UX exceptionnelles en exploitant à la fois les capacités des technologies web modernes et les composants uniques fournis par ScheduleJS. Il s'agit d'une excellente librairie TypeScript Gantt, permettant la création de calendriers et de plannings de projets dynamiques et visuellement attrayants.
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>La même architecture de rendu
L'architecture du moteur de rendu de ScheduleJS reflète celle de son homologue FlexGanttFX. Etant donné les similitudes de conception entre l'API HTML Canvas et l'API JavaFX Canvas, tous vos moteurs de rendu FlexGanttFX peuvent être migrés de manière transparente vers ScheduleJS avec un minimum d'effort et de temps. Cela fait de ScheduleJS une librairie TypeScript Gantt idéale pour une transition efficace des projets existants.
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);
}