Spotlight: SyncFusion Integration for Enterprise Components

SyncFusion's Essential JS 2 (EJ2) library is one of the most comprehensive UI component suites available. With Oorian's SyncFusion wrapper, you get full access to these enterprise-grade components while writing pure Java code.

Why SyncFusion?

SyncFusion offers over 80 UI components covering virtually every enterprise need:

• Data Grid: Advanced filtering, grouping, pivoting, and Excel export
• Charts: 50+ chart types with real-time updates
• Schedulers: Outlook-style calendars with drag-and-drop
• Editors: Rich text, spreadsheet, and diagram components
• Navigation: Menus, toolbars, tabs, and sidebars

Getting Started with SyncFusion in Oorian

Oorian's SyncFusion wrapper follows the same conventions as all other wrappers. Here's how to add a data grid:

@Page("/customers")
public class CustomersPage extends HtmlPage
{
    @Override
    protected void createBody(Body body)
    {
        SfDataGrid grid = new SfDataGrid();
        grid.setDataSource(customerService.findAll());

        // Configure columns
        grid.addColumn("id", "ID").setWidth(80);
        grid.addColumn("name", "Customer Name");
        grid.addColumn("email", "Email Address");
        grid.addColumn("status", "Status");

        // Enable features
        grid.setAllowPaging(true);
        grid.setAllowSorting(true);
        grid.setAllowFiltering(true);
        grid.setAllowGrouping(true);

        // Handle events
        grid.registerListener(this, RowSelectedEvent.class);

        body.addElement(grid);
    }
}

SyncFusion Charts

Creating interactive charts is just as straightforward:

SfChart chart = new SfChart();
chart.setTitle("Monthly Sales");

SfChartSeries series = new SfChartSeries();
series.setType(ChartType.LINE);
series.setDataSource(salesData);
series.setXName("month");
series.setYName("revenue");
chart.addSeries(series);

// Enable interactivity
chart.setEnableTooltip(true);
chart.setEnableZooming(true);

body.addElement(chart);

Rich Text Editor

SyncFusion's rich text editor provides Word-like editing capabilities:

SfRichTextEditor editor = new SfRichTextEditor();
editor.setHeight("400px");
editor.setValue("<p>Start editing...</p>");

// Configure toolbar
editor.setToolbarSettings(
    ToolbarItem.BOLD, ToolbarItem.ITALIC, ToolbarItem.UNDERLINE,
    ToolbarItem.SEPARATOR,
    ToolbarItem.FORMATS, ToolbarItem.ALIGNMENTS,
    ToolbarItem.SEPARATOR,
    ToolbarItem.IMAGE, ToolbarItem.LINK, ToolbarItem.TABLE
);

// Handle content changes
editor.registerListener(this, ContentChangeEvent.class);

body.addElement(editor);

Scheduler Component

Build Outlook-style scheduling interfaces:

SfSchedule schedule = new SfSchedule();
schedule.setCurrentView(ScheduleView.WEEK);
schedule.setDataSource(appointments);

// Map data fields
schedule.setEventSettings(
    new EventSettings()
        .setSubjectField("title")
        .setStartTimeField("startDate")
        .setEndTimeField("endDate")
);

// Enable drag-and-drop
schedule.setAllowDragDrop(true);
schedule.setAllowResizing(true);

body.addElement(schedule);

Licensing Considerations

SyncFusion offers a Community License that's free for companies with less than $1M in annual revenue and fewer than 5 developers. For larger organizations, commercial licensing is required but is competitively priced compared to alternatives.

Conclusion

SyncFusion integration demonstrates Oorian's philosophy in action: instead of building mediocre UI components, we wrap the best. You get enterprise-grade components with full Java control, type safety, and familiar patterns.