Home

Beginner`s guide to template creation with OpenCms 8

1. 4 2011 selectable via wud element settings Flower Dicto Flower Spena Flower Extran Flower Searc Flower Subscrip schema blue selectable via element settings Starting page mo ou Same great XML content editor This page is based on a structured content for articles Such types can be defined by yourself for editing and rendering structured contents schema red selectable via element settings OpenCms 8 Demo Content is demo content shows how the features of OpenCms 8 are used to create great looking websites Build with OpenCms The Open Source CMS provided by Alkacon Software The OpenCms Experts zl What is still missing to make it a fully functional template are the navigation elements that are still mage dummies extracted from our design 5 11 Navigation Typically navigation elements in OpenCms are special according to the requirements of a site So they often need a larger amount of customized code The development of the appropriate HTML code to render the navigation elements also may be a challenging task in itself To develop navigations in OpenCms you need to have a good understanding of the java util Collection interfaces In our example the code for the navigation element could be directly put into the template JSP For maintainability aspects the navigation elements will be created in separate JSPs th
2. Opencms Beginner s guide to template creation with OpenCms 8 Version 1 0 Date Monday March 5 2012 l Beginner s guide to template creation with OpenCms 8 e WECM oos i P D2entms Table of Content Tape or COn OME MERE Umm 2 C AD U ea A E E E E EE E EE E E 3 P WCCO E 3 z Ceed 1 010 6 E 3 A WR EN tere TE 5 4 1 Iewen 5 4 2 DINING ENTER E EEE ESTA ETETEN TE ETATE AEAT TEATE 6 4 3 Create a simple HTML oage 8 o Template Cre AUN eisieisiesiamrarvssnenasudaceiaiuiacetasndaceiaiuiaieiasedasmiaiuiainiasedineiaieinieiasedinsiaiuinieiasediamuas 9 5 1 Gre ale a simple TEM DIAC i csesncecaeseceenncuteaninteseneandeamnseceeeeauieneseandaneindeaneneneeenaeieee 9 5 2 Vurero zi e 9 5 3 SITEMAP configuration sseesssssssssseseeeen enemies nnns nnne nnns 11 5 4 Bl M 12 5 5 Add Header Footer configuration c ccccceccceeeeceeeeeeeeseeceseeeeeeeeseueeseeeseeeeseeesaeeess 14 5 6 UY ING TT 16 5 7 n linuis 19 5 8 identify more template Dal iS ues seiner o mea gU ERR n Em TUS Hb E EEn 20 5 9 The lt cms get tag eee eee teres cece tote eee sce teeta eee ius nct rema qt Heese drei deemed 23 Sil OSUMNG E 23 5 10 Add content to the model page 25 5 10 1 vj 26 5 10 2 TESNO eer 28 STL eris n TTE E Ea EE AT 28 5
3. m4 com alkacon documentati un com alkacon opencms v8 i Ze com alkacon opencms v8 i f com alkacon opencms v8 m4 com alkacon opencms v8 m4 com alkacon opencms v8 ply com alkacon opencms v8 du com alkacon opencms v8 un com alkacon opencms v8 i 3443 com alkacon opencms v8 30 com alkacon opencms v8 f com alkacon opencms v8 dm my first template j Bg Seco Continue gt gt Cancel m elements gy formatters ei i m resources d mu schemas hg templates m3 org opencms ade config mf org opencms ade contain mf org opencms ade editpro mf org opencms ade gallerie 347 org opencms ade publish mf org opencms ade sitemar i mf org opencms ade upload m org opencms dev demo c mf org opencms dev demo 4j org opencms editors ckec a org opencms editors editz Y 4 b new resonrce type e Show description Extended folder Structured contents other options C3 Folder Sg Container Page HH Element Group EI HTML Redirect HT Inheritance group ll Inheritance config Text file E JSP 893 External Link 2 Upload new file Qs 943 O50 O30 Os OS OG User Admin logged in at 1 17 12 2 40 PM from 127 0 0 1 In the following window name the file myFirstTemplate jsp and if you want to edit the properties give it a proper title like My First Template 4 HTML Prototype Next step in developing a working template is to build a HTML Prototy
4. OpenCms 8 Content Manager User Manual From the Add content option in the ADE toolbar select the desired resource type and choose the proper content In the given example we add a resource of the type configurable list to the right container which collects the latest news 8ao0 9 Opencms Types Configurable List x eloper Demo Types Galleries Categories Advanced kesuils Title Ascending ma gt All events L Configurable List All news Configurable List gt Lilaceous Plants Configurable List Most Recent News Configurable List Orchidaceae Plants Configurable List es gt Recent events Configurable List b Recent news Configurable List gt Rosaceous Plants Configurable List Add content to the model page by drag amp drop Alkacon Software GmbH Page 25 of 42 Version 1 0 Date March 5 2012 Beginner s guide to template creation with OpenCms 8 2 Hop ze Sp AED TT Content gets rendered the m way it would look like in Welcome to OpenCms Release Notes Demo English D the target container Demo English Starting page Starting page oo Recent ewe Flower Today Recent news SS 1 in Koblenz Flower Dictionary amp 1 BUGA 2011 in Koblenz Flower Special Aug 4 2011 Flower Extranet bs Flower Search and a half mont j Flower Su
5. currentLevel gt Alkacon Software GmbH Page 38 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS lt c forEach begin currentLevelt1 end oldLevel gt eqs uw c forEach lt li gt lt c when gt lt c choose gt c choose lt c when test fn startsWith cms requestContext uri elem resourceName gt lt c set var class gt highlight lt c set gt lt c when gt lt c otherwise gt lt c set var class gt default lt c set gt lt c otherwise gt lt c choose gt Lx a hrefrse cmsslink elem resourceNamel cms l1nk class S classi gt S ielem navText lt a gt lt li gt lt c set var oldLevel value S currentLevel gt lt c forEach gt lt ul gt Reload your testpage and have a look at the outcome BOBZO SBE O LP Paes Pome OpenCms Welcome to OpenCms Release Notes Demo English Demo Deutsch Developer Demo Demo English template test 1 template test 2 template test 3 e Starting page Recent news e Flower Today e Flower Dictionary e Flower Special e Flower Extranet e Flower Search e Flower Subscripbon template test 1 template test 2 Side navigation now indents deeper tree levels but needs styling 8 template test 3 Same great XML content editor This page is based ona structured content for articles Such types can be defined by yourself for editing
6. 11 1 Main ars te Lal om UT 29 5 11 1 1 Build a simple jet 29 SEE EEEME c 30 5 11 1 3 ALA S EEE EE E E E EE E E E 31 oA TT N RU m 32 5 11 2 Breadcrumb navigation eseeesssssssssseeseeeee nennen nennen nnn nnne nnne nnns 33 5 11 2 1 ji 35 5 11 3 Side Navigation 36 5 11 3 1 dare airo DEE 38 DTL E 40 ua MEER m 41 Alkacon Software GmbH Page 2 of 42 Beginner s guide to template creation with OpenCms 8 Version 1 0 Date March 5 2012 Opencms 1 Abstract One of the most important aspects of website building is the creation of the required templates Sites generated by OpenCms are built by using one or more templates that define a uniform layout of the presented content This beginner s guide describes some easy steps on how to create JSP based page templates from scratch As this is a core functionality required in almost all projects you should study this documentation carefully Following the steps described here you should be able to get your JSP template up and running in a short time 2 Design First step in developing a template is the design It is assumed that you have a page design present as an image file like jpg tif or so In larger projects this might have been outsourced and created by graphic design experts or you might have built it yourself using some imag
7. Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS box schema2 h4 background url images gradient png color FFFFFF box schema2 repeat x scroll center top B31B34 background none repeat scroll 0 O0 FFCCCC DoX SChemal m4 4 background u tL images gradientZpng color FFFFFF box schemal repeat x scroll center top 003082 background none repeat scroll O O AACCFF box schemas h4 background url images gradient png color FFFFFF Dos schemas repeat x scroll center top 003082 background none repeat scroll 0 O FFFFFF Dox 1 margin bottom 159x border 1px solid 7B7F7E box h4 margin bottom 15px border lpx solid 47B7FT7E Front s1ze lL3px line height 16px margin U Padding 5px width auto boxbody Alkacon Software GmbH Page 27 of 42 En Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 LE ms font size 11px padding 10px 5 10 2 Testing Now the model page that gets rendered by our template looks like our design reference j 2 o BD websit QC E LG e pencms emo Website om d QE My First Model Page OxENCMS Welcome to OpenCms Release Notes Demo English Demo Deutsch Developer Demo Demo English Starting page CI c Flower Today EI EI schema white BUGA 2011 in Koblenz
8. Flower Special Flower Extranet Flower Search Add new content by drag amp drop Build with OpenCms The Open Source CMS provided by Alkacon Software The OpenCms Experts As you can see your template is already drag amp drop enabled but the right container is placed at the bottom In fact if you would use a horizontal ruler the top of the right container is placed below the bottom of the left container If you would now drop some elements to the containers this will destroy the whole page layout Alkacon Software GmbH Page 23 of 42 l Beginner s guide to template creation with OpenCms 8 e What you have to do is to change the order of the centercolumn and rightcolumn lt div gt in the template JSP Your template now should have the following source code lt S page buffer none session false taglibs c cms fn gt SUI head lt title gt lt cms info property opencms title title cms enable ade link href cms link link weak system modules my first template resources css style css cms link rel stylesheet type text css gt lt link gt lt cms headincludes type css gt lt head gt lt body gt div id window gt lt div id page gt div id header gt lt cms container name headercontainer type header maxElements 1 div div id main navigation gt img src opencms 8042 opencms sys
9. OpenCms Workplace of Admin Mozia Firefox Project Offline 9 Publish x 8 e O tsk upload A search Z New Select New option he l j ea alkacon documentation C3 shared ikxplorer E wll xj AJ Reload 2 Preferences re Dex GOpencms resources New Q3 stes a system ree m n n sic 4j categones 3 gallenes i Show descnption I Name Extended folder Structured contents Other options u E Select Folder QI Folder Ze Container Page z GE Element Group DN HTML Redirect lea lel Inheritance group 3 lost found aco modules 33 com alkacon documentati Cy com alkacon documentati com alkacon documentati A com alkacon opencms v8 3 com alkacon opencms v8 fy com alkacon opencms v8 C3 com alkacon opencms v8 908 0 9 DO fy com alkacon opencms v8 C S inheritance configuration 3 com alkacon opencms v8 e EE C Text file com alkacon opencms v8 C i 3 com alkacon opencms v8 an JSP com alkacon opencms v8 C external Link a com alkacon opencms v8 C upload new file fy com alkacon copencms v8 Bog myrst template 3 classes Continue m gt Cancel 3 elements formatters Jg esources 3 images schemas CH templates 3 org opencms ade confg Org opencms ade contain org opencms ade editpro C3 org opencms ade gallene C org opencms ade publish A org opencms ade sitemar Co org opencms ade upload Aj Ofrg opencms d
10. add the maxElements attribute to the lt cms container gt tag as follows cms container name headercontainer type header maxElements 1 cms container name footercontainer type footer maxElements 1 The background images used for header and footer should be extracted from the reference design using your preferred image editor In our example a gradient image is used A tiny portion of a width of a few pixels is enough to repeat the background image by using style sheets Save the background images to your template module s resources images folder 5 6 Styling oince there is no styling defined yet text and links in the header and footer part might appear Alkacon Software GmbH Page 16 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 LE ms using browser default font and size settings You can insert style sheets need for the template in the header part of your template In our example all template specific CSS files reside in a dedicated folder at system modules my first template resources css You can upload or create a new style sheet in the OpenCms workplace As an example we create a simple style sheet Go to the OpenCms workplace and in your template module s resources folder select new from the toolbar and select the type Folder and click continue In the following dialog enter css as name skip the properties and click Finish 1
11. and rendering structured contents This demo content shows how the The left navigation works fine so far but needs some styling so the template matches our reference design Alkacon Software GmbH Page 39 of 42 Ik l Beginner s guide to template creation with OpenCms 8 A acon Version 1 0 Date March 5 2012 5 11 3 2 Style pEnCms In the workplace open the style css of your template and add some styling information left navigation li a color 444444 left navigation a background color FFFFFF border bottom 1px solid 4EEEEEE display block padding 3px 0 3px 10s text decoration none width 903 left navigation li margin 0 left navigation ul list style type none margin U padding 0 left navigation ul ul a background color F8F8F8 padding left 15 width 855 left navigation ul ul ul a background color FCFCEC padding left 20 width 80 j left navigation ul ul ul ula background color FFFFFF padding left 25 width 7553 left navigation border top 1px solid EEEEEE margin bottom 159px Alkacon Software GmbH Page 40 of 42 Version 1 0 Date March 5 2012 width 100 j left navigation a highlight background 003082 tont weight bold color FFFFFF left navigation a hover background DDDDDD color 444444 5 11 3 3 Testing Save and exit and reload your test
12. body gt lt html gt It is a must to close the lt cms container gt and lt cms enable ade gt tag properly with a 7 Save and exit 5 2 Model page To test the template switch to sites default and create a new model page To do so go to the folder content new and create a new container page by clicking the New icon in the toolbar and select Container page in the New dialog Alkacon Software GmbH Page 9 of 42 Wm Beginner s guide to template creation with OpenCms 8 P Version 1 0 Date March 5 2012 LE ms OpenCms Workplace of Admin Mozilla Firefox Project Offine Publish v Queue Site sites default View Expiorer s J Reload 2 Preferences Help exit O Sack upload A Search a New C Level Up Location j sites default 5 C3 Content content new p new 5 article 3 config Please select the new resource type 3 event Oy function y Show description C3 groupcont Name Cg images C b Extended folder Bien group c es ritance grou 2 list C Y other options 3 news C D Folder le T T G twiter G E Container Page Select Container Page 2 aaa C EE Element Group sain C WE HTML Redirect y contact C EB inheritance group c dev demo C EE inheritance configuration T dem wer en C3 products Cc an 35 Oy release C External Link Oy support Upload new file ontinse a Cane User Admin logged in at 1 17 12
13. do this with any simple image editor In the workplace upload the images from your local hard drive to your modules resources images folder Alkacon Software GmbH Page 20 of 42 n Beginner s guide to template creation with OpenCms 8 P Version 1 0 Date March 5 2012 ODENCMS Open ms Workplace of Admen Mozilla Firefox BNET wll sl Project Offiine a Publish v Queue Site 7 D l View Explorer a x Reload Z Preferences O Hale Oet Gi Opencms A3 Back plos Search New C Level up Location system modules my first template resources images i j 3 alkacon documentatia shared sites eo system Gj categories Cy galleries 3 handler Co login C lost found SO modules com alkacon documentation fy com alkacon documentaton 3 com alkacon documentation fy com alkacon opencms vB ar com alkacon opencms v8 es 3 com alkacon opencms v8 int y com alkacon opencms v8 lis fy com alkacon opencms v8 lo Select Upload option Upload files Please use the Add more files button to append more files to the kst of files to upload You can also deselect files by uncheck the cheboxes infront of the file items breadcrumb navigation JPG H da 5 KB image n center container JPG FA 43 kB image Select the image com alkacon opencms v8 ne g com alkacon opencms v8 se M ritare parts representing com alkacon opencms v8
14. gt li elem navTextj li c forEach Save the JSP and edit your template JSP to include it Now replace the dummy image lt img src path to main navigation JPG by a cms include cms include file link weak system modules my first template elements menu main navigation jsp and save the template owitch to sites default content new and open your model page in the browser ID O3encms Navigation element created with lt cms navigation gt tag Welcome to OpenCms Release Notes e Demo English e Demo Deutsch e Developer Demo my first page with my first template Demo English Starting page Starting page Recent news Flower Today Flower Dictionary E BUGA 2011 in Koblenz Flower Special Aug 4 2011 Flower Extranet Flower Search Flower Subscription It s still two and a half months and the BUGA2011 already reached its aim of 2 000 000 overall visitors The BUGA 2011 takes place from April 15th to Same great XML content editor October 16th in Koblenz and is This page is based on a the first Federal Horticulture show structured content for articles in Rhineland Palatinate Such types can be defined by yourself for editing and rendering Flowers not only look nice structured contents Aug 2 2011 No some of them you can eat as EI we ff uri CL With just 5 lines of code we generated a simple navigation list that represents the correct sitemap structur
15. gt lt c otherwise gt amp c choose lt li gt a href lt cms link gt 1elem resour eNamel lt cms link gt classs Ss olass S elem navText 3 lt li gt clostorkEdolh Now style this class in your CSS In the workplace go to your module and edit the Alkacon Software GmbH Page 31 of 42 l Beginner s guide to template creation with OpenCms 8 Alkac on Version 1 0 Date March 5 2012 Q ed E nCms elements css style css Add some style information main navigation ul li display block float Ler margin 0 lox H 0 main navigation background url images gradient png repeat x scroll left top 003082 font weight bold height 24px main navigation a highlight background url images gradient png repeat x scroll left top B31B34 color SEFERERE main navigation a hover background url images gradient png repeat x scroll left top B31B34 main navigation ul li a display block height 20px padding 4px 20px 0 text decoration none color FFFFFF 5 11 1 4 Testing Now open the model page in your browser and check the main navigation Alkacon Software GmbH Page 32 of 42 1 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS re G Opencms od D English Welcome to OpenCms Release Notes Demo Deutsch Developer Demo Demo English Starting page Flowe
16. image url images bg head demo png24 png position relative padoing top 0px main padding 10px 0 7roorver 4 background image url images bg foot demo png24 png padding 10px margin top 10px Alkacon Software GmbH Page 18 of 42 l Beginner s guide to template creation with OpenCms 8 e WECM oos i P D2entms To link this style sheet to the template add the following line to the HTML head part of your template lt link href Comes link link weak system modules my first template resources css style css oems link rel stylesheet type text css gt lt link gt To complete the basic layout add two surrounding div containers to the HTML lt body gt part with ids window and page 5 7 Headincludes To enable includes of css from other modules without reediting the template you can use the lt cms headincludes gt tag in the HTML head part of the template Add the line cms headincludes type css to include style sheets needed for other modules resource types cms headincludes type javascript will include additional JavaScript for modules resource types By now the source code of your template should look like lt S page buffer none session false taglibs c cms fn gt lt html gt lt head gt lt title gt lt cms info property opencms title gt lt title gt cms enable ade link href lt cms link gt link weak syst
17. of 42 l Beginner s guide to template creation with OpenCms 8 e Alkacon Version o date March 5 2012 P pEnCms o ser vare navTexr 5olelem title c iset lt C2 it lt c if test S empty navText gt c if test S lfirst amp nbsp amp nbsp oc if a href lt cms link gt S elem resourceName lt cms link gt gt S navText lt a gt lt c set var first value false gt epp efusTorEach lt c set var navTextOnFolder value S navText lt c set var navText gt lt cms property name NavText gt lt c set gt lt c if test S empty navText or fn contains navText NavText j lt c set var navText gt lt cms property name Title gt lt c set gt SII lt c if test S lempty navText and navText ne navTextOnFolder gt ort teste sSi rirst amp nbsp amp nbsp SE E c out value S navText dor HP Save the file and switch to the template folder and edit your template JSP Replace the line lt img src lt path to gt breadcrumb navigation JPG gt With an include of the breadcrumb navigation lt cms sinclude file link weak system modules my first template elements menu breadcrumb navigation jsp gt Save and exit 5 11 2 1 Style Now add some styling to the breadcrumb navigation in style css breadcrumb navigation a color 444444 boreadcrumb navigation border bottom 1px solid B31B34 padding 3px 0 5px 20Dpx position relat
18. opze geo GLE TTT Opencms Welcome to OpenCms Release Notes Demo English Demo Deutsch Developer Demo Demo English template test 1 template test 2 template test 3 Starting page Flower Today Flower Dictionary f Flower Special Recent news Flower Extranet i Y j Only currently active navigation element gets highlighted Flower Search Flower Subscription template test 1 template test 2 tempiate test 3 starting page Same great XML content editor This page is based ona structured content for articles Such types can be defined by yourself for editing and rendering structured contents http Aocalhost 8080 opencms_8042 opencms flower en flower today Congratulations Your template is finished Alkacon Software GmbH Page 42 of 42
19. page This should look like e Beginner s guide to template creation with OpenCms 8 offs Jencms KH o Bi d Gei DEER Upencms 8 Demo Website template test 3 Bos QODencms Welcome to OpenCms Release Notes Demo English Demo Deutsch Demo English template test 1 template test 2 template test 3 Starting page Flower Today Fully functional side navigation styled like design reference Flower Dictionary Flower Special Flower Extranet Flower Search o Flower Subscription template test 1 template test 2 template test 3 Only currently selected page should be highlighted Same great XML content editor This page is based on a structured content for articles Such types can be defined by yourself for editing and rendering structured contents L http localhost 8080 opencms 8042 opencms flower en flower extranet Developer Demo Recent news BUGA 2011 in Koblenz Aug 4 2011 Check the source of the left navigation jsp and change the following line lt c when test fn startsWith cms requestContext uri elem resourceName gt To check for active element only lt c when test nav isActive elem resourceName gt Now everything should be fine Reload your test page Alkacon Software GmbH Page 41 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS H
20. su 2 2 com alkacon opencms v8 te M ah left navigation JPG the identified page SCH com slkacon opencms v8 te e 9 KB image Es cH saco page elements 5 Gy mwfirst tempiate Ja main navigation JPG 1 11 KB image C3 dasses C3 elements a formatters s0 resources Sy css right container JPG E 35 KB image Files to upload 6 files selected 117 KB i images e schemas G templates Add more Files Select images folder User Admin logged in at 1 18 12 2 10 PM from 127 0 0 1 E Eu 4 In the template JSP the central lt div gt lt img src lt path to gt body jpg gt lt div gt will be replaced by e A lt div gt for the main navigation div id main navigation gt lt img src path to main navigation jpg lt div gt e Adiv for the breadcrumb navigation div id breadcrumb navigation gt lt img src lt path to gt breadcrumb navigation jpg gt lt div gt e A surrounding div for the three columns div id main gt div id leftcolumn div div id centercolumn div div id rightcolumn div div e The left column turns to div id leftcolumn gt lt img src lt path to gt left navigation jpg gt lt img src lt path to gt left container jpg gt lt div gt Alkacon Software GmbH Page 21 of 42 l Beginner s guide to template creation with OpenCms 8 Alkac on V i on 1 0 n March 5 a 12 j e The center c
21. 2 40 PM from 127 0 0 1 Click Continue and name the container page myModelPage and click Continue In the following Properties dialog enter My First Model Page as title and then click the Advanced button and scroll down to the property template Here enter the path to your template system modules my ftirst template templates myFirst Template jsp and click finish Alkacon Software GmbH Page 10 of 42 En Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 LE ms sites default d K i S template JSP as jo wees template property 20 support 5 3 Sitemap configuration Now edit the sitemap configuration by opening the file content config and go to the tab Page models Here add a new page model and choose your new model page from the widget opening when the folder icon is clicked Alkacon Software GmbH Page 11 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 LE ms Admin Editing content config Mozilla Firctox Resource types Page models Property configuration Detail pages Disable all Click on the New button on the right side to activate this element Page content new default htm A page model 1 Page content new twocolumn html A page model 2 Disabled a Use as default IT Page A page model 3 Disabled r Use as defa
22. October 16th in Koblenz and is This page is based on a the first Federal Horticulture show structured content for articles in Rhineland Palatinate Such types can be defined by yourself for editing and rendenng Flowers not only look nice structured contents Aug 2 2011 e aren i A 2 j r uolet FTT ed ct http localhost 8080 opencms 8042 openams my first page with my first template M came af them vnn ran ost se sl 5 11 1 3 Styling oome refinement in the JSP will highlight the currently selected page or tree Before iterating over the navigation elements store the current page in a variable current Now differentiate if the iteration returns a page that is based in the tree of the currently selected top level navigation element or a different page using the lt c choose gt tag To do so a simple string comparison is made with fn startsWith String String Assign different classes highlight and default depending on the result The source of your main navigation jsp now should look like lt S page buffer none session false import org opencms jsp taglibs c cms fn gt lt cms navigation type forFolder startLevel 0 var nav gt c forEach items S nav items var elem gt c ohoose lt c when test fn startsWith cms requestContext uri elem resourceName gt lt c set var class gt highlight lt c set gt lt c when gt lt c otherwise gt lt c set var class gt default lt c set
23. a new page that uses your template Name it template test 1 and below create another template test 2 and then template test 3 so you have 3 navigation levels D O ze Container pages Type pages Function pages b Default page at 3 column layout left center nght with pre configured elements Two column page 2 column layout left center b Blank page 3 column layout without pre configured elements gt My First Model Page Select the template and add new page to sitemap by drag amp drop Then open the page template test 3 and check the navigation It is basically already working as it should but shows no tree levels Alkacon Software GmbH Page 37 of 42 Ib Beginner s guide to template creation with OpenCms 8 Version 1 0 Date March 5 2012 ODENCMS 39070 Sto O UpenCms 8 amp 8 Demo Website e ANE LL Opencms Welcome to OpenCms Release Notes Demo English Demo Deutsch Developer Demo Recent news Demo English template test 1 template test 2 template test 3 Starting page Flower Today Flower Dictionary Flower Special Flower Extranet Flower Search Flower Subscription template test 1 template test 2 template te qv Breadcrumb navigation displays the navigation tree levels correctly Starting page Same great XML content editor This page is based on a structured content for articles Such types can be
24. and footer parts from your local system Click OK Alkacon Software GmbH Page 7 of 42 f Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 1 OpenCms Workplace of Admin Mozilla Firefox Osencms Project Offline 9 Publish y Queue Site View Explorer Reload D Preferences Q Help Back Upload s Search New C Level Up Location system modules my first template resources images 5474 alkacon documenta un shared 5f sites Beg system f categorie 5 74 galleries 3 handler 354 login f lost found Ga modules pg com alkacon documentati mf com alkacon documentati un com alkacon documentati Click Upload un com alkacon opencms v8 i 30 com alkacon opencms v8 i f com alkacon opencms v8 un com alkacon opencms v8 Upload files Please use the Add more files button to append more files to the list of files to upload You can also deselect files by uncheck the cheboxes infront of the file items m4 com alkacon opencms v8 mf com alkacon opencms v8 f com alkacon opencms v8 i mf com alkacon opencms v8 3473 com alkacon opencms v8 fe com alkacon opencms v8 gg com alkacon opencms v8 Bag my first template i mg classes guy elements m3 formatters Bg resources i hga images mf schemas hfg templates Oa org opencms ade config
25. at get included into the template JSP In the JSP that should render the navigation the lt cms navigation gt tag is to be used The lt cms navigation gt tag provides access to the navigation information Alkacon Software GmbH Page 28 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon P D2entms The following attributes are available e var name of the variable e type the navigation type breadCrumb forFolder treeForFolder e StartLevel optional start level for navigation e endLevel optional end level for navigation e resource optional the description text of the user e param optional parameter for navigation With the lt cms navigation gt tag the OpenCms VFS navigation information can be accessed with Expression Language Example c set var navStartLevel gt lt cms property name NavStartLevel file search default 0 gt lt c set gt lt cms navigation type forFolder startLevel S navStartLevel var nav gt div id main navigation class gradient gt lt c if test s5 lempty Nav items gt lt c if gt 5 11 1 Main navigation Let s start with the main navigation In the workplace switch to the root site and go to your module system modules my first template Inside the elements folder create a new folder called menu Inside the folder elements menu create a JSP using the New option from the toolbar and name it main navigation jsp Af
26. bscription 11 already reached it I RARO It s still two and a half months and IO overall visitors The the BUGA2011 already reached its takes place from April e aim of 2 000 000 overall visitors The Rober 16th in Koblenz and j UGA 2011 takes place from April ederal Horticulture show 15th to October 16th in Koblenz and 3 6 3ist6nate is the first Federal Horticulture show L Li look nice in Rhineland Palatinate Target areas Flowers not only look nice Aug 2 2011 are outlined SE 4 f them you can ea S f the latest things in the No some of them you can eat as e is the use of edibk well One of the latest things in the get used not only in aute cuisine is the use of edible taurants but to add that flowers They get used not only in ething to one s dish i vegane restaurants but to add that Build with OpenCms The Open Source CMS provided by Alcertain something to one s dish zi Welcome to OpenCms Release Notes Demo English Add content option Demo Deutsch Developer Demo Demo English Starting page geom eee ee we ee ee ee ee ee eee eee ee ee eee eee eee ee ee Starting page L Flower Today sm ss geg gg ss ss ess ee er re er eee eer er er er ere ere ere er ee e Flower Dictionary Flower Special Flower Extranet Flower Search Flower Subscription Add the needed default content of desired resource type Starting page Same grea
27. c9 Link Validation Module folders CR Gallery Overview Search 9 Create Modulefolder ag Search Management Create templates subfolder T Scheduled Jobs Create elements subfolder Select all module folders amp Cache Administration Content Tools Create formatters subfolder v Workplace Tools Create resources subfolder Create schemas subfolder zg mg sg rg mg sg sg 3 uy uy uu u xu Create classes subfolder User Admin logged in at 1 17 12 2 40 PM from 127 0 0 1 Click OK to create the module with these settings owitch back to the Explorer view and go to the folder Isystem modules my first template templates and select New from the toolbar In the opening dialog select JSP Alkacon Software GmbH Page 4 of 42 f Beginner s guide to template creation with OpenCms 8 l Alkacon Version 1 0 Date March 5 2012 LE ms 7 OpenCms Workplace of Admin Mozilla Firefox Project Offline 9 Publish Y Queue Site 7 View Explorer G Back Upload s Search Pria C Level Up Location Teen DE EES Go to my first template 5 73 alkacon documentation Name ll x Vi Eos Ets Sen Select Explorer view Sen Select Explorer view view un shared if sites SCH system Zu categories f galleries 5 amp 4 handler seg login 3473 lost found Eg modules pg com alkacon documentati yg com alkacon documentati
28. defined by yourself for editing and rendering structured contents Side navigation working properly but is still flat OpenCms 8 Demo Content http ocalhost 8080 opencms _8042 opencms flower en template test 1 template test 2 template test 3 Ei 5 11 3 1 Indention To add the indention for the tree levels go back to the left navigation JSP and add some logic Within the iteration first read the current tree level with EL and store it in a variable currentLevel lt c set var currentLevel value S elem navTreeLevel Then define another variable oldLevel and compare it to currentLevel There are 3 possible Cases 1 currentLevel gt oldLevel 2 currentL evel oldLevel 3 currentL evel lt oldLevel depending on that the JSP should write additional lt ul gt and li and accordingly closing tags A possible implementation lt S page buffer none session false import org opencms jsp taglibs c cms fn gt lt cms navigation type treeForFolder startLevel 1 endLevel 5 var nav gt lt ul gt lt c set var oldLevel value c forEach items nav items var elem gt lt c set var currentLevel value S elem navTreeLevel o cHhoose lt c when test S empty oldLevelj c when c when testse S currentLevel gt oldhevel gt lt ul gt lt c when gt lt c when test currentLevel oldLevel gt lt 1i gt lt c when gt lt c when test oldLevel gt
29. e editing software m Welcome to OpenCms OpenCms 8 Demo Website Wonderful World of Flowers Release Notes G Opencms Template II Demo Template III Demo Starting page Wonderful W Flower Today orld of Flowers ul Q m Flower Dictionary Flower Special Flower Extranet Flower Search Wonderful World of Flowers presents the most spectacular and amazing stories about flowers from around the world Entertaining and with lots of useful information Let us take you into the adventurous world of flowers around the globe Starting page This page is based on a structured content for articles Such types can be defined by yourself for editing and rendering structured contents Overview e Below Flower Today you will find all up to date news and information about flower related events The Flower Dictionary provides in depth information about different flower types e If you already have access you can find additional information inside our extranet Flower Extra Most Recent News Happy Mother s Day May 8 2011 The modern Mother s EE Day is celebrated on Le various days in many gt more k Bizarre the new flower printer Dec 5 2010 V j Since 2010 first time a printer is existing which can print on more OpenCms 8 Containers The container page of OpenCms 8 allows you to create and manage contents simple and efficient by drag amp drop Build wi
30. e at top level What remains is building the correct links and some styling 5 11 1 2 Links Open the main navigation jsp again a extend the line of code where the folder names get written with a simple HTML link built of anchor tag lt a gt and the attribute href get s set with EL Replace the line li S elem navText li with lt li gt lt a hrefs s lelem resourceNsme 5S elem navText a Iri Alkacon Software GmbH Page 30 of 42 1 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS Even better is using the lt cms link gt tag here because it will check and correct the links with absolute URIs lt li gt lt a href lt cms link gt S elem resourceName lt cms link gt gt S elem navText lt a gt lt li gt Now save and exit Switch to sites default and reload your model page PAlKacorig piajn Demo Website G OpenCms Welcome to OpenCms Release Notes Demo English Demo Deutsch Developer Demo hir WI Navigation elements represent site structure with working links Demo English Starting pX Je Flower Today Flower Dichonary BUGA 2011 in Koblenz Flower Specal Aug 4 2011 Flower Extranet Flower Search Flower Subscription It s still two and a half months and the BUGA2011 already reached its aim of 2 000 000 overall visitors The BUGA 2011 takes place from April 15th to Same great XML content editor
31. e buffer none session false import org opencms jsp taglibs c cms fn gt lt cms navigation type breadCrumb startLevel 1 endLevel 1 var nav gt c forEach items S nav items var elem gt lt a href lt cms link gt S felem resourceName lt cms link gt gt Sicelem navText lt a gt o forRaoh This would already work but looking at our reference design the breadcrumb navigation has delimiting gt gt signs separating the navigation entries This would just be adding some HTML like amp nbsp amp raquo amp nbsp Alkacon Software GmbH Page 33 of 42 i En Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 LE ms Add this when writing a navigation element After iterating over the navigation entries the name of the Title property of the currently selected page has to be written as plain text without link The source of this simple breadcrumb navigation jsp should now look like lt S page buffer none session false import org opencms jsp taglibs c cms fn gt lt cms navigation type breadCrumb startLevel 1 endLevel 1 var nav param true fe c forEach items S nav items var elem gt a href lt cms lLink gt S felem resourceName lt cms 1link gt gt Siclem navText lt a gt amp nbsp amp raquo amp nbsp ao forBach lt cms property name Title Save and exit and switch to sites default and reload y
32. em modules my first template resources css style css cms link rel stylesheet type text css gt lt link gt lt cms headincludes type css gt lt head gt lt body gt lt div id window gt lt div id page gt div id header gt lt cms container name headercontainer type header maxElements 1 gt lt div gt lt div gt lt img src lt path to gt body jpg gt lt div gt lt div id footer gt lt cms container name footercontainer type footer maxElements 1 gt lt div gt lt div gt lt div gt Alkacon Software GmbH Page 19 of 42 Beginner s guide to template creation with OpenCms 8 Version 1 0 Date March 5 2012 LE ms lt body gt lt html gt 5 8 Identify more template parts Now that we finished the Header and Footer part of the template let s check the HTML body section for more building blocks that can be reused or potentially generated automatically Recurring elements in the page template will be the navigation elements as this will basically be needed on every page of the website but will differ slightly on every single page Header Main navigation Breadcrumb navigation Left navigation Now that we identified more elements let s cut the dummy image into pieces and replace them later on The body jpg pieces are called main navigation breadcrumb navigation left navigation left container center container right container and you can
33. emo En Des Galleries Categories Advair Starting Tithe Ascending D Flower Flower H A Article A simple artide that contains multiple paragraphs with optional images Flower Flower E Event e g A simple event with a descripbon a start date and location Flower Flower News e N A simple news content with a text a publication date and author r Twitter Feed E shows the newsfeed of a Twitter user This i5 my This ts my Info Box Small text snippets to be displayed in the side columns Configurable List Login To I L Displays a dynamic list of articles news events and other content Logged Header Footer configuration Admin a C Configures the header and footer area of the template M M ove to p a g e a Dynamic Function f Special elements that progra Cm by drag amp drop Element Group A group of content elements that shared between pages zg Inheritance group zz Choose Header Footer configuration from the available resource types While dragging the new Header Footer configuration to the page the target areas will be outlined in red When creating a new Header Footer you should drag the element to the footer container oince the new Header Footer configuration is still empty it will appear as a thin transparent element on your page with an edit button t
34. ev demo c Oy org opencms dev demo Lg org opencms editors ckec User Admin logged in at 1 18 12 9 26 AM from 127 0 0 1 zc e 2 t E Inside the just created css folder click New again and select Text file In the following dialog name it style css It is assumed that you know about CSS otherwise please find more details on CSS at http www w93 org Style CSS The CSS should at least contain some styling information for the page layout background images font size Alkacon Software GmbH Page 17 of 42 l Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS Example CSS html font size 12px textarea pre tt code ftont family Courier New Courier monospace body padding 10px 0 font family Verdana Helvetica Arial sans serif font size 5 00 height 1 hl h2 h3 h4 h5 he font weight bold margin 0 0 2px Os hl font size 24px h2 T font size 20px margin top 6px hs font size l9px margin top px h4 font size 16px margin top 8px h5 font size L4px margin top 8px he font size 14px font style italic margin top sox pt line height 16px margin top 3px margin bottom 3px ul Ol dl line height l15px margin l0px 0 10px 10px li margin left 15px line height 15px window width 960px margin O auto text align left i fheader background
35. ive Now switch to your model page and reload it in your browser Alkacon Software GmbH Page 35 of 42 i En Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS ee G Opencms Welcome to OpenCms Release Notes Demo English Demo Deutsch Developer Demo Recent news P Container contents Model folder My First Model Page Starting page Flower Today Flower Dictionary Flower Specal Fully functional Flower Extranet G Fees breadcrumb navigation Flower Subscription matches the design Starting page Same great XML content editor This page is based on a structured content for articles Such types can be defined by yourself for editing and rendering structured contents The breadcrumb navigation looks like in our design reference 5 11 3 Side Navigation Now what s left is the side navigation which typically is structured like an explorer view of a folder tree The side navigation should only show resource below the navigation entry selected in the main navigation and only unfold the branch of the currently selected leaf Since the code of the main navigation is a good starting point in the workplace go to your module and in the elements menu folder and copy the main navigation jsp to a new file side navigation jsp Edit the side navigation jsp and change the attributes of the lt cms navigation gt tags Set type t
36. m org opencms ade contain 1g org opencms ade editpro 44 org opencms ade gallerie fy org opencms ade publish org opencms ade sitemar gy org opencms ade upload org opencms dev demo c py org opencms dev demo afa org opencms editors ckec Y ai gt J body jpg 116 KB image header body and e ES footer jpg footer image parts 11 KB image 4 header jpg M Ra kg image Files to upload 3 files selected 139 KB Add more Files Cancel Click Add more Files User Admin logged in at 1 17 12 2 40 PM from 127 0 0 1 4 3 Create a simple HTML page A very simple HTML version would be something like html lt head gt lt title gt Wonderful World of Flowers lt title gt lt head gt lt body gt lt div gt img src path to header jpg lt div gt lt div gt img src path to body jpg div div img src path to footer jpg lt div gt lt body gt lt html gt You can copy this to your template and try it out Switch to the folder were you created the template JSP and right click the file From the context menu select Edit source code Copy the given HTML example into your JSP and replace the placeholders path to by the path to your image parts which would in fact be something like opencms opencms system modules my first template images Save and cl
37. n an OpenCms 8 Demo E opencms 8042 opencms g P Welcome to OpenCms Bb opencms 8042 opencems index html gt Release Notes opencms 8042 opencms release EY Demo English opencms_8042 opencms flower en S h ow menu 2 Demo Deutsch e A opencms_8042 opencms flower de o pt ion Developer Demo opencms_8042 opencms dev demo ei my first page with my first template all opencms_8042 opencms my first page with my first template v gt Show page P Qt Properties Create child page Show page option in the context menu T Create sub sitemap of Remove from sitemap Availability Refresh i Delete H Lock Report 5 5 Add Header Footer configuration The page appears in your browser and at first sight it contains just the image of the body part But now select the Add option from the ADE toolbar and add a Header Footer configuration to your page by drag amp drop Alkacon Software GmbH Page 14 of 42 n Beginner s guide to template creation with OpenCms 8 Version 1 0 Date March 5 2012 LE ms Wonderful World of Flowers Mozilla Firefox Si Deaktivieren M Cookies Keine CSSFehier Formdare G3 Grafiken Qj informatonen L Verschiedenes p Hervorheben H GroBe SY Extrase Quelltext Optonen LJ Wonderful World of Flowers HOB 7 amp Add content option from the ADE toolbar D
38. n 1 0 Date March 5 2012 ODENCMS 5 9 The lt cms container gt tag The parts of the left center and right container should now be turned into areas where the content manager can drop elements This is very easy in OpenCms 8 Just replace the images left container center container and right container with the lt cms container gt tag and assign them the attributes name type width and if you like maxElements In the template JSP the following lines have to be replaced e Left container lt img src lt path to gt left container jpg gt Turns to lt cms container name leftcontainer type left width 230 maxElements 8 gt e Center container lt img src lt path to gt center container jpg gt Turns to lt cms container name centercontainer type center width 450 maxElements 8 detailview true gt e Right container lt img src lt path to gt right container jpg gt Turns to lt cms container name rightcontainer type right width 230 maxElements 8 gt 5 9 1 Testing Open your model page from sites default content new in the browser and add some new content from the preinstalled resource types like article event news etc _ ogo L4 ODencms Welcome to OpenCms Release Notes Demo tngitsh Demo Deutsch Developer Demo Select Add content option Demo English Starting page Grr New article Flower TodayPlease edit the article tegt a o CEET
39. o treeForFolder and startLevel to 1 and endLevel to a number that represents the navigation levels in total lt S page buffer none session false import org opencms jsp taglibs c cms fn gt lt cms navigation type treeForFolder startLevel 1 endLevel 5 var nav gt lt ul gt c forEach items nav items var elem gt c choose lt c when test fn startsWith cms requestContext uri elem resourceName gt lt c set var class gt highlight lt c set gt lt c when gt lt c otherwise gt lt c set var class gt default lt c set gt lt c otherwise gt lt c choose gt RII Alkacon Software GmbH Page 36 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS lt a href lt cms link gt elem resourceName lt cms link gt classs S icla ss 5S elem navText a lt li gt lo storkaoh lt ul gt To try it replace the placeholder image in the template JSP lt img src lt path to gt left navigation JPG gt with a JSP include and add another surrounding div for styling reasons div id left navigation gt cms include file link weak system modules my first template elements menu left navigation jsp gt lt div gt The side navigation does not work correctly when opening the model page since the resource type content_folder does not get listed in the navigation Open the sitemap editor and create
40. o the right which might be masked by the ADE toolbar on top Click the edit button of the new element and choose the edit option to create the header and footer parts of your template in the WYSIWYG editor Alkacon Software GmbH Page 15 of 42 1 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 ODENCMS Editor content config c 00001 html Enter title for the Edit the HTML La nglsh sl X ME ot configuration file source Tithe my first header footer configuration E S SE Insert logo from Insert logo from template folder template folder Enter footer text and links User Admin logged in at 1 18 12 9 26 AM from 127 0 0 1 When adding images logos background to the Header Footer parts please make sure that the files reside within your template module e g system modules my first template resources images Of course you can also edit the HTML source code directly Click save and exit On saving the model page the footer should appear the way you designed it in the editor From the Add content option of the ADE toolbar now double click the type Header Footer configuration and drag another instance of your configuration e g my first header footer configuration to the header area of the model page It should appear the way it was designed in the editor To ensure that you could only add a single header and footer to a page you should
41. ogin C 9 Extended folder ea detras C 9 structured contents SC u Zu com alkacon documentati C 9 other options un com alkacon documentati 3 Folder m3 com alkacon documentati C Ei Container BB Select Folder Bg com alkacon opencms v8 C fil Element Group i m com alkacon opencms v8 C A f com alkacon opencms v8 HTML Redirect m3 com alkacon opencms v8 C Gi Inheritance group j Sei com alkacon opencms v8 C ER Inheritance configuration Bg com alkacon opencms v8 C Di text file m3 com alkacon opencms v8 C e m4 3 com alkacon opencms v8 JSP i fy com alkacon opencms v8 C 893 External Link g com alkacon opencms v8 C A Upload new file i Gy com alkacon opencms v8 Bg my first template elf classes Continue e Cancel a elements 3f formatters gg resources 3 schemas Ca templates org opencms ade config org opencms ade contain org opencms ade editpro org opencms ade gallerie org opencms ade publish org opencms ade sitemar org opencms ade upload org opencms dev demo c org opencms dev demo org opencms editors ckec a org opencms editors edite b POBPEEDDE a c l ig E l c d E l D i 4 User Admin logged in at 1 17 12 2 40 PM from 127 0 0 1 In the following dialog enter the folder name images and click Finish After you created the images folder click on the Upload icon from the toolbar and in the opening multiple file upload dialog select the header body
42. olumn turns to lt div id centercolumn gt lt img src lt path to gt center container jpg gt lt div gt e The right column turns to lt div zde rightoolumn lt img src lt path to gt right container jpg gt lt div gt In total this turns to lt div id main navigation gt lt img src lt path to gt main navigation jpg gt lt div gt div id breadcrumb navigation gt lt img src lt path to gt breadcrumb navigation jpg gt lt div gt lt div id main gt lt div id leftcolumn gt lt img src lt path to gt left navigation jpg gt lt img src lt path to gt left container jpg gt lt div gt lt div id centercolumn gt lt img src lt path to gt center container jpg gt lt div gt div id rightcolumn lt img src lt path to gt right container jpg gt lt div gt lt div gt Replacing the former lines div lt img src lt path to gt body jpg gt lt div gt pEnCms To position the left center and right column correctly add some styling to your templates CSS leftcolumn Float lert width 240px rightcolumn flostt Ligne width 240px centercolumn margin left 240px margin right 240px width 470px The model page should still look the same Alkacon Software GmbH Page 22 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon Versio
43. ose the edited file and open it in your browser and should look like the given design Alkacon Software GmbH Page 8 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon P pEnCms 5 Template creation 5 1 Create a simple template To make this static HTML file a simple template there is only a few steps Open your template file and copy the following page taglibs c cms fn Ss to your first line and add the tag cms enable ade to the head part of your JSP Replace the title and read the title property of the current page that gets rendered by the template lt title gt lt cms info property opencms title title Make the header and footer part of your template work with OpenCms 8 ADE and add ids called header and footer to the surrounding divs And add Instead of using the extracted images as header and footer substitute them with the lt cms container gt tag of type header and footer Now your template should look like lt S page taglibs c cms fn gt lt html gt lt head gt lt title gt lt cms info property opencms title gt lt title gt lt cms enable ade gt lt head gt lt body gt div id header gt lt cms container name headercontainer type header gt lt div gt lt div gt lt img src path to body jpg div div id footer gt lt cms container name footercontainer type footer div lt
44. our model page It should look like ez OpenCms 8 Demo Website AI Um G Opencms Welcome to OpenCms Release Notes Demo English Demo Deutsch Developer Demo 7 NavText NavText My First Model Page Flower Today Flower Dictionary i BUGA 2011 in Koblenz Flower Special A working M 4 2011 Flower Extranet breadcrumb Flower Search navigation prototype Flower Subscription Starting page Same great XML content editor This page is based ona structured content for articles Such types can be defined by yourself for editing and rendering structured contents Of course this is not perfect If the navText property is not set you could of course use the title property and if the selected item is a folder and not a page this will result in an redundant gt gt A fully functional breadcrumb navigation with some additional logic would look like lt S page buffer none session false taglibs c cms fn gt lt c set var navStartLevel gt lt cms property name NavStartLevel file search default 0 gt lt c set gt cms navigation type breadCrumb startLevel navStartLevel 1 endLevel 1 var nav param true p set varsS first value true 75 c forEach items nav items var elem gt lt c set vars navText 5S lelem navText c set c if test S empty navText or fn contains navText NavText gt Alkacon Software GmbH Page 34
45. pe Again in larger projects this might have been outsourced and be done by some web design guys This would be a fully functional static HTML version of a model page that needs to be turned into a JSP template Here is just a short introduction since most of the HTML basic output is included in chapter 5 Template creation 4 1 Identify static parts Let s disassemble the template design step by step and find out what parts and layout concepts will be reused on every single page Alkacon Software GmbH Page 5 of 42 Wm Beginner s guide to template creation with OpenCms 8 P Version 1 0 Date March 5 2012 ODENCMS Wonderful World of Flowers iempiate ili Demo Template III Demo Starting page Starting page Wonderful World of Flowers r Recent News Flower Today Flower Dictionary E Flower Special uu A g Flower Extranet Flower Search Wonderful World of Flowers presents the most spect and amazing stories about flowers from around the world rtaining and starting page with lots of useful information Let us take you into the adventurous P d vg mm world of flowers around the globe This page is based on a structured content for articles Such types can Overview be defined by yourself for editing and rendering structured contents Below Flower Today you will find all up to date news and information about flower related events The Flower Dictionary provides in depth informa
46. r Today e a x Main navigation with dci cQ E Flower Special links and styling Aug 4 2011 Flower Extranet Flower Search Flower Subscription It s still two and a half months and the BUGA2011 already reached its aim of 2 000 000 overall visitors The BUGA 2011 takes place from April 15th to Same great XML content editor October 16th in Koblenz and is This page is based on a structured content for articles Such types can be defined by yourself for editing and rendering structured contents http Aocalhost 8080 opencms 8042 openams fiower en 5 11 2 Breadcrumb navigation In the workplace go to your module and open the folder elements menu From the workplace toolbar select the New option and select the resource type JSP Name the new file breadcrumb navigation jsp and click finish Right click the file breadcrumb navigation jsp and select edit As you have seen in construction of the main navigation a simple navigation JSP consist of the following e Page directive with short taglibs e cms navigation tag to collect the elements of the navigation e Iteration over the navigation elements e Aproperly formatted HTML output of the navigation elements This time in the lt cms navigation gt tag set the attribute type to breadCrumb Set startLevel to 1 to prevent the root getting listed and endLevel to 1 so the entire tree gets searched A minimal navigation to start with would be lt S pag
47. t XML content editor This page is based on a structured content for articles Such types can be defined by yourself for editing and rendering structured contents ms e gg ss ss ss sg ss sg sg sg ss ss ss gg ss e Drag amp drop existing content elements see eee ee ee eee ee se L e gess es gg eee seg gg e bus zs sees ss nsmgss ss sms ss msg sms BUGA 2011 in Koblenz Aug 4 2011 It s still two and a half months and the BUGA2011 already reached its aim of 2 000 000 overall visitors The BUGA 2011 takes place from April 15th to October 16th in Koblenz and is the first Federal Horticulture show in Rhineland Palatinate Flowers not only look nice Aug 2 2011 EU No some of them you can eat as well One of the latest things in the haute cuisine is the use of edible flowers They get used not only in one ts but to add that DpenCms 8 Demo Vas ap to one s dish This demo content shows how features of OpenCms 8 are used to create great looking websites emo Content shows hc w the Build with OpenCms The Open Source CMS provided by Alkacon Software The OpenCms Experts 5 10 1 Style When you look at our original design the model page still lacks some styling so edit the style css at system module my first template resources css and add some styling for the box elements Alkacon Software GmbH Page 26 of 42 l
48. tem modules my first template resources images main navigation JPG gt lt div gt div id breadcrumb navigation img src opencms 8042 opencms system modules my first template resources images breadcrum b navigation JPG div lt div 1d main div id leftcolumn gt img src opencms 8042 opencms system modules my first template resources images left navigation JPG gt lt cms container name leftcontainer type left width 230 maxElements 8 gt lt div gt div id rightcolumn gt lt cms container name rightcontainer type right width 230 maxElements 8 gt lt div gt lt div id centercolumn gt lt cms container name centercontainer type center width 450 maxElements 8 detailview true gt lt div gt lt div gt div id footer gt lt cms container name footercontainer type footer maxElements 1 gt lt div gt a iy lt div gt lt body gt lt html gt Alkacon Software GmbH Page 24 of 42 1 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 LE ms 5 10 Add content to the model page Now you can drop some elements to the model page to make it look like the given design Since you are editing the model page these elements will be present on every new page you create in the sitemap editor using this model It is assumed that some content has been created already About creating new content read the
49. terwards right click the new JSP and select Edit sourcecode from the context menu We ll start with a very easy example how to use the lt cms navigation gt tag and then refine our JSP until the navigation works properly 5 11 1 1 Build a simple list First add the page directive to include the basic taglibs page buffer none session false import org opencms jsp taglibs c cms fn gt Next line will be the lt cms navigation gt tag with the following attributes e Type forFolder which will collect all resource of the type folder inside the root folder P This is the default navigation level 0 if not declared otherwise by the attribute startLevel e var nav the collection results are accessible through the variable nav cms navigation type forFolder var nav gt Next we generate some unformatted output by iterating over the collection stored in the variable nav using EL Each entry is passed to a variable elem and the navText property gets read using EL To separate the navigation entries we just put it in a HTML list lt li gt element Alkacon Software GmbH Page 29 of 42 Beginner s guide to template creation with OpenCms 8 Alkacon Version 1 0 Date March 5 2012 LE ms This simple example reads 8page buffer none session false import org opencms jsp taglibs c cms fn gt cms navigation type forFolder var nav gt c forEach items S nav items var elem
50. th OpenCms The Open Source CMS provided by Alkacon Software The OpenCms Experts 3 Create a module Create a module and give it a proper name e g my first template In the OpenCms workplace switch to the Administration view and select Module Alkacon Software GmbH Page 3 of 42 n Beginner s guide to template creation with OpenCms 8 WP Version 1 0 Date March 5 2012 LE ms Management In the Module Management click on New Module As package name enter my first template and as module name My First Template In the section Module folders check all the checkboxes important template JSPs must be placed in the template folder OpenCms Workplace of Admin Mozilla Firefox N E ell xj Project Offline Publish Y Queue Site View Administration d AJ Reload 2 Preferences Q Heir O Ext 02 ms Administration View gt Module Management gt New Modu 3s z is EO ii New Module CA Select Administration Click here to create a new module Module information Package name P mnyfestiempiste Jmm Module name P How to creaga simple mn O C view Package name Module description Administration Module version Til Project Management Module group P 3 3 Publish Queue Action class SE Account Management 1 2 Database Management Author information Module Management Author name T File History Author email
51. tion about different flower types If you already have access you can find additional information inside our extranet Flower Extra OpenCms 8 Containers The container page of OpenCms 8 allows you to create and manage contents simple and efficient by drag amp drop You could of course make a more detailed analysis of static parts and Identify more template parts 4 2 Split image Chopping the image into 3 pieces would be a first approach You can do this using a standard image editing software The parts would be named header body and footer You can try this and upload them to your OpenCms installation Go to the resources folder of your newly created module my first template and click the New icon from the toolbar Create a new folder by select the option Folder and then click Continue Alkacon Software GmbH Page 6 of 42 n Beginner s guide to template creation with OpenCms 8 D Version 1 0 Date March 5 2012 LE ms 1 OpenCms Workplace of Admin Mozilla Firefox m Project Offline Publish Y Queue Site View Explorer J Reload 2 Preferences Q Help O Exit ofa O Back upload Search a New Level Up Location d alkacon documentation 20g shared 10 x system modules my first template resources New 343 sites SCH system select the new resource type Gf categories l2 Jalanan Y Show description ig handler I Name GC l
52. ules org opencms ade sitemap pages sitemap Isp c Es gt amp we gods d ont Jr ma civis Minen Diodor Quim Queer Wido lbs insu Someta dive ror i Sitemap Editor fnpstemfneduanforgepanc Dt OO ob 86 Welcome to OpenCms http localhost 8080 opencms 8042 opencms en a5 OpenCms 8 Demo MO opencms_8042 opencms ei Welcome to OpenCms SB opencms 8042 opencms index html Release Notes opencms_8042 opencms release Demo English opencms 8042 opencms flower en opencms 8042 opencms flower de Rename your page and open it from the context menu Developer Demo EN opencms 8042 opencms dev demo 2 rw first page with my first templat al opencms 8042 opencms my first page with my first template MTITITHTIPTUTMPEmImmImmPaPMEUPEImEUIIPIPETUITPTUETHIHITIUPIPPTITUPUT Alkacon Software GmbH Page 13 of 42 M gt Beginner s guide to template creation with OpenCms 8 gt Version 1 0 Date March 5 2012 LE ms Sitemap Editor system modules org opencms ade sitemap pages sitemap jsp Mozilla Firefox n E wll x Date Bearbeten Anscht Chronk Lesezechen Extras Hilfe QO peskeveren B Cookes A Keine CSS Fehier Formdare e Grafiken Qj informationen L Verschedenes a Hervorheben H Gr be Y Extrase Quelltext I Optionen Sitemap Editor system modules org openc Dt aS ke Welcome to OpenCms http localhost 8080 opencms 8042 opencms le
53. ult Page e A page model 4 Disabled r Use as default ls r Click folder icon Select your model page User Admin logged in at 1 17 12 2 40 PM from 127 0 0 1 Click Save and Exit 5 4 First test Now open the Sitemap Editor and click the Create page icon The opening dialog offers all model pages for creating a new page Select your newly created My First Model Page and move it to your sitemap structure by drag amp drop Alkacon Software GmbH Page 12 of 42 i Beginner s guide to template creation with OpenCms 8 7 Version 1 0 Date March 5 2012 LE ms Select Create page option Container pages Type pages Function pages Default page HI 3 column layout left center right with pre configured elements ai Two column page Hi 2 column layout left center is Blank page Hi 3 column layout without pre configured elements My First Model Page Se Select your new model page and add it to the sitemap by drag amp drop Now rename your new page in the sitemap editor and open it afterwards from the context menu on the right side of the element bar choosing Show page Sitemap Editor system modules org_opencmssde_sitemap pages sitemap jsp Mozilla Firefox ell sl Date esbeiten Ansicht Chronk Lesezexhen Extras tife e gt local ost 8080 opencms 8042 0pencms system mod

Beginner`s guide to template creation with OpenCms 8

Contents

Download Pdf Manuals

Related Search

Related Contents