vaadin/web-components

Vaadin has a high quality component set for building mobile and desktop web applications in modern browsers

Kari Söderholm

@Haprog

@paulkirspuu Seems to work fine at that URL for me. Can you show your code for the view where you get that? Have you remembered to import iron-pages component?

paulkirspuu

@paulkirspuu

iron pages imported, as well as vaadin-tabs

at that url it works for me, too

ill dm you the code

Kari Söderholm

@Haprog

That demo seems to use Polymer data binding so you either need to have that code in a Polymer template or wrapped in a dom-bind to have the data binding work.

I guess it could be presented somehow more clearly. Usually in the demos we assume that the code should work as pasted in a normal HTML file, but that one seems to have a different assumption without explanation.

Kari Söderholm

@Haprog

Turns out @paulkirspuu was trying to use the example polymer data binding in a LitElement. I'm not sure but there might also be another nicer way to do this kind of tabs in Lit without iron-pages.

paulkirspuu

@paulkirspuu

got it working with https://www.webcomponents.org/element/vaadin/vaadin-tabs/elements/vaadin-tabs#event-selected-changed

Paul

@corbettcode

Howdy everyone, we just migrated to Vaadin 14 this past weekend and until today everything seemed to be working. Trying to build a production version yields the error: "Failed to execute goal com.vaadin:vaadin-maven-plugin:14.1.2:prepare-frontend (default) on project onerev-app:". Has anyone else encountered this?

sahilshah50

@sahilshah50

@moderndeveloperllc and @Haprog , thanks for replying to my query. Not sure how I missed your notification.
@Haprog your recommendation was spot on. I ended up using custom click trigger, checked for a "router-ignore" attribute on <a> element. It was a very small change in the click.js file that you mentioned.
// ignore the click if the <a> element has the 'download' or 'router-ignore' attribute
if (anchor.hasAttribute('download') || anchor.hasAttribute('router-ignore')) {
return;
}

I feel this small feature addition should be incorporated by vaadin team in original code. May be name the attribute "vaadin-ignore" :)

Kari Söderholm

@Haprog

Great to hear you got it working. @sahilshah50 you could open a feature request issue at https://github.com/vaadin/vaadin-router/issues if you like. But I can also link this discussion to the team that works on router.

Paul

@corbettcode

Vaadin 14.1.2 does not contain the latest version of FlexLayout. Makes me wonder what else is not up-to-date!

Kari Söderholm

@Haprog

@corbettcode FlexLayout is part of vaadin-ordered-layout-flow package. Latest stable release of that is 2.0.0 which seems to be included in Vaadin 14.1.2. But there does seem to be one newer commit in master branch of vaadin-ordered-layout-flow which isn't in any release yet. Are you referring to this one https://github.com/vaadin/vaadin-ordered-layout-flow/commit/4ccdeaec1e29764750ed9f0fa4bf23fa406436e4#diff-5e8cfb4002e77c7bd94f3bc270fe3fcb ?

https://github.com/vaadin/vaadin-ordered-layout-flow/issues/80#issuecomment-549953835

Paul

@corbettcode

@Haprog Yes, the new training videos state that there is an updated FlexLayout in 14.1. Check the layout video. Also, the web site does not mention FlexLayout in the Components library.

Paul

@corbettcode

@Haprog Trying to build a production version in a BitBucket pipeline yields the error: "Failed to execute goal com.vaadin:vaadin-maven-plugin:14.1.2:prepare-frontend (default) on project onerev-app:". I can build and run both on my development system without error. Do you know anything about this? If not, do know of anyone who would?

Kari Söderholm

@Haprog

