Search This Blog

Friday, June 7, 2013

Advanced (JQuery UI-based) Tooltips for Detail View Items on the Web

I would like to announce another community contribution from an active XAF customer (Thanks Krzysztof!):

What it looks like?
Here is what it looks like in an XAF Web app:

Main features 
Below is the list of supported features set by the author:

- is easy defined
- uses jQuery and jQuery-ui tooltip
- supports html tags
- has no character number limit (as in standard IE browser dialog)

Example of use:

Set an attribute on your entity property:

    [Tooltip("This is a sample tooltip from an <br/><br/>(some BR tags)<br/><br/><br/><br/>attribute")]

Or set a text in Model.DesignedDiffs.xafml (in a detail view layout item).

Learn how it is implemented!
The author also carefully documented the signification source files that form this solution and you can see this info in the "Significant files" section on the contribution page.

For you to learn how this works from the XAF perspective, let me make a short dissection of his solution:

1.  As you know, XAF allows you to customize built-in UI elements or replace them with your own versions. The Views Layout on the Web is powered by the WebLayoutManager, which renders Property Editors and  other View Items defined in the Application Model in the UI using web controls and ITemplate objects. Here a custom ITemplate was created for the layout item by inheriting from the built-in LayoutItemTemplate class (see more...).

2. To tell XAF to use this new custom layout item template, the WebLayoutController class was created (see more...): it just set a property the WebLayoutManager.
Find more details on this in the DevExpress Support Center.

3. Since the solution was originally created for version 12.1, the author implemented his own ToolTipAttribute and Application Model extenders (see more...). This is is NOT required in the latest XAF versions, because XAF provides the built-in ToolTipAttribute and corresponding properties in the Application Model. Just in case you would want to define a custom attribute for decoration of business class properties in code or configuring it via the Application Model, you can see how the XAF's attribute is implemented (see at "C:\Program Files (x86)\DevExpress\DXperience 12.2\Sources\DevExpress.ExpressApp\DevExpress.ExpressApp\DevExpress.Persistent.Base\Attributes.cs" ):

4. The latter part is important, but does not require much commenting as it is standard for ASP.NET development:
  • SampleProject.Web\Default.aspx, DefaultVertical.aspx, Dialog.aspx - modified head section
  • SampleProject.Web\scripts\jquery-ui.min.js (new)
  • SampleProject.Web\scripts\jquery.min.js (new)
  • SampleProject.Web\style.css (new)
I just want to say that in the latest XAF versions you will have to apply the aforementioned changes after adding a custom ASP.NET templates per these instructions from the XAF documentation.

Hopefully, this bright contribution will be recognized by other community members and added into the eXpand Framework ( by default.

Happy XAFing and contributing, as always!

No comments:

Post a Comment