API & Code

ScheduleJS & FlexGanttFX APIs

Migrez facilement grâce à la compatibilité de l'API de ScheduleJS avec l'API FlexGanttFX.

Mêmes noms de classes modèles

Noms de méthodes et paramètres identiques

Même réflexes de développement

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

Application FlexGanttFX

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

	Scene scene = new Scene(gantt);
	stage.setScene(scene);
	stage.sizeToScene();
	stage.centerOnScreen();
	stage.show();
}

Application ScheduleJS

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

    this.gantt.setWidth(this.defaultScheduleGanttGraphicComponent.canvasWidth);
}
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>
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). Grâce à notre expertise dans de nombreux projets complexes, nous pouvons vous fournir toute l'aide nécessaire concernant le front-end et back-end de votre application de scheduling.