@corbettcode Thanks for pointing that out about the training video! I guess that video was recorded with the assumption that the new version of FlexLayout would make it into Vaadin 14.1 but for some reason it got delayed (I don't know the details for the decisions). Hopefully we can add some note about this in the training materials soon or get the 14.2 out with this new FlexLayout version soon.

@corbettcode I don't know that much about the Java build and this channel is mainly about the components. Please ask about that in https://gitter.im/vaadin/flow or at https://vaadin.com/forum

Paul

@corbettcode

@Haprog Sorry...was not sure where to ask this. Thank you for letting me know.

GantaSanthoshkumar

@GantaSanthoshkumar

How to develop responsive design in vaadon

How to develop responsive design in vaadin, please provi

Rolando Isidoro

@rolandoisidoro

@GantaSanthoshkumar , maybe the Board PRO component is what you're looking for: https://vaadin.com/components/vaadin-board

Kari Söderholm

@Haprog

@GantaSanthoshkumar You might also want to take a look at few example templates that are available here https://vaadin.com/labs/layout-examples (there's a live demo of them too).

sahilshah50

@sahilshah50

@Haprog I have opened a new feature request as suggested by you vaadin/vaadin-router#424

Mateusz

@denzeloff

hello, i am looking for master guy who can better explain me how to create own component

i would like to create joystick as web component

such as https://github.com/bobboteck/JoyStick

Kari Söderholm

@Haprog

@denzeloff So you're just looking for info about how to create generic web components? Have you decided do you want to implement it as vanilla JS, Polymer 3 or LitElement based web component?

Or maybe something else.

Those libraries have their own documentation which probably would help you to get started.

Kari Söderholm

@Haprog

I might be biased but I'd recommend getting started by trying out LitElement and following their guide/tutorial from https://lit-element.polymer-project.org/

It's also good to know what parts are related to web component standards and what is library specific. Some resources you might want to check out also:

Mark Garrett

@moderndeveloperllc

@web-padawan Just wanted to say I'm using the new vaadin-tabs4 alpha. I have a pretty simple use case, but it's working fine so far!

@Haprog I echo your LitElement recommendation. It's clean and small. I'm happy that it looks like Vaadin is going down that path.

Leho Kraav

@lkraav

:heavy_plus_sign: 1

Mark Garrett

@moderndeveloperllc

Well, spoke too soon. Had to open vaadin/vaadin-tabs#150

lunga

@LTDO

Hello everyone, I'm new here. I just started learning Vaadin this year. I hope I'm in the right place to get as much knowledge and advice while still in the learning process.

Mark Garrett

@moderndeveloperllc

@LTDO Howdy! This chat is for the Vaadin web components and the Java discussions happen over in https://gitter.im/vaadin/flow. The developers are reasonably active here, and some of us users help out where we can.

Sourav Suman

@souravbairoliya_twitter

looking for tooltip feature in vaadin grid component when the data bind to the table is too big.

any sample code would be appreciated

or the approach

Tomi Virkki

@tomivirkki

@souravbairoliya_twitter We don't unfortunately have a dedicated tooltip component built-in yet. There's this add-on but note that it's commercial https://vaadin.com/directory/component/tooltip

frangomezvenegas

@FranGomezVenegas

@andersforsell Exactly! I created both builds and "es6-unbundled" still issued but "uncompiled-unbundled" works fine. Thanks a lot!

Mateusz

@denzeloff

hello, is there any video player component, which i can use to watch video from my raspberry pi in real time?

Serhii Kulykov

@web-padawan

We do not have any video player components and generally recommend to use<video> HTML element where possible.

Manoj2749

@Manoj2749

Hello, i'm using web-components in my project, i have added polyfills of web-components in our application,Its working fine in chrome,Firefox,IE,IE edge too,

But i have an problem, We are using ng-select dropdown to select values...In IE edge i am not able to select the drop down selection, its not working properly ,can someone help me on that

Kari Söderholm

@Haprog

ng-select is an Angular component right? Afaik it's not implemented as a web component so I'm not sure why you're asking here. Personally I don't have any Angular experience.

Manoj2749

@Manoj2749

App1(main app) App2(charts)..With the reference of Vaadin blog, i implemented web components its working fine , its not issue with ng-select. working in other components of application, i added polyfills in App1(main app) head tag, after adding polyfills selection of dropdown not behaving properly, if i'm removing polyfills its working fine...can someone help me on that

Mark Garrett

@moderndeveloperllc

@web-padawan With the new LitElement vaadin-app-layout, what is the procedure for registering styles for that element? I was using registerStyles('vaadin-app-layout', css...); and importing that into the element I was using vaadin-app-layout, but that doesn't seem to work anymore.

Mark Garrett

@moderndeveloperllc

@web-padawan It's difficult to debug the issue because in lit-elements there is no longer a <style> element in the shadowDOM to Inspect in the browser, nor does a dom-module get inserted anymore.

Where communities thrive

People

Repo info

Activity