Advanced Liferay Theming

spanflockInternet και Εφαρμογές Web

24 Ιουν 2012 (πριν από 5 χρόνια και 1 μήνα)

536 εμφανίσεις

Advanced Liferay Theming
Nate Cavanaugh
Thursday, October 14, 2010
Embedding a portlet
$theme.runtime(“56_INSTANCE_ABCD”)
Thursday, October 14, 2010
Embedding a portlet
Why might this be useful?
$theme.runtime(“56_INSTANCE_ABCD”)
Thursday, October 14, 2010
Embedding a portlet
Why might this be useful?

Shared piece of content or application across
pages of a community
$theme.runtime(“56_INSTANCE_ABCD”)
Thursday, October 14, 2010
Embedding a portlet
Why might this be useful?

Shared piece of content or application across
pages of a community
$theme.runtime(“56_INSTANCE_ABCD”)

Footer

Search bar

Sidebar
Thursday, October 14, 2010
Querying the service layer
$serviceLocator.findService(“...”)
Thursday, October 14, 2010
Querying the service layer
Why might this be useful?
$serviceLocator.findService(“...”)
Thursday, October 14, 2010
Querying the service layer
Why might this be useful?

Access to Liferay’s services outside of a
specific application
$serviceLocator.findService(“...”)
Thursday, October 14, 2010
Querying the service layer
Why might this be useful?

Access to Liferay’s services outside of a
specific application
$serviceLocator.findService(“...”)

Displaying a list of images

Embedding a cross-site CSS Template

Querying content such as blogs, message board posts, etc
Thursday, October 14, 2010
Querying the service layer
#set($imageService = $serviceLocator.findService
("com.liferay.portlet.imagegallery.service.IGImageLocalService"))
#set($images = $imageService.getImages($group_id, 0))
#foreach($image in $images)
<img src="/image/image_gallery?img_id=${image.smallImageId}&amp;igImageId=$
{image.imageId}&amp;igSmallImage=1" />
#end
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
New features in Liferay 6 themes
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
New features in Liferay 6 themes

HTML5
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
New features in Liferay 6 themes

HTML5

AlloyUI
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
New features in Liferay 6 themes

HTML5

AlloyUI

Consistent and richer form elements
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
New features in Liferay 6 themes

HTML5

AlloyUI

Consistent and richer form elements

Site-wide breadcrumbs
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
New features in Liferay 6 themes

HTML5

AlloyUI

Consistent and richer form elements

Site-wide breadcrumbs

Dockbar
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
New features in Liferay 6 themes

HTML5

AlloyUI

Consistent and richer form elements

Site-wide breadcrumbs

Dockbar

Consistent component styling
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
A note: Every theme is unique
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Why should you build with the _diffs directory
A note: Every theme is unique
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Why should you build with the _diffs directory

Automatically get new improvements
A note: Every theme is unique
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Why should you build with the _diffs directory

Automatically get new improvements

Automatically get bug fixes and security
patches
A note: Every theme is unique
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Why should you build with the _diffs directory

Automatically get new improvements

Automatically get bug fixes and security
patches

Minimize code maintenance
A note: Every theme is unique
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Handling CSS
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Handling CSS

Don’t overwrite main.css
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Handling CSS

Don’t overwrite main.css

Overwrite custom.css and do custom imports
in there
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Common components that have been touched
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Common components that have been touched

Dock
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Common components that have been touched

Dock

Tabs
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Common components that have been touched

Dock

Tabs

Dialogs
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Less common components
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Less common components

Drag and drop styles of portlets
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Less common components

Drag and drop styles of portlets

Resize handles
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Less common components

Drag and drop styles of portlets

Resize handles

Treeviews
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Less common components

Drag and drop styles of portlets

Resize handles

Treeviews

Datepickers
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Major code changes
5.x
6.x
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

.lfr-grid
Major code changes
5.x
6.x
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

.lfr-grid
Major code changes
5.x
6.x

.portlet-layout
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

.lfr-grid

.lfr-column
Major code changes
5.x
6.x

.portlet-layout
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

.lfr-grid

.lfr-column
Major code changes
5.x
6.x

.portlet-layout

.portlet-column
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

.lfr-grid

.lfr-column

#content-wrapper
Major code changes
5.x
6.x

.portlet-layout

.portlet-column
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

.lfr-grid

.lfr-column

#content-wrapper
Major code changes
5.x
6.x

.portlet-layout

.portlet-column

#main-content
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

.lfr-grid

.lfr-column

#content-wrapper
Major code changes
5.x
6.x

.portlet-layout

.portlet-column

#main-content

#content
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
Major code changes
5.x
6.x
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

javascript/javascript.js
Major code changes
5.x
6.x
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

javascript/javascript.js
Major code changes
5.x
6.x

js/main.js
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

javascript/javascript.js

dock.vm
Major code changes
5.x
6.x

js/main.js
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

javascript/javascript.js

dock.vm
Major code changes
5.x
6.x

js/main.js

n/a
Thursday, October 14, 2010
Upgrading a theme to Liferay 6
New macro additions
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

#breadcrumbs()
New macro additions
Thursday, October 14, 2010
Upgrading a theme to Liferay 6

#breadcrumbs()

#dockbar()
New macro additions
Thursday, October 14, 2010
Custom Styling Per Page
$page.getExpandoBridge().getAttribute(“cssClass”)
Thursday, October 14, 2010
Custom Styling Per Page
Why might this be useful?
$page.getExpandoBridge().getAttribute(“cssClass”)
Thursday, October 14, 2010
Custom Styling Per Page
Why might this be useful?

Share styling only a few pages across a
community
$page.getExpandoBridge().getAttribute(“cssClass”)
Thursday, October 14, 2010
Custom Styling Per Page
Why might this be useful?

Share styling only a few pages across a
community
$page.getExpandoBridge().getAttribute(“cssClass”)

Allow non-developers to affect styling

Can be used for
any
attribute
Thursday, October 14, 2010