CXP Samples for Everyone

Just try them out!

Simple 'Hello World'

The basic idea behind CXP pages is to mix HTML markup and Xbase++ code. Whenever Xbase++ code, either a single expression or a complete block of statements is inserted into a page, the code must be embedded between special start and end tags. This way, any valid Xbase++ code can be used to make the HTML content richer and data-driven. The CXC Builder automatically creates a binary for ...

Dynamic HTML

The core idea of CXP and dynamic HTML is simple: mix code and functionality to give HTML pages the same dynamics, freedom and power any Xbase++ application has. In a more abstract sense, the idea of CXP is mixing and merging imperative and declarative programming to create new possibilities.

Code locality basics

The CXP:Infrastructure allows you to define the code locality. Code locality is a feature for controlling the position where your Xbase++ code is injected into the page class. By default, all Xbase++ code is injected into the ::Render() method of your page class, in the order the code appears in your CXP file. However, sometimes it is required to create classes or helper func...

Your first form

This basic form sample shows how to set up a form, how to access the data entered into the form, and how form data is made persistent and transported between pages.

Automatic session management

The CXP execution infrastructure automatically handles session management for you. Session management is required to identify incoming requests and to associate them with a specific user/device. In this sample, the basic concepts for storing and retrieving session data are shown. By default, a session has a timeout of 15 minutes, meaning session data is held available for access for a pe...

Uploading files

This sample shows how to upload files from the web browser to a CXP page. After a file was uploaded, it can be processed within the page using the member variable :Files of the HttpRequest object. The sample first loads the HTML file upload-files-form.html that provides the user interface for selecting files that shall be uploaded. To make a file selectable in th...

Using AJAX

This is a sample showing how to use an AJAX request to update content inside a page. Two ways are shown how this can be done. In general, the location of the page which needs to be updated has to be identified. For that an id (updated-by-interval, updated-by-button) attribute is used. The update process is done using the JQuery load() method which is available for any HTML tag. Th...

Dynamic image

The dynamic content returned by CXP pages is not limited to simple HTML. Instead, arbitrary content can be generated. In this sample, a GIF image is created in CXP code and is then returned to the browser. No HTML markup is used here. Instead, the member variable :ContentType and the method :WriteBinary() of the HTTP response object are used to send the image data back to...

Caching your CXP page

There are situations in which execution of the code in a CXP page is not required each time the page is accessed. This can be useful to increase site performance and to reduce workload on the DBMS or application server. This sample shows how a local configuration file can be used to configure the timeout after which the CXP page is next executed. The configuration file must be named afte...

Sending emails from within a CXP page

This example contains a class for sending emails from within a CXP page. The class can be used for transforming HTML form data into an XML stream, which is subsequently sent to a certain mail account for further processing. You can find an example for the class' usage in the contact-form.cxp application.

Returning a JSON data stream

The CXP infrastructure can return data of arbitrary type. This example implements data retrieval from a supplier database. The page itself does not return HTML. Instead, it returns JSON data and is used as the datasource for a grid. The grid itself is implemented in another CXP page. See Editable grid with Tabulator ...

Automatic data persistence

The CXP infrastructure contains a feature which is called entity storage. This feature provides you with a persistent storage for any data you want to associate with either the current session or your application or the current page. The CXP infrastructure automatically takes care of persisting your data, and making it available to your application in the context requested.

Code tracing

You can use the method :Trace() in your CXP code to output tracing information to a debug console. The trace messages can then be viewed using utilities such as DbgView. DbgView is published by Microsoft Technet. The CXP infrastructure also features a built-in tracing mechanism which prints...

Basic layout usage

The layout file contains the general HTML markup shared by all pages, and hence defines the HTML structure for the entire site. The layout relies on commands such as @RENDER section to place content defined by other pages in the structure defined. Of course, layout pages are just pages! Therefore, anything you can do in pages is allowed in layout files, too. No restrictions appl...

Sections in more detail

The sample layout uses commands such as @RENDER section to place output generated in the content page. Alternatively, the method :renderSection(cSection) can be used instead of the command. In addition, using ::hasSection() allows verification of whether a content page defines the requested section.
The composition engine of the CXP infrastructure introduces a...

Nesting of layouts

Because layouts are just pages, it is legal and by design to have a layout page refer to another layout page, creating nested layouts. In this sample, the nested-layout-department.layout in fact references the nested-layout-company.layout, which is what we call our master layout or outermost layout, while the nested-layout-usage.cxp page is being referred to as the i...

Using Pagelets!

A CXP page can also call up functionality supplied in other pages via the :RenderPage() method. Pages which define only a content (body) section and are used in this manner are called pagelets. In this example, a pagelet is used to create a page with a list of the quotes of the day in a single loop.

Single Pagelet

Pagelets are like functions. Pagelets act like independent HTML frames and provide discrete access to content. Pagelets can be used across several pages. However, as the name implies, pagelets deliver content to others and do not themselves define HTML pages.

Paging grid with DataTables

This sample showcases a paginated table using DataTables, a jQuery plugin. It includes the frontend implementation of a paging grid. The data source is provided through an additional CXP page (backend) that delivers JSON data. For backend implementation details, refer to the Returning a JSON data stream ...

Editable grid with Tabulator

This sample demonstrates the frontend implementation of an editable grid using the Tabulator library. It includes both the HTML markup and the JavaScript configuration for the grid. The data source is managed through a separate CXP page (backend) that provides JSON data. Refer to the Returning a JSON data stream sa...

Contact form with jQuery

This sample illustrates how CXP and jQuery technologies can be combined to create a form for inputting contact information. Among the features used in this example are the following: integrating client-side input validation, email composition and sending.

Bar chart with Charts.js

The sample illustrates how charts can be displayed using CXP. It is composed of two parts: one part chart-bar.cxp is dedicated to displaying a chart, while the other part chartsjs-data.cxp provides the data that populates the chart. The Chart component utilized is from the Charts.js library.

Pie chart with Charts.js

The sample illustrates how charts can be displayed using CXP. It is composed of two parts: one part chart-pie.cxp is dedicated to displaying a pie chart, while the other part chartsjs-data.cxp provides the data that populates the chart. The Chart component utilized is from the Charts.js library.

Data feed for the charts

This sample implements a simple query which is returned to the caller as a JSON array. This CXP page is normally executed using an AJAX call from the chart-bar.cxp page to load new data based on which the chart is then drawn.

Separate CXP page for each locale

By default, the CXP core determines the requested locale from your browser settings. This is done by inspecting the "Accept-Language" header field of the HTTP request. The locale is then used for finding a suitable CXP page to execute for satisfying the request.
This sample consists of three files: locale-separated.cxp, locale-separated.cxp.en and locale-separated....

Locale message tokens

Sometimes it is tedious to create a separate CXP page for each locale. A better idea would be to store the multilingual text independently of your source code and retrieved it dynamically.
This sample consists of two files: locale-tokens.cxp and locale-tokens.cxp.locale. The locale-tokens.cxp.locale file is an XML file that has the multilingual text divided into loc...

Switching locales programmatically

The CXP core optionally supports managing the locale independently of your browser settings on a user-specific level. In other words, any CXP application can overwrite the browser settings via the :application object of a CXP page.
This sample consists of two files: locale-programmatically.cxp and locale-programmatically.cxp.locale. The locale-programmatically.cx...

Read more about CXP technical concepts...