One of Oorian's greatest strengths is its extensive library of wrappers for industry-leading JavaScript UI components. Rather than building mediocre versions of every component ourselves, we wrap the best libraries available—giving you enterprise-grade components maintained by specialists, accessible entirely from Java.
The Wrapper Philosophy
Oorian provides 58 extension libraries organized into three tiers based on their scope and complexity.
Tier 1: Full UI Platforms (6 Libraries)
These are comprehensive UI frameworks that provide complete widget sets:
- Syncfusion EJ2 - 80+ components including grids, charts, schedulers, and editors
- Webix - Fast, feature-rich widgets with excellent data handling
- DHTMLX - Enterprise-grade components for complex applications
- Kendo UI - Professional components with excellent documentation
- Wijmo - High-performance controls for data-intensive apps
- DevExtreme - Responsive components with theming support
Tier 2: Web Component Libraries (7 Libraries)
Modern component libraries and CSS frameworks:
- Shoelace - Beautiful web components built on standards
- Web Awesome - Feature-rich component library
- Lion - Accessible, performant web components
- Bootstrap - The world's most popular CSS framework
- Bulma - Modern CSS framework based on Flexbox
- PicoCSS - Minimal CSS framework for semantic HTML
- Tailwind CSS - Utility-first CSS framework
Tier 3: Specialized Components (45 Libraries)
Best-of-breed libraries for specific UI needs:
Rich Text Editors (7)
- CKEditor 5 - Professional editor with collaboration features
- TinyMCE - Flexible, customizable WYSIWYG editor
- Quill - Modern, API-driven editor
- ProseMirror - Toolkit for building rich text editors
- Monaco Editor - VS Code's powerful code editor
- TipTap - Headless editor framework
- CodeMirror - Versatile code editor component
Data Grids (4)
- AG Grid - Enterprise data grid with advanced features
- Handsontable - Spreadsheet-like data grid
- Tabulator - Interactive tables with many features
- DataTables - jQuery table plugin (legacy support)
Charts & Visualization (7)
- Chart.js - Simple, clean charts for most use cases
- Highcharts - Professional charting library
- ECharts - Powerful visualization from Apache
- D3.js - Low-level data visualization toolkit
- Google Charts - Easy-to-use charts from Google
- ApexCharts - Modern, interactive charts
- Plotly.js - Scientific and statistical charts
Scheduling & Timeline (2)
- FullCalendar - Full-featured calendar component
- vis.js - Timeline and network visualization
Diagrams & Flowcharts (4)
- jsPlumb - Connect elements with flowchart lines
- JointJS - Diagramming library
- GoJS - Interactive diagrams and graphs
- Mermaid - Generate diagrams from text
Maps (4)
- Leaflet - Lightweight, mobile-friendly maps
- Mapbox GL - Beautiful, customizable maps
- OpenLayers - Full-featured mapping library
- Google Maps - Google's mapping platform
Date & Time (1)
- Flatpickr - Lightweight date/time picker
File Upload (2)
- Dropzone - Drag-and-drop file uploads
- FilePond - Flexible file upload with previews
Notifications (2)
- SweetAlert2 - Beautiful, customizable alerts
- Toastr - Simple notification toasts
Image Tools (3)
- Cropper.js - Image cropping functionality
- PhotoSwipe - JavaScript lightbox
- GLightbox - Modern lightbox library
Carousels (2)
- Swiper - Modern touch slider
- Splide - Lightweight, accessible slider
Media Players (2)
- Video.js - HTML5 video player
- Plyr - Simple, accessible media player
Tour & Onboarding (2)
- Intro.js - Step-by-step user guides
- Shepherd.js - Guide users through your app
Document Viewing (1)
- PDF.js - Mozilla's PDF viewer
Icons (1)
- Font Awesome - Iconic font and CSS toolkit
Using Extension Libraries
All Oorian wrappers follow consistent conventions:
// 1. Create the component
EcChart chart = new EcChart();
// 2. Configure with fluent API
chart.setTitle("Sales Data")
.setWidth("100%")
.setHeight("400px");
// 3. Add data
chart.addSeries(salesSeries);
// 4. Register event listeners
chart.registerListener(this, ChartClickEvent.class);
// 5. Add to page
body.addElement(chart);Choosing the Right Library
With 58 options, how do you choose? Consider:
- Features needed - Match library capabilities to requirements
- Licensing - Some require commercial licenses for production
- Bundle size - Lighter libraries for simpler needs
- Existing familiarity - Leverage team knowledge
Mixing and Matching Libraries
Unlike monolithic frameworks that lock you into a single vendor's components, Oorian lets you combine multiple wrapper libraries in the same application—even on the same page. Need Leaflet for maps, Chart.js for visualizations, and Quill for rich text editing? Use them all together:
@Page("/dashboard")
public class DashboardPage extends HtmlPage
{
@Override
protected void createBody(Body body)
{
// Leaflet map showing store locations
LfMap map = new LfMap();
map.setCenter(40.7128, -74.0060);
body.addElement(map);
// Chart.js chart showing sales data
CjChart salesChart = new CjChart(ChartType.BAR);
salesChart.addDataset(salesData);
body.addElement(salesChart);
// Quill editor for notes
QlEditor notes = new QlEditor();
notes.setPlaceholder("Add notes...");
body.addElement(notes);
}
}This flexibility means you can always choose the best tool for each job. Start with one charting library and switch to another later. Use a lightweight date picker alongside a full UI platform. Your architecture decisions aren't constrained by framework limitations.
Conclusion
Oorian's 58 extension libraries give you access to the best JavaScript UI components through a consistent, type-safe Java API. Whether you need a simple chart or a full enterprise UI platform, there's a wrapper ready to use—and you're free to combine as many as your application requires.