Phil Tucker

Using CalcEngine for Design-Time Data

phil — Wed, 24 Nov 2010 20:12:00 GMT

There are times during development when it is not possible for controls to access live data from within the Visual Studio Design-Time environment. When this occurs it can be advantageous to have sample data available during Design-Time which reflects the live data to a workable degree. To simplify this task the CalcEngine contains a number of options for providing relevant sample data at Design-Time to other controls while maintaining the proper runtime data bindings.

Adding a CalcEngine

The first step in this process is to add an instance of the CalcEngine to the page/form and configure one of it's CalcEngineInputs to connect with the real data source. Information regarding this step can be found in our documentation under Creating Your First CalcEngine.

Binding to a CalcEngine

The second step is to bind the desired control to the instance of the CalcEngine. This can be done with the following syntax.

<ComponentArt:XYChart ... DataSource="{Binding ElementName=calcEngine1, Path=Output}" ... />

In this instance the x:Name of the CalcEngine is calcEngine1. If the CalcEngineInput has been connected to a DataSource and the Expression has been set, it may already be providing relevant sample data to the bound control. If not, some further configuration may be required. The target control should be configured in regards to runtime data, once the proper design-time data type has been generated or specified templates and databound properties of the target control should populate.

Configuring Design-Time Data on CalcEngineInputs

Each CalcEngineInput defined on a CalcEngine may be configured to provide sample data during Design-Time. A number of options are available for describing and shaping this sample data.

DesignTimeDataType

By default CalcEngine will attempt to determine the desired type for sample data based on types and properties available from the DataSource bound to each CalcEngineInput. There is not always access to the required types and in some cases this is not the desired behavior. The DesingTimeDataType property of the CalcEngineInput allows one to specify the fully qualified type name of the sample data objects that CalcEngineInput should generate.

<ComponentArtCommon:CalcEngine 
  Expression="calcEngineInput1" 
  Name="calcEngine1">
  <ComponentArtCommon:CalcEngineInput 
    Id="calcEngineInput1" 
    DesignTimeDataType="System.DateTime" />
</ComponentArtCommon:CalcEngine>

<ComponentArtGridView:GridView 
  AutoGenerateColumns="True" 
  DataContext="{Binding ElementName=calcEngine1, Path=Output}" 
  ItemsSource="{Binding}" />

It's important to remember that when no Calc operations are desired the CalcEngine Expression should be set to the Id of the desired CalcEngineInput, this will pass the Value or generated Design-Time data as is through to the CalcEngine's Output property and, in turn, to bound controls. This code yields the following output.

One handy class for generating sample data is contained within both frameworks of the Data Visualization Suite,

ComponentArt.Silverlight.DataVisualization.Utils.DemoDataValue
ComponentArt.Win.DataVisualization.Utils.DemoDataValue

DesignTimeDataRecords

This CalcEngineInput property specifies the number of sample data records to create, either of the detected type or of the DesignTimeDataType. The default is 15 records.

DesignTimeDataAlgorithm

Each CalcEngineInput also has the potential to generate data based on a number of algorithms, specified through the DesignTimeDataAlgoritm property.

Fractal ( Default )

Random

Incremental

Sine

Design-Time Data at Runtime

CalcEngine automatically detects whether or not it is running in Visual Studio Design-Time. Outside of Visual Studio Design-Time sample data generation will not occur and the data bound to Values of the CalcEngineInputs will become the active context.

*Functionality available in ComponentArt Data Visualization 2010 SP2

Visualizing Toronto's 2010 Mayoral Election with ComponentArt Data Visualization

phil — Thu, 28 Oct 2010 19:16:00 GMT

The City of Toronto has released their Official Election Results. ComponentArt being a Toronto based company I thought this data offered a great way to showcase our Map control and present an informative and intuitive view of the data.

Visualizing Toronto's 2010 Mayoral Election

ComponentArt DataVisualization & Visual Studio Design-Time

phil — Tue, 26 Oct 2010 18:59:00 GMT

With the full release of ComponentArt DataVisualization now in the hands of the public I thought I'd take a minute and talk about some of the features we've added in regards to Visual Studio Design-Time integration. Visual Studio 2010 comes with unprecedented options as far as design-time is concerned and we've tried to take advantage of them all. Many tasks which would previously require XAML editing, endless searching through the Visual Studio Property Grid or altering existing demo projects for inclusion can now be accomplished quickly and easily through our design-time adorners.

