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

3d-modeling (1)

SAME METHODS AND PARAMETERS

MÊMES CAPACITÉS DE TYPAGE GÉNÉRIQUE

Implémentation

  Implémentation FlexGanttFXImplémentation ScheduleJS
ItérateursCertaines méthodes renvoient des itérateurs JavaLa même API renvoie des tableaux en Javascript
ConstructeursCertaines 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 tempsLes 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éthodesJava 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 ObservableListDans ScheduleJS, dans la plupart des cas, la fonction renvoie un tableau
Propriétés JavaFXDans 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 automatiquementDans 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!

Logo JavaFX
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();

	...
	
}
Logo TypeScript
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.

API
Logo JavaFX
public void start(Stage stage) {
    
    ...

	Scene scene = new Scene(gantt);
	stage.setScene(scene);
	stage.sizeToScene();
	stage.centerOnScreen();
	stage.show();
}
Logo HTML
<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.

Logo JavaFX
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);
}
Logo TypeScript
 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);
  }

Présents à vos côtés

Notre équipe est experte de FlexGantt (Swing et FX) et de ScheduleJS (TypeScript, Angular, HTML 5). Nous pouvons vous fournir toute l'aide nécessaire concernant le front-end et back-end de votre application de planification.