Vaadin Html components and javascript on page

Vaadin 6 / 7 / 8
1

I know this post going to sound bit illogical but thats the observation I have with my approach on developing on vaadin.
I already posted a forum [thread]
(https://vaadin.com/forum/thread/18435527/vaadin-html-components-usage) no replies yet but now things getting serious as launch date of my hobby app is coming sooner and no matter how proud I am of my back-end the way it shaped up. I have a very little confidence still on the UI part. Its my FIRST experience with vaadin and I chosen it over React just because I was in full mood of java (front and back) and I did my homework how much I can, thanks to forum and excellent help online.
Time for some real questions/observation :

  1. Please go through my posted [thread]
    (https://vaadin.com/forum/thread/18435527/vaadin-html-components-usage) earlier about the approach I took for development now I literally coded those divs added css classes carefully and when I needed to loop I loop them to generate.

  2. Mine is a single page site but has lots of dynamic components that gets generated based upon the back-end results, the current problem I have is with the java script (jquery). I loaded them through PageConfigurator and they can be seen indeed generated in my chrome browser (developer tool) as defer see [this]
    (https://vaadin.com/forum/thread/18439997/how-to-add-script-to-end-of-the-body-tag) although I still want scripts to be at end of body tag (probably would have been piece of cake with React).

  3. The real problem however is the execution of these java scripts because html design on a visual code works correctly with same sets of scripts that is generated by vaadin at runtime but it DON’T work exactly the same way it works for my prototype. So, what is the problem ?
    I mean all those image hover effects are lost plus bootstrap nav tabs click don’t work say only click on first tab works or 4th but not second or third, this is making me crazy. I copied the generated html from chrome browser (just the html keep in mind) then i leave those scripts at end of body tag … same copied data works perfectly. But not on server… some css effects are seen … some are lost. On UI I am using boostrap 4 and Argon design system which is based upon it.

What I am doing wrong and what can solve this?

Please let me know if things are not clear.

2

Hi,

I’m not sure which version of Vaadin you are using.

If you’re using Vaadin 14, I’ve made an add-on to help Vaadin user to use Bootstrap: https://vaadin.com/directory/component/bootstrap-for-vaadin/overview

You can see a demo here and you can switch the theme to Argon if you want: https://vaadin-bootstrap-demo.herokuapp.com/

Then you are trying to add some scripts (probably to add some dynamic behavior from Argon with jquery) and it seems buggy.

My first advice, if you can, use Vaadin inputs as much as possible instead of html input, it will saved you a lot of time.
Avoid bootstrap/argon component with overlay because they won’t work in a vaadin dialog.
If you want to enhance a component with jquery, run the script when you attached the component.
You have an example here:
https://github.com/jcgueriaud1/vaadin-tooltip-js/blob/master/src/main/java/org/vaadin/jeanchristophe/jquery/TrumbowygResourceView.java

If you have an example of a bootstrap/argon component you are trying to implement I can try to help you and add this in the add-on (if it’s a generic bootstrap component).

3

@Jean-Christophe Gueriaud I am not good in UI and any help would be great you can see the beta site [here]
(http://beta.newshash.nl/) and right now I am not having good feeling with the visible bugs I have. Argon is just design system you already included in your demo I remember and its standard bootstrap 4 based.
All works ok on my design html page but when it goes through vaadin thing changes, also I really want to put those java scripts really at the end of the body, is it even possible in vaadin ?

Note: I also requested help to Argon team may be its something there side too.

4

I’m not sure if the position matters.
It’s not less buggy, it’s faster and you can use defer.
https://flaviocopes.com/javascript-async-defer/

Basically everything related to css/html should work.

If you are using components that requires Javascript then it won’t work by default.
For example this: https://demos.creative-tim.com/argon-design-system/docs/components/images.html

It’s using data-ride="carousel (or other data-).
Why it’s not working?
If your page is only static html, once the page is loaded a javascript is looking for a data-ride=“carousel” and applies the carousel rules
If your page is dynamic (like with vaadin or react), you don’t reload the entire page for every action.
So the script that looks for data-ride=“carousel” when the page is loaded does not run then the carousel is broken.

This is probably the reason why data-animation=“zooming” is buggy. Do you have a html example of a working example? Or documentation from bootstrap/argon?

5

Thanks for your reply.
I don’t reload the whole page . I only construct the carousel dynamically so add the image src returned and construct that component dynamically (with vaadin html flow components like Div etc, loop them etc with correct css)
I used [this]
(https://demos.creative-tim.com/argon-design-system-pro/examples/blog-posts.html) carousel it just adding the right js and css. If you have argon downloaded you can just copy the html from beta site and use a simple text editor to paste it (only the html part so anything below body tag div class=“viewport” part) and paste it in argon master folder you will see it works but not on the site.

Those memes are generated with every refresh (so thats already a page realod) I wanted to implement server push but that is something for future and not for this landing page at least no time.

        if (!ViewUtils.isProduction()) {
			header.add(viewBuilder.buildNewitterHeaderSection());
			add(header, viewBuilder.buildNewitterResultSection());
		} else {
			header.add(viewBuilder.buildNewitterLandingHeaderSection());
			Collection<MemeItem> items = Services.get(PublicMemeSearchImpl.class)
					.getRandomMeme(ViewUtils.generateRandomCategory(), 10);
			// add our meme push here
			add(header, viewBuilder.buildMemeSection(items));
		}

Above I pasted a snippet of code that is contained in my main viewport div that also implements RouterLayout, PageConfigurator and provides all the path to js/css etc and this only once loads adds the memem section below.

6

Hi,

If you’re talking about Latest Blogposts category. The link you showed is using the pro theme that contains this:

.card-background .full-background {
    background-position: 50%;
    background-size: cover;
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: .3rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 1s cubic-bezier(.2,1,.22,1);
    -webkit-transition: all 1s cubic-bezier(.2,1,.22,1);
}

And it’s not included in the free version that is embedded in your demo.

Here is the example in the pro documentation (Full background Cards) https://demos.creative-tim.com/argon-design-system-pro/docs/1.0/components/card.html that is not included in the free version.

7

Yes I have pro theme I bought it sometime ago was on discount and I used it also for my another react app.
But issue seems to exists I am completely disappointed … seems to lot to learn before I can make it work for a simple html code. Damn going to be long night :(.

8

Hi @Jean-Christophe Gueriaud however funny it sounds but I thought to update you.
The carousel issue remains and I am not worried about it as this component is only will ever be used on the beta site. The more worry for me was those bootstrap nav components those were not working as they should and they don’t require any javascript or jquery.
To my surprise when I gave up and went on to do a production build and the binary came out of it was working perfectly fine on any browser, so that problem was only on the development environment looks like some js is skipped or have issues.

I am happy that my main problem is resolved itself and I can move on.

Thanks for your replies!!

9

Glad to hear that!

Perhaps in development you have some javascript errors.