Creating a 'Hello World' Page

This page describes how to create a very simple 'Hello World' page in HomePortals.

HomePortals is designed to facilitate the display of webpages that contain multiple independent visual components. So, on our example we will show how to create a page that has two visual elements each within a container, side by side.

NOTE: For simplicity we will use HomePortals in standalone mode.

To begin, we need to setup our directory structure:

  • \helloworld
    • config\
      • homePortals-config.xml.cfm
    • pages\
    • Application.cfc
    • index.cfm

helloworld is the directory where we will place our application.

Here is the content for Application.cfc, index.cfm and homePortals-config.xml.cfm

Application.cfc 

<cfcomponent>
        <cfset this.applicationName = "helloworldapp">
</cfcomponent>

index.cfm 

<cfinclude template="/homePortals/common/Templates/page.cfm">

homePortals-config.xml.cfm 

<?xml version="1.0" encoding="UTF-8"?>
<homePortals>
        <contentRoot>/helloworld/pages/</contentRoot>
</homePortals>

That was the basic boilerplate code needed to run HomePortals in standalone mode. Now we will get started creating our page.

HomePortals separates page layout from page content. The layout is given by the pages stored on the <contentRoot> directory. These pages are the ones that indicate what content to render and where to place it. HomePortals uses content tag renderers to display content. HomePortals comes out of the box with several content renderers, and you can easily create your own custom renderers. For this example we will use the content and image content tag renderers. content is used to display HTML content on the page. This can be external content (from the web) or internal content from a ResourceLibrary. image, as its name implies is used to include images on the page.

Now, to create our page, use any text editor to create the following file and name it 'default.xml'. Save it under the /helloworld/pages/ directory.

default.xml 

<?xml version="1.0" encoding="UTF-8"?>
<Page>
        <title>Hello World</title>
        <skin id="rounded" />
        <layout>
                <location name="left" type="column" />
                <location name="right" type="column" />
        </layout>
        <body>
                <content href="http://en.wikipedia.org/w/index.php?title=Hello_world_program&amp;printable=yes"
                         location="left" 
                         title="A Little HelloWorld" 
                         id="hello" />
                <image href="http://www.homeportals.net/images/hp3_label.gif" 
                         location="right" 
                         title="Powered By HomePortals" 
                         id="world" />
        </body>
</Page>

Now, we can use a browser to go to http://path.to.server/helloworld and we will see both of our content elements side by side.

Screenshot of Helloworld page in HomePortals

This is barely scratching the surface of what you can do with HomePortals. HomePortals provides many more features that you can use.

Attachments