Different behaviors in 11.1 and 12.0

[pavo123]

Hi Isomorphic,

Can you take a look at this?
With exactly the same code, I have different behaviors in different versions.

Using "v12.0p_2018-08-23/PowerEdition Deployment (built 2018-08-23)" looks like this:

The font seems to be changing and becoming bold.


Using "v11.1p_2018-08-29/PowerEdition Deployment (built 2018-08-29)" looks like this:


The position changes, but that's okay in my opinion.


These are the properties of my ListGrid:

        setSelectionType(SelectionStyle.SINGLE);
        setVirtualScrolling(true);
        setShowRecordComponents(true);
        setShowRecordComponentsByCell(true);
        setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
        setPoolComponentsPerColumn(true);
        setFixedRecordHeights(true);
        setRecordComponentHeight(56);
        setCanSort(false);
        setCanPickFields(false);
        setCanResizeFields(false);
        setCanAutoFitFields(false);
        setCanGroupBy(false);
        setAutoFetchData(false);
        setCanGroupBy(false);
        //    public Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
        //    public Canvas updateRecordComponent(final ListGridRecord record, Integer colNum, Canvas component, boolean recordChanged) {

Best regards
Pavo

[Isomorphic]

What exactly are you pointing out? The first instance, 12.0, looks correct to us, but you say that the 11.1 version is ok for you?

[pavo123]

In 12.0, every next time when I click on the record, font changes, becomes unreadable. Please look again "12.0 gif" and just watch in "K.Kowalski, E.Maier".
11.1 is also not ok for me, but if you fix this problem in 12.0, it will look the same as in 11.1 just without moving position, that means perfect.

[Isomorphic]

We do see the slight bolding of the lower text in each row - but it isn't clear what could be causing that without a test-case - it looks like those might be recordComponents in the gifs?

If you can make a test-case we can run, or point us at a Showcase sample, that shows the problem, we can take a look.

[Isomorphic]

A quick followup - why are you setting all of recordComponentHeight, fixedRecordHeights and virtualScrolling? That combination is likely responsible for the change in height...

[pavo123]

I tried to create test case but I didn't succeed, I have a lot of code in this area so it would take me a lot of time to find what's causing a problem.

Thanks for quick followup, you are right.
Although there is no problem with height in the 12.0 version and this is what is most important for me. I mentioned 11.1 so that you might understand the problem more clearly.

I deleted "setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE)" and I'm not updating record components any more.
Now it looks like this:

Problem is not solved but it's fine solution for me. But thanks anyway.

Best regards
Pavo

[Isomorphic]

Ok - but the boldness change does imply some kind of a styling issue - so if you could let us know what we're actually looking at in that gif, we would still like to look into it.

Is it two recordComponents we can see you switching between? Can you show your createRecordComponent() implementation?

[pavo123]

Yes, I'm switching between two recordComponents.

Here is the code:

    @Override
    public Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
        String fieldName = this.getFieldName(colNum);
        if (fakeLGFName.equals(fieldName)) {
            String topicName = record.getAttributeAsString(DatasourceFieldEnum.T_CHAT__TOPIC.getValue());
            String unreadMsgCount = record.getAttributeAsString(DatasourceFieldEnum.V_CHAT_UNREAD__UNREAD_MSG_COUNT.getValue());

            Label topicLabel = new Label(SafeHtmlUtils.htmlEscape(topicName));
            if (record.getAttributeAsInt(DatasourceFieldEnum.V_CHAT_UNREAD__UNREAD_MSG_COUNT.getValue()) > 0) {
                topicLabel.setContents(" <span style=\"color:red\">(" + unreadMsgCount + ")</span>" + " " + topicLabel.getContents());
            }
            topicLabel.setAlign(Alignment.LEFT);
            topicLabel.setOverflow(Overflow.HIDDEN);
            topicLabel.setHeight(32);
            topicLabel.setStyleName("chatTopicName");
            topicLabel.setPrompt(SafeHtmlUtils.htmlEscape(topicName));

            Date timeRecord = new Date();
            timeRecord = record.getAttributeAsDate(DatasourceFieldEnum.T_CHAT__LAST_ENTRY.getValue());
            Long timeRecordMiliseconds = timeRecord.getTime();

            @SuppressWarnings("deprecation")
            int timeRecordYear = timeRecord.getYear();

            Date nowDate = new Date();
            nowDate.getTime();
            long nowTimeMilliseconds = nowDate.getTime();
            long sixDaysMilliseconds = 6 * 24 * 60 * 60 * 1000;

            @SuppressWarnings("deprecation")
            int thisYear = nowDate.getYear();

            DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
            DateTimeFormat dateFormatter;
            DateTimeFormat dateTimeHoverFormat = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay() + " " + ddtfi.timeFormatShort());

            Label dateLabel = new Label();
            dateLabel.setAlign(Alignment.RIGHT);
            dateLabel.setOverflow(Overflow.HIDDEN);
            dateLabel.setHeight(30);
            dateLabel.setWidth(65);

            if (CalendarUtil.isSameDate(nowDate, timeRecord)) {
                dateFormatter = DateTimeFormat.getFormat(ddtfi.timeFormatShort());
            } else {
                if (nowTimeMilliseconds < timeRecordMiliseconds + sixDaysMilliseconds) {
                    dateFormatter = DateTimeFormat.getFormat("EE");
                } else {
                    if (timeRecordYear != thisYear) {
                        dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthNumDay());
                    } else {
                        dateFormatter = DateTimeFormat.getFormat(ddtfi.formatMonthAbbrevDay());
                    }
                }
            }
            String dateTime = dateFormatter.format(timeRecord);
            String dateTimeHover = dateTimeHoverFormat.format(timeRecord);
            dateLabel.setContents(SafeHtmlUtils.htmlEscape(dateTime));
            dateLabel.setPrompt(SafeHtmlUtils.htmlEscape(dateTimeHover));
            dateLabel.setWrap(false);

            HLayout topicDateLayout = new HLayout();
            topicDateLayout.setHeight(15);
            topicDateLayout.setWidth100();
            topicDateLayout.setMembers(topicLabel, dateLabel);

            String chatUsers = record.getAttributeAsString(DatasourceFieldEnum.T_CHAT__CHATUSERS_FN_INITIALS_GN.getValue());
            String chatUsersLE = record.getAttributeAsString(DatasourceFieldEnum.T_CHAT__CHATUSERS_FN_INITIALS_GN_LE.getValue());

            Label usersLabel = new Label();
            usersLabel.setOverflow(Overflow.HIDDEN);
            usersLabel.setHeight(18);
            usersLabel.setContents(SafeHtmlUtils.htmlEscape(chatUsers));
            if (chatUsersLE != null)
                usersLabel.setPrompt(SafeHtmlUtils.htmlEscape(chatUsersLE).replace("),", "),<br />"));
            usersLabel.setHoverWidth(250);

            HLayout usersLayout = new HLayout();
            usersLayout.setHeight(20);
            usersLayout.setWidth100();
            usersLayout.addMember(usersLabel);

            // Total height 56, see above for "56"
            VLayout chatTopicVLayout = new VLayout(6);
            chatTopicVLayout.setHeight(50);
            chatTopicVLayout.setWidth100();
            chatTopicVLayout.setMembers(topicDateLayout, usersLayout);

            // Chat clicked
            chatTopicVLayout.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    final Long chatId = record.getAttributeAsLong(DatasourceFieldEnum.T_CHAT__ID.getValue());
                    // Different chat clicked
                    if (!chatId.equals(ChatTopicLG.this.chatId)) {
                        // Check for entered but not sent data in the message window.
                        ChatTopicLG.this.parent.proceedWithChatChange(new BooleanCallback() {
                            @Override
                            public void execute(Boolean value) {
                                if (value) {
                                    ChatTopicLG.this.parent.getNewMessageDF().clearValues();
                                    changeChat(record, chatId);
                                } else {
                                    // No data entered for old chat
                                    changeChat(record, chatId);
                                }
                            }
                        });
                    }
                }
            });

            return chatTopicVLayout;
        } else
            return null;
    }

    private void changeChat(final ListGridRecord record, Long newChatId) {
        if (ChatTopicLG.this.parent.getChatMessageLG() != null) {
            ChatTopicLG.this.chatId = newChatId;
            ChatTopicLG.this.selectSingleRecord(record);

            // Reload data for chat message window
            ChatTopicLG.this.parent.getChatMessageLG().loadChat(newChatId);
            ChatTopicLG.this.parent.getNewMessageTAI().setCanEdit(true);
            ChatTopicLG.this.parent.getNumberOfLettersLabel().setCurrentNumber(0);

        }
    }

[Isomorphic]

There's nothing obvious in this part of the code that would explain the style change. Most likely, you have a CSS style somewhere in your app which is being applied to these record components erroneously, probably through use of complicated CSS selectors that are misfiring in this case.

Let us know if you find any evidence that this is actually a framework issue; we'd need a runnable test case to look further.