Ignite UI Page Designer: Beta Testing

You may have heard the rumblings already—Infragistics is working on a new HTML5 page designer to make developing modern Web apps for line of business much easier. In this post, I’m glad to announce and introduce you to more of the details of that designer.

Check out this full walkthrough video here and/or read on for a quick overview of the highlights. When you're done, just click the BECOME A BETA TESTER button at the bottom of this post to get started!

1. WYSIWYG for HTML5

Devs who are used to native coding environments may be used to having a What-You-See-Is-What-You-Get (WYSIWYG) interface to help them lay out and configure screens. While there are some options for plain HTML, even some with basic Bootstrap support, there are no developer-oriented WYSIWYG designers that are targeted at more sophisticated modern Web interfaces like what you can build with Infragistics’ advanced Ignite UI controls.

With the Page Designer, we are introducing just that—a drag-n-drop way to lay out and configure advanced modern Web components.

Toolbox Chock Full of Advanced Ignite UI Components

A WYSIWYG surface is nice on its own, but it’s not that awesome unless you also have awesome components to use with it. In our Page Designer, we supply the many, advanced Ignite UI controls so that you can drag and drop them and easily configure them how you want them.

Easy-to-Use Component Editor

Drill down into complex properties, get drop downs that enumerate fixed values, easily toggle booleans, even click to add event handlers with the right method signatures! Our component editor makes it much easier to configure powerful components like the Ignite UI chart, grid, and more.

2. Responsive Web Design (RWD)

One of the challenges with modern Web dev is being able to support a much broader range of devices than most developers were required to in the past. RWD is by far the most popular technique for grappling with that complexity, but it can be difficult to deal with, especially for devs who are new to it.

In addition to the Ignite UI Grid’s built-in RWD support, the Page Designer adds a few more helpful RWD features.

Bootstrap Grid Framework Support

You can drag and drop a Bootstrap row and easily pick from several column layout options. Then just drop your components into columns to quickly layout your page in a responsive grid layout.

RWD CSS Breakpoint Visualizer and Editor

Using our RWD GUI, you can add, edit, visualize, and easily preview what your designs look like for your different CSS breakpoints.

Add/Edit Class for Current Breakpoint

Select the breakpoint you want to preview/edit. Then select a component and double-click its CSS class—the Page Designer will add or take you to the class for that breakpoint in your page.

3. Code Editor with Clean Code

No dev tool would be complete without a code editor, and the Page Designer is no exception to that. We’ve leveraged the world-class ACE code editor and augmented it with specialized code completion capabilities as well as integrated API help. We have made clean code a number one priority because we know how important that is and how most WYSIWYG designers fail on this point.

4. Easier Data Access

Connecting components to data requires a good bit of hand-written code normally, but the Ignite UI Data Source helps make that a lot easier. On top of that, the Page Designer helps you configure and then easily select your data source for data-bound Ignite UI components.

5. Integrated API Help

One of the biggest challenges with developing against highly capable components and frameworks is that you regularly have to reference the API docs to ensure you are getting things right.
In the Page Designer, our Component Editor integrates Ignite UI’s extensive API help by (1) providing a link to the relevant API docs and by (2) pulling out and showing API information as you hover over individual component events and properties/options. Plus, this same help integration is shown in the code editor when editing component values.

Help Us Test!

As you can see, the Ignite UI Page Designer brings a whole lot to the game, but this is just the beginning. This is the first time we are sharing it with the public, and we are looking for devs who are willing to do some beta testing, report issues, and provide feedback on how we can improve it and make it as useful as it can be for you.

If you’re willing to do that, please step on over, sign up, and start plugging away!