Example Page : Serviced Office results at officebroker.com

The OBiCMS framework is being developed by officebroker.com's internal development team and so we wanted to show you an example of how we are moving our current site onto the framework. The below screenshot shows you how we constructed the current results page in the OBiCMS framework.

http://www.officebroker.com/Mayfair_Greater+London_Office+Space+To+Rent_1.html
Note : The live site does NOT yet run on the OBiCMS framework, we are still tweaking our widgets. We will update you as soon as the live search results are powered from OBiCMS

Example Page - Simple

This is how the page is broken down.
  • BasePage (BasePage)
    • Main Page (Template)
      • Template (Header)
        • Header Image (Widget)
        • Telephone Number (Widget)
      • ServicedOfficeSearch (Widget)
        • ServicedOfficeResults (Template)
        • Video (Template)
        • Standard (Template)
      • ServicedEnquiry (Widget)
        • ServicedForm (Template)

<?xml version="1.0" encoding="ISO-8859-1"?>
<OBi xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<page>
	<template name="MainPage" id="CMSTPL20100624HY76">
		<template name="Header" id="CMSTPL20100624HY45">
			<widget name="Header Image" type="OBv3Widgets.Header, OBv3Widgets" id="$$#NormalHeader#$$" />
			<widget name="Telephone Numer" type="OBv3Widgets.TelNumber, OBv3Widgets" id="$$#Telephone#$$" />
		</template>
		<widget name="SOSearch" type="OBv3Widgets.SOSearch, OBv3Widgets" id="$$#ServicedOfficeSearch#$$">
			<resultsTemplate is="CMSTPL20100624Hy64" /> <!-- These are the ID's of the templates we want to use -->
			<standard id="CMSTPL20100624F6CV" />
			<video id="CMSTPL20100624LK54" />
			<soWidgetId id="$$#ServicedOffice#$$" /> <!-- This is the ID of the ServiceOffice widget we wish to use as the content of our search  -->
		</widget>
		<widget name="ServicedEnquiry" type="OBv3Widgets.SOForm, OBv3Widgets" id="$$#SOForm#$$">
			<formtemplate id="CMSTPL2010062934CV" />
		</widget>
	</template>
</page>
</OBi>

Now lets see how the widgets are broken down on the page with there respective templates.

Example Page
  • BasePage
    • Header Image (Widget)
    • Telephone Number (Widget)
    • ServicedOfficeSearch (Widget)
      • ServicedOfficeResults (Template)
      • ServicedOffice (Widget)
        • Video (Template)
        • Standard (Template)
      • ServicedEnquity (Widget)
        • ServicedForm (Template)

As you can see from the above list, the ServicedOfficeResults widget does in fact have a nested ServicedOffice widget. You will not find any reference to the ServicedOffice Widget in the XML used to create the page. This is very much like when you add a textbox to your applications you don't see any reference to the Edit control, instead you see properties on the textbox which are passed down to the Edit control. So when you add a ServicedOfficeSearch widget to the page it will ask for not only its own properties (in this case one template for its self) but also for any properties its nested widgets require.

Due to the nature of the business we cannot show you the actual code which powers the widgets on the page but we will try to make a more advanced example page and package it with the project. If anyone has any suggestions on what type of page we should make then drop us a line, for example if your thinking, well how would I achieve "blah" with OBiCMS, send it to us and we will try to put the answer in the example.

Last edited Jul 7, 2010 at 8:14 PM by Cadey, version 4

Comments

No comments yet.