the one thing to list everything

66
pt_extlist The one thing to list everything

Upload: daniel-lienert

Post on 15-Jan-2015

841 views

Category:

Technology


4 download

DESCRIPTION

Almost every web site that delivers dynamic content has one or more listings of all kinds of stuff, e.g. news articles on news pages or procucts within an online shop. Many hours of web development are kind of wasted with programming stuff like pagers, sorting and filters over and over again. pt_extlist tries to fulfill these requirement in a generic approach. Lists of any database records you keep within your TYPO3 instance or even on external databases can be set up easily using TypoScript and hence be generated by Integrators without writing a single line of PHP code. Once configured, a list can be put on any page using content elements. Fluid templating makes it easy to adapt the look and feel of all elements. In this talk you will learn how to set up prototypes for web applications much faster than your competitors and speed up development by re-using existing tools. Creating lists will never be the same once you started using this extension!

TRANSCRIPT

Page 1: The one thing to list everything

pt_extlistThe one thing to list everything

Page 2: The one thing to list everything

Who we are

Michael KnollKarlsruhe, GermanyWorking at punkt.de

Daniel LienertFrankfurt, GermanyFreelancer

Page 3: The one thing to list everything

Outline of our talk

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

Page 4: The one thing to list everything

Motivation - Lists, lists, lists...

Page 5: The one thing to list everything

Lists, lists, lists...

Page 6: The one thing to list everything

Lists, lists, lists...

Page 7: The one thing to list everything

Conclusions

• „Lists are everywhere“• Having a generic tool for generating lists– enables rapid prototyping– enables faster Time-To-Market for projects

– lets developers concentrate on more interesting stuff

can save time & money

Page 8: The one thing to list everything

Lists distilledOn our way to a generic list generator

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

Page 9: The one thing to list everything

Main parts of a listRows, Columns, Cells

Page 10: The one thing to list everything

„What is a list?“

1. It‘s a collection of rows

Page 11: The one thing to list everything

„What is a list?“ (Cont‘d)

2. It‘s a collection of columns

Page 12: The one thing to list everything

„What is a list?“ (Cont‘d)

3. It‘s a collection of cells

Page 13: The one thing to list everything

„What is a list?“ (Cont‘d)

4. It can have a set of headers

Page 14: The one thing to list everything

Lists are not staticSorting, Filtering, Paging & Aggregating

Page 15: The one thing to list everything

Data Sources

Connect to multiple data sources like MySQL, solr, …

Data „Magic“

Page 16: The one thing to list everything

Sorting

It should be possible to sort the rows of a list

Page 17: The one thing to list everything

Filtering

It should be possible to filter rows

Page 18: The one thing to list everything

Paging

It should be possible to limit number of rows per page

Page 19: The one thing to list everything

Aggregating

It should be possible to aggregate columns

Page 20: The one thing to list everything

Requirements

• A (generic) list generator should be able to

• use multiple data sources

• render rows, cells & headers

• sort, filter & limit results

• aggregate data

Page 21: The one thing to list everything

Architecture

pt_extlist

pt_extbase

Extbase / Fluid

TYPO3

Page 22: The one thing to list everything

How to use pt_extlist

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

Page 23: The one thing to list everything

pt_extlist – Basic Features

Introduction to pt_extlist‘s content elements

Page 24: The one thing to list everything

Filters

List

Aggregate

Pager

Page 25: The one thing to list everything

Filters

Filterbox

Filter

Page 26: The one thing to list everything

List

List

Header (sorting)

Page 27: The one thing to list everything

Setting up a first list

1.Create TypoScript setup Declare list identifier

2. Insert plugin as content elements Select previously declared list identifier

Page 28: The one thing to list everything

List-Identifier

Data-Source

Typo-Script-Setup

Plugin

render

Page 29: The one thing to list everything

TypoScript Setup

Page 30: The one thing to list everything

TypoScript Setup

• What do you have to set up?

• Data Backend

• Data Fields

• Columns

• Filters

Page 31: The one thing to list everything

TypoScript Setup (List

identifier)

plugin.tx_ptextlist.settings {

listConfig.infoTables {

# Here goes your configuration

}

}

List Identifier!

Page 32: The one thing to list everything

TypoScript Setup (Data Backend)

