Blog: Posts from November, 2010

Labels
AJAX(112) App Studio(7) 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(177) 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(183) 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(2) 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
Posts from November, 2010
Sunday, November 7, 2010PrintSubscribe
Custom Field Editors

Code On Time applications support custom field editors. Use custom field editors to enhance the standard user interface of data fields in  generated applications with custom  presentation.

Background

Custom field editor is an ASP.NET User Control that has its code behind class declared with YourNamespace.Web.AquariumFieldEditor attribute. The attribute definition is generated as a part of the project code base.

Each generated application includes a standard custom field editor ~/Controls/RichEdtior.ascx. This user control hosts HtmlEditor component from Ajax Control Toolkit included with the generated project.

You can activate this field editor using one of the two methods.

  • First method is to enter “RichEditor” in Editor property of a field that must support rich editing capability. You may also want to ensure that every instance of a field binding to a view has its HtmlEncoding attribute set to “false”. Field binding are data fields declared in each view of a data controller.
  • The second method consists of setting the Text Mode property of a data field in a corresponding view to “Rich Text”. The client library will automatically handle configuring of Html Encoding and Editor properties at runtime.

Custom field editor can be implemented with the standard ASP.NET controls and requires a small amount of JavaScript code discussed below.

Custom Rich Editor Example

Let’s replace the standard HtmlEditor with UltimateEditor from Karamasoft to illustrate the basic steps required to integrate external components of the custom field editor.

Generate an ASP.NET 3.5 version of Web App Factory from your database. We will be using the Northwind sample for the purpose of this discussion. Designate a data field in one of the form views to have its Text Mode property set to “Rich Text” (/blog/2010/11/rich-text-editor.html).  We will do so for Categories.Description field. Here is the form view editForm1 with Description field rendered as a standard Rich Text editor.

image

Download and install the Karamasoft Ultimiate Editor for ASP.NET 3.5. The installation program will save the files to the C:\inetpub folder on your computer. Consult installation documentation provided by the vendor and copy the following files to the generated project source code.

  1. Copy ephtmltopdf.dll, UltimateEditor.dll, and UltimateSpell.dll to the [Your Project Root]\WebApp\bin folder.
  2. Copy entire UltimateEditorInclude folder to the [Your Project Root]\WebApp folder.
  3. Copy entire UltimateSpellInclude folder to the [Your Project Root]\WebApp folder.

Open the project in Visual Studio 2008 and add the references to the DLLs copied in step 1 to your own project, include the folders copied in steps 2-3 into your project using the Solution Explorer.

The project WebApp of the generated solution will look as shown below:

image

Open WebApp/Controls/RichEdit.ascx and the change the markup as shown in this C# sample.

<%@ Control Language="C#" AutoEventWireup="True" Inherits="Controls_RichEditor" 
    Codebehind="RichEditor.ascx.cs" %>
<%@ Register Assembly="UltimateEditor" 
    Namespace="Karamasoft.WebControls.UltimateEditor"
    TagPrefix="kswc" %>
<kswc:UltimateEditor ID="UltimateEditor1" runat="server" SetFocus="False">
    <UltimateSpell MisspelledWordStyle-Font-Bold="True" 
        MisspelledWordStyle-ForeColor="#FF0000"
        GrammaticalErrorStyle-Font-Bold="True" 
        GrammaticalErrorStyle-ForeColor="#008000">
        <SpellButton ButtonType="Button" Text="Spell Check" 
            CausesValidation="True" 
            ImageAlign="AbsMiddle"></SpellButton>
        <GrammarButton ButtonType="Button" Text="Grammar Check" 
            CausesValidation="True" 
            ImageAlign="AbsMiddle"></GrammarButton>
    </UltimateSpell>
</kswc:UltimateEditor>

Open the code-behind class and change it as shown in this example.

