Silverlight, WPF

A Small But Useful Tip

At work at the moment I am working on a large financial LOB app using WPF, where we regularly present the users with various information, some of which they can enter, and some of which they can not.

Now as you can imagine some of this data comes from a database, and as such database ID columns (Primary key values to be precise) are presented to the users. Now these IDs are highly important to our users (who just happen to be internal users within my company), but are obviously read only and database generated, and can grow quite large, as we have a lot of records of certain types of entities.

All following me so far I hope, well now we get to it, in an ideal world everything just works and no one cares about these IDs, and everyone goes about their business. But we are in the process of gradually improving this software (we do Agile iterations of improvements) so things change and occasionally things do go wrong, or do not work as expected, and our users generally relay this to us using the JIRA bug tracking software, where they can place screen shots, if they remember, or catch a problem in time, which quite often is not the case.

So on of those occasions where they do manage to get a screen shot and log it in JIRA that is extremely helpful, but when they do not, guess what is the most important bit of information they can give us.

That’s right we need to know the ID of they thing they were trying to take an action on, and obviously the type of thing they were trying to do at the time the problem occurred. Ok it might be logged, but it could have been an unlogged thing, we have not managed to foresee.

Now as I also mentioned these ID’s can get rather long, and its all too easy to write down the wrong number. I also mentioned that these ID’s are read only, so they are suited to Label type controls. Problem with using Labels is that  the user is unable to copy from them. Sounds a bit rubbish, we could use a ReadOnly TextBox but it just looks a bit naff, looks quite like a normal TextBox, which some users can’t see as being ReadOnly.

So what else can we do, well luckily with WPF we can simply create a TextBox style that makes a ReadOnly TextBox look like a Label, which now allows Copy into an email (say).

Now everyone is happy, we get the right ID sent to our JIRA bug tracking system, or an email, the UI still looks nice, and the TextBox is copy enabled.

Here is a small screenshot showing 3 TextBoxes

  1. A regular TextBox, problem is it allows user to enter Text. So that is out
  2. A ReadOnly TextBox, user can’t enter Text, but it looks like they can
  3. A Styled TextBox which is ReadOnly and looks like a Label and allows Copying from it. This is a winner I think

image

Here is the Style to make a ReadOnly TextBox look like a Label, that still allows copying from.

<Style x:Key="TextBoxStyle1" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="IsReadOnly" Value="true"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="Bd" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    SnapsToDevicePixels="true">
                    <ScrollViewer x:Name="PART_ContentHost" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

This post is not rocket science, but it may be useful to people that have similar requirements to me I hope.

 

Hope it helps

Advertisements
WPF

A Phone Like WPF Control

As some of you may know I have been dormant on the blogging / article front for a while now. Which is due to me taking some time out to write a web based tool for myself and possibly others, which is taking all my free time. Thing is I needed a diversion, so found some time to create a well known phone type control.

If this is of interest to anyone have a look at it here : http://www.codeproject.com/KB/WPF/PhoneLikeControl.aspx

Here is a screen shot or 2 of it in action.

This is conceptually what is going on, we simply show an active BlockContainer, but allow user to scroll to others that are waiting in the wings.

scrollSmall

And here is in with a block expanded

expanded

Current Work

JQuery Not Working With FireFox

For those of you that follow my blog, or know me you will know that I am mainly a WPF/WCF kind of guy, but I Do love ASP MVC, and thought of a tool that I wanted to use, and thought it would be best served as a web based app, so without further ado I set about getting stuck into some ASP MVC and JQuery.

All was going beautifully, my JQuery was coming along leaps and bounds, and was working in Internet Explorer/Firefox/Chrome, and then I changed something.

Suddenly JQuery stopped working entirely in Firefox, despite the fact that the Firebug FireFox addin reported no errors at all, and JQuery worked just fine in Internet Explorer and Chrome. This really hacked me off, and I annoyed my web developer colleague to death on this, and still nothing.

So I messed around for a while and worked out that to my surprise Firefox is far more finickity about how you declare you Javascript imports.

I was doing this

<script src="/Scripts/jquery-1.4.2.min.js" type="text/jscript"/>

Which as I say worked fine in IE/Chrome, but did not in Firefox, but alas no warnings either. After some Googling, I found a post on StackOverflow, that said for Firefox to work you must conform to the correct XHTML schema definition which means you must declare the script import with a correct end tag, like this:

<script src="/Scripts/jquery-1.4.2.min.js" type="text/jscript"></script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }But still no banana in Firefox…hot damn what is going on, still all was fine in IE and Chrome most peculiar.

Turns out the MIME time is all so very important for Firefox, you need to declare the import as follows, and all is then good:

<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

I found this post to be pretty useful in determining what MIME types are supported by the various browsers:

http://krijnhoetmer.nl/stuff/javascript/mime-types/

Here is the relevant parts

text/javascript

Opera 7.54+
IE 5+
Firefox 1.0.7+
Safari 2.0.3+
iCab 3 Beta 394
Camino 2006021400

text/jscript

Opera 7.54+
IE 5+
Safari 2.0.3+

Ok its probably an old post, but put me on the right track.

Hope this post and the one above I linked to helps you not get stung like I did.
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }