XAF: New Web UI Theme, Templates and Optimizations for Desktop and Tablet Browsers (Coming soon in v15.1)

XAF Team Blog
26 May 2015

UPDATE:

The new XAF Web application style is now shiping in v15.2+! Refer to the official ASP.NET Web Application Appearance documentation article for more details. In addition, see the eXpressApp Framework > Getting Started > XAF Mobile (CTP) Tutorial article to learn more on the new Mobile UI, which is technically is a single-page HTML5/JavaScript application (SPA) based on DevExtreme components that is ready to be compiled by Apache Cordova (PhoneGap) into a native package that can then be submitted to app stores.

========================================================


So what do we have planned for XAF in this release? It all starts with the web...

As you can tell from the images below, we decided to change direction from our previous Web UI prototypes based on the Moderno theme (check here) and instead we've started implementing a brand new concept created by our UI designers. The result is an overhauled ASP.NET WebForms theme for XAF Web apps (it’s not available for our ASP.NET controls at present time), new webpage templates and associated optimizations for touch screen devices.  All of this should make accessing XAF web sites from both desktop and tablet browsers more intuitive for your end-users (I hope to talk about smartphones separately later this year).

In the upcoming release we wanted to share a preview (CTP) of our work to date so you can understand where we are heading. We hope to finalize all that we have planned with regard to look & feel, general UX, application flow and behavior by 15.2. It is likely that there will be more updates on this new web theme in the coming months.

At this time, we want to get your feedback and hear your thoughts. We want to work with you to create the best possible solution so you can build apps that address the widest possible use-cases going forward.

                               





Here is a short video that demonstrates our responsive layout in action...so you can get a better sense of how an XAF web application adapts itself as browser width or orientation changes.

Our XCRM demo will use the new style by default. To learn more on how to enable this theme in your existing apps and see how it works for yourself and provide feedback/report issues, refer to this knowledge base article.

24 comment(s)
Miles
Miles

YES!!!

26 May, 2015
Saif Khan
Saif Khan

Very nice. I can definitely roll this right away into two production projects i have going.

Observations

1. A lot of padding going on between groups.

2. Looks terrible in portrait. I assume the menu collapse when changing between portrait and landscape.  

I can't wait to test the optimizations for touch screen devices. This is a requirement for one of my app and i am having some issues with the current themes.

26 May, 2015
Edilson Junior
Edilson Junior

that's great!!! I'm so glad you heard us!!! And did it greatly!!!

so happy to keep my subscription

27 May, 2015
Roman Shelomanov
Roman Shelomanov

Very nice to get HTML5/JS client for XAF.

27 May, 2015
Dennis (DevExpress)
Dennis (DevExpress)

@Roman: This new Web UI is based on ASP.NET WebForms.

27 May, 2015
Aleksey Vorobyoff
Aleksey Vorobyoff

Is master-detail mode available for ListView in this template?

27 May, 2015
support@trinso.eu support@trinso.eu
support@trinso.eu support@trinso.eu

very good news Dennis. Respect for listening to the voice of customer :-). Looking fw.

27 May, 2015
support@trinso.eu support@trinso.eu
support@trinso.eu support@trinso.eu

... and also a question: will the responsive design be usable also on mobile phone devices?

28 May, 2015
Dennis (DevExpress)
Dennis (DevExpress)

@support@trinso.eu: Thanks for your feedback!

As for smartphones, not in this release, but there will be updates later this year.

28 May, 2015
Erik Kuziel
Erik Kuziel

looks really good! when can we expect 15.2 version?

28 May, 2015
Dennis (DevExpress)
Dennis (DevExpress)

@Aleksey: Not yet, although it is possible to implement a custom solution for this. BTW, would you please elaborate a bit more on your use-case scenario and tell us how often this data representation mode is going to be used in your app?

1 June, 2015
Dennis (DevExpress)
Dennis (DevExpress)

@Erik: Thanks for your feedback. We usually ship the second major release around early December.

1 June, 2015
Gero Pastoors
Gero Pastoors

Long time awaited/demanded. Thanks for that. Eventually DevExpress is going in the right direction.

Warning: What now comes may sound rude, however, it isn't intended to be rude!!

However, I was wondering, if it wouldn't be even better to push it one step further and support e.g. Bootstrap. This would give us much more flexibility. I think it's time for a non-proprietary solution.

XAF is sooo flexibel on many areas, but not on the presentation layer and this means to consider much more than just e.g. ConditionalAppearance.  

For the time being, the real strength of XAF is not the GUI. We are in the year 2015 and there has been a lot of improvement in the web-frontend-arena during the recent years.

In my opinion it's time to liberate this area and to take a REAL step forward.

Thanks.

4 June, 2015
Dennis (DevExpress)
Dennis (DevExpress)

@Gero: We greatly appreciate your input in this regard!

4 June, 2015
SAMALOGI
SAMALOGI

Hello Xaf Team,

I'm very exited with this new theme. In fact, i'm going to use it in production in my app. Oe question:

Why in a desktop screen is not full width? limited by the following class:

.sizeLimit {

max-width: 1200px;

}

Thanks!

7 July, 2015
Andreas Mummenhoff
Andreas Mummenhoff

To answer the question regarding use cases for the master-detail mode: there is NO application I maintain not using master detail. All kind of data browsing operations are expected to have an interface similar to Outlook: On the left (or top) some list or tree of [contacts/documents/articles/assets/messages/tasks/accounts/...] with summary information and on the right (or bottom) the detail information. For small screens this is not useful, of course, but tablet and desktop screens are big enough these days.

22 July, 2015
Mario Funke
Mario Funke

I miss the Cancel-Button in the Edit-Mode. Is this intentional?

22 July, 2015
Marcelo Schostik
Marcelo Schostik

Great! Very nice!

I've tested this new UI with my project and I've found two problems:

1) there is a lot of space between controls

2) the fonts are very big

I know this is "the beauty" of this theme but in real applications with a lot of information to display...it becomes a real problem.

12 August, 2015
Kartal TURGUT
Kartal TURGUT

This is great!

21 August, 2015
stwart marques
stwart marques

It´s not working with Xtradashboards. Is there any possibility in 15.2 ?

3 October, 2015
Dennis (DevExpress)
Dennis (DevExpress)

@stwart marques: This issue was already corrected in v15.1.7.

13 October, 2015
Daniel Raúl Vanzo
Daniel Raúl Vanzo

Very nice theme... It will support some kind of customizations? (font size for example)

4 December, 2015
Rubén Duarte
Rubén Duarte

Hi Dennis, it is possible to customize the style of this theme? eg. the color of the menus? or the color of the page background?

7 December, 2015
Dennis (DevExpress)
Dennis (DevExpress)

@Daniel, Rubén: Yes, you can do this as per www.devexpress.com/.../T292465. This procedure can be simplified in the future.

16 December, 2015

Please login or register to post comments.