Module Tutorial: User Polling / Rating: Hello Webiva!

Now that the module is activated, we need to make it actually do something. The first thing we’re going to do is create a ParagraphRenderer to render ourselves a paragraph (actually a ParagraphRenderer,ParagraphFeature and a ParagraphController - these things always come in threes).

We can again use a generator to generate the boilerplate code we’ll need to get started. In this case, we’re going to create a Renderer with two types of paragraphs: a list paragraph for listing a bunch of polls, and a view paragraph for viewing a single poll. Run the following generator from the Rails root directory:

$ ./script/generate webiva_renderer poll_demo/page list view

The generator should output something like the below:

  create  /vendor/modules/poll_demo/app/controllers/poll_demo/page_controller.rb
  create  /vendor/modules/poll_demo/app/controllers/poll_demo/page_feature.rb
  create  /vendor/modules/poll_demo/app/controllers/poll_demo/page_renderer.rb

You’ll see it generated a PollDemo::PageController, a PollDemo::PageFeature and a PollDemo::PageRenderer along with a couple of views. Check back to the Technical Overview to see architecture if you need a more detailed description on what each of the three of Controller/Renderer/Feature do. At a most basic level:

• PollDemo::PageController is responsible for paragraph configuration options
• PollDemo::PageRenderer is responsible for generating the data needed to render the paragraph (much like a standard Rails controller)
• PollDemo::PageFeature is responsible for taking the generated data and outputting the paragraph on the front end of the website (much like a standard Rails view)

Because the generator creates new paths, specifically the new view path, we need to restart Webiva to add the new view paths in, so run:

   $ touch tmp/restart.txt

Now from the Webiva backend, click on the Website tab and drag a new page onto your site called ‘poll’. Click Edit Page to edit the page.

Now let’s add a paragraph to our page. Click the Add Paragraph icon and scroll down to the ‘Polldemo Paragraphs’ section - and lo and behold - there are our two paragraphs we just generated: ‘List’ and ‘View’. Click on the ‘View’ paragraph and add it to your main zone.

The paragraph should get dropped onto the site with the contents “View Feature Code…” and an options dialog should popup. Since we haven’t actually added any options to the paragraph, there’s nothing there, so just click ‘Update and Close.’

By default this paragraph will render the poll_demo_page_view feature, so as a way to start controlling the output, let’s change the default feature code to a more custom message. Edit the heredoc text around line 15 of vendor/modules/poll_demo/app/controllers/poll_demo/page_feature.rb to read “Hello, Webiva!” instead of “View Features Code…”

Before you can see your changes in the site, remember: if you’re running in production mode and make a code change, you’ll need to touch tmp/restart.txt. Now, one quick way to get the paragraph to re-render is to click on the title of the paragraph (labeled ‘View’) and reselect the current style, ‘Default Style’. The paragraph should update to the new default style that you have written.

And there we have it! We’ve added our first custom paragraph to the system and made it output a custom message. It’s not going win any awards, but it’s a start.

Before going further into the Renderer/Controller/Feature system, we’re going to take a detour to add some custom models to the system and add a custom migration, just for this module.