Skip to content

Javascript Framework UI

cx.ui.dialog(options)

Display a dialog (based on jQuery UI Dialog). Options:

  • title a title string. optional.
  • content a div-element or pure html code.
  • modal boolean (defaults to true)
  • autoOpen whether the dialog should open on creation. boolean (defaults to true)

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
//display a simple message
cx.ui.dialog({
    title: 'test',
    content: '<p>just a message.</p>',
});

//create the dialog and save a reference
var d = cx.ui.dialog({
    title: 'test',
    content: '$(#messageDiv)',
    autoOpen: false
});

d.open();

Events

1
dialog.bind('close', myFunction)

Will add a listener for the dialogs close-event.

All jquery ui dialog events as specified in the documentation can be bound. #Resources The default skin is located at lib/javascript/jquery/ui/css/jquery-ui.css.

The default images are in lib/javascript/jquery/ui/images

cx.ui.confirm(text, type)

Creates a confirm dialog (like ECMA confirm() but using cx.ui.dialog())

cx.ui.messages

This provides an interface to handle user messages on client-side, similar to \Message class on server-side. It provides the following methods:

1
cx.ui.messages.add(msg, type);

Shows a message for 10s.
msg is the messages as a string
type is one of error, warning, info, success

1
cx.ui.messages.showLoad();

Shows a "loading" message until another message is added or removeAll() is called.

1
cx.ui.messages.removeAll();

Removes all currently shown messages (is called by the other two methods before adding their message)

cx.ui.forms

This provides tools for handling forms generated by View Autogeneration.

1
cx.ui.forms.get((<id>));

This method returns an array of all auto-generated forms present on this page.
id ID is an optional integer identifying the form to get the element of.

1
cx.ui.forms.validate(<form>(, <skipMessage>));

Validates the given form, shows error messages if validation fails and returns if the validation was successful or not.

form is the jQuery element of a form. Can be fetched using cx.ui.forms.get().

skipMessage is optional. If set to true, no error messages are shown.

If a cx-ui form is fetched using AJAX by using another method than cx.ajax() call cx.ui.forms.fix() to avoid duplicate IDs as soon as the DOM is loaded.

cx.ui.intro

Create intros for components or features in Cloudrexx. See dedicated article Intros.

Dependencies

Dependencies between any element and a form field can be specified using the following syntax:

1
<div data-depends="dependency-id"></div>

The div above will only be shown if the form field with ID dependency-id is checked.

Whenever the dependency is met the element will get the class "dependency-met".

This currently only works for form elements of type "checkbox" and "radio".

Only one dependency can be specified per element.

cx.ui.tabs

Create tabs organized in lists.

Base usage

Tabs are identified by the following markup:

1
<div class="tab <tabName>" data-tablist="<listName>">
  • <tabName> is the name of the tab
  • <listName> is the name of the list the tab belongs to
  • the element does not have to be a div

A list of the tabs can be done using the following markup:

1
2
3
4
5
6
7
8
<ul class="tabmenu" data-tablist="<listName>">
    <li>
        <a href="#" data-tablink="<tabName#1>">First Tab</a>
    </li>
    <li>
        <a href="#" data-tablink="<tabName#2>">Second Tab</a>
    </li>
</div>
  • If there's but one tab the list is hidden automatically.
  • Replace <listName>, <tabName#1> and <tabName#2> accordingly.

If an element should select a specific tab on click the element simply needs to have the data-tablist and data-tablink attributes.

Alternatively, the data-tablist attribute can be put in a parent element. The following two examples lead to the same overall result and can be done with any element:

1
<img src="#" alt="example" data-tablist="default" data-tablink="firstTab" />


1
2
3
<div data-tablist="default">
    <img src="#" alt="example" data-tablink="firstTab" />
</div>

Note

In those examples default does represent the <listName> and firstTab a <tabName>.

Selected tab

The currently selected tab as well as all links pointing to it using the method
above are given the class active. For all other tabs and links to them
the class active will be removed.

API

Selecting tabs can be done using cx.events or
via a helper wrapper:

Select a tab using the helper:

1
cx.ui.tabs.select("<listName>", "<tabName>");

The helper does nothing else than calling the event, which you can also do directly:

1
2
3
4
cx.trigger("selectTab", "cx.ui.tabs", {
    "tablist": "<listName>",
    "tabname": "<tabName>"
});

  • Replace <tabName> by the name of the tab to show and <listName> by the name of the tabList the tab <tabName> belongs too.
  • If an empty string is provided as <tabName> the first tab of the list is shown. When using the helper the <tabName> argument can also be omitted in this case.

Listen to tab selection events:

1
2
3
4
5
6
7
cx.bind(
    "tabSelected",
    function(args) {
        console.log("Tab \"" + args["tabname"] + "\" of list \"" + args["tablist"] + "\" selected");
    },
    "cx.ui.tabs"
);

While you could also listen to selectTab events using tabSelected has the advantage that it
is triggered once the selection is complete. args.tabname in tabSelected will contain the
name of the selected tab even if an empty string was passed to selectTab.

Form actions

Form action URLs are automatically updated whenever a tab is selected (including during initialization). If a form needs to link to a specific tab the associated tablist has to be fixed so the systems stops updating the form action if a tab from this list is selected. This is done by adding the following:

1
<form ... data-fixed-tablists="<tablistNames>">

<tablistNames> is a comma-separated list of tablist names.

jQuery UI I18n

The framework provides automatical I18n according to the frontend language id set.

Example

displaying a localized datePicker

1
2
3
cx.ready(function() {
    cx.jQuery('input[name=newsDate]').datetimepicker();
});