First question: I am trying to create web app using Vaadin 8.3.1 but I am struggling to understand concept of the UI class. I was reading docs but still I can not somehow understand it. I thought that it is just a basic web page which is currently displayed but I am not sure about that definition. So my question is what exactly is UI, how can I navigate between UI's, when to use view and when to use UI ?
Second question: I was reading docs about navigation between views but I was not able to display anything. In UI all we have to do is to setContent and that is it. But what about Views ? How can I display something using views ?
Thanks for any help !
The basic concept of Vaadin is to create single page web applications. The UI class is the root of the dynamic web page, which has changing content, the views. So typical Vaadin application does not consist of multiple UI's, but single one. (It can have many, but I said typical)
One UI can thus have many views. Usually in main UI you set root content, a main layout that consist of menu and content container (a layout) for Views. When Navigator is setup, it is given that content holder, and then based on navigation Navigator will be placing the views to content area. This is described in detail here:
https://vaadin.com/docs/v8/framework/advanced/advanced-navigator.html
Apparently you want to integrate Spring with Vaadin, and for this you need Vaadin Spring add-on. The documentation is here:
https://vaadin.com/docs/v8/framework/advanced/advanced-spring.html
To get most out of the documentation, you need example application, which you and inspect and play with. On Vaadin web page, there is full stack functional demo application, which demonstrates application architecture made with Vaadin + Spring.
https://vaadin.com/start/v8-full-stack-spring
Related
To improve my programming skills I would like to set up a little project for my work. I would like to create a kind of to do list, with several columns (Note, PO Order, Shipping, Done (as a Checkbox), ect.).
At the end of a day, I want to be able to click on the checkbox for every row which is done and save them in a data file. Also I would like to create this as a web application, running on the server in the company.
Since I would like to improve especially my java skills I would like to do this (if possible) mostly in java and to get in touch with frameworks, so I started to read about Vaadin.
My question is, if you guys could give maybe some experience about a project like this and if it's in general possible to realise this with Vaadin.
To improve my programming skills
If you want to build web apps using pure Java on the server-side, Vaadin fits the bill.
You describe the layout and widgets you want to appear in the user interface using Java code. Then, at runtime, Vaadin automatically generates the necessary HTML, CSS, JavaScript, DOM, AJAX, WebSocket, and Push code needed to render that UI on the client-side in the user’s web browser.
The beautiful part is that you get all the benefits of using those web standards technologies without having to learn them or code them.
create a kind of to do list, with several columns (Note, PO Order, Shipping, Done (as a Checkbox), ect.).
Vaadin provides a powerful and well-designed data-grid widget, Vaadin Grid, that can display such columns including the checkbox.
I want to be able to click on the checkbox for every row
The Vaadin Grid tool has an interactive mode that allows the user to directly edit the row, including clicking on the checkbox.
You could alternatively let the user select several rows and click a button (that you programmed) than would mark them as done, checking the checkboxes of the group at once.
Also, Grid has a built-in feature where it displays a column of checkboxes to be clicked en masse as an alternative to selecting rows. This helps the many users who are not adept at maneuvering through a multi-row selection with mouse-and-keyboard gestures.
I would like to create this as a web application, running on the server in the company.
Your Vaadin-based web app is built on standard Java Servlet technology. So you can deploy to your choice of any of a dozen or more web containers such as Apache Tomcat, Eclipse Jetty, Glassfish, Wildfly, and many more.
I would like to do this (if possible) mostly in java
You can build your web app entirely with Java code by using Vaadin. All Java on the server-side, no Java on the client-side.
You may eventually want to learn a bit of CSS to tweak the fonts and colors and such. But this is optional.
if it's in general possible to realise this with Vaadin.
Indeed, this project sounds like an ideal match to Vaadin.
In contrast, where Vaadin is contraindicated would be:
For web sites with crazy complicated layouts such as slick magazine sites. Vaadin is aimed at business-oriented data-entry apps.
For programmers who want to grapple directly with the HTML, CSS, JavaScript, etc. rather than avoid it.
The Eclipse RAP (Remote Application Platform) project provides a way to write web applications using SWT.
Due to single sourcing, the written code can also be used in desktop SWT/RCP applications.
Since it is a framework for web applications I was wondering if it supports responsive design?
If so, a simple example would be great. It does not need to be RCP compatible.
I didn't find a lot on the internet, has there been any efforts towards supporting responsive design?
Due to the fact that RAP shields you from web technology, native CSS and other web-techniques won't work.
To summarize the comments, you will likely have to implement one or more custom layouts that adapt to the available space and show/hide/resize the managed controls accordingly.
You may also want to use custom controls or manipulate existing controls to adapt to the available space. in some places. For example, hide texts on toolbar buttons when space becomes rare.
RAP theming can also be leveraged to a certain extent in order to change the appearance and space of certain controls.
Further reading:
EclipseCon 2014 talk: https://www.eclipsecon.org/na2014/sites/default/files/slides/Responsive%20Applications%20Tutorial%20-%20EclipseCon%202014.pdf
A blog post with code examples about responsive UIs with SWT: http://www.codeaffine.com/2014/02/24/responsive-uis-with-eclipse-and-swt/
RAP Theming: https://eclipse.org/rap/developers-guide/devguide.php?topic=theming.html
Understanding SWT Layouts: https://www.eclipse.org/articles/article.php?file=Article-Understanding-Layouts/index.html (ignore the deprecation warning, the core concepts haven't changed since)
You can make it responsive with the use of Passe-Partout created by Tabris. This works in RAP and should be compatible with RCP.
They have made a custom layout : FluidGridLayout.
It's best you use it through the factory class com.eclipsesource.tabris.passepartout.PassePartout.
Source can be found on github:
https://github.com/eclipsesource/tabris/tree/master/com.eclipsesource.tabris.passepartout
Add this plugin to your dependency or just copy the source in your project.
See the blogpost at eclipsesource for basic info:
https://eclipsesource.com/products/tabris/eclipse-rap-documentation/responsive-design/
The great thing about it, is that you program it all in java.
Only issue that I now experience is with scrolling.
In my case I have a workbench and my editorpart needs a scrolledcomposite, only set to V_SCROLL. I've added two resize listeners to set the new minsize of the scrolledcomposite.
One resize listener on the display when the entire browser resizes.
A second resize listener for the parent when only the editorpart resizes. (fe when a view is resized or the editorpart is maximized)
I have one Spring MVC Application and I want to split it in to multiple applications (each one deployed separetely) but having one main application that manage the security and the header, lateral menu and footer of the classic layout.
What I really want is that whenever the user clicks a button on the side menu, the main application calls the appropriate application to fill the body. The main application has to be able to call the application server that contains the appropriate WAR, but instead to give it the control to draw the entire page only allow him drawing the body.
Sorry for my horrible english.
I am using liferay 6.2 for migrating my existing web application to liferay.I have done below things:
-->created my own theme extending the _styled theme
-->customized the navigation to have fixed sidebar on the left and content area on the right.
-->Added 3 web content display portlets dynamically and added the content into each of them.
I have all the portlets residing on the same page,these are traversed by using navigation bar on the left side. Now I have new requirement to show content depending on the client.
For e.g. I have 3 client's data right now mixed all together across all portlets ,I have requirement to segregate all the content.For e.g. If user logging in work for X client ,he/she should only see the relevant content . If there is some content which is common to all it should be displayed as it is.
There should also be a way to add/remove client at runtime.Is liferay multi-site capability something I can make use of?
How can I go ahead and achieve this? Any inputs will be highly appreciated.
I was wondering how I could embed a browser like view in a Java client application, at the same time that I can interact with it by means of JavaScript.
The problem that triggered this question is the following:
The interface of my application consists of a (Google) map and some svg stuff.
This is easy to do in a browser.
However, I also need access to some special Java libraries that can process some information from the map (e.g., certain coordinates in the map) and that answers values that should influence the browser view (e.g., a path should be drawn over the map).
My first idea was to implement the Java side behaviour as a REST web service, so from JavaScript I will invoke this webservice sending relevant information about the map and using the answer to update the map. Nevertheless, for my current needs (this is only a prototype) using webservices is a bit too much of infrastructure.
Is there a way I could just:
embed a browser like view in my Java application.
Interact from the Java side with this view by means of JavaScript functions implemented in the web page displayed in the browser view (such as these functions will influence the rendering of the page in the browser like view) ?.
I found other questions related to how to embed a browser in a swing application (e.g., Embedding web browser window in Java) and JDIC seems to be able to do this. Although some people report it is difficult to make it work in OSX (the OS I use) and do not mention if it is possible to interact with the browser by means of JavaScript.
It seems to me that in Android it is possible to make JavaScript calls from the Java (Android) side, so probably this is also possible in plain Java.
Thanks for any pointer !
With Java FX 2 you can. You get a webkit webview there. Can interact with it back and forth with java<->javascript.
For an example embedding google maps see: http://java-buddy.blogspot.se/2012/03/embed-google-maps-in-javafx-webview.html
You can embed java fx in swing with JFXPanel if you don't want to go with 100% JavaFX yet.
If you can use swt, take a look at SWT Browser widget
For javascript you can use
http://www.mozilla.org/rhino/