The URL Fragments

by Lucio Bordonaro
18,559 views Published on Oct 24, 2011
Applies to: All versions
Table of contents

Introduction

Search engines use a set of well-known rules to determine the visibility of a website. One of these rules is to have simple URLs containing the keywords with which the page should be indexed. WebRatio 6 introduced the URL Fragment feature. This feature allows you to increase the search engine ranking of the pages of a Web Application generated by WebRatio. The URLs are produced at runtime using a set of URL Fragments defined at the Web Project level. 

You can enable the URL Fragment on a Web Project from the Properties View of the Project itself by checking the "Enable URL Fragment" property.

This property enables the "Global URL Fragment" property.

When you press the "Select" button on the right of this property, a dialog is shown that contains the list of all the Context Parameters that must be used to create URLs. 
The order of the elements in this list is relevant. In fact, the value of each Context Parameter will be placed in the URL at the same position in which it appears in the list. Use the "Up" and "Down" buttons to reorder the list.

In a Web Project, the Page and the Parameter Collector can also be involved in the definition of the URL Fragments. You will see these same two properties on Pages and Parameter Collectors only when the URL Fragments are enabled for the entire project.

You can use the attached Web Project to test the examples in this article.

Using URL Fragments on a Page

On Pages the two properties to consider are "Custom URL Name", which gives a meaningful name to the page, and "URL Fragment", which helps you to build the URL structure.

When you press the "Select" button next to the "URL Fragment" a dialog is shown that contains the list of all Input Parameters and Variables available for the page itself and all the elements modeled inside the page. The Variables considered are only those not connected to a View Component.

Let’s see an example on how to use URL Fragments on pages.

Suppose we have a page showing the details of a product. Our goal is to show a URL for this page containing the "product" static word followed by the name of the current product.

http://<HostName>/<WebApplicationName>/product/<productName>

The first step to get this result is to enable the URL Fragments at the Project level. In your project move to the Project View and from the Project properties check the "Enable URL Fragments" and set the "Global URL Fragment" choosing the "Target URL Name" option.

Now let’s set the custom name for the Product Page. Select the Product Page from the model and set a value for the "Custom URL Name" property, such as "product". This name will be used in the dynamic construction of the URL.

To show the name of the product in the URL you need a model element that contains only the product name. Taking a look at the modeled page you can see that the Details Component has an Attributes Condition set on the "name" Attribute. All of the input parameters of components are available as URL fragments. 

Move to the Properties View of the page and set the "Global URL Fragment" choosing the "productName" Condition.

If you are not able to find the desired information inside the available input parameters, you may add a new variable to the page and use it to build the URL.

This is the resulting URL for the generated Web Application.

Use a Page Variable

A possible enhancement is to add the name of the product’s category, before the product name.

This info is available as Simple Imported Attribute on the Product Entity of the Domain Model.

The category name is not available as an input parameter of the Details Component so you need to add a new Variable to the Details Page.

Right-click on the Product Page and choose the "Add" and then select the "Variable" option. Let’s call it "categoryName" and set its type to string.

Now this variable will be available inside the "Parameters Binding" dialog of the incoming Details flow into the Variables section. Assign the "category" Attribute to the variable and press "OK" to confirm.

Open the URL Fragment editor to change the order of the parameters, and put the "categoryName" variable before the "productName".

This is the resulting URL for the generated Web Application.

Prevent navigation problems

Looking at this IFML Model you can notice that between the "Other Products" Page and the target "Product Page" Page there's an Action. This Action performs some business logic to retrieve the details of a product from the data source.

The problem with this model is that, if the user saves the URL of any Product Page in a bookmark, and tries to navigate the page again, later he may miss products updates since the Action will not be executed.

In order to have a Page that shows the latest product details, it's possible to include an Action inside a Page. This can be done by moving the existing Action inside the "Product Page".

To fix this model you have to:
•    Right-click on the Action and choose the option "Cut".
•    Right-click on the page and choose the option "Paste"; this preserves all the incoming flow and bindings for the Action.
•    Add the Data Flow between the Action and the Details Component to let data pass.

This is a preview of the fixed model.

Using URL Fragments on a Parameter Collector

The reason Parameter Collectors may use the URL Fragments is because this lets you have meaningful URLs for operation chains so that they can be easily invoked and dynamically generated.

The two properties you have to consider when applying the URL Fragments to a Parameter Collector are the "Custom URL Name", which is a meaningful name for the Parameter Collector, and the "URL Fragments" property to get and set the list of the parameters specified on the Parameter Collector that must be used by the URL. 

Let’s introduce URL Fragments for Parameter Collectors using the registration process for users. This example refers to the article How_to_dynamically_create_URLs. 

Assuming that the username is unique information, it's possible to use this information to retrieve each of the users and see if they exist. 

A meaningful URL can be something like the following:

http://<hostname>/<WebApplicationName>/confirmRegistration/<username>

To accomplish this example you need a model like the one shown in picture.

Add a Parameter Collector to the IFML Model and call it "Start Registration".

The Register User Action Definition requires, as input, the username of the User, so right-click on the Parameter Collector and choose the "Add" and then "Collector Parameter" option. Call the new parameter "username".

Bind the "username" parameter with the input parameter of the "Register User" Action.

Be sure to show feedback after the execution of the Action by adding a Feedback Page with a Message Component.

To set the URL properties for the Parameter Collector, move to its Properties View and set the "Custom URL Name" property to "registration".

Click the "Select" button for the "URL Fragment" property and select the "username" parameter.

Now in the generated Web Application a user can register by following the URL composed like this:

http://<hostname>/<WebApplicationName>/confirmRegistration/<username>

Now the URL can be easily generated dynamically and used in emails or shown to newly registered users.