Using OpenUI5 view layer similar to Twitter Bootstrap on top of other web application frameworks - sapui5

Hello UI5 enthusiasts,
I was wondering if it is possible to extract the OpenUI5 view layer in a way similar to Twitters Bootstrap.
The reason is that I work at an SAP partner that creates software outside of the SAP stack. We would like to add the UI5 look and feel to our own web applications though, which are build on Angular and Twitter Bootstrap.
The goal would be to let our customers become attuned to the Fiori look and feel and increase the familiarity of our SAP products. Which could eventually lead to more sales on that side.
But for that we would prefer a light-weight solution. I'm not aware of using the openui5 stack like that, because it needs to load the core and manages the application in its own way.
For that it would be great to have the view components isolated to use them on their own.
Is it possible to do that or would it be an option for the UI5 product team to create a Bootstrap like solution as described above?
Kind regards,
Michael

from OpenUI5 side, we have some concerns around this approach as there is quite some overlap between Angular and UI5, especially with regards to data binding and MVC. When using the UI5 controls outside the UI5 context, you cannot leverage the main assets that the UI5 data binding adds (some of them are described here https://openui5.hana.ondemand.com/#docs/guide/91f0ca956f4d1014b6dd926db0e91070.html and others like error handling will come soon with 1.28). Still, I'm not saying the combination of UI5 controls with Angular is not possible at all, maybe someone is trying as it is open source but there is an investment needed to close gaps that OpenUI5 already has solved in an excellent manner. On the other hand, it is quite easy to use bootstrap inside UI5 (not Angular). Might that be an option?
What you can examine as well is http://ui5strap.com/. I personally did not yet find the time to assess the approach but it might be worth for you to have a look.
Best regards
Stefan

Related

integrate sapui5 application as a component

I have a SapUI5 application that contains several views in a single page.
I want to convert that application in to a component so that it can be added to another project. Is this possible, and does anyone have an idea how to do it?
I researched about components but I did not find anything that made it clear what I had to do. I am grateful for any answer.
Basically, as a best practice your ui5 app should have been implemented as a component based app from the beginning. Then reusing such a component based app should work easily. I think you should have a look at the official walkthrough tutorial where you will learn a little about components. Then you could google for some blogs about components, maybe my recent tutorial about components helps you as well. My tutorial tells you how to implement a component inside a library and reuse it then in apps (some new ui5 features related to components are discussed as well, i.e. usages).
And in case you only expected a simple answer to your question: test, it’s possible. See links above :-)

Model-View-Presenter with Google Web Toolkit (GWT)

I am thinking about developing a new application using web toolkit. I decided that the best option is going to be to use the Model-View-Presenter Design Pattern. After doing plenty of research, I found two different ways of implementing the skeleton code. (I am still trying to learn MVP and how to best utilize the disjunction between the model and the view)
Here are the two links discussing GWT MVP
https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces
https://developers.google.com/web-toolkit/articles/mvp-architecture
I read through and understand all the information in the second link, how you associate presenters with views, and how you have your custom events and such. I really like this because this means that several developers will be able to work on the project I have in mind.
However, the first link, also points out some interesting stuff, mostly using XML and #UiBinder and other things. I feel that those will not be necessary for this particular application but I want to make sure I have not overlooked anything.
Basically - How good of a programming practice is the style the style in the second link (the one with presenters for each view)
Thank you
You should be not be comparing MVPActivitiesAndPlaces and MVP . If browser history management is not your concern use only MVP.
Activities And Places are not mandatory for MVP. They only allow you clean browser history management which integrates nicely with MVP architecture.
UiBinder is not mandatory for MVP. They can be used with MVP.
The MVP design paradigm mostly is driven with Unit testing as main driver and to keep out slow running GWTTestCase out as much as possible.
At the heart of this pattern is the separation of functionality into
components that logically make sense, but in the case of GWT there is
a clear focus on making the view as simple as possible in order to
minimize our reliance on GWTTestCase and reduce the overall time spent
running tests.

How to: Multi screen/regions Silverlight application?

