{"id":1142,"date":"2010-11-12T16:34:52","date_gmt":"2010-11-12T20:34:52","guid":{"rendered":"http:\/\/fgiasson.com\/blog\/?p=1142"},"modified":"2011-09-14T11:14:54","modified_gmt":"2011-09-14T15:14:54","slug":"building-construct-templates","status":"publish","type":"post","link":"https:\/\/fgiasson.com\/blog\/index.php\/2010\/11\/12\/building-construct-templates\/","title":{"rendered":"Building conStruct Templates"},"content":{"rendered":"<table>\n<tbody>\n<tr>\n<td>The templating engine in <a href=\"http:\/\/openstructs.org\/construct\">conStruct<\/a>is one of the older modules that has been developed. In fact, it was probably more than two years ago. However, it has never been documented&#8230;<em>Until now!<\/em><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1143\" title=\"printing-press\" src=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2010\/11\/printing-press.jpg\" alt=\"\" width=\"250\" height=\"191\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>It is nice to have a framework (<a href=\"http:\/\/openstructs.org\/structwsf\">structWSF<\/a>) that lets you ingest, manage, analyze and publish structured, semi-structured and unstructured data using a set of web service endpoints. However, it would be even nicer to have a user interface to interact with that system. It is what conStruct is: a user interface to structWSF endpoints.<\/p>\n<p>But it would be even nicer to have a way to personalize the structWSF data presented to users via conStruct: it is what the conStruct templates are all about.<\/p>\n<p>The only remaining problem was for someone new to conStruct to know how to create these templates.<\/p>\n<h3>Quick Introduction to conStruct Templates<\/h3>\n<p>conStruct templates are used to create different HTML page layouts to present information about instance records depending on their type. The present design utilizes Smarty as the baseline templating framework to create these templates. The only thing we added to it is a new API that lets template designers have access to the instance record(s) description(s). Think of it as an API to manipulate the information that will be displayed in the HTML page.<\/p>\n<p>The general idea is that depending on the type of the instance record you want to display information about, you will want your system to display the information you have about that instance record differently depending on the type of that instance record. For example, if you want to present information about a <em>neighborhood<\/em>, the information will be displayed differently than if you want to present information about a <em>person<\/em>.<\/p>\n<p>By using Smarty and the API extension created for conStruct, template designers are able to create different layouts to display things differently depending on the type of the records being viewed by the users of the system. Designers will also be able to make their template adaptive depending on how the records are described. As we know, not all persons are described the same way!<\/p>\n<p>Once a template designer gets used to this system, these presentation templates for instance records become an effective way to present information to users, in all different ways, by leveraging the structure of the information it conveys.<\/p>\n<h3>Some Examples<\/h3>\n<p>Here are some examples of templated pages for different kind of instances. These should show you how different they can be, and how they can integrate external tools such as Flash movies, YouTube videos and uses external JavaScript libraries:<\/p>\n<ul>\n<li><a href=\"http:\/\/demo.citizen-dan.org\/conStruct\/view\/?uri=http%3A%2F%2Fdemo.citizen-dan.org%2FconStruct%2Fdatasets%2F93%2Fresource%2F19103&amp;dataset=http%3A%2F%2Fdemo.citizen-dan.org%2Fwsf%2Fdatasets%2F93%2F\">Johnson County, Iowa<\/a> (Citizen Dan). This template displays the information about a <em>County<\/em>. It displays some textual information such as the total population, etc. It also embeds a map, and other <a href=\"http:\/\/openstructs.org\/semantic-components\">Semantic Components<\/a> tools.<\/li>\n<li><a href=\"http:\/\/www.mypeg.ca\/conStruct\/view\/?dataset=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F258%2F&amp;uri=http%3A%2F%2Fwww.mypeg.ca%2FconStruct%2Fdatasets%2F258%2Fresource%2Fneighborhood\/110\">Sargent Park<\/a> (MyPeg.ca). This template is like the one above, but it displays information about a <em>Neighborhood<\/em> of Winnipeg City. It displays a map as well, but it also displays a <a href=\"http:\/\/techwiki.openstructs.org\/index.php\/Workbench:_Create_Dashboard_Views\">Dashboard<\/a> session.<\/li>\n<li><a href=\"http:\/\/www.mypeg.ca\/conStruct\/view\/?uri=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F272%2Fresource%2FLonnyGreta&amp;dataset=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F272%2F\">Lonny &amp; Greta<\/a> (MyPeg.ca). This template is quite different. It displays information about an <em>Interview<\/em>. It embeds a series of videos from YouTube. And if you click on &#8220;text&#8221;, you will get a text summary of the interview that is displayed in the <a href=\"http:\/\/techwiki.openstructs.org\/index.php\/SStory\">sStory<\/a> semantic component that got created using <a href=\"http:\/\/jquery.com\/\">jQuery<\/a>.<\/li>\n<\/ul>\n<p><center><br \/>\n<a href=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2010\/11\/screenshot_template.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1144\" style=\"shadow_curl\" title=\"screenshot_template\" src=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2010\/11\/screenshot_template.png\" alt=\"\" width=\"425\" height=\"577\" srcset=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2010\/11\/screenshot_template.png 425w, https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2010\/11\/screenshot_template-220x300.png 220w\" sizes=\"auto, (max-width: 425px) 100vw, 425px\" \/><\/a><\/center>As you can see, you have the leisure to do whatever you want by leveraging this templating system. And I am not even talking about the other goodies that you could get from it if you start leveraging the Drupal API within these templates!<\/p>\n<h3>Yes, But How?<\/h3>\n<p>The last question that I have to answer with this blog post is: <em>how the hell can I create these templates?<\/em><\/p>\n<p>The answer to this question (I hope) lies in this new <a href=\"http:\/\/techwiki.openstructs.org\/\">TechWiki<\/a> page that I published this morning:<\/p>\n<p style=\"padding-left: 30px;\"><a href=\"http:\/\/techwiki.openstructs.org\/index.php\/Building_conStruct_Templates\">Building conStruct Templates<\/a><\/p>\n<p>It explains everything you need to know in order to create a conStruct template: what is the workflow, how the system works internally, a complete description of the extension API with a lot of Smarty code examples.<\/p>\n<p>Enjoy!<\/p>\n<div id=\"_mcePaste\" style=\"position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow: hidden;\">\n<p>&nbsp;<\/p>\n<h1 style=\"text-align: center;\">Building conStruct Templates<\/h1>\n<p class=\"MsoNormal\">\n<p class=\"MsoNormal\"><img loading=\"lazy\" decoding=\"async\" src=\"file:\/\/\/C:\/Users\/PROPRI%7E1\/AppData\/Local\/Temp\/msohtmlclip1\/01\/clip_image002.jpg\" alt=\"\" width=\"280\" height=\"214\" align=\"left\" hspace=\"12\" \/><span lang=\"EN-US\">The templating engine in <\/span><a href=\"http:\/\/openstructs.org\/construct\"><span lang=\"EN-US\">conStruct<\/span><\/a><span lang=\"EN-US\"> is one of the older modules that has been developed. In fact, it was probably more than two years ago. However, it has never been documented&#8230;<\/span><\/p>\n<p class=\"MsoNormal\"><em><span lang=\"EN-US\">Until now!<\/span><\/em><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">It is nice to have a framework (<a href=\"http:\/\/openstructs.org\/structwsf\">structWSF<\/a>) that lets you ingest, manage, analyze and publish structured, semi-structured and unstructured data using a set of web service endpoints. However, it would be even nicer to have a user interface to interact with that system. It is what conStruct is: a user interface to structWSF endpoints.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">But it would be even nicer to have a way to personalize the structWSF data presented to users via conStruct: it is what the conStruct templates are all about.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">The only remaining problem was for someone new to conStruct to know how to create these templates.<\/span><\/p>\n<h3><span lang=\"EN-US\">Quick Introduction to conStruct Templates<\/span><\/h3>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">conStruct templates are used to create different HTML page layouts to present information about instance records depending on their type. The present design utilizes Smarty as the baseline templating framework to create these templates. The only thing we added to it is a new API that lets template designers have access to the instance record(s) description(s). Think of it as an API to manipulate the information that will be displayed in the HTML page.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">The general idea is that depending on the type of the instance record you want to display information about, you will want your system to display the information you have about that instance record differently depending on the type of that instance record. For example, if you want to present information about a <em>neighborhood<\/em>, the information will be displayed differently than if you want to present information about a <em>person<\/em>.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">By using Smarty and the API extension created for conStruct, template designers are able to create different layouts to display things differently depending on the type of the records being viewed by the users of the system. Designers will also be able to make their template adaptive depending on how the records are described. As we know, not all persons are described the same way!<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">Once a template designer gets used to this system, these presentation templates for instance records become an effective way to present information to users, in all different ways, by leveraging the structure of the information it conveys.<\/span><\/p>\n<h3><span lang=\"EN-US\">Some Examples<\/span><\/h3>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">Here are some examples of templated pages for different kind of instances. These should show you how different they can be, and how they can integrate external tools such as Flash movies, YouTube videos and uses external JavaScript libraries:<\/span><\/p>\n<p class=\"MsoListParagraphCxSpFirst\" style=\"text-indent: -18pt;\"><span style=\"font-family: Symbol;\" lang=\"EN-US\"><span>\u00ef\u00bf\u00bd<\/span><\/span><a href=\"http:\/\/demo.citizen-dan.org\/conStruct\/view\/?uri=http%3A%2F%2Fdemo.citizen-dan.org%2FconStruct%2Fdatasets%2F93%2Fresource%2F19103&amp;dataset=http%3A%2F%2Fdemo.citizen-dan.org%2Fwsf%2Fdatasets%2F93%2F\"><span lang=\"EN-US\">Johnson County, Iowa<\/span><\/a><span lang=\"EN-US\"> (Citizen Dan). This template displays the information about a <em>County<\/em>. It displays some textual information such as the total population, etc. It also embeds a map, and other <\/span><a href=\"http:\/\/openstructs.org\/semantic-components\"><span lang=\"EN-US\">Semantic Components<\/span><\/a><span lang=\"EN-US\"> tools.<a name=\"breadcrumbcurrent\"><\/a><\/span><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"text-indent: -18pt;\"><span><span style=\"font-family: Symbol;\" lang=\"EN-US\"><span>\u00ef\u00bf\u00bd<\/span><\/span><\/span><a href=\"http:\/\/www.mypeg.ca\/conStruct\/view\/?dataset=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F258%2F&amp;uri=http%3A%2F%2Fwww.mypeg.ca%2FconStruct%2Fdatasets%2F258%2Fresource%2Fneighborhood\/110\"><span><span lang=\"EN-US\">Sargent Park<\/span><\/span><\/a><span lang=\"EN-US\"> (MyPeg.ca). This template is like the one above, but it displays information about a <em>Neighborhood<\/em> of Winnipeg City. It displays a map as well, but it also displays a <\/span><a href=\"http:\/\/techwiki.openstructs.org\/index.php\/Workbench:_Create_Dashboard_Views\"><span lang=\"EN-US\">Dashboard<\/span><\/a><span lang=\"EN-US\"> session.<\/span><\/p>\n<p class=\"MsoListParagraphCxSpLast\" style=\"text-indent: -18pt;\"><span style=\"font-family: Symbol;\" lang=\"EN-US\"><span>\u00ef\u00bf\u00bd<\/span><\/span><a href=\"http:\/\/www.mypeg.ca\/conStruct\/view\/?uri=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F272%2Fresource%2FLonnyGreta&amp;dataset=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F272%2F\"><span lang=\"EN-US\">Lonny &amp; Greta<\/span><\/a><span lang=\"EN-US\"> (MyPeg.ca). This template is quite different. It displays information about an <em>Interview<\/em>. It embeds a series of videos from YouTube. And if you click on \u00ef\u00bf\u00bdtext\u00ef\u00bf\u00bd, you will <\/span><\/p>\n<h1>Building conStruct Templates<\/h1>\n<p>The templating engine in <a href=\"http:\/\/openstructs.org\/construct\">conStruct<\/a> is one of the older modules that has been developed. In fact, it was probably more than two years ago. However, it has never been documented&#8230;<\/p>\n<p><em>Until now!<\/em><\/p>\n<p>It is nice to have a framework (<a href=\"http:\/\/openstructs.org\/structwsf\">structWSF<\/a>) that lets you ingest, manage, analyze and publish structured, semi-structured and unstructured data using a set of web service endpoints. However, it would be even nicer to have a user interface to interact with that system. It is what conStruct is: a user interface to structWSF endpoints.<\/p>\n<p>But it would be even nicer to have a way to personalize the structWSF data presented to users via conStruct: it is what the conStruct templates are all about.<\/p>\n<p>The only remaining problem was for someone new to conStruct to know how to create these templates.<\/p>\n<h3>Quick Introduction to conStruct Templates<\/h3>\n<p>conStruct templates are used to create different HTML page layouts to present information about instance records depending on their type. The present design utilizes Smarty as the baseline templating framework to create these templates. The only thing we added to it is a new API that lets template designers have access to the instance record(s) description(s). Think of it as an API to manipulate the information that will be displayed in the HTML page.<\/p>\n<p>The general idea is that depending on the type of the instance record you want to display information about, you will want your system to display the information you have about that instance record differently depending on the type of that instance record. For example, if you want to present information about a <em>neighborhood<\/em>, the information will be displayed differently than if you want to present information about a <em>person<\/em>.<\/p>\n<p>By using Smarty and the API extension created for conStruct, template designers are able to create different layouts to display things differently depending on the type of the records being viewed by the users of the system. Designers will also be able to make their template adaptive depending on how the records are described. As we know, not all persons are described the same way!<\/p>\n<p>Once a template designer gets used to this system, these presentation templates for instance records become an effective way to present information to users, in all different ways, by leveraging the structure of the information it conveys.<\/p>\n<h3>Some Examples<\/h3>\n<p>Here are some examples of templated pages for different kind of instances. These should show you how different they can be, and how they can integrate external tools such as Flash movies, YouTube videos and uses external JavaScript libraries:<\/p>\n<ul>\n<li><a href=\"http:\/\/demo.citizen-dan.org\/conStruct\/view\/?uri=http%3A%2F%2Fdemo.citizen-dan.org%2FconStruct%2Fdatasets%2F93%2Fresource%2F19103&amp;dataset=http%3A%2F%2Fdemo.citizen-dan.org%2Fwsf%2Fdatasets%2F93%2F\">Johnson County, Iowa<\/a> (Citizen Dan). This template displays the information about a <em>County<\/em>. It displays some textual information such as the total population, etc. It also embeds a map, and other <a href=\"http:\/\/openstructs.org\/semantic-components\">Semantic Components<\/a> tools.<\/li>\n<li><a href=\"http:\/\/www.mypeg.ca\/conStruct\/view\/?dataset=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F258%2F&amp;uri=http%3A%2F%2Fwww.mypeg.ca%2FconStruct%2Fdatasets%2F258%2Fresource%2Fneighborhood\/110\">Sargent Park<\/a> (MyPeg.ca). This template is like the one above, but it displays information about a <em>Neighborhood<\/em> of Winnipeg City. It displays a map as well, but it also displays a <a href=\"http:\/\/techwiki.openstructs.org\/index.php\/Workbench:_Create_Dashboard_Views\">Dashboard<\/a> session.<\/li>\n<li><a href=\"http:\/\/www.mypeg.ca\/conStruct\/view\/?uri=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F272%2Fresource%2FLonnyGreta&amp;dataset=http%3A%2F%2Fwww.mypeg.ca%2Fwsf%2Fdatasets%2F272%2F\">Lonny &amp; Greta<\/a> (MyPeg.ca). This template is quite different. It displays information about an <em>Interview<\/em>. It embeds a series of videos from YouTube. And if you click on \u00ef\u00bf\u00bdtext\u00ef\u00bf\u00bd, you will get a text summary of the interview that is displayed in the <a href=\"http:\/\/techwiki.openstructs.org\/index.php\/SStory\">sStory<\/a> semantic component that got created using <a href=\"http:\/\/jquery.com\/\">jQuery<\/a>.<\/li>\n<\/ul>\n<p>As you can see, you have the leisure to do whatever you want by leveraging this templating system. And I am not even talking about the other goodies that you could get from it if you start leveraging the Drupal API within these templates!<\/p>\n<h3>Yes, But How?<\/h3>\n<p>The last question that I have to answer with this blog post is: <em>how the hell can I create these templates?<\/em><\/p>\n<p>The answer to this question (I hope) lies in this new <a href=\"http:\/\/techwiki.openstructs.org\/\">TechWiki<\/a> page that I published this morning:<\/p>\n<p><a href=\"http:\/\/techwiki.openstructs.org\/index.php\/Building_conStruct_Templates\">Building conStruct Templates<\/a><\/p>\n<p>It explains everything you need to know in order to create a conStruct template: what is the workflow, how the system works internally, a complete description of the extension API with a lot of Smarty code examples.<\/p>\n<p>Enjoy!<\/p>\n<p class=\"MsoListParagraphCxSpLast\" style=\"text-indent: -18pt;\"><span lang=\"EN-US\">get a text summary of the interview that is displayed in the <\/span><a href=\"http:\/\/techwiki.openstructs.org\/index.php\/SStory\"><span lang=\"EN-US\">sStory<\/span><\/a><span lang=\"EN-US\"> semantic component that got created using <\/span><a href=\"http:\/\/jquery.com\/\"><span lang=\"EN-US\">jQuery<\/span><\/a><span lang=\"EN-US\">.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">As you can see, you have the leisure to do whatever you want by leveraging this templating system. And I am not even talking about the other goodies that you could get from it if you start leveraging the Drupal API within these templates!<\/span><\/p>\n<h3><span lang=\"EN-US\">Yes, But How?<\/span><\/h3>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">The last question that I have to answer with this blog post is: <em>how the hell can I create these templates?<\/em><\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">The answer to this question (I hope) lies in this new <\/span><a href=\"http:\/\/techwiki.openstructs.org\/\"><span lang=\"EN-US\">TechWiki<\/span><\/a><span lang=\"EN-US\"> page that I published this morning:<\/span><\/p>\n<p class=\"MsoNormal\"><a href=\"http:\/\/techwiki.openstructs.org\/index.php\/Building_conStruct_Templates\"><span lang=\"EN-US\">Building conStruct Templates<\/span><\/a><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">It explains everything you need to know in order to create a conStruct template: what is the workflow, how the system works internally, a complete description of the extension API with a lot of Smarty code examples.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\">Enjoy!<\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The templating engine in conStructis one of the older modules that has been developed. In fact, it was probably more than two years ago. However, it has never been documented&#8230;Until now! It is nice to have a framework (structWSF) that lets you ingest, manage, analyze and publish structured, semi-structured and unstructured data using a set [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[154,84,153],"tags":[169,162],"class_list":["post-1142","post","type-post","status-publish","format-standard","hentry","category-osf-for-drupal","category-semantic-web","category-structured-dynamics","tag-construct-2","tag-open-semantic-framework-2"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1142"}],"version-history":[{"count":5,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1142\/revisions"}],"predecessor-version":[{"id":1235,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1142\/revisions\/1235"}],"wp:attachment":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}