Tuesday, 1 September 2015

Bootstrap in XPages: Using the PNotify Plugin for Bootstrap and jQuery UI in XPages - Styling Notices Like Growl using CSS

In this blog post I will show how PNotify notices can be styled like Growl. PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.

Related blog posts
Bootstrap in XPages: Using the PNotify Plugin for Bootstrap and jQuery UI in XPages - Effects built in to jQuery
Bootstrap in XPages: Using the PNotify Plugin for Bootstrap and jQuery UI in XPages

To custom style a PNotify notice like Growl it is necessary to use a class. The example below uses the class 'custom' (custom.css Stylesheet). This Stylesheet must be added to the Custom Control or XPage.

Stylesheet custom.css
.ui-pnotify.custom .ui-pnotify-container {
background-color: #404040 !important;
background-image: none !important;
border: none !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.ui-pnotify.custom .ui-pnotify-title, .ui-pnotify.custom .ui-pnotify-text {
font-family: Arial, Helvetica, sans-serif !important;
text-shadow: 2px 2px 3px black !important;
font-size: 10pt !important;
color: #FFF !important;
padding-left: 50px !important;
line-height: 1 !important;
text-rendering: geometricPrecision !important;
}
.ui-pnotify.custom .ui-pnotify-title {
font-weight: bold;
}
.ui-pnotify.custom .ui-pnotify-icon {
float: left;
}
.ui-pnotify.custom .picon {
margin: 3px;
width: 33px;
height: 33px;
}

Stylesheet icons.css
The Stylesheet icons.css is also included with PNotify. In this example I'm using the standard included Stylesheet and the corresponding icons for demonstration purposes only with a slight modification. Everything can be modified to your own wishes and insights. Below is an example of a part of the icons.css Stylesheet. In order for this work there must be a folder 'icons' in the WebContent folder in the Package Explorer with the corresponding icons.

.picon-32.picon-accessories-calculator {background-image:url("icons/apps/accessories-calculator.png")}
.picon-32.picon-accessories-character-map {background-image:url("icons/apps/accessories-character-map.png")}
.picon-32.picon-accessories-dictionary {background-image:url("icons/apps/accessories-dictionary.png")}
.picon-32.picon-accessories-text-editor {background-image:url("icons/apps/accessories-text-editor.png")}
.picon-32.picon-address-book-new {background-image:url("icons/actions/address-book-new.png")}
.picon-32.picon-application-exit {background-image:url("icons/actions/application-exit.png")}
.picon-32.picon-application-javascript {background-image:url("icons/mimetypes/application-javascript.png")}
.picon-32.picon-application-octet-stream {background-image:url("icons/mimetypes/application-octet-stream.png")}
.picon-32.picon-application-pdf {background-image:url("icons/mimetypes/application-pdf.png")}

CSJS
You need to use CSJS (Client-Side JavaScript) in this case to make it all work.


The final result in XPages, a PNotify notice styled like Growl.


Code XPages
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<link rel="stylesheet" href="pnotify/icons.css" />
<link rel="stylesheet" href="pnotify/pnotify.custom.min.css" media="all" type="text/css" />
<script type="text/javascript" src="pnotify/pnotify.custom.min.js"></script>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div>
<xp:button value="Styling Notices Like Growl" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
 new PNotify({
title: 'Custom Styling',
text: 'Styling Notices Like Growl with a custom stylesheet and using an icon.css stylesheet.',
addclass: 'custom',
icon: 'picon picon-icons
picon-fill-color',
opacity: .8,
nonblock: {
nonblock: true
}
});
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

1 comment:

  1. You are an awesome blogger. This is one of the best blog I had visited so far. Hope to read more post from you in the future. Keep it up. God bless.

    Bubble
    www.gofastek.com

    ReplyDelete