Wizard into ui:composition

matias2903 · 28 Feb 2022, 04:03

Hi, I am using the avalon template 4.0 Wizard...

I want to create a page that is going to be inside a ui:composition, since it is going to be inside a page that is going to be rendered inside the content of a template.

I have something like this...

newClient.xhtml

<!DOCTYPE html>
<ui:composition 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"
template="/WEB-INF/template.xhtml">

<ui:define name="content">
<script type="text/javascript">
//<![CDATA[
var Wizard = {
init: function() {
this.wizardContainer = $('.wizard-container');
if (this.wizardContainer.length) {
this.wizardContent = this.wizardContainer.find('.wizard-content');
this.tabs = this.wizardContainer.find('.wizard-header .wizard-tabs-container > .wizard-tab');
this.selectedTab = this.tabs.eq(0);

var continueButton = $('.continue-button'),
$this = this;

this.tabs.off('click.wizard-tab', '.tab-header').on('click.wizard-tab', '.tab-header', null, function() {
var tab = $(this).closest('.wizard-tab');

if (!tab.is($this.selectedTab)) {
if ($this.selectedTab.index() < tab.index()) {
var firstActiveTab = tab.prevAll('.active-tab:first');
$this.activateItems(firstActiveTab);
}
else {
var latestActiveTab = tab.nextAll('.active-tab:last');
$this.deactivateItems(latestActiveTab);
}

$this.selectedTab = tab;
}
});

continueButton.off('click.cbutton').on('click.cbutton', function() {
var content = $(this).closest('.wizard-content'),
index = content.index(),
nextTab = $this.tabs.eq(index);

nextTab.children('.tab-header').trigger('click.wizard-tab');
});
}
},

activateItems: function(tab) {
var nextItem = tab.next();
$this = this;

nextItem.addClass('active-tab');
clearTimeout(this.deactivateItems);

this.activateTimeout = setTimeout(function() {
if (!nextItem.is($this.selectedTab)) {
$this.activateItems(nextItem);
}
else {
$this.wizardContent.filter('.active-content').removeClass('active-content').end().eq($this.selectedTab.index()).addClass('active-content');
}
}, 600);
},

deactivateItems: function(tab) {
tab.removeClass('active-tab');

var prevItem = tab.prev();
$this = this;

clearTimeout(this.deactivateItems);

clearTimeout(this.activateItems);
this.deactivateTimeout = setTimeout(function() {
if (!prevItem.is($this.selectedTab)) {
$this.deactivateItems(prevItem);
}
else {
$this.wizardContent.filter('.active-content').removeClass('active-content').end().eq($this.selectedTab.index()).addClass('active-content');
}
}, 600);
},

selectOrderInfo: function(itemSelector, orderSelector) {
var selectedItem = $(itemSelector),
selectedOrder = $(orderSelector);

$('.tier-card').removeClass('active-tier-card');
selectedItem.addClass('active-tier-card');
selectedOrder.siblings().removeClass('selected-order').end().addClass('selected-order');

this.selectedTab.next().children('.tab-header').trigger('click.wizard-tab');
}
}

$(function() {
Wizard.init();
});
//]]>
</script>
<div class="wizard-body">
<div class="wizard-wrapper">
<div class="wizard-container">
<div class="wizard-header">
<div class="wizard-tabs-container">
<div class="wizard-tab register-tab active-tab">
<div class="tab-progressbar"></div>
<div class="tab-header"></div>
</div>
<div class="wizard-tab contact-tab">
<div class="tab-progressbar"></div>
<div class="tab-header"></div>
</div>
<div class="wizard-tab other-tab">
<div class="tab-progressbar"></div>
<div class="tab-header"></div>
</div>
</div>
</div>
<div class="wizard-content register active-content">
<div class="content-header">
<div class="p-grid">
<div class="p-col-6 title">
<h1>Datos Personales</h1>
<span>Please complete steps to register</span>
</div>
<div class="p-col-6 icon">
<p:graphicImage name="images/extensions/icon-register.svg" styleClass="layout-image"
library="avalon-layout" />
</div>
</div>
</div>
<div class="content">
<div class="p-grid forms">
<div class="p-col-12 p-md-6">
<p:outputLabel for="name" value="Username" />
<p:inputText id="name" placeholder="Name" styleClass="form-element" />
</div>
</div>
<div class="p-grid button">
<p:commandButton styleClass="continue-button" type="button" value="CONTINUE" style="width: 100%" />
</div>
</div>
</div>
<div class="wizard-content contact">
<div class="content-header">
<div class="p-grid">
<div class="p-col-6 title">
<h1>Datos Contacto</h1>
<span>Please complete steps to register</span>
</div>
<div class="p-col-6 icon">
<p:graphicImage name="images/extensions/icon-register.svg" styleClass="layout-image"
library="avalon-layout" />
</div>
</div>
</div>
<div class="content">
<div class="p-grid forms">
<div class="p-col-12 p-md-6">
<p:outputLabel for="name" value="Username" />
<p:inputText id="name" placeholder="Name" styleClass="form-element" />
</div>
</div>
<div class="p-grid button">
<p:commandButton styleClass="continue-button" type="button" value="CONTINUE" style="width: 100%" />
</div>
</div>
</div>
<div class="wizard-content other">
<div class="content-header">
<div class="p-grid">
<div class="p-col-6 title">
<h1>Datos Otros</h1>
<span>Please complete steps to register</span>
</div>
<div class="p-col-6 icon">
<p:graphicImage name="images/extensions/icon-register.svg" styleClass="layout-image"
library="avalon-layout" />
</div>
</div>
</div>
<div class="content">
<div class="p-grid forms">
<div class="p-col-12 p-md-6">
<p:outputLabel for="name" value="Username" />
<p:inputText id="name" placeholder="Name" styleClass="form-element" />
</div>
</div>
<div class="p-grid button">
<p:commandButton styleClass="continue-button" type="button" value="CONTINUE" style="width: 100%" />
</div>
</div>
</div>

