Skip to content

rad href

Jump to bottom
Steve Hannah edited this page Jul 13, 2021 · 3 revisions

rad-href attribute

Synopsis

An attribute that can be added to any ActionSource component (e.g. <button>, <multiButton>, etc.) or EntityView which specifies a URI to navigate the app to when a designated event is fired on the component.

When added to an ActionSource component like <button> or <multiButton>, the link is triggered by an ActionEvent. When added to an EntityView, you must also add the rad-href-trigger attribute to specify the ActionNode.Category that should trigger the event.

Usage

<myComponent
    rad-href="targetURI [context setting]"
    rad-href-trigger="TRIGGER_CATEGORY" ...
/>

Where:

targetURI

The target URI of the link (i.e. where does the app navigate to as a result of clicking this link).

See URI Syntax.

context setting

The navigation context setting for the link. Possible values include child, sibling, top, and _blank. Default value is child.

TRIGGER_CATEGORY

Only for use in EntityViews. The Action category that should trigger the link.

URI Syntax

The rad-href allows a few different URI types, and more formats may be added. Currently you can:

  1. specify another RAD View to navigate to using #ViewName,

  2. or you can specify web page to open (externally) using an http:// or https:// URL.

  3. or you can specify a Java expression to execute using java:…​.

Context Settings

When navigating to another view, you can specify the navigation context by appending a space, then one of the following context settings at the end of the rad-href attribute value:

child

(Default) The target form controller will be a child of the current form controller. E.g. The form’s back button will return to this form.

sibling

The target form controller will be a sibling of the current form controller. E.g. The form’s back button will navigate to the parent form of this form - or the same place that this form’s back button goes.

top

The target form controller will be created as a top-level form. It’s direct parent will be the application controller. E.g. The form will not have a back button.

_blank

Used only with http:// and https:// URLs. This will cause the URL to open in the system’s web browser. I.e. it will leave the app.

sel:SELECTOR

SELECTOR is a query selector (similar to a CSS selector) that identifies a container within the existing form into which the target view should be loaded. See ComponentSelector for selector syntax.

sheet

Loads the target view inside a Sheet. You can also use one of the variants of this: sheet-top, sheet-left, sheet-right, or sheet-center to specify where the sheet should be positioned.

Examples

Simple Link to Another View

Link to another view in the same package. Target view defined in BindingsPage.xml.
<button rad-href="#BindingsPage">Bindings</button>

Loading into Sheet

<?xml version="1.0"?>
<y xsi:noNamespaceSchemaLocation="SheetSample.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <title>Sheet Sample</title>
    <button rad-href="#StartPage sheet">Open Sheet</button>
    <button rad-href="#StartPage sheet-top">Open Sheet Top</button>
    <button rad-href="#StartPage sheet-left">Open Sheet Left</button>
    <button rad-href="#StartPage sheet-right">Open Sheet Right</button>
    <button rad-href="#StartPage sheet-center">Open Sheet center</button>
</y>

Master Detail Using SplitPane

The following example creates a SplitPane, where the left side includes a menu of buttons. Clicking on any of the buttons will load a corresponding view in the right pane.

<?xml version="1.0"?>
<splitPane xsi:noNamespaceSchemaLocation="IFrameSample.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <title>IFrame Sample</title>
    <y>
        <button rad-href="#StartPage sel:#Center"
            rad-transition="rad-href 1s flip">Start Page
        </button>

        <button rad-href="#BindingsPage sel:#Center"
            rad-transition="rad-href 1s flip">Bindings Page (Flip)
        </button>

        <button rad-href="#BindingsPage sel:#Center"
            rad-transition="rad-href 1s slide">Bindings Page (Slide)
        </button>

        <button rad-href="#BindingsPage sel:#Center"
            rad-transition="rad-href 1s cover">Bindings Page (Cover)
        </button>

        <button rad-href="#BindingsPage sel:#Center"
            rad-transition="rad-href 1s fade">Bindings Page (Fade)
        </button>

        <button rad-href="#BindingsPage sel:#Center"
            rad-transition="rad-href 1s uncover">Bindings Page (Uncover)
        </button>

        <button rad-href="#IFrameSample sel:#Center"
            rad-transition="rad-href 1s flip">IFrame Sample Page</button>
        <button rad-href="#CustomViewControllerSample sel:#Center"
            rad-transition="rad-href 1s flip">Custom View Controller
        </button>
    </y>

    <border name="Center">
        <label layout-constraint="center">Placeholder for content</label>
    </border>
</splitPane>
Note
 This example also makes use of the rad-transition attribute to employ a nice transition when changing the view of the container.

The active ingredient of this example is that the target context of each of the buttons is sel:#Center, which means that the target view should be loaded in a container with name="Center". This will target <border name="Center"> container.

rad href master detail iframe

Example HTTP URLs

Button that opens the Codename One website in the system browser.
<button rad-href="https://www.codenameone.com _blank">codenameone.com</button>

Example Navigation Contexts

Opens the WelcomePage view as a top level form (i.e. a direct child of the ApplicationController), and no back-button.
<button rad-href="#WelcomePage top">Welcome</button>
Opens the DetailsPage view as a sibling of the current form (i.e. it’s back button will go to the same place that the current form’s back button goes).
<button rad-href="#DetailsPage sibling">Details</button>

See Controllers for more information about the controller hierarchy.

Example: Creating a Back Button

All views include a back() method that can be called to trigger a FormBackEvent, which will cause the user to navigate back to the previous form. We can trigger this in the rad-href attribute using the java: prefix as follows:

<button rad-href="java:back()">Go Back</button>

See Also

Clone this wiki locally