Using the ToolBox

Visual Studio users are probably already familiar with the Visual Studio control ToolBox. Once a project has been created it can be access through the File Menu > View > Toolbox. It contains controls which are available for use with the page or form which is currently being edited, Silverlight or WPF projects for example.

If one has installed ComponentArt DataVisualization for the current platform one will see a section dedicated to these controls. They can be placed on your page or form simply by dragging and dropping the icon onto the design surface. Alternately one can select the control by clicking on the icon, and then click on the design surface to drag a rectangle to which the new control should size*.*Not all controls will adhere to this sizing practice

Using Adorners

Once a ComponentArt DataVisualization control has been placed on the design surface most of it's common options can be configured easily through it's design-time adorner. This is a small rounded button which appears at the top right of the control and contains the control icon in it.

Rolling the mouse over this adorner will cause it to expand and reveal the control type. Clicking on the adorner will reveal the control's configuration panel.

Quick Start

Clicking on the adorner icon will reveal the initial panel for the control being designed. This initial panel has a number of sections, the first being the Quick Start section.

Within the Quick Start is everything one needs to ready a control instance for runtime.

Start from Gallery

For most DataVisualization controls the first option in the Quick Start section will be Start from Gallery this allows one to select a starting point from the most popular control settings, many of these templates are populated directly from our extensive demos. Once selected a template will replace the entire control instance on the design surface, it is for this reason that Start from Gallery should be one's first step in the design process.

Look and Feel

The second section in most designers is the Look and Feel section. This contains relevant options in regards to Themes and Palettes.

Themes define the chrome of your dashboard - corner radius, line thickness, text color, margins are all controlled by the Theme. Unlike Templates, selecting a Theme from the Theme Gallery will not overwrite the control instance but simply set the Theme and ThemeVariant properties of the control. The Theme and ThemeVariant properties are also inherited and overridable.

Much like Themes, Palettes are inherited and overridable. Palettes specify the color sets used to render data in the DataVisualization controls, whether it is a RadialGauge, an XYChart or a Map, Palettes harmonize your dashboard as each control in the suite is given careful attention when defining a new Palette for it.

Other Control Settings

While the Quick Start section can help one design a control instance which is ready for run time in short order, there are almost always additional settings. The most popular additional settings can be found categorized within this section of the designer.

Help

The Help section of the design time adorner offers links to our online forums as well as documentation.

Licensing

The final section in our design time adorner is the Licensing section. This section allows one to quickly find the license status of the current workstation as well as license the current project, or visit our site in order to purchase a license.

Selecting License Active Project will launch the ComponentArt License Manager in the background, export a License File ( .LIC ) and add that License File as an Embedded Resource in the current project. Adding a valid License File to the current project will prevent the controls from displaying the unlicensed watermark at runtime. Licensing projects for deployment has always been a sticky point of control suites, no longer, it couldn't be easier, just takes a single click and it's ready for launch.

ItemFlow: Live XAML Content

phil — Tue, 23 Feb 2010 18:33:00 GMT

Along with ComponentArt UI Framework 2010.1 for Silverlight and WPF comes fantastic new funtionality for our ItemFlow control, the ability to utilize live XAML content within ItemFlowItems. This brings to bear endless possiblities, anything from a simple form wizard spanning multiple ItemFlowItems to nesting an entire ItemFlow within an ItemFlowItem.
Previously ItemFlow utilized a technique of overlapping skewed images in order to attain a perspective transform. Silverlight 3.0 has introduced these types of transforms natively both with 3D Matrix Transforms and the ProjectionPlane along with Writeable Bitmaps. These additional features allow ItemFlow to properly transform any content, not just images.

<ComponentArt:ItemFlow 
	 x:Name="myItemFlow"
          Height="300"
          Width="800"
          ItemHeight="200"
          ItemWidth="200"
          ShowShading="False">
  <ComponentArt:ItemFlow.Items>
    <ComponentArt:ItemFlowItem>
      <ComponentArt:ItemFlowItem.ItemTemplate>
       <DataTemplate>
         <Grid>
           <Border Height="200" Width="200" BorderBrush="Black" BorderThickness="2">
             <TextBlock Text="Hello World" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
          </Grid>
        </DataTemplate>
      </ComponentArt:ItemFlowItem.ItemTemplate>
    </ComponentArt:ItemFlowItem>
  </ComponentArt:ItemFlow.Items>
</ComponentArt:ItemFlow>

This example illustrates how XAML content can be used within an ItemTemplate.

While this example does have the effect of adding a reflection to your XAML, ItemFlow requires a couple more items in order to shine. Tranditional ImageSource based items can be used along with items utilizing ItemTemplates, however an ItemTemplate specified for an item will override ImageSource.

Focus

When using ItemFlow with XAML content focus quickly becomes an issue. Depending on one's implementation they may require ItemFlow to prevent focus on XAML elements which are not contained within the currently selected ItemFlowItem. Take for instance the form wizard in the image at the top of this post, TextBoxes in flanking ItemFlowItems should not react to mouse clicks, instead these clicks should bring the flanking ItemFlowItem to the center where it can then be edited. This issue is solved by ItemFlow's shading, setting ShowShading="True" ( the default ) will prevent mouse interaction with flanking ItemFlowItems. When ShowShading is set to "False" the shading which overlaps items will not be shown and therefore will not prevent mouse events from interacting with XAML elements.

Loading

Another issue which arises along with XAML content is the question of load events and item sizing. ItemFlow is not aware of the current state of XAML content elements loaded into it's ItemTemplates. It is up to the developer to size the ItemWidth and ItemHeight properly and in some cases call ItemFlow.Initialize() from Loaded events of relevant elements.

Accessing Elements

XAML content within ItemFlowItems would not be of much use if we could not access elements in order to retrieve values, or apply changes. Finding elements within DataTemplates is not as simple as one might hope, however we have included a method in our ComponentArt.Silverlight.UI.Utils namespace which helps with this endeavor:

TextBlock myHelloWorldBlock = (TextBlock)ComponentArt.Silverlight.UI.Utils.Visual.FindElementByName(myItemFlow, "helloWorldBlock");

Elements may also register themselves with a pointer through their own Loaded events, or any other event in which they are a sender.

Final Notes

Although it may take some tweaking of settings and positions. Combining the techniques described above to create a unique ItemFlow implementation can result in some very interesting innovations.

Editor's Second Skin

phil — Mon, 31 Mar 2008 13:30:00 GMT

With a mandate to continuously improve our products and suite as a whole each version of Web.UI can bring many upgrades. With Editor 2008.1 we decided to add a new method of skinning the Editor control. Previously, developers were required to employ our sample UserControl skins and not directly embed the Editor on to their ASPX page. While this kept the ASPX clear of detailed Template, ToolBar and Widget code, it abstracted the Editor tag and added an extra layer to the control hierarchy. Editor 2008.1 introduces a new skinning mechanism which accomplishes the goal of allowing a clean ASPX yet eliminates the need to refer to the Editor through a UserControl.

In Editor 2008.1 we have divided the required control references into a combination of Widgets, Templates and ToolBar definitions. None of which need to be defined inline. By separating the elements of the Editor it allows the control to optimized by only loading the widgets required by each specific skin or template of the Editor, this eliminates quite a bit of overhead depending on how minimal the skin is.

How Skins Work in Editor 2008.1

The main template for the Editor can be defined either inline or by setting the Editor TemplateFile property. These files are located, or should be placed in the skin directory,

skins\skin_name\templates\

Templates define the layout of the Editor instance. References are included in this Template for various elements of the Editor:

$$ToolBars[0]$$
$$breadcrumbs$$
$$wordcount$$
$$charactercount$$
$$parent$$

ToolBars definitions one of the few elements which must still be defined inline in the Editor <ToolBars> collection, however, each ToolBar's Items may be defined in XML and referenced via ToolBar's SiteMapXml property.

       <ToolBars> 
           <ComponentArt:ToolBar
            RunAt="server"
            Id="CoreToolBar"
            ImagesBaseUrl="../../skins/blackice/images/toolbar/"
            CssClass="toolbar"
            Height="25"
            DefaultItemImageWidth="23"
            DefaultItemImageHeight="21"
            UseFadeEffect="false"
            SiteMapXmlFile="CoreToolBar.xml"
            >

            <ClientEvents>
              <ItemMouseUp EventHandler="font_toolbar_mouseup">
            </ClientEvents>
          </ComponentArt:ToolBar> 
       </ToolBars>

