Tag Archives: 2009 R1

Introducing Intersoft WebTextEditor – Part 2

Hi all, finally I have the opportunity to write to all of you again. In this post, I’m going to write about the editing features of Intersoft WebTextEditor. In case you haven’t heard about WebTextEditor yet, please read the part 1 here.

Allright, let’s start jump into the core editing features.

WebTextEditor Editing Features

WebTextEditor is using its own editing engine that developed to support various kinds of new scenarios and to provide richer user experience. In addition to common editing scenarios such as text editing, font formatting and paragraph editing, WebTextEditor covers more advanced scenarios such as discussed in the following points.

Streamlined Cut, Copy and Paste Operation

WebTextEditor implements sophisticated clipboard management to address the limitations and different specifications of clipboard in various browsers. Based on how users invoke the clipboard saving operation such as cut and copy, WebTextEditor automatically uses the best approach to manage the clipboard data according to the browser type.
This streamlined clipboard management is crucial to ensuring smooth clipboard operation in various browsers. As such, WebTextEditor manages the clipboard data and decides when it should get the clipboard data from browser, and when it should get from editor’s internal cache.
User can perform clipboard operations through the following ways:
1. Toolbar command
Operation invoked through toolbar commands for cut and copy operation will use internal cache clipboard management.
The limitation from this approach is that user cannot paste the clipboard data from editor to other place except to the editor itself.
2. Keyboard shortcut
Operation invoked through keyboard shortcut for cut and copy operation will use browser default clipboard management.
When using keyboard shortcut, WebTextEditor will perform both saving mechanism at the same time when cut or copy operation is invoked, this can be achieved by setting EnableKeyboardShortcut property to true.
The purpose of this clipboard management is tightly integrated with paste operation. In paste operation, internal editor’s cache of clipboard data will become the first priority to be pasted. If editor’s internal cache is empty, WebTexteditor will obtain data from browser’s default clipboard.
WebTextEditor also implements automatic sliding expiration for its internal clipboard cache to keep the clipboard data concurrent and latest.

WebTextEditor implements sophisticated clipboard management to address the limitations and different specifications of clipboard in various browsers. Based on how users invoke the clipboard saving operation such as cut and copy, WebTextEditor automatically uses the best approach to manage the clipboard data according to the browser type.

This streamlined clipboard management is crucial to ensuring smooth clipboard operation in various browsers. As such, WebTextEditor manages the clipboard data and decides when it should get the clipboard data from browser, and when it should get from editor’s internal cache.

User can perform clipboard operations through the following ways:

  1. Toolbar command
    Operation invoked through toolbar commands for cut and copy operation will use internal cache clipboard management. The limitation from this approach is that user cannot paste the clipboard data from editor to other place except to the editor itself.
  2. Keyboard shortcut
    Operation invoked through keyboard shortcut for cut and copy operation will use browser default clipboard management. When using keyboard shortcut, WebTextEditor will perform both saving mechanism at the same time when cut or copy operation is invoked, this can be achieved by setting EnableKeyboardShortcut property to true.The purpose of this clipboard management is tightly integrated with paste operation. In paste operation, internal editor’s cache of clipboard data will become the first priority to be pasted. If editor’s internal cache is empty, WebTexteditor will obtain data from browser’s default clipboard.

    WebTextEditor also implements automatic sliding expiration for its internal clipboard cache to keep the clipboard data concurrent and latest.

Multiple Undo and Redo

WebTextEditor includes multiple undo and redo feature. It is unique in the way every action is logged with user-friendly message to a maximum of 20 stacks using FIFO (First-in-first-out) implementation. Each logged action can be found in Undo and Redo list, by clicking on the dropdown arrow of respective tool command.

UndoRedo

WebTextEditor logs every action that cause changes to the editor, including typing. You can customize how fast WebTextEditor should log typing action. Simply set the provided UndoLatency property to an integer value measured in milliseconds. The default value is set to 1000(ms), which means every typing action will be logged on every 1000ms after the last stop.

Insert Link

WebTextEditor provides a new user interface to insert link, which is focused on simplicity and efficiency. Link insertion in WebTextEditor is displayed with lightweight, elegant callout. In the callout, user can easily specify the text of link, URL and other input.

InsertLink

If there is a text selection when user clicked on “Insert Link” command, the selected text will be automatically set as the text of the link.

Insert Image

WebTextEditor introduces new ways to work with images and provides more flexibility for user to insert images. User can insert images from callout interface or Media Gallery pane.

Task pane is an independent visual element on sidebar panel that displays related contents and editing actions which significantly improves overall user experience. It enables users to perform editing tasks more easily and conveniently in a single interface.

Image insertion through callout can be done by clicking on “Insert from Web” command in the toolbar.

InsertImage

Edit Image

Every time an image is added to WebTextEditor, an image detail callout will appear near the added image. User can input the details of the image in this callout.

There are several settings of image that can be customized:

  1. Media Title
    Specify title to the image.
  2. Media Caption
    Specify caption to the image. This will be reflected if the image is using frame.
  3. Link URL
    Specify link URL of the image.
  4. Caption Alignment
    Specify caption alignment of the image. This will be reflected if the image is using frame.
  5. Size
    Specify the size of image.
  6. UseFrame
    Specify whether the image should be placed in a frame.
EditImage

Insert Media

Beside images, user can also insert other media type in WebTextEditor such as audios, videos, flash video and even YouTube video. Several types of media file that supported by WebTextEditor are .wav, .wma, .wmv, .avi, .mov, .mpeg and .mpg.

These media can also be inserted using callout and Media Gallery pane.

Insert Symbol

There are 20 predefined symbols in WebTextEditor; user can insert the symbol to editor with Symbol pop up. Simply click on the “Insert Symbol” command on the toolbar, and choose the symbol to be inserted from the symbol popup.
InsertSymbol

Insert Table

WebTextEditor introduces new ways to work with table. User can insert table through intuitive Insert Table pop up similar to Microsoft Word, or through Insert Table task pane for more advanced table design task.

InsertTable

Edit Table

WebTextEditor also provides comprehensive table editing commands, such as listed below.

  1. Insert columns to the left
    Add new column to the left of selected cell.
  2. Insert columns to the right
    Add new column to the right of selected cell.
  3. Delete columns
    Delete selected column.
  4. Insert Rows Above
    Add new row to the above of selected cell.
  5. Insert Rows Below
    Add new row to the below of selected cell.
  6. Delete Rows
    Delete selected row.
  7. Merge Cells Down
    Merge selected cell with the cell positioned below it.
  8. Merge Cells Right
    Merge selected cell with the cell positioned at the right.
  9. Split Cells Vertical
    Split selected cell vertically.
  10. Split Cells Horizontal
    Split selected cell horizontally
EditTable

Edit Cell Properties

WebTextEditor provides more convenient way to edit cell properties in Table Designer Task Pane. The following are the cell properties that can be modified:

  1. Horizontal Align
  2. Vertical Align
  3. Width
  4. Height
  5. Back color
  6. Font color
  7. No wrap

Find

WebTextEditor’s unique search feature allows user to search in both design and html view. As in other commands, the Find command displays lightweight callout interface to provide a better searching experience. When a match is found, the text will be selected.

Find

Replace

Similar to Find feature, user can perform replace operation in both design view and html view. The replace function includes match case option, and also provides action to perform find, replace and replace all.

Replace

Word and Character Count

Word count is enabled by default, while character count is disabled. To enable both word and character count, just set ShowWordInformation and ShowCharacterInformation properties to true.

Character count information and other details are available in the word information tooltip, thus making efficient use of screen real estate.

WordAndCharacterCount

Html Inspector

WebTextEditor provides a capability to recognize selected text’s html tag and its complete path. This information is displayed in the footer row. User can enable this feature by setting EnableHTMLInspector property to true.
Each html tag that displayed in HTML Inspector is clickable. When clicked, WebTextEditor will create a selection based on the clicked html tag.
HtmlInspector

Editing in html view

User can perform basic text editing operation such as bold, italic, insert image, etc with just a single click on html toolbar. This simplifies text editing operation in html view as the html command automatically insert and close the tags, minimizing required typing effort.

edithtml

That’s for now. This post covered only small parts of Intersoft WebTextEditor capabilities, there are still a lot of exciting features that have not been revealed yet due to limited space here. I encourage you to download and try WebTextEditor for yourself. Experiencing WebTextEditor directly is the best way to delve into more details, such as its look and feel and how its user experiences differ from others.

WebTextEditor is still in beta version when this post is published, however you can expect the final release very soon. For beta version, please download it here.

Kind regards,

Budianto.

Physical database update in smartBatchUpdate

Last month, I’ve posted an in-depth discussion on SmartBatchUpdate, a new major feature that we’re going to introduce in the next major version of WebGrid. While the previous post is more focused on the UI/X aspects, this post will focus more on the server-side, its programmability and behind-the-scene process on the batch update.

SmartBatchUpdate™ provides sophisticated implementation to automate the batch updating process to the physical database.

The automatic updating feature significantly reduces development time – as you are not required to write any codes to perform the batch update, or very minimal efforts when you need to customize the updating process in more advanced scenarios. To understand the physical updating concept better, please see the following illustration.

Batch update processing

Understanding Batch Update Process

As shown in the illustration above, the physical update has several processes such as detailed in the following:

  • Automatic object updates

This setting is enabled by default. This feature will attempt to automatically apply the submitted pending changes to the intermediate data source that hold the objects during the binding process.

For instance, when WebGrid is bound to DataSet or DataTable, your pending changes will be applied and then mapped to your data source. This enables you to simply call a line of code to perform the physical updates via DbAdapter.

In more advanced scenario, such as when WebGrid is bound to unstructured data source or custom object, you can disable this feature by setting the AutomaticObjectUpdates property in BatchUpdateSettings to false.

In addition to single table support, this feature is also designed to support nested hierarchical tables that linked through Referential Integrity. This feature makes advanced scenarios possible such as cascading inserts and other scenarios related to hierarchical tables.

Please note that WebGrid doesn’t perform physical update in this process.

  • BatchUpdate server side event.

WebGrid provides a new server side event named OnBatchUpdate, which is invoked when the pending changes are required to be submitted to physical database.

When bound to data source other than data source controls, developers can handle OnBatchUpdate server side event to write the codes required to update the changes into physical database.

When bound to updatable data source controls – such as AccessDataSource, ObjectDataSource, and others – WebGrid will handle all physical updates automatically, given that ReturnValue is true in OnBatchUpdate event. The ReturnValue is true by default, which can be set to false to cancel automatic physical updates.

OnBatchUpdate server side event provides BatchUpdateEventArgs in the event argument, which is useful for developers who would like to customize the physical updating process, such as in the case of custom object binding.

  • Partial errors support.

In addition to solid batch update architecture and automatic object updates, SmartBatchUpdate™ is also equipped with support for partial errors, making it the most advanced and reliable solution for client-side data editing application.

Partial errors occurred when one or more changes are failed to be updated while there are also some successful updates. Partial errors will not occur when all changes are failed.

With partial errors support, user can make changes with confidence, without have to worry that error in one of the changes will cause all changes to fail. This means that WebGrid is able to isolate erroneous changes, and continue to update the next changes that are unrelated to the previously failed changes update.

The following image shows a WebGrid with partial errors response. The error detail for each failed updates are shown in the message box, making it easy for end user to review and revise the errors.

 wg7_partialerror

For more control over partial errors response in the client side, you can handle the OnBatchUpdateSuccess client side event and access the rowErrorXml parameter to get the error detail on each failed update.

Various Datasource Support in Batch Update

WebGrid Enterprise 7 supports physical database updates in various scenarios, such as when bound to different type of datasource, hierarchical tables configuration, and more. The following list describes the supported scenarios in more details:

  • Traditional Binding (ADO.NET DataSet and DataTable)

When bound to ADO.NET-compatible data source such as DataSet and DataTable, you will need to write codes in OnBatchUpdate server side event to update the changes to database.

However, the required codes should be very minimal as ADO.NET already implemented batch update at data access level. Developers will then be able to simply invoking a single Update method to process all changes, which were previously mapped during Automatic Object Updates process.

The following C# codes show how to update all changes that bound to a DataTable object.

void WebGrid1_BatchUpdate(object sender, BatchUpdateEventArgs e)
{
CustomersTableAdapter daCustomer = new CustomersTableAdapter();

DataTable dt = (DataTable)WebGrid1.GetCachedDataSource();

daCustomer.Update(dt); // updates all changes to database

}

  • Declarative Binding (Datasource Control such as SqlDataSource)

Data source control is the most ideal data binding concept in ASP.NET that provides clear abstraction between UI and data logic. Introduced in .NET 2.0, data source control allows you to bind data in declarative markup, saving you from tedious tasks and lengthy codes.

SmartBatchUpdate™ takes advantage of data source control to the fullest. When you connect WebGrid to an updatable data source control, you don’t need to write codes to handle the physical updates.

  • Hierarchical Traditional Binding (ADO.NET DataSet)

Similar to Traditional Binding, you are also required to handle OnBatchUpdate server side event to write codes to perform database updates.

Thanks to the automatic identity’s mapping through referential integrity, WebGrid performs all the complex logics behind the scene, so that you only need to write a few lines of codes to update the dataset.

  • Hierarchical Declarative Binding (ISDataSource)

As in flat WebGrid declarative binding, SmartBatchUpdate™ supports hierarchical WebGrid that is bound to ISDataSource control in the same way and consistent fashion.

With ISDataSource control, you are not required to write codes in order to perform physical update into the underlying database.

It is important to ensure that your ISDataSource instance has been properly configured to return new identity for each table in the event of insert.

  • Custom Object

In addition to built-in .NET data sources, batch update is also designed to support advanced enterprise scenarios, such as using the feature in conjunction with custom object data binding.

When bound to custom object collection – such as a list of Customer objects – you can disable automatic object updates feature. In this case, you are responsible to write codes to perform physical updates according to your business logic/model.

In the same way as in other data sources, you handled OnBatchUpdate server side event to provide codes to perform physical update.

Conclusion

With multitude of batch update features and data source support, WebGrid 7 provides the most comprehensive features for all data editing needs – taking account compatibility with hundreds of existing features as well as support for new scenarios. As Web developers, you got the power, flexibility and speed that you need to build your next-generation, Web 2.0-ready applications.

There are so much more about batch update that I can’t detail here. I believe it’s best for you to try and experience it yourself when the beta bit is out sometime next week.

In my next post, I’ll try to delve more on new client-side binding technology along with its dozens of breakthrough features. Stay tuned!

All the best,
Jimmy.

March 2009 CTP of Intersoft Presenter and DataSource is now available

We have received numerous of feedback on the Feb’09 CTP and we thank you for spending your precious time testing our CTP and share your valuable opinions with us. March 2009 CTP is now available thanks to you. It is now ready for download in the same intersoftpt.com/ctp page.

Here is what’s new in March 2009 CTP:

  • Advanced data grouping capability.
    Unlike the standard grouping behavior, Intersoft Presenter offers unique grouping behavior aligned to its “Everything is synchronized” concept. This means user can perform advanced grouping in one view and switch to other views without losing the grouping state. User can also perform multiple grouping and combine it with various sort directions in each grouped column.
  • Client-side paging and filtering.
    As the name implies, this feature enables paging and filtering operation to be carried out with all data loaded in the client-side. The result is super responsive and intuitive application which your user will certainly love.
  • Server-side paging
    Similar to client-side paging and filtering concept, the server-side paging handles the operation n the server-side through the declarative data source, for example Intersoft’s AstoriaDataSource. You can enable the paging operation in a very minimal line of code.
  • Built-in data drilling.
    Data drilling is one of the most requested futures to enable user slash and cut through all complexly related tables and view the specific information easily. With the out-of-the-box data drilling capability, you can deliver a data drilling Silverlight application within minutes.
  • Hybrid data drilling
    Hybrid data drilling combines the built-in data drilling feature and the multiple hybrid view concepts. It enables user to perform deep drill down and view it in various view ports. You can easily add any presenter views as the child views easily.
  • Advanced data caching mechanism.
    The key of data caching mechanism in Intersoft DataSource is to deliver robust and more responsive Silverlight application by caching the retrieved data and keep it in the client-side. When the same data is requested again, the cached copy of the data is fed into.

You can view the complete news about “What’s new in March 2009 CTP?”

Andry Handoko Soesilo has written a new getting started guide for the March 2009 CTP. These guides are intended for conceptual introduction, easy implementation, and technical discussion of Intersoft Presenter and DataSource.

I hope you enjoy our March 2009 CTP. Please continue to voice your opinion and share your idea with us.

Best regards,
Jemmy.