Page URLs With Breakaway Binding

Creating a basic implementation of the 'Pages' functionality gave me an idea for how to handle the dynamic URLs. First, URLs need a default suggestion. Second page authors need the option to create there own URL.

A page's URLs should default to the page's title. Spaces are replaced by hyphens. Diacritic marks will also need to be handled correctly. For now diacritic marks are on the backlog.

The URL property within the entity class is indirectly updated by changes to the title. The indirection allows for string replacement to happen. The string replacement ensure compliant URLs for each page.

    <h:inputText
        value="#{pageWriter.page.title}"
        id="title"
        >
        <f:ajax event="keyup"
                listener="#{pageWriter.updateURL()}"
                render="url"
                disabled="#{pageWriter.page.freestyleUrl}"
        />
        <f:ajax event="blur"
                disabled="!#{!pageWriter.page.freestyleUrl}"
        />
    </h:inputText>

When in freestyle mode fewer ajax requests are needed and therefore made by disabling/enabling the 'keyup' and 'blur' events respectively; as can be seen above.

As well as a default URL, it is nice to let authors create their own URL. Allowing a freestyle URL as well as a default URL involves a breakaway binding. This binding needs to be linked and unlinked at the author's will.

Here is the JSF checkbox's declaration.

    <h:selectBooleanCheckbox value="#{pageWriter.page.freestyleUrl}">
        <f:ajax
            event="change"
            render="url"
        />
    </h:selectBooleanCheckbox>

This checkbox switches the freestyle mode.

Here is the JSF URL input field's declaration.

    <h:inputText
        class="form-control" 
        id="url"
        disabled="#{!pageWriter.page.freestyleUrl}"
        value="#{pageWriter.page.url}"
    >
        <f:ajax 

            event="blur"
            render="url"
            execute="url"
            disabled="#{!pageWriter.page.freestyleUrl}"
        />
    </h:inputText>

The blog platform's page entities now have following fields:

• url
• freestyleURL
• title
• description
• body (i.e. the content of the page)
• created by etc. will come later.

Here is the end result: