Salient Soft

I noticed this when a web service returned a blank reason phrase, which tripped up Angular due to an Angular issue which I have documented here.

It appears to be a Spring Boot Tomcat version change issue – a later Tomcat ignores the reason phrase and does not return it, as detailed here.

As reason phrases are being deprecated anyway, and I don’t use them, I have just ignored the issue, but it is worth being aware of it when debugging.

Comments Off on Spring Boot no longer returns HTTP reason phrase in responses

I noticed the above whilst debugging in Chrome, when a web service returned a 401 status, the statusText as above was still OK.

This appears to be an angular issue as detailed here and here.

The latter post above indicates that it originally was an XHR spec requirement, but per the post the XHR spec has subsequently changed so the issue was requested to be reopened.

As I don’t use the statusText anyway I am ignoring the issue.

It was triggered by a related Spring Boot issue which I have documented here.

Comments Off on Angular HttpErrorResponse statusText set to OK even if error

The PrimeNG changelog states that as of 8.0.0-rc1, the old theming architecture based on Themeroller is being removed completely in favour of the new theme architecture and designer, as per change #7762.

The new theme architecture looks much more fully functional, and the designer looks a good and powerful tool.

A number of themes are paid for and not open source, as before which is fine and not a problem.

The designer itself is also paid for, which is perhaps slightly sad but not a real problem if you can roll your own themes directly in SCSS, e.g. by adapting a free theme as I have done in the past.

However, the big frustration is that the full SCSS theming API definition itself is proprietary and not open sourced/publicly documented, as per this prime post here. This means that the only official way to create a new SCSS based theme is with the designer, which is paid for.

This is a real frustration as due to the version matrix, if you stick with an older PrimeNG you cannot upgrade to the latest Angular, e.g. to Angular 8/Ivy.

One way around it is detailed in this helpful blog post here, which involves a certain amount of reverse engineering of the free themes. This is in itself not a big issue as normally in the past I have created themes by modifying an existing themeroller theme (or, for Primefaces, even by rolling one via the ThemeRoller web site tool).

However as the post points out, the fact that the global common SCSS is not now released, we may be subject to breaking changes in the future.

Prime states on the PrimeNG page that the components are all open source, but with parts of the theming architecture now being proprietary and not released, this is does not now appear to be the case any more.

I will continue to monitor this and see what others are doing, but it may be that for my own projects, for the first time ever I will need to move to another component set (e.g. use Material Design when using Angular) and no longer use Prime.

Comments Off on PrimeNG theming no longer open source

I’m currently using PrimeNg 6.1.3 with the older themeroller architecture

This has a glitch on message display as follows:

I wanted the text to be indented past the LHS icon rather than on a new line.

My old school version in my theme used a left float on the icon, and a display:table-cell on the <ul> text container.

This worked fine as follows:-

I didn’t like using display:table-cell but had to in this case as I had no control over the markup generated by the message component, only the theme SCSS.

My second version, which is simpler, just removed the float and the display:table-cell, and made the containing div a flex container via display:flex.

This worked in exactly the same way, and was all I needed to do. The flex defaults just worked with no strange tweaking required.

The W3 Schools page on flex, including numerous try out examples that you can play with, is here.

PrimeNG Generated Markup

<div class=”ui-messages ui-widget ui-corner-all ng-tns-c2-0 ng-trigger ng-trigger-messageAnimation ng-star-inserted ui-messages-warn” style=”display: block; transform: translateY(0px); opacity: 1;” ng-reflect-ng-class=”[object Object]”>
   <a class=”ui-messages-close ng-tns-c2-0 ng-star-inserted” href=”#” style=””>
      <i class=”pi pi-times”></i>
   </a>
   <span class=”ui-messages-icon pi pi-exclamation-triangle” ng-reflect-klass=”ui-messages-icon pi” ng-reflect-ng-class=”pi-exclamation-triangle”></span>
   <ul class=”ng-tns-c2-0″>
      <li class=”ng-tns-c2-0 ng-star-inserted” style=””>
         <span class=”ui-messages-summary ng-tns-c2-0 ng-star-inserted”>Age Invalid:</span>
         <span class=”ui-messages-detail ng-tns-c2-0 ng-star-inserted”>Your age is  outside the required age range of 18 to 50</span>
      </li>
   </ul>
</div>

Original Style Fragment (SCSS)

.ui-messages.ui-widget {
padding: .5em;
border: 0 none;
color: $contentTextColor;

.ui-messages-icon {
      float: left;
margin-right: .1em;
}
&, .ui-messages-close {
color: $headerIconTextColor;
~ ul {
padding-right: 1.4em;
}
.pi, .ui-messages-icon.pi {
font-size: 1.6em;
}
}
    ul {
display:table-cell;
}
.ui-messages-summary {
margin-left: 0;
}
&.ui-messages-success {
background-color: #b7d8b7;
}
/*…other message severities… */
}

Flex Style Fragment (SCSS)

.ui-messages.ui-widget {
  /* We have to use !important here as the markup (which we cannot control)
uses an inline style for display:block 🙁 */
display: flex !important;
    padding: .5em;
border: 0 none;
color: $contentTextColor;

.ui-messages-icon {
margin-right: .1em;
}
&, .ui-messages-close {
color: $headerIconTextColor;
~ ul {
padding-right: 1.4em;
}
.pi, .ui-messages-icon.pi {
font-size: 1.6em;
}
}
.ui-messages-summary {
margin-left: 0;
}
&.ui-messages-success {
background-color: #b7d8b7;
}
/*…other message severities… */
}

Comments Off on Using flex for PrimeNG message layout vs float/display:table-cell