Web 2.0

Labels
AJAX(112) App Studio(9) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(178) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(3) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Web 2.0
Wednesday, January 12, 2011PrintSubscribe
Modifying User Interface With CSS

Code On Time applications rely exclusively on Cascading Style Sheets (CSS) to provide all presentation elements of generated web applications with colors, fonts, backgrounds, borders, paddings, margins, and other embellishments.

Here is a typical screen that you will find in an application generated with the default theme.

image

If you load your application in Internet Explorer browser, press F12 to bring up the Developer Toolbar and select Disable | CSS option on the toolbar then the page will looks similar to the following screen shot.

image

As you can see the page is “black on white” with a few blue links and lacks any style. This allows for total customization of the user interface. You may choose to follow the route of complete user interface customization from scratch or add incremental enhancements to the existing themes provided by Code On Time.

Here is how you can proceed with minor enhancements.

Activate Developer Toolbar window and select Disable|CSS one more time to enable the stylesheets in the browser window.

Click on the “arrow” icon of the Developer Toolbar and inspect any column in a data row of the grid view. If the selection rectangle does not show up when you move the mouse pointer over the page then click the “arrow” again to turn the selection mode off and hit “refresh” icon. Try selecting the UI element on the page again. This is needed if you have activated the toolbar and then interacted with the page in the browser. The toolbar will not be aware of the changes produced by AJAX scripts.

The screen shot shows a thin blue box around the cell in the first row of the Products grid in Category Name column. The Developer Toolbar on top of the browser shows the HTML corresponding to the selection. Three CSS classes Cell, CategoryID, and StringType and assigned to the table cell.

image

We will change the presentation of CategoryID field column to occupy 200 pixels horizontally.

Open you project in Visual Studio or Visual Web Developer. Select the folder ~/App_Themes/MyCompany and add the new CSS stylesheet item to your project. “MyCompany” is the default namespace of Code On Time projects. If you have changed the namespace of your project then choose the corresponding folder in the Solution Explorer.

image

Enter the following CSS rule into the stylesheet.

.Cell.CategoryID
{
    width: 200px;
}

Run the project and refresh the contents of the browser window.  The third column Category Name of the grid view is now substantially wider.

image

Use similar techniques to alter other elements of the user interface in your Code On Time applications.

Notice that sometimes your own CSS rules will come into conflict with the rules of core theme. Use the word “!important” right after the value of the CSS property as shown in the following example.

.Cell.CategoryID
{
    width: 200px !important;
}
Tuesday, December 28, 2010PrintSubscribe
Multiple Value Filters

Code On Time applications now support multiple value adaptive filters that can be activated from the context menu of a columns in a grid view and in a search bar.

The screen shot below shows new Filter option in the context menu of Category Name column or the Products page.

image

The menu option will activate a a selection window similar to the one below.

image

Displayed options are sensitive to the presence of other filters. The window automatically adapts the list of available options.

Here you can see the products filtered by Category Name and Supplier Company Name. Both fields are filtered by multiple values.

image

If you activate the search bar by clicking on the arrow next to the Quick Find field then the new “include” function is selected in the relevant search parameter. Click on any of the filter options in the search value field of a parameter to activate the option selection window.

image

Notice that options presented in the selection window are sensitive to search criteria entered on the search bar if the window has been activated from the search bar.

image

Multiple value filtering works with all data types including numbers and dates. The next screen shot shows products further restricted to those with Reorder Level of “0” and “10”.

image

Users can collapse the search bar and further refine the search results using the Quick Find search box.

Multiple value filtering significantly simplifies development of data aware applications and saves tremendous amount of time required to develop a similar functionality from scratch. Multiple value filtering requires no programming and is automatically available in all views of your application.

Monday, December 6, 2010PrintSubscribe
Conversion and Validation of User Input

Code On Time applications offer powerful methods of converting and validating field values entered by user. The unique business rules model allows elegant abstraction of the business logic required to validate and convert user values from the user interface elements responsible for presentation.

Conversion

Let’s consider a simple conversion scenario that requires automatic conversion of a customer contact name to upper case as soon as user has finished typing. We will use Northwind database for this sample.

Generate your project, activate designer and select All Controllers tab. Select Customers data controller, switch to Fields tab and select the ContactName field. Select the check box “The value of the field is calculated by a business rule expression”.

Enter the following Code Formula if your programming language is C#:

!String.IsNullOrEmpty(contactName) ? contactName.ToUpper() : String.Empty

Visual Basic programmers should use the following instead:

IIf(Not (String.IsNullOrEmpty(contactName)), contactName.ToUpper(), String.Empty)

Next scroll the designer page down and enter ContactName in the Context Fields property. This is very important step that will ensure that the business rules formula is executed as soon as user leaves the field.

Here is the screen short of Designer that shows the partial configuration of the ContactName field.

image

Try running the program and observe the contact name convert to upper case as soon as you enter a value.

image

Note that this works in all views without you doing anything about it. You change the model and all views automatically engage the business rules.

Here is the actual file that is automatically produced to implement this calculation. This code is placed into ~/App_Code/Rules/Customers.Generated.cs file

using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class CustomersBusinessRules : 
        MyCompany.Data.BusinessRules
    {
        
        [ControllerAction("Customers", "Calculate", "ContactName")]
        public void CalculateCustomers(string customerID, 
            string companyName, string contactName, string contactTitle, 
            string address, string city, string region, 
            string postalCode, string country, string phone, string fax)
        {
            UpdateFieldValue("ContactName", 
                !String.IsNullOrEmpty(contactName) ? 
                    contactName.ToUpper() : 
                    String.Empty);
        }
    }
}

