The anatomy of Content Template Catalog v4: how to create custom CTC websites. David Strachan IBM

Transcription

1 The anatomy of Content Template Catalog v4: how to create custom CTC websites David Strachan IBM

2 Abstract This session is aimed at everyone who needs to understand how CTC works. In the session we'll dissect CTC to understand how it really works and then demonstrate how to create a custom site based on CTC - we'll look at how pages are put together, how to create your own page templates and custom content types, how to customize the workflow and how CTC plays with the Multi-lingual Solution International Business Machines Corporation 2

3 Agenda Introduction you are here A short overview What it is What s supplied Basic topics Instantiating a CTC site Creating pages and using the supplied components More advanced topics Customize content type Make a new page template Homework Areas for further exploration customizing indexes, MLS etc 2013 International Business Machines Corporation 3

4 Me 2013 International Business Machines Corporation 4

5 You You have some knowledge of Portal & WCM This is not a WCM 101 session, it s a CTC 101 session You have had a look around the CTC demo site Probably created some custom pages Might have created a custom site Haven t tried extending it, so end up going to customers with a conference website What I hope you ll learn here An outline of how CTC hangs together Some basics of how to customize a CTC site Some pointers for more advanced topics 2013 International Business Machines Corporation 5

6 A SHORT CTC OVERVIEW 2013 International Business Machines Corporation 6

7 2013 International Business Machines Corporation 7

8 There are several components we mean when we talk about CTC CTC itself 3 content libraries and a web app The CTC demo site 1 more content library the visible part of the iceberg The CTC theme As of WP there is no separate CTC theme, just a theme profile Page templating This is actually part of Portal and does not require CTC to function Any whizzy WCM feature we haven t used yet e.g. content targeting, inline editing CTC offers an implementation of these features, 2013 International Business Machines Corporation 8

9 What does CTC provide (1) Page Templates and Micro-sites CTC comes with an extensive set of page templates that represent typical types of pages and content in a website Each page template has an associated micro-site which is a pre-built content structure that is instantiated along with the page Component Configurations Most the portlets in CTC display content items that are called component configurations, which are content items that control the behavior of a component There are four of these component configuration types included in CTC Block, List, Slideshow and Carousel Pre-configured Portlet Palette CTC installs a palette of portlets into the page builder customization shelf These portlets are pre-configured to instantiate a component configuration content item when they are dragged onto the page 2013 International Business Machines Corporation 9

10 What does CTC provide (2) Adaptive Component Stylings Components are styled in such a way that they adapt when moved to different containers on the page This simplifies the authoring experience and provides greater freedom in how components are placed and managed over time Inline editing CTC implements inline editing for both design and content For the design side, component configurations are set up for inline editing, but are only available in the edit mode for the page For content, inline editing is available in the page read mode and is subject to access control Content indexes also have inline editing options and allow to describe their index which are managed by configurable components Teaser and promotions are special cases as they do not get displayed on their own pages, and they also have inline editing for both their content and configuration 2013 International Business Machines Corporation 10

11 What s actually shipped WCM libraries CTC Design Authoring and Presentation templates for default content types List, block and field components CTC Process Contains the default workflow, workflow stages and workflow actions Also contains category taxonomy CTC Content Content for page templates used to construct demo site page templates refer to this library CTC Demo Contains the CTC demo site (used in conjunction with portal pages for demo site) 2013 International Business Machines Corporation 11

12 What s actually shipped CTC.ear Dojo components component.js component_layer.js JS Components indexfilter.jsp sets up request parameters etc for search (on News, events, etc) mlsedit.jsp renders MLS extension if it is enabled mlsread.jsp renders MLS extension if it is enabled rendercomponentincontext.jsp used to render list components in the context of CTC. Applied context override specified on site area content item and renders List Component in that context. RenderNestedListCleanup.jsp For side navigation, used on section pages RenderNestedListResult.jsp For side navigation, used on section pages Also Text Providers, Rendering plugins 2013 International Business Machines Corporation 12

13 List presentation pattern (1) This component defines the List of content items that will be presented This component defines the List Presentation that will render the items returned by the List This component defines the context in which the List will execute 2013 International Business Machines Corporation 13

