Entry | RG Nets

Ruby on Rails uses the link_to keyword to generate HTML anchor tags with hyper link reference attributes. In a typical portal, a series of link_to tags are used to create a navigation menu. The code below expands on the simple example used to describe the structure of the captive portal.

<body>

  <%= portal_image_tag 'logo.png' %>
  <p>Welcome to my captive portal!</p>

  <div> <!-- BEGIN MENU -->

    <%= link_to 'Home', { :action => :index }, { :class => 'menu' } %>

    <% unless @logged_in %>

      <%= link_to 'Login', { :action => :login }, { :class => 'menu' } %>

      <%= link_to 'Sign Up', { :action => :account_new }, { :class => 'menu' } %>

    <% else -%>

      <%= link_to 'Logout', { :action => :login_session_destroy, :method => :delete }, { :class => 'menu' } %>

    <% end -%>

    <%= link_to 'Usage Plans', { :action => :usage_plan_list }, { :class => 'menu' } %>

    <%= link_to 'Custom Example', { :action => :custom_example }, { :class => 'menu' } %>

  </div> <!-- END MENU -->

  <!-- renders the content of the page being viewed, such as sign up, or login -->
  <%= yield %>

</body>

The code contained with the <div> tags delimited by the BEGIN MENU and END MENU comments. Each link in the menu has been given a class named 'menu'. A style sheet must be defined the look and feel of the links. The default style sheet comes with a presentation that may be accessed by creating HTML unordered list items with the class menuparent and is shown below. The presentation may be customized to almost anything imaginable by simply editing the CSS file.

There are several embedded Ruby elements incorporated into the menu example above. Starting from the top, the first Ruby element we see is link_to. The first argument to link_to is the name of the link as you want it displayed. The second argument is the action definition, this definition determines what page should be viewed after clicking the link. The last argument is the optional class argument that will specify the class of your link.

Embedded Ruby conditionals in the code change the HTML that is generated based on whether or not the end-user viewing the portal is logged in. Most end-users will first reach the portal while not logged in and first see the default menu example as shown above.

Once the end-user logs in, the menu will change. We only want to display the 'Login' and 'Sign Up' links if the user is not already logged in. The line <% unless @logged_in %> executes the lines of code underneath it when @logged_in variable is not set. The conditional ends with the <% end -%>element. The HTML and embedded Ruby from the unless all the way to the end are subject to the conditional.

The @logged_in variable is dynamically created based on the current state of the user looking at your captive portal.@logged_in is only set when the end-user has provided valid credentials to the portal web application. Thus the link_toembedded Ruby anchor HREF generators for Login and Sign Up links are ignored when the end-user is logged in. The embedded Ruby else clause causes the Logout link to be displayed in their place.

<%= link_to 'Custom Example', { :action => :custom_example }, { :class => 'menu' } %>

Continuing with the example, the next element demonstrates how to add a custom view to the menu. The link specifies custom_exampleas the target. Aside from all of the built-in views for things such as login and usage_plan_list, you can create your own custom view. One has been created for you called custom_example.

You may also want to display static content that is not framed by your portal layout. One example would be a page that is intended for printing that should not be contain the portal menu. You can do this by using normal HTML anchor tags with a little bit of Ruby helper to get the content.

<a href="<%= portal_static_path 'static.html' class="menu">Static Example</a>

This example shows that ruby can even be included in-line into an html tag. Our example says, lets get content from the current portal being viewed. Any content referenced in this manner will come from the 'static' folder. Keep in mind html without any ruby is perfectly acceptable.

To add drop-down sub-menus that appear when the mouse moves over the menu items, add a unordered list (HTML ul tag) with list items (HTML li tags) within the context of the menu item. The menu is defined in the PORTAL_CONTROLLER_NAME.erbfile.

For example, given the original menu item:

<li class="menuactive"> <%= link_to 'Home', { :action => :index }, { :class => 'menuactive' } %> <!-- INSERT HERE --> </li>

Add the following code: <ul> <li><%= link_to 'Custom Template', { :action => :custom_example }, { :class => 'menuactive' } %></li>  </ul> The result should look like the following: <li class="menuactive"> <%= link_to 'Home', { :action => :index }, { :class => 'menuactive' } %> <ul> <li><%= link_to 'Custom Template', { :action => :custom_example }, { :class => 'menuactive' } %></li>  </ul> </li>

By integrating the code above with the layout example shown previously, you have a fully functional portal with menu. Now you can clean it up, add your own design, style, etc. All with just normal HTML, using the example Ruby from above where necessary.

Menu