Agile sites311training
0 likes792 views
The document provides an overview and instructions for installing AgileSites 3.11 for WebCenter Sites 11g. It discusses prerequisites, downloading the starter files either manually or via git, installing WebCenter Sites 11g, generating Eclipse project files, controlling the application server, generating a new website and installing AgileSites and the site. The document also covers the main components that make up a site structure in AgileSites, including configurations, content types and the basic content model.
More Related Content
What's hot (20)
Viewers also liked (14)
Similar to Agile sites311training (20)
Recently uploaded (20)
Agile sites311training
- 1. AgileSites 3.11 for WebCenter Sites 11g Michele Sciabarra [email protected] Sciabarra.com – Just Add Content 1
- 2. WebCenter Sites 11g Recalling key concepts 2
- 3. Basic Terminology • Asset • All the content is an asset • It is publishabe; • Each asset has a type • Very roughly, a (simple) asset is a record in a table • Flex Assets • Have attributes • Can change their attribute set (definition) • Roughly they are a master-‐detail table set 3
- 4. Basic Terminology • Element • The underlying code executed by a Template • JSP mostly • Also XML and Groovy • It is NOT an asset – but can be part of an Asset • Template (and CSElement) • It is a (special) asset • It can render a (non executable) asset • They wraps Elements with metadata • It is executable • It is publishabe 4
- 5. The rendering process Wrapper • It starts always with a Wrapper and c/cid • It will select an asset and a layout • You will apply different elements to different content on the road TopNav SideNav Detail Footer Layout
- 6. Templates & CSElement • It is an Asset holding an Element • It is Publishable • It contains meta data • It is UNCACHED • Use for rendering logic that embed html in the caller • In is an Asset holding an Element • It is Publishable • It contains meta data • It is CACHED • Use for rendering logic that create separate Pagelets 6
- 7. WCS main concepts • Separate content from presentation • Select an asset (content data) • c is the content type • cid is the content id • Select an element (presentation logic) • pagename is the Element • You always apply an element to an asset • So you need a pagename and a c+cid
- 8. Module: Installation Installing AgileSites 3.11 8
- 9. Prerequisites for AgileSites 3.11 • Before starting, you need JAVA 1.7 JDK • WCS Sites 11g does not work with Java 8) • Download JDK 1.7 from the Oracle WebSite • Ensure JAVA_HOME points to the Jdk 1.7 • from Windows command prompt: • echo %JAVA_HOME% • from OSX/Linux terminal: • echo $JAVA_HOME 9
- 10. Download the starter manually • Create a folder: e.g. starter • Download this zip in the folder: http://agilesites3-repo.s3.amazonaws /releases/11g/agilesites.zip • it is a single URL, do not split! • Unzip it inside the folder • Execute the agilesites script • Either .sh for OSX/Linux or .cmd for Windows 10
- 11. Alternative download using git • Get git for your operating system • Decide for a folder name: e.g. starter • Execute this command from the parent folder: git clone http://github.com/sciabarra/AgileSites3.11 starter • it is a single command line, do not split! • Cd in the folder and execute the agilesites script • Either .sh for OSX/Linux or .cmd for Windows 11
- 12. Install WebCenter Sites 11g • Everything starting with > is should be executed at the agilesites prompt • Downloading Sites > sitesDownload <username> <password> • you must use your oracle credentials • Install Sites: > sitesInstall • Log into Sites: http://localhost:11800/cs/ 12
- 13. Use an IDE for editing • Generate eclipse configuration files > eclipse • you can now edit it with Eclipse • You can also use other editors like IntelliJ or Netbeans • The project is a standard java-‐only project 13
- 14. Control the Server • Control the server > server status > server stop > server start • Generate a script for starting sites: > server script 14
- 15. Generate a new WebSite and install it • Decide for a name and a prefix: e.g. Starter St > asNewSite Starter St • Install Agilesites and the newly created site > asSetup • Log into sites and create a new page named Home • You can see now it as: http://localhost:11800/cs/Satellite/starter/ 15
- 16. Lab • Install WebCenter Sites • Generate a new site • Install agilesites and the new site • Check you get the ErrorPage • Create a page named Home • Check you get the Home Page Goal: Installing WCS and create a new agile Site 16
- 17. Module: Site Structure What is in a Site? 17
- 19. Main Site Definition 19
- 20. Configurations • Router • decode/encore urls programmatically • route get an url and calls a CSElement • link get an asset and returns an URL • Config • maps type names in attribute names • (workaround for a limitation of the Sites API) 20
- 21. Basic Content Model • Types: • Page • the built in Page type • StContent • a content type of a flex family • StParent • a parent type of a flex family • Subtypes • StHome • A subtype of Page for rendering the Home Page 21
- 22. Basic Templates & CSElements • CSElement • Starter • the wrapper • StError • default error page • StTester • test runner for integration tests • Templates • StHomeLayout • template for the home page • Mockup • template.html • used by all the templates ans cselements 22
- 23. Tests • Unit Tests • StErrorTest • StHomeLayoutTest • Integration Tests • StErrorTest 23
- 24. AgileSites ABC • Env: • Asset: • Picker 24
- 25. Lab • Add an attribute • Change the template • Write a test • Deploy the Site • Add the statics from the url below and fix html Familiarize with the project structure and the development workflow. 25 http://agilesites3-‐repo.s3.amazonaws.com/starter.zip
- 26. Beginning Content Modelling Lean how to create your content model 26
- 27. Type: Page Subtype: Home Hierarchy 27 PageAttribute PageDefinition StHome StText StTitle Attribute: StText Attribute: StTitle Attr Types
- 28. Attributes • Attributes can be • single • multiple • AttributeEditors • Stock • Custom • Attributes have different types • String • Text (long string) • Image • Asset 28
- 29. Attribute Editors 29 • Attribute editors define editing options for attributes • TEXTAREA • CKEDITOR • Defined with an XML file • Unfortunately • Documented in developer manual
- 30. Attribute Editors • Normally declared in the Site configuration file • Need to specify only the details of the attribute editor • Name is the field name 30
- 31. Attributes 31 Title Subtitle Sumary Detail Image TeaserTitle TeaserText
- 32. Flex Family Content Types 32 • A standard wrapper class is required to represent them in Java
- 33. Definitions • Definitions • A set of Attributes • Used by contents to define their attributes 33
- 34. Definitions • You need a definition to be a container of attributes • Note it is a subtype so extends a type 34
- 35. Attributes 35 • Text with description, mandatory • Text with attribute editor • Attribute multiple
- 36. Attributes, continue • Blob Attribute • Asset Attribute 36
- 37. Lab: Create Attributes • Define 2 attribute editors • CKEDITOR • TEXTAREA • Define attributes • Subtitle: single, string, • Summary: text, single TEXTAREA • Text: text, single CKEDITOR • Image: single, blob • TeaserTitle: multiple, string • TeaserText: multiple, text • Related: asset, multiple • SeeAlso: asset:, multiple • Place them in the Content definition Objective: Learn about attributes, definitions and attribute editors You will create all is needed to render a whole page 37
- 38. Placing Attributes in a mockup From static html to a dynamic website 38
- 39. The common part of web page The specific part of each layout 39 Wrapper Layout The fine art of HTML cutting
- 40. Extracting attributes • Load as asset (default the current) • Read the attributes of the asset: 40
- 41. Mockup in Java with Picker • Pick the html Picker p = Picker.load("/blueprint/template.html") • Moustache {{Attribute}} • Replacements p.replace("#location", a.getString("Value")) 41
- 42. Render the image 42
- 43. Lab: populate the mockup Implement the following attributes: • Summary • Details • Teaser Title • Teaser Text • Image • Related • SeeAlso Goal: Populate your html mockup with content 43
- 44. Rendering Links Let's see how Implement navigations 44
- 45. What is a link in Sites anyway? • You always link to ASSETS • So you get the ASSET then extract the URL to. • Link to myself: • e.getAsset().getUrl() • Not very useful in practice, so you use attributes or siteplan. For example: • url = a.getAsset("Related").getUrl() • a = e.findOne("Page", arg("name", "Home"); url = a.getUrl(); 45
- 46. SitePlan • Navigating the siteplan • Get the nodeid first • Siteplan functions • Path • Children • Whole tree • Others (check siteplan:*) 46 Path getsitenode chidren
- 47. Rendering top menu 47
- 48. Lab: rendering top menu • Write a method implementing the topmenu • Show links to the first level pages in the siteplan Goals: learn how to create links and navigate the siteplan 48
- 49. Rendering Inner elements Nesting is the key for leveraging the content model 49
- 50. A composite view • Not everything that is needed to render a web page is an attribute of a single asset • Very often you have a set of assets that refers each other • The golden rule of Sites template development • In a template render only ONE asset • If you find another asset. change the current asset (c/cid) and call another template 50
- 51. Spot the difference 51 Fields of the same asset – no need to change template Fields of a different asset – need to call a different template
- 52. Create a new CSElement 52
- 53. Invocation of a CSElement • Use the Env: • Note the invocation is a String that can be placed • Invocation happens actually later • It is not a procedure call, but a note to the system to use the output of a cselement for rendering 53
- 54. Create a new template 54
- 55. Invocation of a Template • You always need an asset to invoke the template • You replace the call, but do not forget the cache • Generally you get the asset from an attribute • you need to specify the type of the asset 55
- 56. Lab: calling templates and elements • Create a CSElement and move the topmenu logic in it • Create a Template and use it to render the SeeAlso blocks At the end you will render the summary with a separate template 56 Code for the StHomeSummary Template
- 57. Slot Drag and drop other assets in the current page 57
- 58. Creating a slot 58
- 60. Lab: Slot • Replace the calls as slots • Implement the related slot list In this lab you will create slots for drag-‐n-‐drop of content 60