Code On Time: Features

Blog

Features

Monday, August 6, 2012Print Subscribe

Custom CSS in DotNetNuke Factory Web Apps

Cascading style sheets are a series of rules that determine the look and formatting of web page contents. Code On Time applications exclusively use CSS to stylize the pages. DotNetNuke Factory is a special kind of web application designed to work within DotNetNuke portal. All cascading style sheets of a module created with DotNetNuke Factory are compiled as binary resources into the application DLL.

Developers can add their own custom CSS rules in standalone web applications. This technique will not work with a DotNetNuke application. The alternative is to create extensions for the standard themes of the code generation library.

Let’s create a CSS rule that will render text in all inputs as bold for Grapello theme in a DotNetNuke Factory application.

Run Visual Studio. On the toolbar, press File | New | File option.

In the window, select Style Sheet and press Open.

A new .css file will open in the editor. Paste in the following rule.

@import "../../Library/_Client/Themes/_Shared/jquery.ui.all.css";

table.DataView tr.CategoryRow td.Fields div.Item div.Value input, 
table.DataView tr.CategoryRow td.Fields div.Item div.Value select, 
table.DataView tr.CategoryRow td.Fields div.Item div.Value textarea
{
    font-weight:bold;
}

The highlighted segment of the path in the Grapello.css file is a relative path to the jQuery UI stylesheets packaged with the code generation library. The rule will apply a font weight of “Bold” to all inputs in a category. Right-click on the tab of the file, and press Save File.

Change the save location to [My Documents]/Code OnTime/Client/Themes folder, and change the name of the file to the name of the theme. In this case, Grapello theme is being used, and the name of the file will be “Grapello.css”.

Press OK to save.

Restart Code On Time web application generator. While holding Shift, click on a project name. This will skip to the Summary page. Press Generate.

Navigate to any data view, and edit a record. The custom CSS will make all text in inputs bold.

Labels: Application Factory, Features, User Interface, Web Application Generator

Wednesday, August 1, 2012Print Subscribe

Feature: Validators and Converters

Data integrity is enforced with validation and conversion business rules. The Project Designer can quickly create and configure generic business rules with a single click. JavaScript, SQL, and Code (C#/Visual Basic) validators and converters are created from the context menu of the fields in Project Explorer.

Converter

The generic converter will convert the field value to uppercase.

For example, the Category Name field in the Categories controller has been configured with the default SQL converter. The sample script is shown below.

if @CategoryName is not null and 
    (@Arguments_CommandName <> 'Calculate' or
     @Arguments_Trigger = 'CategoryName')
begin
    set @CategoryName = upper(@CategoryName)   
end

The user may enter any value into the field.

When focus is shifted away from the field, the conversion will take place.

SQL and code validators are executed on the server.

Validator

The generic validator will ensure that the field value is not blank.

The Description field of Categories controller has been configured with the default JavaScript validator:

var fieldValue = [Description];
if (fieldValue == null) {
    // prevent the default action processing
    this.preventDefault();
    // set the focus on the field and display an error
    this.result.focus('Description', 'Required field.');
}

After typing a category name, pressing OK will display a message next to the Description field, despite the fact that the field is not marked as required.

These sample validators and converters can be expanded to perform more complex operations to fulfill specific business requirements. Any single validator or converter can handle multiple fields when necessary.

Labels: Features, User Interface, Web Application Generator

Tuesday, July 24, 2012Print Subscribe

Tooltips

Tooltips, also called hints, are commonly used to clarify application element functions to the end user.

Let’s apply a tooltip to the Unit Price data field in the New Order Details form.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab and double-click on OrderDetails / Views / createForm1 / c1 – New Order Details / UnitPrice data field node.

Change the Tooltip property:

Property	New Value
Tooltip	Please specify the agreed upon price per unit in this order.

Press OK to save the data field. On the toolbar, press Browse.

Navigate to the Order Details page, and create a new order detail. Mouse over the Unit Price input, and the specified tooltip will appear.

Labels: Database Lookups, Designer, Features, User Interface, Web Application Generator