When defining ToolBarItems, whether in XML for use with SiteMapXml or inline, each ToolBarItem is given an EditorCommandType. The EditorCommandType both defines the function of this ToolBarItem within the Editor context and dictates which Widget, if any, should be loaded to accompany this ToolBarItem.

<Items>
      <ToolBarItem EditorCommandType="FormatStyle" >
      <ToolBarItem EditorCommandType="FormatFontFace" >
      <ToolBarItem EditorCommandType="FormatFontSize" > 

Once the Template, ToolBars and ToolBarItems are defined, the Editor is ready to go! Of course, these steps are already taken in our samples and one may simply copy the skins directory and an Editor control tag to their application. This document is meant as a reference to some inner workings for those interested in skinning.

Customizing any of our sample skins is as easy as editing any of the elements defined above as well as any of the Widgets.

Customizing Skins in Editor 2008.1

ToolBars can be added or removed from the ToolBars collection in the Editor control tag, ToolBars may also be removed by removing their placeholder from the skin template.

ToolBarItems may be removed, added or edited by editing the corresponding xml file, such as StandardToolBar.xml. If they are defined inline with each ToolBar editing can be done there as well.

Any other aspect of an existing skin may be customized through editing the template file, the widget UserControls for each ToolBarItem skins\skin_name\widgets\ and/or the corresponding image and CSS files. For example, to alter the InsertEditMedia Dialog you would edit the file skins\skin_name\widgets\InsertEditMedia.ascx.

The UserControl method of skinning is still available, relevant files can be found in integrated_skins\. While this method is still functional and available, it will most likely not be supported in a future iteration of the Editor control and may not contain all future fixes. The javascript engine to accompany this method, scripts.js, is now compiled into the ComponentArt.Web.UI.DLL. Therefore cannot easily be edited when using the new skinning method.

We've found this new skinning method to be easiler, both when implementing and when making customizations than it's older counterpart. hopefully you will too.

Dynamically Assigning Event Handlers w/ Arguments to Instance Methods in Javascript

phil — Fri, 16 Feb 2007 21:34:00 GMT

I ran into a speed bump of sorts when attempting to assign an object instance method as a DOM event handler, there's some information floating around the net, but a post on the topic can't hurt. Something like this on the server side would usually fit the bill:

spaghetti.Attributes.Add("onmousemove",this.Id+".myMouseMoveHandler(event)");

However since we want to create this same result completely on the client-side we'll need to do this in the class constructor, something like this:

document.getElementById('spaghetti').onmousemove = this.myMouseMoveHandler;

May work in some situations, but arguments cannot be passed when assigning this way, also, unless the handler function is defined within the constructor it won't be available yet. Something like this:

document.getElementById('spaghetti').onmousemove = 
   new Function ('e',id+'.myMouseMoveHandler(e);');

Again will only work if the handler method has been defined within the constructor, but at least an argument may be passed. Next we add the dreaded eval so it can be evaluated on the fly, allowing us to define the handler method for the object instance outside of the constructor:

document.getElementById('spaghetti').onmousemove = 
   new Function ('e','eval("'+id+'.myMouseMoveHandler(e);");');

Figured it was just convoluted enough to warrant a blog post.

Telligent Community Server 2.1

phil — Tue, 31 Oct 2006 09:45:00 GMT

We here at ComponentArt have long been working with the good folks at Telligent Systems and have been using a highly modified version of their Community Server on our main site for quite some time. When we decided to set up some development/corporate blogs, selecting software didn't take long. I'm currently involved in a number of projects here at ComponentArt, both in development and support of our products, the most recent being the implementation of Community Server 2.1 for these blogs. I'm sure you all envy me the tip-toeing through skin files and templates to get that look just right, but seriously, Telligent have a great product which we managed to completely customize and skin in less than three days. Some URL redirection, which it supports though a .config file, some virtual directory shuffling and we've got CS stripped down to the blog meat we wanted. Here's to hoping these blogs provide the development community with some interesting reading now and then. Cheers.