14 List presentation pattern (2) The presentation template has only got one line which refers to this JSP component 2013 International Business Machines Corporation 14

15 BASIC STUFF 2013 International Business Machines Corporation 15

16 A demo, to cover the following Create a new CTC site Create pages within that site Show inline editing features Signpost to content targeting Landing page Section index & section detail (maybe) News page Featured news 2013 International Business Machines Corporation 16

17 2013 International Business Machines Corporation 17

18 2013 International Business Machines Corporation 18

19 2013 International Business Machines Corporation 19

20 2013 International Business Machines Corporation 20

21 2013 International Business Machines Corporation 21

22 2013 International Business Machines Corporation 22

23 2013 International Business Machines Corporation 23

24 2013 International Business Machines Corporation 24

25 2013 International Business Machines Corporation 25

26 2013 International Business Machines Corporation 26

27 2013 International Business Machines Corporation 27

28 2013 International Business Machines Corporation 28

29 2013 International Business Machines Corporation 29

30 2013 International Business Machines Corporation 30

31 2013 International Business Machines Corporation 31

32 2013 International Business Machines Corporation 32

33 2013 International Business Machines Corporation 33

34 2013 International Business Machines Corporation 34

35 2013 International Business Machines Corporation 35

36 2013 International Business Machines Corporation 36

37 2013 International Business Machines Corporation 37

38 2013 International Business Machines Corporation 38

39 2013 International Business Machines Corporation 39

40 2013 International Business Machines Corporation 40

41 2013 International Business Machines Corporation 41

42 2013 International Business Machines Corporation 42

43 2013 International Business Machines Corporation 43

44 2013 International Business Machines Corporation 44

45 2013 International Business Machines Corporation 45

46 2013 International Business Machines Corporation 46

47 2013 International Business Machines Corporation 47

48 2013 International Business Machines Corporation 48

49 2013 International Business Machines Corporation 49

50 2013 International Business Machines Corporation 50

51 2013 International Business Machines Corporation 51

52 2013 International Business Machines Corporation 52

53 2013 International Business Machines Corporation 53

54 2013 International Business Machines Corporation 54

55 2013 International Business Machines Corporation 55

56 2013 International Business Machines Corporation 56

57 2013 International Business Machines Corporation 57

58 2013 International Business Machines Corporation 58

59 2013 International Business Machines Corporation 59

60 2013 International Business Machines Corporation 60

61 2013 International Business Machines Corporation 61

62 2013 International Business Machines Corporation 62

63 2013 International Business Machines Corporation 63

64 2013 International Business Machines Corporation 64

65 2013 International Business Machines Corporation 65

66 JUICIER TOPICS 2013 International Business Machines Corporation 66

67 A demo, to cover the following Set up simple content template Create authoring template Create presentation template Setup default content to be instantiated Setup clone of WCM rendering portlet Set up page template Clone news index Setup authoring and presentation templates 2013 International Business Machines Corporation 67

68 2013 International Business Machines Corporation 68

69 2013 International Business Machines Corporation 69

70 2013 International Business Machines Corporation 70

71 2013 International Business Machines Corporation 71

72 2013 International Business Machines Corporation 72

73 2013 International Business Machines Corporation 73

74 2013 International Business Machines Corporation 74

75 2013 International Business Machines Corporation 75

76 2013 International Business Machines Corporation 76

77 2013 International Business Machines Corporation 77

78 2013 International Business Machines Corporation 78

79 2013 International Business Machines Corporation 79

80 2013 International Business Machines Corporation 80

81 2013 International Business Machines Corporation 81

82 2013 International Business Machines Corporation 82

83 2013 International Business Machines Corporation 83

84 2013 International Business Machines Corporation 84

85 2013 International Business Machines Corporation 85

86 2013 International Business Machines Corporation 86

87 2013 International Business Machines Corporation 87

88 2013 International Business Machines Corporation 88

89 2013 International Business Machines Corporation 89

