UI Designer: What is new?!

Simplifier Release 5.0 is finally here

… and will make application creation even easier. Why?

A milestone is the new WYSIWYG editor in our UI Designer. As the name suggests, you are able to directly see the changes in the application´s user interface.

UI Designer Simplifier 4.5

UI Designer Simplifier 5.0

“Die-Hard” Simplifier users see the advantages right away: Previously, you could only add widgets per click. Also, you had no idea about how changes affected the user interface without deploying the app first. This is different now.

Video: New UI Designer

Advantages at a glance:

  • Adding Widgets per drag & drop
  • Simpler Widget Assignment
  • Visibility of changes made in the CSS editor and with themes
  • Live Preview on mobile devices

 

Adding widgets per drag & drop
The widgets can be added to the screen easily via drag & drop.
To all creatures of habit: Do not worry! You can still add the widgets per click, just like you are used to.
To the Simplifier Pros: You can still use the old display in the screen content tree.

Simpler widget assignment
Surely, you remember: You wanted to add a button to a screen. Until this button was at the desired position, some clicks had occurred. Release 5.0 makes it possible to place the widgets directly at the desired position.

Visibility of changes made in the CSS editor and with themes
Alright, you can see any changes you have made immediately. So far, so good! But what about the changes in the CSS editor?
Good news: Even the inserted CSS code is directly visible – without having to deploy. The same applies to the added themes, because here, too, you can see the changes in real-time.

Live Preview on mobile devices
In addition to the WYSIWYG editor, the UI Designer offers a Live Preview in the Simplifier Mobile Client. This means that every change in the user interface is displayed in real-time on the mobile device. Thus, you have the possibility to test your layout on different devices and smartphones or tablets.

Note: Deploying the app is still necessary to implement your changes.

You find that interesting? Then check out the video, to learn how it works exactly!

Video: Live Preview

Apart from those mentioned above, Release 5.0 contains many other advantages with regard to the UI Designer. For example, there is the revised Asset Editor, which allows you to better manage the static content of an app. In addition to uploading and previewing images and other files, it also enables downloads and provides a better overview.

Assets

With the new Icon Explorer you can add icons to widgets that have an image or icon as a property.

You can also add an icon font to an app in order to use them in the Icon Explorer. Images uploaded under Assets can also be selected.

Maybe you are missing the release button that used to be next to the deploy button? You can now access releases by clicking on the app name in the upper left corner of the UI Designer. After that, a dialog consisting of the tabs “General” and “Release” will open up.

The tab “General” offers an overview of Application Properties and the possibility to define the Deploy Configuration (ECMA5, Minify and Polyfill):

  • Transpiler = The application is provided for browsers that only have ECMAScript5 support
  • Polyfill = Creates workarounds for older browser versions, such as Internet Explorer 11
  • Minify = Compresses the JavaScript and CSS source code to an optimal file size to optimize loading times

The tab “Release” offers you an overview of all the created releases of this application. Also, you can create a new one at any time.

Summary

As you can see, the new UI Designer entails a number of advantages that make the creation of applications even easier. It guarantees that you can use your time much more efficiently.

If you are tired of having to deploy your app every time you want to make your UI changes made visible, you should definitely give our new UI Designer a try.

Release Notes:

Although the UI Designer is the biggest innovation, there are many other changes. You can find the Releasenotes here.

Leave A Comment