Dynamic Web Development with Seaside

13.3Mini Inn: Embedding Components

Let’s solve the same problem using component embedding. We define a component with two calendars and two dates. The idea is that we want to always have the two mini-calendars visible on the same page and provide some feedback to the user as shown by Figure 94.

WAComponent subclass: #MiniInn
instanceVariableNames: 'calendar1 calendar2 startDate endDate'
classVariableNames: ''
poolDictionaries: ''
category: 'Calendars'

Since we want to show the two calendars on the same page we return them as children.

MiniInn>>children
^ Array with: calendar1 with: calendar2

We initialize the calendars and make sure that we store the results of their answers.

MiniInn>>initialize
super initialize.
calendar1 := WAMiniCalendar new.
calendar1
canSelectBlock: [ :date | Date today < date ];
onAnswer: [ :date | startDate := date ].
calendar2 := WAMiniCalendar new.
calendar2
canSelectBlock: [ :date | startDate isNil or: [ startDate < date ] ];
onAnswer: [ :date | endDate := date ]

Finally, we render the application, and this time we can provide some simple feedback to the user. The feedback is simple but this is just to illustrate our point.

MiniInn>>renderContentOn: html
html heading: 'Starting date'.
html render: calendar1.
startDate isNil
ifFalse: [ html text: 'Selected start: ' , startDate asString ].
html heading: 'Ending date'.
html render: calendar2.
(startDate isNil not and: [ endDate isNil not ]) ifTrue: [
html text: (endDate - startDate) days asString ,
' days from ' , startDate asString , ' to ' ,
endDate asString , ' ' ]

A simple reservation with feedback

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.