0

Condition into Zul file

asked 2022-03-03 20:15:01 +0800

Cashjon91 gravatar image Cashjon91
101 2

updated 2022-03-04 19:41:34 +0800

Hi Guys I have a textbox that reached 255 characters must show a tooltiptext with the words: "Character limit reached" and at the same time the textbox must be colored red, not inside but in the edges, now this is my zul file, the tooltip also appears when the textbox is empty, how can I do from zul to set my logic that is: when the textbox reaches 255 characters the tooltip text must appear and the border of the textbox must be colored red. Thank you. Modal.zul

<div>
  <textbox id="textbox" width="500px" tooltiptext="${labels.label.tooltiptext}" />
</div>

controller.java

@SocketEvent(socketId = "inputObject")
public void onInputObject(final OccupationModel model)
{
        if(Objects.nonNull(model))
    {
    setCurrentModel(model);
    }
    textbox.setMultiline(true);
    textbox.setMaxlength(255);
  }

@hawk this is ok? image below :

image description

@hawk zul file:

image description

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
1

answered 2022-03-04 17:31:07 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2022-03-09 09:27:23 +0800

Approach 1 : Custom constraint

The error message keeps showing until the validation passes. This approach also fails the validation.

<zscript><![CDATA[
CharacterLimitConstraint charLimitConstraint = new CharacterLimitConstraint(10);
]]></zscript>
10 characters limit: <textbox instant="true" constraint="${charLimitConstraint}"/>
  • with instant="true", it will validate while

Implement a custom contraint

public class CharacterLimitConstraint implements Constraint {
    private int maxLength;

    public CharacterLimitConstraint(int maxLength) {
        this.maxLength = maxLength;
    }

    public void validate(Component comp, Object value) throws WrongValueException {
        if (value != null && value.toString().length() >= maxLength)
            throw new WrongValueException(comp, maxLength + " character limit reached ");
    }
}

Appaorch 2: onChanging listener

It just shows the info, doesn't produce validation failure. The popup closes when a user clicks outside the popup.

  1. prepare a popup with the label with the error message.
  2. in onChanging listener, get user input by InputEvent.getValue()
  3. check user input, when it reaches max length. call Popup.open() to show the error message. call Textbox.addSclass() to apply a predefined CSS class to decorate red edge of the textbox.
  4. when user input becomes shorter, remove the red edge by Textbox.removeSclass()
link publish delete flag offensive edit

Comments

Thanks for respons I have try second appaorch but InputEvent not have a method getValue.

Cashjon91 ( 2022-03-04 17:55:37 +0800 )edit
1

@hawk I edit the question with image of second approach, is correct?

Cashjon91 ( 2022-03-04 18:25:52 +0800 )edit

nullpointerExceptionj on row 127

Cashjon91 ( 2022-03-04 18:31:18 +0800 )edit

updated my answer

hawk ( 2022-03-09 09:28:03 +0800 )edit
1

answered 2022-03-04 18:38:46 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2022-03-04 22:58:25 +0800

it looks like your system wraps zk API. I don't see any InputEvent pass into exceedLimit(). @ViewEvent is not a ZK annotation.

If you listen onChanging event with SelectorComposer (ref: Listener_Autowiring), ZK will pass InputEvent into the listener method like:

public class MyComposer extends SelectorComposer<Component>{

    @Listen("onChanging = #mytextbox")
    public void onCellClick(InputEvent e) {
    }

}

If your system wraps zk event listening API, you need to find your way to get InputEvent.

link publish delete flag offensive edit

Comments

I try, but the tooltip not show and color not change when arrived at more than 255 character. I do somewhat into zul file?

Cashjon91 ( 2022-03-04 19:38:46 +0800 )edit

@havk I update question

Cashjon91 ( 2022-03-04 19:42:13 +0800 )edit

sorry, forget that a tooltip doesn't show actively without a mouse hovering. You should use Popup.open() to show a popup, please see https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/Popup.html

hawk ( 2022-03-04 22:55:26 +0800 )edit

@hawk Thanks, but popup dont show, and I have see a text into popup that say "limit 255 character" but dont see a method that accept a string into object Popup

Cashjon91 ( 2022-03-05 00:25:20 +0800 )edit

you need to put a label into a popup by yourself to show your message.

hawk ( 2022-03-07 09:24:20 +0800 )edit
0

answered 2022-03-04 23:26:08 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

To set red border:

<style>
    .red-border{
        border: solid 1px red;
    }
</style>
<textbox sclass="red-border"/>
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2022-03-03 20:15:01 +0800

Seen: 16 times

Last updated: Mar 09

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More