listConfig.infoTables {

backendConfig < plugin.tx_ptextlist.prototype.backend.typo3

backendConfig {tables (

static_countries)

}

Page 33: The one thing to list everything

TypoScript Setup (Data Fields)

listConfig.infoTables {

/* ... */

fields {name_en {

table = static_countriesfield = cn_short_en

}

phone {table = static_countriesfield = cn_phone

}

}}

Page 34: The one thing to list everything

TypoScript Setup (Columns)

listConfig.infoTables { /* ... */

columns {

10 {columnIdentifier = nameColumnlabel = Country NamefieldIdentifier = name_en

}

20 {columnIdentifier = phoneColumnlabel = PhonefieldIdentifier = phone

}}

}

Page 35: The one thing to list everything

pt_extlist‘s plugins

Page 36: The one thing to list everything

pt_extlist‘s plugins (Cont‘d)

Page 37: The one thing to list everything

pt_extlist‘s plugins (Cont‘d)

Page 38: The one thing to list everything

List plugin

Page 39: The one thing to list everything

Frontend

Page 40: The one thing to list everything

TypoScript Setup (Filter)

listConfig.infoTables { /* ... */

filters {filterbox1 {

filterConfigs {10 <

plugin.tx_ptextlist.prototype.filter.string10 {

filterIdentifier = contryNameFilterlabel = Country NamefieldIdentifier = name_en

}}

}}

}

Page 41: The one thing to list everything

Filterbox plugin

Page 42: The one thing to list everything

Filterbox plugin (Cont‘d)

Page 43: The one thing to list everything

Frontend (Filter)

Page 44: The one thing to list everything

Pager plugin

Page 45: The one thing to list everything

Frontend (Pager)

Page 46: The one thing to list everything

Frontend (Sorting)

Page 47: The one thing to list everything

Frontend (Sorting)

Page 48: The one thing to list everything

Advanced Features

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

start end

Page 49: The one thing to list everything

TypoScript Rendering

Use the power of TypoScript to

• Render links, images, arbitrary HTML in your list

• Configure complex lists by overwriting list identifiers

• Use GET and POST parameters for filtering

Page 50: The one thing to list everything

Rendering images with TS

columns { 10 {

columnIdentifier = unoColumnlabel = UNOfieldIdentifier = name_en, uno_member

renderObj = COArenderObj {

10 = IMAGE10.if {

value.data = field:uno_memberequals = 1

}10.file = /* path_to_image */10.stdWrap.typolink.parameter = http://www.un.org

}/* ... Further configuration ... */

}}

}

Page 51: The one thing to list everything

Rendering images with TS

Page 52: The one thing to list everything

Rendering links with TScolumns {

10 {columnIdentifier = unoColumnlabel = UNOfieldIdentifier = name_en, uno_member, uid

renderObj = COArenderObj {

/* ... Further configuration ... */

20 = TEXT20.value = Details20.typolink.parameter = 120.typolink.additionalParams.dataWrap =

&tx_someextension_controller_details[countryuid]={field:uid} }

}}

}

Page 53: The one thing to list everything

Rendering links with TS

Page 54: The one thing to list everything

FLUID Templates• Change Template for every Controller /

Action pair via TypoScript

plugin.tx_ptextlist.settings.listConfig.<yourListId> { controller.List.list.template = EXT:your_ext/Resources/

Private/Templates/YourTemplate.html}

Page 55: The one thing to list everything

FLUID Templates (cont‘d)

• Easy-to-learn FLUID syntax for creating your own templates

• Unlimited options for styling your lists

<f:for each="{listData}" key="rowIndex" as="listRow"><f:render partial=“yourPartial“ arguments=“{row:}" />

</f:for>

Page 56: The one thing to list everything

FLUID Templates (cont‘d)

• Example

Page 57: The one thing to list everything

Further stepsHow to get deeper into pt_extlist

MotivationLists

distilledHow to use pt_extlist

Advanced features

Outlook

start end

Page 58: The one thing to list everything

Demolist PackageThere are many more examples of TypoScript Configurations within the

Demolist package( static template)

Page 59: The one thing to list everything

Demolist PackageDemolists explain some more features like

•Export

•Structured lists

•Complex dependencies and ignores of filters

•Using your own partials for rendering cells

•...

Page 60: The one thing to list everything

TypoScript Reference

• ~100 pages reference on pt_extlist‘s TS

Page 61: The one thing to list everything

YAG GalleryPhoto-Gallery management for TYPO3

Implemented using Extbase & pt_extlist

Page 62: The one thing to list everything

YAG Gallery Extension

• Flexible Gallery System for TYPO3

• Based on Extbase

• Using pt_extlist for

• Filtering Images by Galleries, Albums, Categories and Tags

• Rendering Image lists in Frontend and Backend

Page 63: The one thing to list everything

YAG Gallery Extension

visit our talk on Saturday

(tomorrow )

at 11:00

Page 64: The one thing to list everything

Further information

• pt_extlist website http://extlist.punkt.de

•pt_extlist on FORGE http://forge.typo3.org/projects/extension-pt_extlist

•Current developer‘s version (use „develop“ branch!) https://www.github.com/daniellienert/pt_extlist

Page 65: The one thing to list everything

Q & A

Page 66: The one thing to list everything

Thank you for yourattention!