Custom Label Component

Discussions related to modeling and execution of forms.
Forum rules
Make sure every topic contains information about your LSPS version and if relevant also your server OS, client OS, database name and version, and application server name and version.
cbmeeks
 
Posts: 59
Joined: Wed Aug 07, 2013 11:28 pm

Custom Label Component

Fri Oct 23, 2015 7:36 pm

I am trying to create a custom component (2.7) that is a label (OutputText) but with certain parameters already set.

For example, I would have a "Label" datatype that inherits from ui::OutputText.

Then, I would like to have another component inherit from it called "WarningLabel". This WarningLabel would have certain properties defined. Like an html-class of "label-warning", a title that automatically begins with "WARNING: " so that we just type in the content and it automatically renders "WARNING: blah blah".

Little things like this help us standardize the look of our applications and speed up development.

Anyway, I can't seem to find out how to set those attributes by default. I can create the datatypes and the inheritance with no problem.

I've created a custom VaadinForms.uiComponents and point it to my datatype. But I just don't understand the properties. And, I don't see the option of defining a component as Expression Language.

Thanks.

Byron Glueck
 
Posts: 85
Joined: Thu Apr 26, 2012 8:17 pm

Re: Custom Label Component

Mon Oct 26, 2015 4:33 pm

Hello and thanks for your question.

To most conveniently address your need of applying a custom hint, consider extending UIComponentFactoryImpl. This will alleviate your need to create a separate custom UI control. Instead, you will simply process the hint, as necessary.

Update vaadin.util.LspsAppConnectorImpl:
Code: Select all
   @Override
   public UIComponentFactory getComponentFactory() {
      return new MyUIComponentFactoryImpl(this);
   }


Author your custom class. Example:
Code: Select all
package com.whitestein.na.quickstart.vaadin.util;

import com.whitestein.lsps.vaadin.LspsAppConnector;
import com.whitestein.lsps.vaadin.ui.UIComponentData;
import com.whitestein.lsps.vaadin.ui.UIComponentFactoryImpl;
import com.whitestein.lsps.vaadin.ui.components.UIComponent;
import com.whitestein.lsps.vaadin.ui.components.UIOutputText;

/**
 * @author bgl
 *
 */
public class MyUIComponentFactoryImpl extends UIComponentFactoryImpl {

   private static final long serialVersionUID = 1L;

   /**
    * @param connector
    */
   public MyUIComponentFactoryImpl(LspsAppConnector connector) {
      super(connector);
   }

   @Override
   protected UIComponent createComponent(UIComponentData componentData) {
      UIComponent component = super.createComponent(componentData);
      return component;
   }

   @Override
   protected void applyHint(UIComponent component, String hint, Object value) {
      if (component instanceof UIOutputText && "label-warning".equals(hint)) {
         if (Boolean.TRUE.equals(value)) {
            UIOutputText l = (UIOutputText) component;
            l.setCaption("WARNING");
            l.setStyleName("label-warning");
         }
      } else {
         super.applyHint(component, hint, value);
      }
   }

}


Then you can add custom css style. For example:
Code: Select all
.v-caption-label-warning {
   background-color: salmon;
   font-weight: bold
}


Finally, add the hint to the OutputText control:
Screen Shot 2015-10-26 at 10.26.06 AM.png
Screen Shot 2015-10-26 at 10.26.06 AM.png (69.5 KiB) Viewed 2480 times

Return to Forms

Who is online

Users browsing this forum: No registered users and 1 guest