pt_extlistThe one thing to list everything
Who we areDaniel Lienert  Frankfurt, Germany  FreelancerMichael Knoll   Karlsruhe, Germany   Working at punkt.de
Outline of our talk                                                       AdvancedMotivation   Lists distilled   How to us...
Motivation - Lists, lists, lists...
Lists, lists, lists...
Lists, lists, lists...
Conclusions• „Lists are everywhere“• Having a generic tool for generating lists   – enables rapid prototyping   – enables ...
Lists distilledOn our way to a generic list generatorLists distilled
Main parts of a list    Rows, Columns, Cells
„What is a list?“ 1. It‘s a collection of rows
„What is a list?“ (Cont‘d)   2. It‘s a collection of columns
„What is a list?“ (Cont‘d)    3. It‘s a collection of cells
„What is a list?“ (Cont‘d)  4. It can have a set of headers
Lists are not staticSorting, Filtering, Paging & Aggregating
Data Sources     Data       „Magic“Connect to multiple data sources like MySQL, solr, …
SortingIt should be possible to sort the rows of a list
FilteringIt should be possible to filter rows
PagingIt should be possible to limit number of rows per page
AggregatingIt should be possible to aggregate columns
Requirements• A (generic) list generator should be able  to • use multiple data sources • render rows, cells & headers • s...
Architecturept_extlist  pt_extbase    Extbase / Fluid       TYPO3
How to use pt_extlist       How to use pt_extlist
pt_extlist – Basic     FeaturesIntroduction to pt_extlist‘s content elements
FiltersListAggregatePager
Filters             FilterFilterbox
ListHeader (sorting)                    List
Setting up a first list1. Create TypoScript setup    Declare list identifier2. Insert plugin as content elements    Sele...
Typo- Data-     List-                      Script-Source   Identifier                      Setup         Plugin         re...
TypoScript Setup
TypoScript Setup• What do you have to set up? • Data Backend • Data Fields • Columns • Filters
TypoScript Setup (List identifier)plugin.tx_ptextlist.settings {        List Identifier!    listConfig.infoTables {     # ...
TypoScript Setup (Data Backend)listConfig.infoTables {       backendConfig < plugin.tx_ptextlist.prototype.backend.typo3  ...
TypoScript Setup (Data Fields)listConfig.infoTables {       /* ... */       fields {                   name_en {          ...
TypoScript Setup                                    (Columns)listConfig.infoTables { /* ... */       columns {            ...
pt_extlist‘s plugins
pt_extlist‘s plugins        (Cont‘d)
pt_extlist‘s plugins        (Cont‘d)
List plugin
Frontend
TypoScript Setup (Filter)listConfig.infoTables { /* ... */       filters {                   filterbox1 {                 ...
Filterbox plugin
Filterbox plugin (Cont‘d)
Frontend (Filter)
Pager plugin
Frontend (Pager)
Frontend (Sorting)
Frontend (Sorting)
Advanced Features                    Advanced                     featuresstart                           end
TypoScript RenderingUse the power of TypoScript to• Render links, images, arbitrary HTML in your  list• Configure complex ...
Rendering images with TScolumns {      10 {             columnIdentifier = unoColumn             label = UNO             f...
Rendering images with TS
Rendering links withcolumns {      10 {                TS             columnIdentifier = unoColumn             label = UNO...
Rendering links with        TS
FLUID Templates  • Change Template for every Controller / Action    pair via TypoScriptplugin.tx_ptextlist.settings.listCo...
FLUID Templates (cont‘d) • Easy-to-learn FLUID syntax for creating your   own templates<f:for each="{listData}" key="rowIn...
FLUID Templates (cont‘d)• Example
Further steps        How to get deeper into pt_extlist                                            Outlookstart            ...
Demolist PackageThere are many more examples of TypoScript Configurations within the Demolist package             ( stati...
Demolist PackageDemolists explain some more features like• Export• Structured lists• Complex dependencies and ignores of f...
TypoScript Reference• ~100 pages reference on pt_extlist‘s TS
YAG Gallery Photo-Gallery management for TYPO3Implemented using Extbase & pt_extlist
YAG Gallery         Extension• Flexible Gallery System for TYPO3• Based on Extbase• Using pt_extlist for • Filtering Image...
YAG Gallery   Extensionvisit our talk on     Saturday (tomorrow )    at 11:00
Further information• pt_extlist website   http://extlist.punkt.de• pt_extlist on FORGE   http://forge.typo3.org/projects/e...
Q&A
Thank you for your    attention!
Upcoming SlideShare
Loading in …5
×

The one thing to list everything

1,143 views

Published on

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!

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,143
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The one thing to list everything

  1. 1. pt_extlistThe one thing to list everything
  2. 2. Who we areDaniel Lienert Frankfurt, Germany FreelancerMichael Knoll Karlsruhe, Germany Working at punkt.de
  3. 3. Outline of our talk AdvancedMotivation Lists distilled How to use pt_extlist Outlook features
  4. 4. Motivation - Lists, lists, lists...
  5. 5. Lists, lists, lists...
  6. 6. Lists, lists, lists...
  7. 7. 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
  8. 8. Lists distilledOn our way to a generic list generatorLists distilled
  9. 9. Main parts of a list Rows, Columns, Cells
  10. 10. „What is a list?“ 1. It‘s a collection of rows
  11. 11. „What is a list?“ (Cont‘d) 2. It‘s a collection of columns
  12. 12. „What is a list?“ (Cont‘d) 3. It‘s a collection of cells
  13. 13. „What is a list?“ (Cont‘d) 4. It can have a set of headers
  14. 14. Lists are not staticSorting, Filtering, Paging & Aggregating
  15. 15. Data Sources Data „Magic“Connect to multiple data sources like MySQL, solr, …
  16. 16. SortingIt should be possible to sort the rows of a list
  17. 17. FilteringIt should be possible to filter rows
  18. 18. PagingIt should be possible to limit number of rows per page
  19. 19. AggregatingIt should be possible to aggregate columns
  20. 20. Requirements• A (generic) list generator should be able to • use multiple data sources • render rows, cells & headers • sort, filter & limit results • aggregate data
  21. 21. Architecturept_extlist pt_extbase Extbase / Fluid TYPO3
  22. 22. How to use pt_extlist How to use pt_extlist
  23. 23. pt_extlist – Basic FeaturesIntroduction to pt_extlist‘s content elements
  24. 24. FiltersListAggregatePager
  25. 25. Filters FilterFilterbox
  26. 26. ListHeader (sorting) List
  27. 27. Setting up a first list1. Create TypoScript setup  Declare list identifier2. Insert plugin as content elements  Select previously declared list identifier
  28. 28. Typo- Data- List- Script-Source Identifier Setup Plugin render
  29. 29. TypoScript Setup
  30. 30. TypoScript Setup• What do you have to set up? • Data Backend • Data Fields • Columns • Filters
  31. 31. TypoScript Setup (List identifier)plugin.tx_ptextlist.settings { List Identifier! listConfig.infoTables { # Here goes your configuration }}
  32. 32. TypoScript Setup (Data Backend)listConfig.infoTables { backendConfig < plugin.tx_ptextlist.prototype.backend.typo3 backendConfig { tables ( static_countries )}
  33. 33. TypoScript Setup (Data Fields)listConfig.infoTables { /* ... */ fields { name_en { table = static_countries field = cn_short_en } phone { table = static_countries field = cn_phone } }}
  34. 34. TypoScript Setup (Columns)listConfig.infoTables { /* ... */ columns { 10 { columnIdentifier = nameColumn label = Country Name fieldIdentifier = name_en } 20 { columnIdentifier = phoneColumn label = Phone fieldIdentifier = phone } }}
  35. 35. pt_extlist‘s plugins
  36. 36. pt_extlist‘s plugins (Cont‘d)
  37. 37. pt_extlist‘s plugins (Cont‘d)
  38. 38. List plugin
  39. 39. Frontend
  40. 40. TypoScript Setup (Filter)listConfig.infoTables { /* ... */ filters { filterbox1 { filterConfigs { 10 < plugin.tx_ptextlist.prototype.filter.string 10 { filterIdentifier = contryNameFilter label = Country Name fieldIdentifier = name_en } } } }}
  41. 41. Filterbox plugin
  42. 42. Filterbox plugin (Cont‘d)
  43. 43. Frontend (Filter)
  44. 44. Pager plugin
  45. 45. Frontend (Pager)
  46. 46. Frontend (Sorting)
  47. 47. Frontend (Sorting)
  48. 48. Advanced Features Advanced featuresstart end
  49. 49. TypoScript RenderingUse 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
  50. 50. Rendering images with TScolumns { 10 { columnIdentifier = unoColumn label = UNO fieldIdentifier = name_en, uno_member renderObj = COA renderObj { 10 = IMAGE 10.if { value.data = field:uno_member equals = 1 } 10.file = /* path_to_image */ 10.stdWrap.typolink.parameter = http://www.un.org } /* ... Further configuration ... */ } }}
  51. 51. Rendering images with TS
  52. 52. Rendering links withcolumns { 10 { TS columnIdentifier = unoColumn label = UNO fieldIdentifier = name_en, uno_member, uid renderObj = COA renderObj { /* ... Further configuration ... */ 20 = TEXT 20.value = Details 20.typolink.parameter = 1 20.typolink.additionalParams.dataWrap = &tx_someextension_controller_details [countryuid]={field:uid} } } }}
  53. 53. Rendering links with TS
  54. 54. FLUID Templates • Change Template for every Controller / Action pair via TypoScriptplugin.tx_ptextlist.settings.listConfig.<yourListId> { controller.List.list.template = EXT:your_ext/Resources/ Private/Templates/YourTemplate.html}
  55. 55. FLUID Templates (cont‘d) • Easy-to-learn FLUID syntax for creating your own templates<f:for each="{listData}" key="rowIndex" as="listRow"> <f:render partial=“yourPartial“ arguments=“{row:}" /></f:for> • Unlimited options for styling your lists
  56. 56. FLUID Templates (cont‘d)• Example
  57. 57. Further steps How to get deeper into pt_extlist Outlookstart end
  58. 58. Demolist PackageThere are many more examples of TypoScript Configurations within the Demolist package ( static template)
  59. 59. Demolist PackageDemolists explain some more features like• Export• Structured lists• Complex dependencies and ignores of filters• Using your own partials for rendering cells• ...
  60. 60. TypoScript Reference• ~100 pages reference on pt_extlist‘s TS
  61. 61. YAG Gallery Photo-Gallery management for TYPO3Implemented using Extbase & pt_extlist
  62. 62. 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
  63. 63. YAG Gallery Extensionvisit our talk on Saturday (tomorrow ) at 11:00
  64. 64. 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!)
  65. 65. Q&A
  66. 66. Thank you for your attention!

×