How to add javascript in vaadin (Simple Example)?

How to add javascript in vaadin? – 13/9/2016 – My study notes:

  1. Simple example with Javascript on Vaadin .

pop_vaadin_js.jpg

  1. First create the class that will call javascript:
import com.vaadin.annotations.JavaScript;
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.server.Page;
import com.vaadin.ui.Button;

@JavaScript({ "vaadin://js/test.js" })
@SuppressWarnings("serial")
public class LayoutForFormView extends LayoutForForm implements View {
private Button button;
@Override
    public void enter(ViewChangeEvent event) {
        // TODO Auto-generated method stub
        
    }

    public LayoutForFormView() {
        // TODO Auto-generated constructor stub
        setSizeFull();

         String test = "Test Only";
         button = new Button("Show Me!");
            button.addClickListener(new Button.ClickListener() {
                public void buttonClick(ClickEvent event) {
               Page.getCurrent().getJavaScript()
               .execute("showmessage('" + "test" + "')");
                }
            });
            
            addComponent(button);
    }

  • vaadin://js/test.js

-. To make sure the location of javascript can be called, make sure to add vaadin , it will automatically referring from this path:

js_loc.jpg

Javascript : test.js

function showmessage(message)
{
    alert("you should see this : "+message);
}

 

How to set the default value into combobox – Vaadin

How to set default value into combobox :

Here is my source codes, i would like make the values that passing from method getGender():

// generate Genders into combobox value
Collection<GenderTable> gendertable= getRecordGenders();
Container container= new ListContainer<RefGenders>(GenderTable.class, genderTable);
combobox_gender.setContainerDataSource(container);
combobox_gender.setItemCaptionPropertyId("nameGender");

noid_textfield.addValueChangeListener(new ValueChangeListener() {
@Override
public void valueChange(ValueChangeEvent event) {
String gender = getGenders(); // returning gender code , F - Female or M - Male
String genderName = "";

if("F".equalsIgnoreCase(gender)){
genderName ="Female";
}else{
genderName ="Male";
}

GenderTable genderTable = new RefGenders(gender, genderName);
PropertysetItem item = new ProppertysetItme();
FieldGroup binder = new FieldGroup(item);
binder(combobox_gender , "GenderTable");
}
});

The result at display page , the Combobox Gender – “combobox_gender” are gray. and its not bind property. any solution that can fix this.

whycombogray

Solution 1 :

1.using gender_combo.setValue(gender_combo.getItemIds().iterator().next()); – to make a default value for ComboBox .

 

Solution 2 :

2. using below code by iterate the combobox value.

@Override
public void valueChange(ValueChangeEvent event) {
 @SuppressWarnings("unchecked")
 Iterator<GenderTable> iterator = (Iterator<GenderTable>) 
 combobox_gender.getItemIds().iterator();
              
              while(iterator.hasNext()) {
                     GenderTable obj = iterator.next();
// getGender - get return value , F - Female , M - Male
                     if(obj.getcodeGender().equals(getGender().trim())){
                         gender_combo.setValue(obj);
                         break;
                     }
                     }
});

SELAMAT MENCUBA! / ABA MAYA WANG ADEP IRA CUBA!

How to create combobox with hardcode data – vaadin?

Good Day!

How to create combobox with hardcode data – vaadin?

combobox

  • At your java class , add the component for the combobox, the java class called – CountryForm.java.

import com.fndong.vaadin.domain.RefCountry;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.ComboBox;
import java.util.List;
import java.util.ArrayList;
import com.vaadin.data.util.BeanItemContainer;

public class CountryForm extends GridLayout implements View {

private ComboBox selectCounty;

private List<RefCountry> refcountries = new ArrayList<RefCountry>();

// init content
public void initContent() {

selectCounty = createCountrySelect();
}

// method Create Country select
private ComboBox createCountrySelect() {
refcountries = getRefcountries();
BeanItemContainer<RefCountry> objects = new BeanItemContainer<>(RefCountry.class, refcountries);

ComboBox s = new ComboBox(“Country“, objects);
s.addStyleName(“tiny“);
s.setWidth(“15em“);
s.setItemCaptionPropertyId(“countryname“);
s.setImmediate(true);

return s;
}

// data from countryname using entity RefCountry, hardcode the country name
private List<RefCountry> getRefcountries() {
// List<RefCountry> refcountries = new ArrayList<RefCountry>();
refcountries.add(new RefCountry(new Integer(“1“),”Malaysia“));
refcountries.add(new RefCountry(new Integer(“2“),”Indonesia“));
refcountries.add(new RefCountry(new Integer(“3“),”Singapore“));
refcountries.add(new RefCountry(new Integer(“4“),”Thailand“));
return refcountries;
}

}

  • Entity class – RefCountry.java

public final class RefCountry {
private Integer countryid;
private String countryname;

/**
*
*/
public RefCountry(Integer countryid,String countryname) {
super();
this.countryid = countryid;
this.countryname = countryname;
}

// Getter and setter
}

 Aba Maya , cuba taye (Bidayuh) – Don’t be shy, try it first ( english) 

 

How to add words in paragraph with color (Label Component)- vaadin Designer?

Good Day!

How to add words in paragraph with color (Label Component)- vaadin Designer?

-> Add below paragraph ** with red color. Example:

* Field is mandatory to be entered

** One of the fields is mandatory to be entered

-> I used Vaadin designer for .HTML file, I used Label Component

-> The solutions is by using vaadin property value.

vaadin_label_paragraph.jpg

How to create Scrollbar in vaadin layout – Vaadin Designer?

Good Day!

How to create Scrollbar in vaadin layout?

scroolbar.jpg

  • For creating a scrollbar for vaadin layout , layout such vertical, horizontal and csslayout  will not work.
  • For applying scrollbar on vertical, horizontal and csslayout you need to add Panel Component.
  • You can add the scrollbar by using Valo Theme style. Choose valo scroll-divider.

panel_scrollbar.jpg

 

  • or , If really want to add scrollbar on layout vertical, horizontal and csslayout, we need to add style on css.

.vLayoutScroll > div{
overflow: auto !important;
}

How to add Valo theme for my HTML file – style valo – Vaadin Designer.

Good Day!

How to add Valo theme for my HTML file – style valo – Vaadin Designer.

textfield3.jpg

  • To add Valo theme for textfield html – vaadin designer and add the style from valo theme by click button … (StyleName property) .
  • Then Choose the style for textfield.

textfield4.jpg

  • Add ->
  • Click OK button.
  • Results.

 

How to make Textbox inline with its caption for Horizontal layout or vertical layout – vaadin Designer ?

Good Day!

Vaadin Designer – How to make Textbox inline with its caption for Horizontal layout or vertical layout – vaadin Designer ?

  • I have created form for registration form, and i using form layout , i have difficult to change the caption to inline, First Image To the second image.

textfield1

TO

textfield2.jpg

 

  • The solutions by using two ways:
  1. Using FormLayout inside HorizontalLayout or VerticalLayout. – inside HTML.

<vaadin-horizontal-layout style-name=”viewheader” spacing responsive width-full _id=”horizontalMainLayout”>
<vaadin-form-layout size-auto>
<vaadin-text-field caption=”Title : ” style-name=”fields inline-icon” responsive _id=”txtTitle”></vaadin-text-field>
</vaadin-form-layout>

2. Second solutions is by added the style in css.

  • html

<vaadin-text-field caption=”Title : ” style-name=”fields inline-icon inline-label” responsive _id=”txtTitle”>

  • css

.v-caption-inline-label{
display: inline-block;
}