Note that the class is partial. You can implement you own class with the same name and offer a method that performs a more complex conversion using database or any other resources required for successful conversion calculation. Make sure not to change the file directly since the changes will be lost during next code generation. Instead use Designer to change the Code Formula of the corresponding field.

Here is the Visual Basic version of the same automatically generated method.

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq
Imports System.Text.RegularExpressions
Imports System.Web

Namespace MyCompany.Rules
    
    Partial Public Class CustomersBusinessRules
        Inherits MyCompany.Data.BusinessRules
        
        <ControllerAction("Customers", "Calculate", "ContactName")> _
        Public Sub CalculateCustomers(ByVal customerID As String, _
                                      ByVal companyName As String, _
                                      ByVal contactName As String, _
                                      ByVal contactTitle As String, _
                                      ByVal address As String, _
                                      ByVal city As String, _
                                      ByVal region As String, _
                                      ByVal postalCode As String, _
                                      ByVal country As String, _
                                      ByVal phone As String, _
                                      ByVal fax As String)
            UpdateFieldValue("ContactName", _
                             IIf(Not (String.IsNullOrEmpty(contactName)), _
                                 contactName.ToUpper(), _
                                 String.Empty))
        End Sub
    End Class
End Namespace

Accessing field values

Many scenarios of validation may be narrowed performed as silent conversion using the method described above.  The business rules methods offer every single field of the field dictionary of the data controller and you can use values of all fields to produce the value.

You can also use methods SelectFieldValue and SelectFieldValueObject and retrieve a field value required for conversion/validation.

The first method will return the untyped object representing the value of the field or external URL parameter. It is your responsibility to convert the value to use it in a calculation. For example,

Convert.ToString(SelectFieldValue("ContactName")).ToUpper()

The second method returns only the value objects that correspond to the fields of the data controller. The advantage of using SelectFieldValueObject is the ability to access the “Old” and “New” values and availablility of  Modified  property that tells if the field value has changed.

Convert.ToString(SelectFieldValueObject("ContactName").NewValue).ToUpper())

Validation

Validation is usually performed just before the standard logic of Code On Time application is about to be executed. User has completed input and initiated a command that will result in INSERT, UPDATE, or DELETE statement execution.

Let’s consider another example. Let’s prevent posting of invalid values to the Order Details table.

Select your project on the start page of the code generator, activate designer, find Order Details data controller, select the data controller and edit the controller to have OrderDetailsBusinessRules as business rules Handler. See the screen shot below.

image

Save the changes, exit the designer and generate the project.

Open the project in Visual Studio using File | Open Web Site option and double click the ~/App_Code/Rules/OrderDetaulsBusinessRules.cs file to open it in the editor. Enter the following method if your project language is C#.

using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class OrderDetailsBusinessRules : MyCompany.Data.BusinessRules
    {
        [ControllerAction("OrderDetails", "Update", ActionPhase.Before)]
        [ControllerAction("OrderDetails", "Insert", ActionPhase.Before)]
        public void ValidateInput(float? discount, short? quanity, decimal? price)
        {
            if (quanity.HasValue && quanity > 10)
                if (!Controller.UserIsInRole("Administrators"))
                    throw new Exception("You are not authorized to sell more then 10 items.");
            if (discount.HasValue && discount.Value > 0.15)
                throw new Exception("The discount cannot be more than 15%.");
            if (!price.HasValue || price.Value == 0.0m)
            {
                Result.ExecuteOnClient("this._focus('UnitPrice', 'The price must be greater than zero.')");
                throw new Exception("Please validate the entered unit price.");
            }
        }

    }
}

Here is the Visual Basic version.

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq

Namespace MyCompany.Rules

    Partial Public Class OrderDetailsBusinessRules
        Inherits MyCompany.Data.BusinessRules

        <ControllerAction("OrderDetails", "Update", ActionPhase.Before)> _
        <ControllerAction("OrderDetails", "Insert", ActionPhase.Before)> _
        Public Sub ValidateInput(ByVal discount As Nullable(Of Single), _
                                 ByVal quantity As Nullable(Of Short), _
                                 ByVal unitPrice As Nullable(Of Decimal))
            If (quantity.HasValue AndAlso quantity > 10) Then
                If (Not Controller.UserIsInRole("Administrators")) Then
                    Throw New Exception("You are not authorized to sell more then 10 items.")
                End If
            End If
            If (discount.HasValue AndAlso discount.Value > 0.15) Then
                Throw New Exception("The discount cannot be more than 15%.")
            End If
            If (Not (unitPrice.HasValue) Or (unitPrice.HasValue AndAlso unitPrice.Value = 0)) Then
                Result.ExecuteOnClient("this._focus('UnitPrice', 'The price must be greater than zero.')")
                Throw New Exception("Please validate the entered unit price.")
            End If

        End Sub

    End Class
End Namespace

Notice that the order of the arguments in the validation method is absolutely irrelevant. The same method is handling both Insert and Update actions. You can implement a dedicated method to handle each situation differently. You can use a Shared Business Rules method to create a handler for multiple data controllers.

Runt he program, select Customers | Order Details page and try entering the order details records while leaving blank Discount, Unit Price, and Quantity fields. The Unit Price validation will detect the problem and will result in the following. The message bar at the top of the page indicates that there is a problem. The inline error message explains what the problem in with more details.

image

The future versions of the code generation library will offer an alternative method of indicating the error using the business rules method to eliminate the need to use a snippet of JavaScript to report the validation error.