TTW Customization with Rapido
Bréhault, Eric
A demo of Plone's through the web customization tool.
 So, okay. Okay, so let's go. So, no. This is not my computer because mine was not working with the video projector. So I had to set up back all my demo on this machine, but that's fine because Rapido is really easy to deploy. Rapido development are quite easy to deploy. So, Rapido. Rapido is something you manage from the Sim editor. So, here is the Sim editor. If you're familiar with Diozos, that's exactly what the kind of thing you do. You have a Sim folder where you have your styles, your HTML, whatever. Well, if you just add a folder named Rapido, and you create into this folder another folder named, for instance, demo, it just instantiate a Rapido application named demo, right? There is nothing else to do. There is no declaration somewhere, no file to produce or whatever. You just create those folders and you get Rapido enabled, right? That's enough. And the principle of Rapido is you're going to create blocks. So, this has nothing to do with actual... Oh, it's a little weird. Maybe if I... Yeah, it's much better. Excuse me. I'll just try to maximize. Yes. Blocks are composed of an HTML file. For instance, this is a block, okay? Static HTML file. And that could be enough if you're happy with that. And this block will be inserted into your pages using a rule in DIAZO. So, here, my first demo, I take this block. I've been just showing the code of this just basic static HTML. And I include it somewhere using a DIAZO selector, right? So, I say, before the first reading, I'm going to put this block, right? And that's how it goes. Here, if I go to my demo folder, here, a very simple example. Here, I get my block, right? So, that's a piece of HTML that has been injected into this page. Okay, well, that's simple, right? You don't need Rapido to do that. This could be done, for instance, with Mosaic. Mosaic is a perfect tool for that. But still, that's the principle of Rapido. Now, the thing about it is you can display information which is not necessarily static. Here, I have changed my block with something which is actually getting information from the contents. And here, I'm using the subject. You know, I've been tagging different contents. And I'm listing all the different amount of documents. I've been having the same subject of the current one. So, this one is about Rapido and through the web. And I see here, there are four other documents about through the web. So, this is dynamic. And this is something you cannot do with Mosaic, right? With Mosaic, you can add a content, a field. So, it can be an image, it can be a text, but you cannot compute stuff, right? So, this is something Rapido allows. It works well. This time, I'm going to have not just a layout. And here, my layout is not even HTML, this is a patch template. So, I can have this layout. And in this layout, I'm going to put some information from, well, Python. Here, I'm using Python to implement different computations. So, here I have, for instance, tags. You're going to get all the tags corresponding to the current content. So, here that's how it goes. I get the content from the context. And for each subject in the content, I'm going to get the score for the corresponding keywords. So, that's quite simple to implement. I won't go too much into this. Maybe I should zoom in a little bit. I don't know how we do that. Yes, probably better. So, that's simple Python script. And it is binded to the template using this YAML file where I declare all the elements I want to use into my template. So, it produces this. Okay? Now, we probably like these two to do something. Right now, just displaying information. What I would like is it actually displays all the different contents having the same tag. So, as you see, through the web, I go here and I see all the documents, all the folders sorted into tabs about through the web. And here, if I click mockup, I'm going to do the same documents and folders. And I can have a preview. Okay? Well, this is done with Rapido plus mockup. And it's really easy to do. It's actually a model pattern. So, model mockup pattern with display Rapido block, which is a pattern, which contains a pattern, which load a content. Simple, right? Well, I'm going to show you how it is. So, this is the template. So, it's just listing into a list all the different tags. That's pretty much the same as the previous example. And I have, no, sorry, I have something to show here. I have been using this pattern here, right? So, that's the auto, sorry. The auto-talk pattern is displaying the tabs, right? And here, I am using content loader. So, content loader is the pattern which is able to load something. So, that's how I make the preview working. So, if I go there. So, that's the auto-talk pattern. And when I click here, you're going to use the loader pattern, right? So, that's quite simple. And here, I have nothing to do but to put some accurate markup on my different tags. And that's enough. I have JavaScript involved, there are JavaScript in the loader, not mine. I haven't been writing any JavaScript for that. And that's how my model is created, basically. So, that's not a lot of code. If you have a look, I have here, I get the list, I get the title from the different contents. That's not too much difficult to do. What I've been using here is the PLAN API. So, the PLAN API is available within Rapido. So, you can call context.api and do whatever you want with the PLAN API. And PLAN API is quite well documented. So, it's quite easy to know how to do stuff. So, here I'm using content.find to make a search. And I'm searching everything having the same subject as the current subject, right? And this is the example I've been describing just before. So, that's very simple to do. But still, the result is quite interesting, right? This is not easy to... If you try to imagine how you would do that with regular PLAN development, it would be not that easy, right? This is very simple and still quite impressive. Well, that's my opinion. But, so, someone who is not a PLAN developer can do that. Well, that's cool. Now, let's move to a more advanced feature. Here, I'm actually replacing the current view. All the examples before were just adding extra stuff into the regular PLAN layout. So, it's adding a block here, and that's pretty much it. Plus, bind it to mockup to get extra stuff, JavaScript stuff. Here, I'm just replacing entirely the rendering of PLAN with my own rapido block. And what it does here is managing a glossary. So, I can create definition for the different terms. So, I don't know, IP, Internet Protocol. I can save. So, that's my new entry. I can edit, change, or can delete. So, that's... It is using a persistence mechanism, a storage system, which is provided by rapido by default. And I use it to actually enable this glossary wherever I am. So, if I go back to the home page of PLAN, where we talk about SMTP, I think, yes. Here, I see that SMTP has been detected as part of my glossary, and I can hover it and have the definition, right? So, I've implemented a way to manage my glossary. So, that's one thing. And I also injecting all my glossary information into all the pages of the website. While this is not too difficult to do, I will not go totally in detail about this, but just show you the amount of code for that. We have, basically, the block which lists all the different definitions. That's the one. It has a small Python script to just query the storage system to get the record and sort them. And we have a page for editing a term. So, we have two information here, the term itself and its definition, plus a different button, save, delete, and close. And here is the implementation in Python. It's really, really short, really small. That's it about managing the glossary term. And to inject the glossary information into my pages, that's Java script. So, here, I'm just using the JSON API of rapido. Rapido provides a storage system plus a JSON API on top of it. It's not the PlonRest API, because here we are not managing Plon contents, but just small records. So, that's definition for glossary, but could be anything you want, like statistics, like visit counting, this kind of stuff can be stored that way. And you don't want it to be actual Plon contents, right? So, we can require, I've been using jQuery, but could be anything else. I get all the records from my glossary application, and then I search the page with a regress as way to replace all the words which match the term with a small abbreviation tag with a title. That's quite simple. And that's okay, that might look a little bit difficult. That's JavaScript stuff, but that's something someone who knows about JavaScript can do in a few minutes, right? So, that's my demo. Thank you.
 So, okay.  Okay, so let's go.  So, no.  This is not my computer because mine was not working with the video projector.  So I had to set up back all my demo on this machine,  but that's fine because Rapido is really easy to deploy.  Rapido development are quite easy to deploy.  So, Rapido.  Rapido is something you manage from the Sim editor.  So, here is the Sim editor.  If you're familiar with Diozos, that's exactly what the kind of thing you do.  You have a Sim folder where you have your styles, your HTML, whatever.  Well, if you just add a folder named Rapido,  and you create into this folder another folder named, for instance, demo,  it just instantiate a Rapido application named demo, right?  There is nothing else to do.  There is no declaration somewhere, no file to produce or whatever.  You just create those folders and you get Rapido enabled, right?  That's enough.  And the principle of Rapido is you're going to create blocks.  So, this has nothing to do with actual...  Oh, it's a little weird.  Maybe if I...  Yeah, it's much better.  Excuse me.  I'll just try to maximize.  Yes.  Blocks are composed of an HTML file.  For instance, this is a block, okay?  Static HTML file.  And that could be enough if you're happy with that.  And this block will be inserted into your pages using a rule in DIAZO.  So, here, my first demo, I take this block.  I've been just showing the code of this just basic static HTML.  And I include it somewhere using a DIAZO selector, right?  So, I say, before the first reading, I'm going to put this block, right?  And that's how it goes.  Here, if I go to my demo folder, here, a very simple example.  Here, I get my block, right?  So, that's a piece of HTML that has been injected into this page.  Okay, well, that's simple, right?  You don't need Rapido to do that.  This could be done, for instance, with Mosaic.  Mosaic is a perfect tool for that.  But still, that's the principle of Rapido.  Now, the thing about it is you can display information  which is not necessarily static.  Here, I have changed my block with something  which is actually getting information from the contents.  And here, I'm using the subject.  You know, I've been tagging different contents.  And I'm listing all the different amount of documents.  I've been having the same subject of the current one.  So, this one is about Rapido and through the web.  And I see here, there are four other documents about through the web.  So, this is dynamic.  And this is something you cannot do with Mosaic, right?  With Mosaic, you can add a content, a field.  So, it can be an image, it can be a text,  but you cannot compute stuff, right?  So, this is something Rapido allows.  It works well.  This time, I'm going to have not just a layout.  And here, my layout is not even HTML, this is a patch template.  So, I can have this layout.  And in this layout, I'm going to put some information from, well, Python.  Here, I'm using Python to implement different computations.  So, here I have, for instance, tags.  You're going to get all the tags corresponding to the current content.  So, here that's how it goes.  I get the content from the context.  And for each subject in the content, I'm going to get the score for the corresponding keywords.  So, that's quite simple to implement.  I won't go too much into this.  Maybe I should zoom in a little bit.  I don't know how we do that.  Yes, probably better.  So, that's simple Python script.  And it is binded to the template using this YAML file where I declare all the elements I want to use into my template.  So, it produces this.  Okay?  Now, we probably like these two to do something.  Right now, just displaying information.  What I would like is it actually displays all the different contents having the same tag.  So, as you see, through the web, I go here and I see all the documents, all the folders sorted into tabs about through the web.  And here, if I click mockup, I'm going to do the same documents and folders.  And I can have a preview.  Okay?  Well, this is done with Rapido plus mockup.  And it's really easy to do.  It's actually a model pattern.  So, model mockup pattern with display Rapido block, which is a pattern, which contains a pattern, which load a content.  Simple, right?  Well, I'm going to show you how it is.  So, this is the template.  So, it's just listing into a list all the different tags.  That's pretty much the same as the previous example.  And I have, no, sorry, I have something to show here.  I have been using this pattern here, right?  So, that's the auto, sorry.  The auto-talk pattern is displaying the tabs, right?  And here, I am using content loader.  So, content loader is the pattern which is able to load something.  So, that's how I make the preview working.  So, if I go there.  So, that's the auto-talk pattern.  And when I click here, you're going to use the loader pattern, right?  So, that's quite simple.  And here, I have nothing to do but to put some accurate markup on my different tags.  And that's enough.  I have JavaScript involved, there are JavaScript in the loader, not mine.  I haven't been writing any JavaScript for that.  And that's how my model is created, basically.  So, that's not a lot of code.  If you have a look, I have here, I get the list, I get the title from the different contents.  That's not too much difficult to do.  What I've been using here is the PLAN API.  So, the PLAN API is available within Rapido.  So, you can call context.api and do whatever you want with the PLAN API.  And PLAN API is quite well documented.  So, it's quite easy to know how to do stuff.  So, here I'm using content.find to make a search.  And I'm searching everything having the same subject as the current subject, right?  And this is the example I've been describing just before.  So, that's very simple to do.  But still, the result is quite interesting, right?  This is not easy to...  If you try to imagine how you would do that with regular PLAN development,  it would be not that easy, right?  This is very simple and still quite impressive.  Well, that's my opinion.  But, so, someone who is not a PLAN developer can do that.  Well, that's cool.  Now, let's move to a more advanced feature.  Here, I'm actually replacing the current view.  All the examples before were just adding extra stuff into the regular PLAN layout.  So, it's adding a block here, and that's pretty much it.  Plus, bind it to mockup to get extra stuff, JavaScript stuff.  Here, I'm just replacing entirely the rendering of PLAN with my own rapido block.  And what it does here is managing a glossary.  So, I can create definition for the different terms.  So, I don't know, IP, Internet Protocol.  I can save.  So, that's my new entry.  I can edit, change, or can delete.  So, that's...  It is using a persistence mechanism, a storage system,  which is provided by rapido by default.  And I use it to actually enable this glossary wherever I am.  So, if I go back to the home page of PLAN, where we talk about SMTP, I think, yes.  Here, I see that SMTP has been detected as part of my glossary,  and I can hover it and have the definition, right?  So, I've implemented a way to manage my glossary.  So, that's one thing.  And I also injecting all my glossary information into all the pages of the website.  While this is not too difficult to do, I will not go totally in detail about this,  but just show you the amount of code for that.  We have, basically, the block which lists all the different definitions.  That's the one.  It has a small Python script to just query the storage system to get the record and sort them.  And we have a page for editing a term.  So, we have two information here, the term itself and its definition,  plus a different button, save, delete, and close.  And here is the implementation in Python.  It's really, really short, really small.  That's it about managing the glossary term.  And to inject the glossary information into my pages, that's Java script.  So, here, I'm just using the JSON API of rapido.  Rapido provides a storage system plus a JSON API on top of it.  It's not the PlonRest API, because here we are not managing Plon contents,  but just small records.  So, that's definition for glossary, but could be anything you want, like statistics,  like visit counting, this kind of stuff can be stored that way.  And you don't want it to be actual Plon contents, right?  So, we can require, I've been using jQuery, but could be anything else.  I get all the records from my glossary application,  and then I search the page with a regress as way to replace all the words  which match the term with a small abbreviation tag with a title.  That's quite simple.  And that's okay, that might look a little bit difficult.  That's JavaScript stuff, but that's something someone who knows about JavaScript  can do in a few minutes, right?  So, that's my demo.  Thank you.
Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_0_539.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_540_2183.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_2184_3827.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_3828_8363.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_8364_12959.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_12960_13475.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_13476_13535.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_13536_14087.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_14088_16943.png Day_1__TTW_Customization_with_Rapido_by_Eric_Breha_2VDvgT_jbTE_16944_16946.png
So, okay. Okay, so let's go. So, no. This is not my computer because mine was not working with the video projector. So I had to set up back all my demo on this machine, but that's fine because Rapido is really easy to deploy. Rapido development are quite easy to deploy. So, Rapido. Rapido is something you manage from the Sim editor. So, here is the Sim editor. If you're familiar with Diozos, that's exactly what the kind of thing you do. You have a Sim folder where you have your styles, your HTML, whatever. Well, if you just add a folder named Rapido, and you create into this folder another folder named, for instance, demo, it just instantiate a Rapido application named demo, right? There is nothing else to do. There is no declaration somewhere, no file to produce or whatever. You just create those folders and you get Rapido enabled, right? That's enough. And the principle of Rapido is you're going to create blocks. So, this has nothing to do with actual... Oh, it's a little weird. Maybe if I... Yeah, it's much better. Excuse me. I'll just try to maximize. Yes. Blocks are composed of an HTML file. For instance, this is a block, okay? Static HTML file. And that could be enough if you're happy with that. And this block will be inserted into your pages using a rule in DIAZO. So, here, my first demo, I take this block. I've been just showing the code of this just basic static HTML. And I include it somewhere using a DIAZO selector, right? So, I say, before the first reading, I'm going to put this block, right? And that's how it goes. Here, if I go to my demo folder, here, a very simple example. Here, I get my block, right? So, that's a piece of HTML that has been injected into this page. Okay, well, that's simple, right? You don't need Rapido to do that. This could be done, for instance, with Mosaic. Mosaic is a perfect tool for that. But still, that's the principle of Rapido. Now, the thing about it is you can display information which is not necessarily static. Here, I have changed my block with something which is actually getting information from the contents. And here, I'm using the subject. You know, I've been tagging different contents. And I'm listing all the different amount of documents. I've been having the same subject of the current one. So, this one is about Rapido and through the web. And I see here, there are four other documents about through the web. So, this is dynamic. And this is something you cannot do with Mosaic, right? With Mosaic, you can add a content, a field. So, it can be an image, it can be a text, but you cannot compute stuff, right? So, this is something Rapido allows. It works well. This time, I'm going to have not just a layout. And here, my layout is not even HTML, this is a patch template. So, I can have this layout. And in this layout, I'm going to put some information from, well, Python. Here, I'm using Python to implement different computations. So, here I have, for instance, tags. You're going to get all the tags corresponding to the current content. So, here that's how it goes. I get the content from the context. And for each subject in the content, I'm going to get the score for the corresponding keywords. So, that's quite simple to implement. I won't go too much into this. Maybe I should zoom in a little bit. I don't know how we do that. Yes, probably better. So, that's simple Python script. And it is binded to the template using this YAML file where I declare all the elements I want to use into my template. So, it produces this. Okay? Now, we probably like these two to do something. Right now, just displaying information. What I would like is it actually displays all the different contents having the same tag. So, as you see, through the web, I go here and I see all the documents, all the folders sorted into tabs about through the web. And here, if I click mockup, I'm going to do the same documents and folders. And I can have a preview. Okay? Well, this is done with Rapido plus mockup. And it's really easy to do. It's actually a model pattern. So, model mockup pattern with display Rapido block, which is a pattern, which contains a pattern, which load a content. Simple, right? Well, I'm going to show you how it is. So, this is the template. So, it's just listing into a list all the different tags. That's pretty much the same as the previous example. And I have, no, sorry, I have something to show here. I have been using this pattern here, right? So, that's the auto, sorry. The auto-talk pattern is displaying the tabs, right? And here, I am using content loader. So, content loader is the pattern which is able to load something. So, that's how I make the preview working. So, if I go there. So, that's the auto-talk pattern. And when I click here, you're going to use the loader pattern, right? So, that's quite simple. And here, I have nothing to do but to put some accurate markup on my different tags. And that's enough. I have JavaScript involved, there are JavaScript in the loader, not mine. I haven't been writing any JavaScript for that. And that's how my model is created, basically. So, that's not a lot of code. If you have a look, I have here, I get the list, I get the title from the different contents. That's not too much difficult to do. What I've been using here is the PLAN API. So, the PLAN API is available within Rapido. So, you can call context.api and do whatever you want with the PLAN API. And PLAN API is quite well documented. So, it's quite easy to know how to do stuff. So, here I'm using content.find to make a search. And I'm searching everything having the same subject as the current subject, right? And this is the example I've been describing just before. So, that's very simple to do. But still, the result is quite interesting, right? This is not easy to... If you try to imagine how you would do that with regular PLAN development, it would be not that easy, right? This is very simple and still quite impressive. Well, that's my opinion. But, so, someone who is not a PLAN developer can do that. Well, that's cool. Now, let's move to a more advanced feature. Here, I'm actually replacing the current view. All the examples before were just adding extra stuff into the regular PLAN layout. So, it's adding a block here, and that's pretty much it. Plus, bind it to mockup to get extra stuff, JavaScript stuff. Here, I'm just replacing entirely the rendering of PLAN with my own rapido block. And what it does here is managing a glossary. So, I can create definition for the different terms. So, I don't know, IP, Internet Protocol. I can save. So, that's my new entry. I can edit, change, or can delete. So, that's... It is using a persistence mechanism, a storage system, which is provided by rapido by default. And I use it to actually enable this glossary wherever I am. So, if I go back to the home page of PLAN, where we talk about SMTP, I think, yes. Here, I see that SMTP has been detected as part of my glossary, and I can hover it and have the definition, right? So, I've implemented a way to manage my glossary. So, that's one thing. And I also injecting all my glossary information into all the pages of the website. While this is not too difficult to do, I will not go totally in detail about this, but just show you the amount of code for that. We have, basically, the block which lists all the different definitions. That's the one. It has a small Python script to just query the storage system to get the record and sort them. And we have a page for editing a term. So, we have two information here, the term itself and its definition, plus a different button, save, delete, and close. And here is the implementation in Python. It's really, really short, really small. That's it about managing the glossary term. And to inject the glossary information into my pages, that's Java script. So, here, I'm just using the JSON API of rapido. Rapido provides a storage system plus a JSON API on top of it. It's not the PlonRest API, because here we are not managing Plon contents, but just small records. So, that's definition for glossary, but could be anything you want, like statistics, like visit counting, this kind of stuff can be stored that way. And you don't want it to be actual Plon contents, right? So, we can require, I've been using jQuery, but could be anything else. I get all the records from my glossary application, and then I search the page with a regress as way to replace all the words which match the term with a small abbreviation tag with a title. That's quite simple. And that's okay, that might look a little bit difficult. That's JavaScript stuff, but that's something someone who knows about JavaScript can do in a few minutes, right? So, that's my demo. Thank you.
are four other documents about through the web.