I have to create now a multi-screen Silverlight 4 RIA application with MVVM.
Each of these screens has to be devided in multiple regions (for example master-detail scenario whereas each of them is a different section and one has control on the other).
Can you give me some ideas what should be the right way to implement such an application?
Is Prism the right choice? I started reading the Prism manual and liked very much the idea of having regions and screens switched and controls in a very flexible manner, but, as said above, I find it too overkill to split it all over many assemblies.
If Prism IS the right choice, then I would appreciate any kind of guidance or reference to guidance on this particular scenario (multiple screens & regions and OTOH not getting my solution spotted with a gazillion projects.
I believe that PRISM is the correct choice for building an application with multiple regions and views. You could argue that that is almost the definition of a composite application.
But I would also remember that you don't have to use all the components PRISM has, you can pick and choose. I would recommend that you consider each aspect of PRISM and test/prototype to ensure you are happy with the facilties offered. In a large application I have built I use PRISM but after some prototype investigations I only used EventAggregator and the Modularity capabilities.
I chose not to use the region support as I found working with ItemControl and ContentControl components in Silverlight gave me the ability to inject views and partial views into my interface.
I found experience from ASP.NET MVC proved useful in considering how to coordinate/break up my UI into partial views.
Hope that helps. The Stocktrader application is a great example to learn from (included with the PRISM distributable).

Java Web Framework Prototyping tools

At the moment Iam evaluating java web frameworks. More precisely Iam talking about GWT, JSF2 and apache wicket. One very importent criteria in this evaluation is prototyping.
The prototyping process in my company can be described by the folloing:
The customer can produce GUIs with an easy to use WYSIWYG editor, by drag&drop-ing web components on the corporate predefined website structur. There is also a need for some litte dynamic being like navigation from one frame to another.
So Iam looking for tools. These tools should not only provide nice GUIs but also deliver
some basic code, which can be forwarded to the development. The aim is to avoid missunderstandings between designers and developers as much as possible. More or less the
developers just have to implements the code, but not to implement the optical requirements.
In addition it would be desirable to customize the components thats been used in the WYSIWYG editor. Does anyone know any good tools for the mentioned frameworks (GWT, JSF2, wicket)?
One of the challenges with WYSIWYG tools for UI is that you generally have to pick between rapid prototyping and maintainable code. Even then, as soon as you want to do something that's not supported by the prototyping tool, you can implement it as you would without the prototyping tool, but your round-trip functionality (namely turning your app back into something that can be edited) is broken or crippled unless extra work is done to generate the metadata that the editor needs.
Upgrading between major releases is another issue. Vendors and groups who have developed these tools have a historically spotty record of when they stop supporting older versions, reasonably because of limited resources and sometimes difficult problems with how to track solid innovation happening in the framework itself.
My suggestion instead is to prototype with an RIA prototyping tool like Balsamiq Mockups or use a grid system like 960 Grid to generate rapid prototypes, then use a web development framework that allows your developers to run the code with or without the backend server. Wicket has a tag called that is great for this kind of thing -- web devs can fill a div with stuff that a component should generate, and Wicket devs can wrap the contents of that tag with after they implement it. Both parties can coexist for a long time that way.
Try GWT Designer for GWT.
Introduction
Quick Start Guide
Download
There's nothing like this for Wicket that I know of. The closest you would get to any kind of resource reuse from your customer would be to give them a drag and drop HTML editor - the resulting HTML could then form the basis of Wicket page/panel layout.
if you are planing to use a javascript library, you may use extjs,
http://www.sencha.com/products/js/
they have developed a nice designer
www.sencha.com/products/designer/
there is also a port of ext in GWT
www.sencha.com/products/gwt/
You have to pay for a commercial license if your application isn't open source!

The cons and pros of smartGWT

I'm starting work on a smartGWT project in a few days and I'd like to know what kind of experiences you had. To avoid making this a bashing of smartGWT or GWT or a freestyle discussion, I'm going to provide some pointers for the discussion:
Do you feel that the provided widgets are integrated well? Is there any widget you miss in particular?
Have you encountered any problems when designing your application that were caused by the framework?
Is the datasource integration as usefull as the smartClient team claims?
What methods do you use to make your smartGWT application persistent? e.g. How well do Hibernate and smartGWT play with each other?
Feel free to add anything you feel is worth pointing out.
I guess you already have your answers, but I would like to add a few more comments that may affect your decision:
Pros:
SmartGWT is the most compreensive LGPL GWT-based widgetery library you can find. So if you care for GPL pain, this is your thing
Comprehensive Showcase.
Really good performance (just check the Showcase).
Very active community in the forums.
SmartGWT extensions is another important project. For example, it has support for GWT-RPC based communication, which is not possible only with SmartGWT (unless you implement your own integration).
Rapid pace of development from the SmartGWT guys. Just count the number of releases since the SmartGWT project appeared.
Cons:
Besides the Showcase, I sometimes feel the only way to figure out how something works is by asking in the forums. This leads to a spread knowledge base. A community based wiki would be preferable.
Large amount of static files you have to use with your application (the famous 'sc' directory) which might lead to problems if your back-end is in GAE (because of the 1000 files limit).
We used SmartGWT in our last project (duration: 6 months). The following is my personal opinion:
The widgets are really great! The documentation and API is verbose. We would use client-side again.
The server-side integration works, but did not save any development time. Instead we had a lot of problems where we had to find workarounds. Also, because of the new API, no other developer can maintain the project within investing a lot of time to learn the SmartGWT API.
Some Cons:
You have to learn a totally new API instead of using Hibernate and GWT-RPC or REST.
The data integration is done automatically, that is true. But if you need some (also little) changes, you have to write XML mapping files as with Hibernate or JDO. So the benefit is gone.
The forum support is bad: You get an answer to almost every posted question. But that answer often does not help. They ask you things such as “why do you want to do that”. Or they say: “use our tool and do XYZ with it” three times, although again and again I told them this suggestion does not work. After a few answers to a question the final answer is: “you need training, buy our support”.
The commercial support is way to expensive (costs approximately as much as the SmartGWT license).
We will probably not use the server-side integration of SmartGWT again.
You can read all my "lessons learned" with Pros and Cons at my blog:
http://www.kai-waehner.de/blog/2010/12/11/lessons-learned-smartgwt-2-3-component-library-for-google-web-toolkit-gwt/
Best regards,
Kai Wähner
Do you feel that the provided widgets
are integrated well? Is there any
widget you miss in particular?
You could create any missed widgets, there is no single framework that can provide everything you want. The widgets are pretty extendable.
Is the datasource integration as usefull as the smartClient team claims?
The data (JSON/XML) can be provided by servlet services, and they are understood by the
widgets.
What methods do you use to make your smartGWT application persistent? e.g. How well do
Hibernate and smartGWT play with each other?
In the backend servlet services of GWT, you can persist your data in the store by using any persistent layer in Java. Hibernate can be just used as same as normal java app.
Do you feel that the provided widgets are integrated well? Is there any widget you miss in particular?
Yes. The widgets have a consistent API and work well together.
Is the datasource integration as usefull as the smartClient team claims?
This IMO is one of their strongest feature. Once you start using their Datasource API you realize how little code is required to get a fully functional CRUD screen
What methods do you use to make your smartGWT application persistent? e.g. How well do Hibernate and smartGWT play with each other?
Hibernate works out of the box with the SmartGWT EE version. With the LGPL version using Glead works wells
I think SmartGWT has a ton of great widgets, but but but there is a HUGE price.
Create a simple SmartGWT based project and watch how many files get loaded by your page.
That, I think, is totally against the ideals of something like GWT. While SmartGWT may be a pretty good option for people on a deadline, if you want raw performance, stay away from it.
The number of HTTP requests will simply kill your application.
Have you encountered any problems when designing your application that were caused by the framework?
Yes. When I combined Google Eclipse plugin, SmartGWT, GWT 1.6.4, and Wicket the gwt compiler would emit bad javascript. By bad javascript, I mean javascrip that would not work in webkit, or firefox. I was not able to get good javascript until I removed it completely from the Eclipse project and restarted Eclipse. So, this combination would not work and I ended up building the SmartGWT piece separately in another project. The other issue is that the Smart client seems to want control of the whole page in a css sense. So, the integrated SmartGWT module was all messed up, because styles were not isolated properly. Your mileage may vary.
Personally if you use SmartGWT only and for everything then all will most likely be fine, but if you try and mix it, well my results were disastrous. So, I no longer use it.
Just as a counterpoint to the poster above who mentioned troubles with Wicket, the SmartClient forums (forums.smartclient.com) have reports of success integrating SmartGWT with a wide variety of other technologies. This poster's problems sound like 1) a GWT bug causing bad JavaScript and 2) CSS naming conflicts between SmartGWT and Wicket, probably neither framework's fault. All of SmartGWT's style names can be renamed via the skinning system to resolve any such conflict.