[MyCompany.Web.AquariumFieldEditor()]
public partial class Controls_RichEditor : System.Web.UI.UserControl
{

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!(IsPostBack))
            Page.ClientScript.RegisterClientScriptBlock(GetType(), "ClientScripts", String.Format(@"
var initialValue = null;
function FieldEditor_GetValue(){{
    if(typeof(UltimateEditors)!=='undefined')
        return UltimateEditors['{0}'].GetEditorHTML();
    else
        return initialValue;
}}
function FieldEditor_SetValue(value) {{
    if(typeof(UltimateEditors)!=='undefined')
        UltimateEditors['{0}'].SetEditorHTML(value);
    else {{
        initialValue = value;
        window.setTimeout('FieldEditor_SetValue(initialValue)', 100);
    }}
}}
",
    UltimateEditor1.ClientID), true);
    }
}

The markup of the user control is quite obvious. Ultimate Editor is initialized with default property values. The most important one is probably the SetFocus property. We don’t want this control to take control over input focus from the client library of the generated application.

The source of the user control emits two JavaScript functions, FieldEditor_GetValue and FieldEditor_SetValue that are provided to allow integration with the client library of your application. The emitted functions will look  as follows when the page hosting the user control is rendered in a browser:

var initialValue = null;
function FieldEditor_GetValue(){
    if(typeof(UltimateEditors)!=='undefined')
        return UltimateEditors['ctl03_UltimateEditor1'].GetEditorHTML();
    else
        return initialValue;
}
function FieldEditor_SetValue(value) {
    if(typeof(UltimateEditors)!=='undefined')
        UltimateEditors['ctl03_UltimateEditor1'].SetEditorHTML(value);
    else {
        initialValue = value;
        window.setTimeout('FieldEditor_SetValue(initialValue)', 100);
    }
}

The functions are using the Ultimate Editor API to interact with the client-side editor component of the vendor.

Note the use of window.setTimeout function that performs a delayed initialization of the vendor control. This technique may be needed if the the vendor control is dynamically loading its own scripts and is not ready for use upon initial loading of the editor in the browser window. Such situation may occur upon first activation of the editor – subsequent activations do not require a delay.

The last step is ensure that enough of the page real estate is available for Ultimate Editor at runtime. Add a new CSS file to the WebAp/App_Themes folder of your solution.

image

Enter the following CSS rule:

iframe.FieldEditor
{
    width: 695px !important;
    height: 379px !important;
}

Run the WebApp project to see the new version of Rich Editor control in action.

image

Subsequent code generation of your Web App Factory project will retain all project modifications. The code generator will use the latest version of the project file to list the same folders and references that were included in the project for the purpose of this exercise.

Tuesday, November 2, 2010PrintSubscribe
Rich Text Editor

Code On Time applications now support rich text editing through the component HTML Editor included with Ajax Control Toolkit.

Suppose that you want to enable rich editing of the category description in the following screen of the Northwind sample application created with Code On Time.

image

Open the project in the code generator, select All Controllers tab and activate Categories data controller. Select Fields tab and activate field Description, select Data Fields tab. Your screen will look similar to the one below.

image

Activate each binding of Description field to the views createForm1, editForm1, and grid1 and set its Text Mode property to Rich Text.

image

This property will activate the rich editing capability when you access the field in edit mode while creating new or editing an existing record. Here is a picture of a category record in edit mode with rich editing enabled for Description field.

image

If a data field is set to display Rich Text then automatic HTML encoding is disabled and the field value is displayed as-is. The screen shot below shows the saved value reflected on the side bar and inline.

image

Rich Editor can be replaced with other 3-rd party controls.

The client framework of Code On Time applications supports extensible custom field editor architecture. We will discuss the process of field editor customization in the next post.

Friday, October 29, 2010PrintSubscribe
Deployment of ASP.NET Web Apps

Code On Time generates standard Microsoft ASP.NET web sites and web applications.

Standard XCOPY deployment is fully supported. Microsoft offers numerous deployment resources with detailed step-by-step instructions. We recommend that you explore the following URLs:

All generated applications include Ajax Control Toolkit in the binary form. The toolkit is incorporated in the application and requires no configuration. You can download the toolkit source code if you follow the link.

If you enable the built-in reporting then the Microsoft Report Viewer must be installed on your server.

Continue to Form Navigator