90 Making a new page template In this demo Instantiate the Products area based on the out of the box Topic template Copy the Topic authoring and presentation templates and modify them to suit the Products scenario Apply these changes to the Products area Move this configuration to a new Products template International Business Machines Corporation 90

91 2013 International Business Machines Corporation 91

92 2013 International Business Machines Corporation 92

93 2013 International Business Machines Corporation 93

94 2013 International Business Machines Corporation 94

95 2013 International Business Machines Corporation 95

96 2013 International Business Machines Corporation 96

97 2013 International Business Machines Corporation 97

98 2013 International Business Machines Corporation 98

99 2013 International Business Machines Corporation 99

100 2013 International Business Machines Corporation 100

101 2013 International Business Machines Corporation 101

102 2013 International Business Machines Corporation 102

103 2013 International Business Machines Corporation 103

104 2013 International Business Machines Corporation 104

105 2013 International Business Machines Corporation 105

106 2013 International Business Machines Corporation 106

107 2013 International Business Machines Corporation 107

108 2013 International Business Machines Corporation 108

109 2013 International Business Machines Corporation 109

110 2013 International Business Machines Corporation 110

111 2013 International Business Machines Corporation 111

112 2013 International Business Machines Corporation 112

113 2013 International Business Machines Corporation 113

114 2013 International Business Machines Corporation 114

115 2013 International Business Machines Corporation 115

116 2013 International Business Machines Corporation 116

117 2013 International Business Machines Corporation 117

118 2013 International Business Machines Corporation 118

119 2013 International Business Machines Corporation 119

120 2013 International Business Machines Corporation 120

121 2013 International Business Machines Corporation 121

122 2013 International Business Machines Corporation 122

123 2013 International Business Machines Corporation 123

124 2013 International Business Machines Corporation 124

125 2013 International Business Machines Corporation 125

126 HOMEWORK 2013 International Business Machines Corporation 126

127 Areas for further work Customize indexes Create your own theme Use content targeting Configure workflow MLS 2013 International Business Machines Corporation 127

128 Top CTC tips When you delete a page, the content isn t deleted you need to do that manually Get your custom site library structure right from the start One library for your custom content (Maybe) one library for your custom templates Don t modify CTC elements, copy them and modify the copy 2013 International Business Machines Corporation 128

129 Q&A 2013 International Business Machines Corporation 129

130 Link [IfNotEditMode][Plugin:ifNotEmpty value="[element context='current' type='content' key='link' format='url']"]<p class="contentinfo strong">[component name="ctc design/icons/ link icon"] [Element context="current" type="content" key="link"]</p>[/plugin:ifnotempty][/ifnoteditmode] [IfEditMode] [Component name="ctc design/field designs/link - edit mode"][/ IfEditMode] 2013 International Business Machines Corporation 130

131 Link edit mode [Component name="ctc design/icons/link icon"] [EditableElement context="current" type="content" key="link" format="span" class="contenteditable contentinfo strong"] [Plugin:ifNotEmpty value="[element context='current' type='content' key='link' format='linktext']"] [Element context="current" type="content" key="link"] [/Plugin:ifNotEmpty] [Plugin:ifEmpty value="[element context='current' type='content' key='link' format='linktext']"] [Plugin:ifNotEmpty value="[element context='current' type='content' key='link' format='url']"] <a>[element context="current" type="content" key="link" format="url"]</a> [/Plugin:ifNotEmpty] [Plugin:ifEmpty value="[element context='current' type='content' key='link' format='url']"] <span class="contentplaceholder">[plugin:translate bundle="com.ibm.workplace.wcm.ctc.ctcbundle" key="authoringtemplate.fields.link.fieldlabel"]</span> [/ Plugin:ifEmpty] [/Plugin:ifEmpty] [/EditableElement] 2013 International Business Machines Corporation 131

132 Content Template - Container Start <div class="contenteditcontainer contentdetail"> [IfEditMode] [Component name="ctc design/inline editing/toolbar for detail pages"] [/IfEditMode] <div class="head"> 2013 International Business Machines Corporation 132

133 Content Template - Container End </div> </div> 2013 International Business Machines Corporation 133