My company would love to see some form of native support from Serenity for wizards like in Ultima
https://www.primefaces.org/ultima/wizard.xhtml
Using the primefaces widget forces us to use AJAX (which we do not want in our usecase).
https://primefaces.github.io/primefaces ... nts/wizard
Feature Request: Wizard
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Wizard is a custom widget for Ultima. Please see;
You can integrate it into your project. Also, you can use the custom widgets of PrimeBlocks for such features.
https://www.primefaces.org/primeblocks-jsf/
Best Regards,
Wizard is a custom widget for Ultima. Please see;
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title>PrimeFaces Ultima Wizard</title>
<script type="text/javascript">
//<![CDATA[
var Wizard = {
init: function() {
this.wizardContent = $('.wizard-content');
if (this.wizardContent.length) {
this.wizardCard = this.wizardContent.find('.wizard-card');
this.tabs = this.wizardCard.find('> .wizard-card-header .tab');
this.tabBar = this.wizardCard.find('> .wizard-card-header .tab-bar');
var continueButton = $('.continue-button'),
$this = this;
this.tabBar.css('width', (100 / this.tabs.length) + '%');
this.tabs.off('click.wizard-tab').on('click.wizard-tab', function() {
$this.openNextTab($(this));
});
continueButton.off('click.cbutton').on('click.cbutton', function() {
var content = $(this).closest('.wizard-card-content'),
index = content.index(),
nextTab = $this.tabs.eq(index);
content.find('.ink').remove();
$this.openNextTab(nextTab);
});
}
},
openNextTab: function(tab) {
var index = tab.index();
if (!tab.hasClass('selected-tab')) {
tab.siblings('.tab').removeClass('selected-tab').end().addClass('selected-tab');
this.wizardCard.children('.wizard-card-content').filter('.active-content').removeClass('active-content').end().eq(index).addClass('active-content');
this.tabBar.css('left', (index * (100 / this.tabs.length)) + '%');
}
},
selectOrderInfo: function(buttonSelector, orderSelector) {
var button = $(buttonSelector),
selectedOrder = $(orderSelector),
content = button.closest('.wizard-card-content'),
index = content.index(),
nextTab = this.tabs.eq(index);
content.find('.ink').remove();
selectedOrder.siblings().removeClass('selected-order').end().addClass('selected-order');
this.openNextTab(nextTab);
}
}
$(function() {
Wizard.init();
});
//]]>
</script>
<h:outputScript name="js/ripple.js" library="ultima-layout" rendered="#{guestPreferences.ripple}"/>
</h:head>
<h:body styleClass="wizard-body">
<div class="wizard-wrapper">
<div class="wizard-topbar">
<div class="logo"></div>
<div class="profile">
<div class="profile-text">
<h1>Welcome to Ultima</h1>
<p>Please complete steps to register</p>
</div>
<p:graphicImage styleClass="profile-image" name="images/extensions/flag-us@2x.png"
library="ultima-layout" />
</div>
</div>
<div class="wizard-content">
<div class="wizard-card">
<div class="wizard-card-header">
<div class="p-grid p-col">
<div class="p-col-4 tab selected-tab register-tab">
<div class="icon">
<i class="pi pi-sign-in"></i>
</div>
<div class="title">
REGISTER
</div>
</div>
<div class="p-col-4 tab tier-tab">
<div class="icon">
<i class="pi pi-clone"></i>
</div>
<div class="title">
CHOOSE TIER
</div>
</div>
<div class="p-col-4 tab payment-tab">
<div class="icon">
<i class="pi pi-shopping-cart"></i>
</div>
<div class="title">
PAYMENT
</div>
</div>
<div class="tab-bar"></div>
</div>
</div>
<div class="wizard-card-content active-content register ">
<div class="p-grid ">
<div class="p-col-12 p-lg-6">
<h1>ESSENTIAL INFORMATION</h1>
<div class="forms ui-fluid">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<span class="ui-float-label">
<p:inputText/>
<p:outputLabel for="@previous" value="Username"/>
</span>
</div>
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<span class="ui-float-label">
<p:inputText/>
<p:outputLabel for="@previous" value="Email"/>
</span>
</div>
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="pi pi-sign-in"></i>
</span>
<span class="ui-float-label">
<p:password/>
<p:outputLabel for="@previous" value="Password"/>
</span>
</div>
</div>
</div>
<div class="p-col-12 p-lg-6 ui-fluid">
<h1>OPTIONAL</h1>
<div class="forms">
<p:selectOneMenu id="timezone" style="margin-bottom:10px;">
<f:selectItem itemLabel="Select Time Zone" itemValue="" />
<f:selectItem itemLabel="UTC-12.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-11.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-10.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-09.30" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-09.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-08.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-07.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-06.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-05.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-04.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-03.30" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-03.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-02.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC-+00.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+01.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+02.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+03.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+03.30" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+04.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+04.30" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+05.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+05.30" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+05.45" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+06.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+06.30" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+07.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+08.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+08.45" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+09.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+09.30" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+10.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+10.30" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+11.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+12.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+12.45" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+13.00" itemValue="UTC-+Value" />
<f:selectItem itemLabel="UTC+14.00" itemValue="UTC-+Value" />
</p:selectOneMenu>
<div class="calendar">
<p:datePicker id="button" showIcon="true" placeholder="Birthdate"/>
</div>
<p:selectOneMenu id="ultima" style="margin-bottom:10px;">
<f:selectItem itemLabel="Where did you hear Ultima" itemValue="" />
<f:selectItem itemLabel="Blogs" itemValue="Blogs" />
<f:selectItem itemLabel="Google Ads" itemValue="google" />
<f:selectItem itemLabel="Your Forum" itemValue="prime-forum" />
<f:selectItem itemLabel="Youtube" itemValue="Youtube" />
<f:selectItem itemLabel="Events" itemValue="event" />
<f:selectItem itemLabel="Other" itemValue="other" />
</p:selectOneMenu>
</div>
</div>
<div class="p-col-12">
<p:commandButton type="button" value="CONTINUE" styleClass="continue-button" />
</div>
</div>
</div>
<div class="wizard-card-content tier">
<div class="p-grid ">
<div class="p-col-12 p-md-6 p-lg-4">
<div class="card basic">
<div class="card-header">
<div class="p-grid">
<div class="p-col-8">
<h1>BASIC</h1>
</div>
<div class="p-col-4">
<h1>$5</h1><span>/m</span>
</div>
</div>
</div>
<div class="card-content">
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Responsive</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Push Messages</div>
</div>
<div class="p-col-12 tier-button-wrapper">
<p:commandButton value="BASIC" styleClass="tier-button basic" oncomplete="Wizard.selectOrderInfo('.basic', '.order-basic')" />
</div>
</div>
</div>
</div>
<div class="p-col-12 p-md-6 p-lg-4">
<div class="card pro">
<div class="card-header">
<div class="p-grid">
<div class="p-col-7">
<h1>PRO</h1>
</div>
<div class="p-col-5">
<h1>$25</h1><span>/m</span>
</div>
</div>
</div>
<div class="card-content">
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Responsive</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Push Messages</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">7/24 Support</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Free Shipping</div>
</div>
<div class="p-col-12 tier-button-wrapper">
<p:commandButton value="SELECT PRO" styleClass="tier-button pro" oncomplete="Wizard.selectOrderInfo('.pro', '.order-pro')" />
</div>
</div>
</div>
</div>
<div class="p-col-12 p-md-6 p-lg-4">
<div class="card pro-plus">
<div class="card-header">
<div class="p-grid">
<div class="p-col-7">
<h1>PRO+</h1>
</div>
<div class="p-col-5">
<h1>$50</h1><span>/m</span>
</div>
</div>
</div>
<div class="card-content">
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Responsive</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Push Messages</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">7/24 Support</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Free Shipping</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Unlimited BW</div>
</div>
<div class="card-row p-grid">
<div class="p-col-3">
<i class="pi pi-fw pi-check"></i>
</div>
<div class="p-col-9">Special Gift Cards</div>
</div>
<div class="p-col-12 tier-button-wrapper">
<p:commandButton value="SELECT PRO+" styleClass="tier-button pro-plus" oncomplete="Wizard.selectOrderInfo('.pro-plus', '.order-pro-plus')" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wizard-card-content payment">
<div class="p-grid p-nogutter">
<div class="p-lg-8 p-col-12 payment-info">
<div class="p-grid p-col">
<p:selectOneRadio id="customRadio" layout="custom">
<f:selectItem itemLabel="" itemValue="Credit" />
<f:selectItem itemLabel="" itemValue="Paypal" />
</p:selectOneRadio>
<div class="p-col-1 p-lg-1 p-md-1" style="line-height: 2em">
<p:radioButton id="opt1" for="customRadio" itemIndex="0" />
</div>
<div class="p-col-11 p-lg-5 p-md-5">
<div class="credits">
<p:graphicImage name="images/extensions/asset-mastercard.svg" library="ultima-layout" />
<p:graphicImage name="images/extensions/asset-visa.svg" library="ultima-layout" />
<p:graphicImage name="images/extensions/asset-amex.svg" library="ultima-layout" />
</div>
</div>
<div class="p-col-1 p-lg-1 p-md-1" style="line-height: 2em">
<p:radioButton id="opt2" for="customRadio" itemIndex="1" />
</div>
<div class="p-col-11 p-lg-5 p-md-5">
<div class="paypal">
<p:graphicImage name="images/extensions/asset-paypal.svg" library="ultima-layout" />
</div>
</div>
</div>
<div class="p-grid p-col">
<div class="p-col-12">
<span class="ui-float-label">
<p:inputText/>
<p:outputLabel for="@previous" value="Card Holder Name"/>
</span>
</div>
</div>
<div class="p-grid p-col">
<div class="p-col-6">
<span class="ui-float-label">
<p:inputText/>
<p:outputLabel for="@previous" value="Card No"/>
</span>
</div>
<div class="p-col-3">
<span class="ui-float-label">
<p:inputText/>
<p:outputLabel for="@previous" value="Date"/>
</span>
</div>
<div class="p-col-3">
<span class="ui-float-label">
<p:inputText/>
<p:outputLabel for="@previous" value="CCV"/>
</span>
</div>
</div>
<div class="p-grid p-col check-info">
<p:selectManyCheckbox layout="responsive" columns="1">
<f:selectItem itemLabel=" Save credit card information for future usage"
itemValue="SaveInfo" />
</p:selectManyCheckbox>
</div>
</div>
<div class="p-lg-4 p-col-12 order-info">
<div class="p-grid p-col">
<div class="p-col-12">
<h1>ORDER SUMMARY</h1>
</div>
</div>
<div class="order order-default selected-order">
<div class="p-grid p-col">
<div class="p-col-8">Tier - </div>
<div class="p-col-4 price">$0.00</div>
<div class="p-col-8">VAT (%18)</div>
<div class="p-col-4 price">$0.00</div>
</div>
<div class="p-grid p-col total">
<div class="p-col-8">Total</div>
<div class="p-col-4 price">$0.00</div>
<div class="p-col-12">
Please select one tier.
</div>
</div>
</div>
<div class="order order-basic">
<div class="p-grid p-col">
<div class="p-col-8">Tier - Basic</div>
<div class="p-col-4 price">$5.00</div>
<div class="p-col-8">VAT (%18)</div>
<div class="p-col-4 price">$0.90</div>
</div>
<div class="p-grid p-col total">
<div class="p-col-8">Total</div>
<div class="p-col-4 price">$5.90</div>
<div class="p-col-12">
<p:commandButton type="button" value="CONFIRM ORDER" styleClass="buy-button" />
</div>
</div>
</div>
<div class="order order-pro">
<div class="p-grid p-col">
<div class="p-col-8">Tier - Pro</div>
<div class="p-col-4 price">$25.00</div>
<div class="p-col-8">VAT (%18)</div>
<div class="p-col-4 price">$4.50</div>
</div>
<div class="p-grid p-col total">
<div class="p-col-8">Total</div>
<div class="p-col-4 price">$29.50</div>
<div class="p-col-12">
<p:commandButton type="button" value="CONFIRM ORDER" styleClass="buy-button" />
</div>
</div>
</div>
<div class="order order-pro-plus">
<div class="p-grid p-col">
<div class="p-col-8">Tier - Pro+</div>
<div class="p-col-4 price">$50.00</div>
<div class="p-col-8">VAT (%18)</div>
<div class="p-col-4 price">$9.00</div>
</div>
<div class="p-grid p-col total">
<div class="p-col-8">Total</div>
<div class="p-col-4 price">$59.00</div>
<div class="p-col-12">
<p:commandButton type="button" value="CONFIRM ORDER" styleClass="buy-button" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h:outputStylesheet name="css/primeicons.css" library="ultima-layout"/>
<h:outputStylesheet name="css/primeflex.min.css" library="ultima-layout"/>
<h:outputStylesheet name="css/layout-#{guestPreferences.theme}.css" library="ultima-layout" />
<h:outputStylesheet name="css/ripple.css" library="ultima-layout" />
</h:body>
</html>
Code: Select all
.wizard-body {
height: 100vh;
background: url("\#{resource['ultima-layout:images/extensions/background@2x.jpg']}") center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
.wizard-wrapper {
display: flex;
flex-direction: column;
height: 100%;
.wizard-topbar {
background-color: #3949ab;
z-index: 1000;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
height: 75px;
padding: 0 10%;
display: flex;
justify-content: space-between;
align-items: center;
flex-basis: 75px;
flex-grow: 0;
flex-shrink: 0;
.logo {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 30px;
background: url("\#{resource['ultima-layout:images/logo.png']}") top left no-repeat;
}
.profile {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
.profile-text {
margin-right: 15px;
text-align: right;
h1{
font-size: 16px;
color:#ffffff;
margin: 0;
}
p{
font-size: 16px;
opacity: 0.6;
margin: 0;
color:rgba(255,255,255,.7);
}
}
.profile-image {
display: inline-block;
vertical-align: middle;
width: 40px;
}
}
}
.wizard-content {
height: calc(100% - 75px);
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
.wizard-card {
background-color: #fafafa;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
0 2px 1px -1px rgba(0, 0, 0, 0.12),
0 1px 1px 0 rgba(0, 0, 0, 0.14);
height: 550px;
width: 54.33%;
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
.wizard-card-header{
width:100%;
background-color: #3f51b5;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
position: relative;
.tab{
background-color: #3f51b5;
text-align: center;
cursor: pointer;
i{
width: 20px;
opacity: 0.38;
color: #ffffff;
}
.title{
color: #ffffff;
opacity: 0.38;
font-size: 16px;
line-height: 1.5em;
}
.icon{
line-height: 1.5em;
}
&.selected-tab{
transition-duration: 0.6s;
i{
opacity: 1;
}
.title{
opacity: 1;
}
}
}
.tab-bar {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 33.3333%;
transition: .5s cubic-bezier(.35,0,.25,1);
background-color: #ffffff;
visibility: visible;
&.tab-bar-register {
width: 33.3333%;
left: 0;
}
&.tab-bar-tier {
width: 33.3333%;
left: 33.3333%;
}
&.tab-bar-payment {
width: 33.3333%;
left: 66.6667%;
}
}
}
.wizard-card-content{
padding: 30px;
display: none;
overflow: auto;
height: 100%;
> .p-grid {
height: 100%;
width: 100%;
}
h1{
font-size: 12px;
color: rgba(0, 0, 0, 0.6);
letter-spacing: 2px;
margin: 0;
}
&.active-content{
display: flex;
flex-grow: 1;
}
&.register{
.forms{
.ui-inputgroup{
margin-top: 25px;
input{
width: 100%;
padding: 15px;
}
.ui-float-label {
width: 100%;
}
}
.ui-selectonemenu{
margin-top: 25px;
width: 100%;
.ui-selectonemenu-trigger{
right: 10px;
}
}
.calendar{
margin-top:14px;
}
}
.continue-button{
&.ui-button{
width: 100%;
margin-top: 25px;
}
}
}
&.tier{
.card{
min-height: 400px;
padding: 0;
position: relative;
.card-header{
color:#ffffff;
font-size: 18px;
padding: 15px 10px;
background-color: #3f51b5;
h1{
color: #ffffff;
font-size: 24px;
display: inline;
}
}
.card-content{
font-size: 14px;
padding:10px;
i{
color:#3f51b5;
}
.card-row{
height: 40px;
width: 100%;
}
.tier-button-wrapper{
position: absolute;
bottom: 15px;
right: 10px;
left: 0px;
width: auto;
.tier-button{
&.ui-button{
width: 100%;
}
}
}
}
&.pro{
.card-header{
background-color: #e91e63;
}
.card-content{
i{
color:#e91e63;
}
.tier-button{
&.ui-button{
background-color: #e91e63
}
}
}
}
&.pro-plus{
.card-header{
background-color: #607d8b;
}
.card-content{
i{
color:#607d8b;
}
.tier-button{
&.ui-button{
background-color: #607d8b
}
}
}
}
}
}
&.payment{
padding: 0;
.payment-info{
padding: 70px 35px;
.ui-float-label{
input{
width: 100%;
padding-bottom: 15px;
background-color: transparent;
}
}
.ui-selectmanycheckbox{
margin-left: .5em;
font-size: 14px;
}
#customPanel{
width:100%;
}
.check-info{
margin-top: 10px;
}
}
.order-info{
padding: 15px;
background-color: #e0e0e0;
border-left: solid 1px #bdbdbd;
font-size: 14px;
color: #757575;
.order-basic,.order-pro,.order-pro-plus,.order-default{
display: none;
}
.selected-order{
display: block;
}
h1{
margin-top: 15px;
}
.price{
font-weight: 700;
text-align: right;
}
.total{
border-top: 1px solid #bdbdbd;
padding: 15px 0px;
margin-top: 30px;
}
.buy-button{
&.ui-button{
width: 100%;
margin: 68px 0;
}
}
}
}
}
}
}
}
}
@media(max-width:1024px){
.wizard-body {
.wizard-wrapper {
.wizard-content {
.wizard-card{
width: 90%;
}
}
}
}
}
@media(max-width:640px){
.wizard-body {
.wizard-wrapper {
.wizard-topbar {
height: 150px;
padding: 0 5%;
flex-direction: column;
justify-content: space-around;
flex-basis: 150px;
.logo {
align-self: flex-start;
}
.profile {
align-self: flex-end;
}
}
.wizard-content {
height: calc(100% - 150px);
}
}
}
}
https://www.primefaces.org/primeblocks-jsf/
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests