Log in to like this post! Ignite UI: The World’s Most Advanced JavaScript & HTML5 UI Framework Jason Beres [Infragistics] / Friday, October 12, 2012 I am very excited to unveil the world’s most advanced and feature complete jQuery based UI framework: Ignite UI. With Ignite UI, developers can create next generation, browser based, touch-enabled tablet, mobile & desktop experiences. At it’s core, Ignite UI is a set of full featured, advanced HTML & JavaScript user interface controls based on jQuery Core, jQuery UI and jQuery Mobile JavaScript libraries. We didn’t stop there though, with Ignite UI controls, we also ship MVC & ASP.NET server side wrappers, so if you are not ready to make the jump to pure HTML & jQuery client side development, you can use all of the great features in the Ignite UI controls in your current ASP.NET MVC applications. On top of that, Ignite UI includes a complete set of Mobile controls with adaptive CSS, so you are covered when building your iPhone, Android & Windows Phone applications. So what’s in Ignite UI? Let’s take a look at the UI controls and frameworks that are included. Ignite UI Core At it’s core, Ignite UI controls include the following: Touch Support – we test against multiple devices, form factors and processors. No matter what type of application you are building – desktop, tablet, mobile – we make sure the controls perform as you would want them to. Browser Support – Firefox 3.0+, IE 6+, Safari 3.2+, Chrome 2.0+, Opera Theme Roller- since we’re jQuery based, all of the controls integrate into your existing ThemeRoller themes. No changes necessary to make our stuff look good with your stuff. Server Wrappers – ASP.NET MVC wrappers are included if you are not ready to go all-in on the client-side HTML & jQuery development. Optimized Rendering – using the Loader component, you have granular control over how much JavaScript is sent to the client. For example, if you just want the Grid to include Sorting, just say “Grid.Sorting”, and only the Sorting JavaScript file will get sent to the client, not all of the JavaScript files for every grid feature. Control Configuration For many developers coming from server-side coding, we recognize that writing JavaScript is not a favorite task. We’ve added a Control Configurator that let’s you configure controls in a WYSIWYG editor, with a complete Property Window and Events Window. You just select a control, set the properties and events, and we generate the JavaScript. It’s that easy! Data Chart The HTML5 data chart control (igChart) is a HTML Real time charting, high data volume, multi-touch enabled high performance HTML5 graphing control. We’ve based this on our award winning XAML charting core, with rendering speeds of millions of data points in milliseconds. There is not a chart in the marketing today that can match the performance and feature set of this jQuery Chart control. Here is what you get in charting features: Mouse / Touch Range Selection & Pinch Zoom Overview + Detail Window (OPD) with Mobile View Composite / Hybrid Charts Motion Framework Pie Chart Category Series – Area, Line, Spline, Bar, Waterfall, Spline, Spline Area, Step Line, Step Area including Stacked & Stacked 100 Series Scatter Series High-Density Scatter Series Polar Series Radial Series Financial / OHLC Series 35 Financial Indicators Financial Overlays Linear & Log Axis Scales This versatile HTML5 Chart controls lets you create basic line of business displays, high-performance real-time monitoring displays, and interactive data immersion applications. Geospatial Mapping The underlying rendering engine of the Geospatial Map (igMap) is the same as the Data Chart, so in addition to a wide variety of tile sources, you can also bind & render thousands to millions of data points on the map. Bing, CloudMade, OpenStreet, ESRI Shape Files and custom tiles are supported, as well as the following series types: Contour Line Polyline Scatter Area Geographic Shape Geographic Symbol Data Grids, Data Access & Data Binding Data Grids are the backbone of almost every line of business applications, and Ignite UI has you covered for every grid scenario. With our almost 25 year history of building the best grids in the world that run the largest and most demanding applications, we know that performance matters. We’ve built the Ignite UI grids with performance as a core feature, so make sure to read our jQuery Grid Performance Whitepaper and see what you should expect with you build the Ignite Grids in your applications. The grids included in the toolkit are: Data Grid – a jQuery Data Grid which support features like sorting, grouping, column pinning, cell merging, in-cell editing, row & cell selection, column resizing, custom templates and much, much more. Hierarchical Data Grid – the jQuery Hierarchical Data Grid lets you easily create parent-child views of data. Each child grid is represented using the flat data grid, so you do not lose out on features or performance in child bands of data. Setting up hierarchical relationships is a breeze using the Data Source control. OLAP / Multi-Dimensional Pivot Grid – if you need to give your users a better analytical drill-down capability with your jQuery Pivot Grid multi-dimensional data from SQL Analysis Services, Oracle or SAP, the igPivotGrid can do the job. It will even bind to flat data sources like SQL Server or Excel files. Features like XMLA & MDX are supported for getting data into the grid via the igXmlaDataSource. And since the data access and rendering pieces are separate, you can do literally anything you want with your OLAP data, you are no restricted to binding it to the Grid control, you can bind to an HTML table, a chart, or anything you can code. The grids are supporting by our jQuery Data Source control (igDataSource), which makes it super simple to bind and mash up data on the client. The Data Source takes the complexity out of asking for data, parsing it on the client and binding it to your controls. Out of the box, we fully support: oData WCF Web API REST JSON XML Arrays HTML Tables Since the Grids and the Data Source know about each other, features like local & remote sorting & filtering work with no additional code on your part. The grids are also supported by our high-performance jQuery Templating Engine, which gives you complete flexibility & control over how data is rendered for each cell in a row when it is bound. The templating engine supports: Conditional Row Formatting Multi-Conditional Row Formatting Nested Blocks Nested Blocks with Images Data Entry & HTML Editing No matter what type of data input you need in your applications, we have you covered with a full set of controls that can handle simple input to richer validation, HTML WYSIWYG editing, Date inputs & dropdown and even an auto-complete, cascading data source supported Combo Box. Date Picker – A jQuery dropdown date picker, with an editable text area, with prompt text & validation support. Editors – Data entry, including watermark text capability, spin buttons, numeric & currency support, as well as data annotation & validation. For global web applications, localization is fully supported. Combo Box – jQuery Load on demand combo box, with auto-suggest modes, text matching highlights, single & multi-select and full templating support. Also included is a cascading capability, which allows you to easily set parent-child relationships between combo boxes. HTML Editor – full jQuery HTML editor with a full toolbar experience that includes tables, fonts, styles, colors, images, hyperlinks and more. Word, Excel, XPS, PDF Engines and Exporters Creating in-memory documents or exporting data grids to almost any format is simple with the various document engines included with Ignite UI. These document libraries run on the server, and send the newly created document to the browser for consumption. PDF & XPS – create in-memory or export data grids to jQuery PDF or XPS formats. Microsoft Excel – Export data grids to Excel, or import data to Worksheets in XLS Excel 97 (BIFF8), XLSX Excel 2010 or higher or ExcelML. The Excel library includes an entire Excel object model, so you can easily create Workbooks, Worksheets, and interact with Excel features. All of this is support without the need for Excel on the client or the server, this is a self-contained jQuery Excel library. Microsoft Word – Create & export data into .DOC, .DOCX and WordML formats with the 100% managed jQuery Word Library. Use the Word Document Object Model to create documents, insert tables, images & format text. Controls that Complete an Application As well as data visualization, grids, and data entry & editors, there are supporting controls that complete an application. We’ve included additional controls in the toolkit that will help you round out the user experience of your applications. Dialog Window – a floating jQuery dialog window that supports modal or non-modal display, nested dialogs, custom header & buttons, as well as complete programmatic control over positioning. File Upload – allow users to asynchronously upload single or multiple files from the client to a server with features like cancel, progress of bytes / total bytes, and file information. Rating – give users the ability to rate anything, customizable with images, precision and continuous selection. Video Player – using the HTML5 video tag, this control will play H.264, WebM & Ogg Theora formats. Advanced features like full-screen mode, bookmarking, commercial insertion, and scrubber with play / pause / continue toolbar. Tree – load-on-demand high-performance rendering of jQuery Tree View with multi-selection, checkboxes, images, drag & drop support. Mobile Controls for Phone Apps All of the Ignite UI controls are tested across multiple devices and multiple browsers, but if you building an application that will deploy to a phone, you need controls that will fit the form factor and UI patterns expected on a phone. Ignite UI includes a complete set of 22 jQuery Mobile based controls that will deliver a complete phone application experience. We didn’t stop at just the controls, we include adaptive CSS support for iPhone, Android (Light, Dark, Light / Dark) & Windows Phone (Light, Dark), so when your application renders on the device, the style will match the end-user expectation. The controls included in Ignite UI for jQuery phone development are: List View Rating Input Button CheckBox CheckBox Group RadioButton Group SelectMenu Slider ToggleSwitch TextBox Layout Collapsible Collapsible Set Page Page Content Page Footer Page Header Popup Navigation Link NavBar Get Ignite UI Today! You are probably thinking, how do I get my hands on Ignite? It’s easy. Click on this image to get a fully support trial version: To view all the samples and code for HTML, MVC & ASP.NET, click there: https://ko.infragistics.com/products/ignite-ui If you want something you don’t see, or if you have any question, shoot me an email at jasonb@infragistics.com! We hope you enjoy Ignite UI as much we did building it and delivering this new version!