Upload
dotcms
View
1.385
Download
3
Embed Size (px)
DESCRIPTION
In this presentation from dotCMS Boot Camp 2010 you will learn about widgets and how to design them. Includes a step-by-step process of how to build a widget following dotCMS best practices.
Citation preview
Super Widgets… (planning for flexible and reusable
pulls)
Arnaud Romary Maria Bouza
Quick Overview
• Purpose • Common Uses
• Widget vs. ApplicaBon Widget
• Macro Widget: Photo Carrousel
• Super Widget: News LisBng
• QuesBons
Widgets: The Basics
– Purpose: • Minimize redundant code
• Facilitate creaBon of pulls for content editors UI • Permissioning (widgets vs. web page content)
– Common Uses (default widgets)
• Content LisBngs • Detail pages • Random pulls
• Macros UI
Widgets: The Basics cont. – Mechanism:
• Added on any container • Parameters: fields on widget
structure • Widget Code: (VTL widget structure, nested for paginaBon
Types of Widgets – Simple Widgets vs. Custom Widgets
• Simple Widget: forms, detail page, sitemap
• Custom Widget: used for pulls, reusable via parameters
Simple Widget: News Detail Widget: News LisAng
When to create a widget
– Rule of thumb: 1 widget structure per content structure • Default content structures & widgets • Accelerators and addiBonal structures
News Item News LisBng
Widget
Need to Create Content for your
Site?
Need to Pull Content on the Front-‐End?
Structure
Purpose
Uses
• Home Page News • Top Headlines • Topic-‐Specific Latest News
When to create a widget
– Checklist before creaBng a widget • Wireframes as foundaBon for structures
• IdenBficaBon of all dynamic pulls • DefiniBon of parameters
Widget Structures
Wireframes Content Structures
Widgets
What pages are displaying
profiles
What fields make up a profile
(required vs. opBonal)
Which parameters give flexibility to fit all pages
Example: Employment Profile
Create the pulls for pages
displaying profiles
Example 1: News LisBng Widget Structure
– Overview • Uses and versaBlity • Default widget structure
– Fields • General • Forma[ng
• Detail page URL • Custom message when 0 results
• Filters
Example 2: Photo Carrousel
• Overview • Leveraging macro vs. VTL
• Not Bed to a content structure
• Basic fields • Macro parameters
• PotenBal addiBonal fields
• Working example
Recap
• Purpose and advantages of using widgets • Common uses for widgets
• Differences between simple and custom widget structures
• Super Widget: News LisBng
• Macro Widget: Photo Carrousel