API & Code

ScheduleJS & FlexGanttFX APIs

Migrate easily thanks to the compatibility of ScheduleJS public API with the FlexGanttFX API.

Same name of model classes

Same method names & parameters

Same generic Typing capabilities

Implementation

  FlexGanttFX ImplementationScheduleJS Implementation
IteratorsSome methods are returning Java IteratorsSame API returns Javascript Arrays
ConstructorsSome classes have multiple constructors with different sets of parametersIn Typescript, it is only possible to have one constructor per class but Typescript allows to use default arguments
Time managementJava Instant class are used to represent all timingsJavascript "number" are used to represent all timings.
We are using JodaJs specific library to manage timezone conversions and formatting to obtain texts
Method overridingJava allows to define multiple methods with the same name when using different sets of parametersIn Typescript, it is not possible to define multiple methods with the same name. Default arguments allow to mitigate this limitation but some methods had to be named differently for specific implementations
JavaFX ObservableList In some cases FlexGanttFX is using ObservableListIn ScheduleJS, in most of the cases, the function returns an array
JavaFX PropertiesIn FlexGanttFX, most of the elements of the framework that can be customized by the developers are exposed as JavaFx Properties objects. These properties are used to allow the framework to automatically take into account the new values and redraw the screen automaticallyIn ScheduleJS, after updating a property, the developer will need to ask the framework to redraw the screen

FlexGanttFX Application

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

ScheduleJS Application

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

We are here to help

Our team is expert on both FlexGantt (Swing and FX) and ScheduleJS (TypeScript, Angular, HTML 5). Thanks to our expertise in complex projects, we can also provide you all the help you would ask concerning the front and back-end side of your scheduling application.