</div>
</div>

<h:outputStylesheet name="css/primeflex.min.css" library="avalon-layout" />
<h:outputStylesheet name="css/layout-#{guestPreferences.theme}.css" library="avalon-layout" />
</div>

</ui:define>

</ui:composition>

and

wizard.scss

.wizard-body {
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;

.wizard-wrapper {
height: 65%;
width: 100%;
position: absolute;
left: 0;
top: 15%;

.wizard-container {
background-color: #EFEFEF;
width: 100%;
min-height: 100%;

.wizard-header {
height: 100px;
display: flex;
justify-content: center;
position: relative;
border-bottom: 1px solid #d9d9d9;

.wizard-tabs-container {
width: 55%;
height: 35px;
display: flex;
flex-direction: row;

.wizard-tab {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

.tab-header {
background: #292B2C;
height: 35px;
width: 35px;
@include border-radius(50%);
border: none;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
flex: 0 0 35px;
z-index: 1;
}

.tab-progressbar {
width: 100%;
height: 8px;
background-color: #292b2c;
position: relative;

&:before {
content: ' ';
width: 0;
height: 100%;
position: absolute;
background-color: #8dc8ff;
@include transition(width .6s cubic-bezier(.35,0,.25,1));
}
}

&:first-child {
width: auto;

.tab-progressbar {
display: none;
}
}

&.active-tab {
.tab-header {
background: linear-gradient(to right, #457fca, #5691c8);
}

.tab-progressbar {
&:before {
width: 100%;
}
}
}
}
}
}

.wizard-content {
width: 55%;
margin: auto;

.content-header {
margin-bottom: 20px;
margin-top: 15px;

.title{
h1{
color: #292B2C;
font-size: 24px;
font-weight: 500;
}
span{
font-size: 14px;
color: #999999;
}
}
.icon{
display: flex;
justify-content: flex-end;
}
}

.content {
button{
background-color: #2e6da4;
margin-bottom: 10px;
}

.forms{
label{
color: #146fd7;
}
.form-element{
width: 100%;
margin-bottom:30px;
margin-top: 10px;

label{
color: #292b2c;
}

> input{
width: 100%;
}

&.ui-calendar{
>input{
margin-bottom: 30px;
margin-top: 10px;
}
}
}

}
}

&.register{
display: none;
.content{

}
}

&.contact{
display: none;
.content{

}
}

&.other{
display: none;
.content{

}
}

&.active-content{
display: block;
}
}
}
}
}

@media (max-width: 640px) {
.wizard-body {
.wizard-wrapper {
height: 100%;
top: 0;
opacity: .8;

.wizard-container {
.wizard-header {
.wizard-tabs-container {
width: 95%;
}
}

.wizard-content {
width: 95%;
}
}
}
}
}

I did the command sass to generated the css files. But the problem is that when I change the wizard step is not renderized anything.
What could be the problem?

Sorry for my English, is not the best. I'm uruguayan.

Thank's

19 Apr 2022, 03:55

Interesting! Do you get an error on console? And can you check if your css is loaded? And where are you loading this css?

Best Regards,

Wizard into ui:composition

Who is online