Tab Header Styling in LightSwitch HTML Apps

Tabs Style in LightSwitch HTML App

Overview

The default appearance of the tab headers in your Cloud Business Apps and LightSwitch HTML Apps can be customized to make them look more appealing and looking a lot more obvious to the end-users.

This post shows you which CSS classes and attributes to change to achieve tab headers that look like retro card index tabs.

Examples and Samples

This is the style of tab headers that we will show to create.

Rounded Corner Tabs Styling

Some simply rounding of a corner can give a card index file type appearance.

Card Index File Style Tabs

The CSS styling customizations required can be made in one place that is then picked up by all screens and pop-up dialogs. Here is a similar styling in another app but with a more rounding to blend in with the apps style.

Round Tab Headers in a Pop-up Dialog

You can see the visual impact readily. Clearly you can use any HTML5 CSS styling that you like once you have access to the classes and elements. The simplest way to do this is to override some of the CSS styling by editing the ‘user-customization.css‘ file located in the HTML Client ‘Content‘ folder.

user-customization.css in solution explorer

At the top of this file you can add a section to change the styling of your project’s tab headers. Here is the first example:

msls-screen-tab css class

The CSS classes involved are:

• msls-screen-tab
• msls-screen-tab-active
• ui-btn-inner

In this case the border-top-right-radius is setting the rounding effect. The CSS attributes needed will vary based on the complexity of your apps style sheets. In this example the existing style sheets have no border rounding.

In the second sample, where the app’s border styling is already rounded, a few more attributes need to be overridden for the full effect.

msls-screen-tab complete border rounding

In this case the border top left radius continues to be inherited from the main style sheet and so matches the apps other visual elements, such as buttons. The top right border is given more rounding to extenuate the visual effect of a card index header. To finish the look, the apps default rounded styling is overridden in the bottom border corners.

You can experiment with other attributes from font properties to background effects.

Conclusion

A simple way to add a bit of card index style to your tab headers. Not all Cloud Business Apps and LightSwitch HTML Apps need to look the same.

Visual Studio 2015 and LocalDB instance for LightSwitch

Purpose

With Visual Studio 2015 RTM the database tooling has changed. How LightSwitch uses LocalDB has changed too. Remember the issue with VS2013 and LightSwitch SQL Server Project references being blank? Let us take a look and see what changed in this area and determine if LightSwitch and SQL Database Projects work better together.

Background

How and why have things changed with LocalDB? I will refer to this Microsoft Connect feedback from 2014:

SQL Server 2014 Express LocalDB does not create automatic instance v12.0

“In SQL14, we moved away from the numbering/versioning for the automatic instance and named it “MSSQLLocalDB” instead of “v12.0”. The name of the automatic instance in the SQL14 documentation for LocalDB at http://msdn.microsoft.com/en-us/library/hh510202(v=sql.120).aspx has been fixed. If you require an instance to be named “v12.0”, you can create a named instance with that name.
Thanks & Regards, Pooja Harjani, Sr. Program Manager, SQL Server, Microsoft.”

A SQL 2014’s Local DB sample connection string looks like this:

Data Source=(localdb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\mydb.mdf;Initial Catalog=mydb;Integrated Security=True;MultipleActiveResultSets=True

How this surfaces in LightSwitch

So, the name for the automatic instance is MSSQLLocalDB. This is the instance that LightSwitch in Visual Studio 2015 now uses to create intrinsic databases for projects.

Here is a screenshot of the SQL Server Object Explorer window in VS2015 showing two intrinsic databases underlying LightSwitch projects:

LightSwitch LocalDB use in Visual Studio 2015

The ‘UserVoice‘ test project was created using VS2015 RC and is uppercase. The LightSwitch test project ‘ResearchDatabaseApp‘ was created using VS2015 RTM. This is where we can find our development time intrinsic databases.

Refer to SQL Server Data Tools RTM update for July 2015 blog post for final details with respect to Visual Studio 2015 RTM.

LightSwitch and SQL Database Projects

Next, I created a new SQL Database Project called ‘ResearchDatabase‘ in the same solution as the LightSwitch ‘ResearchDatabaseApp‘ project. Here is a screenshot showing the default target platform as SQL Server 2014.

Then moving to the LightSwitch project properties straight away we see:

LightSwitch SQL Database Project reference working in Visual Studio 2015

The new project shows up immediately in the LightSwitch project properties. You can write scripts to manage the intrinsic database whenever you build or deploy the LightSwitch application. With post-deployment scripts, you can populate data, enhance the schema or add an index. Refer to the MSDN LightSwitch documentation for details: Managing the Intrinsic Database for LightSwitch.

Summary

So with Visual Studio 2015 and new LightSwitch projects the linking to SQL Database Projects is back working as it should! Another sign of continuing maintenance support for LightSwitch.

Adventures with PivotViewer Part 7: Slider control

Light up your Silverlight skills with the all-new Global Silverlight Firestarter!

 

In this post we continue to extend the PivotViewer control by taking programmatic control of the Zoom Slider…

Programmatic control of Zoom

We need to use the CustomPivotViewer class code to locate the internal StepLogSliderViewModel control. This slider control has the properties that we are interested in:

PivotViewer Zoom Slider Code 1

Here are some click handlers for buttons to zoom in and out:

PivotViewer Zoom Slider Code 2

You can try out the sample Silverlight application here:
PivotViewer Zoom Slider.

Here is the source code for you to play with, if you find it useful, let us know. We have extended the PivotViewer control in other ways too.

Adventures with PivotViewer Parts 6 – 8 source code ZIP.

This sample project is based upon the PivotViewerSample code that shipped with the control, by default it is here for the August 2010 release:

C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Aug10\Source\PivotViewerSampleXapCode.zip


Adventures with PivotViewer Part 6: Pimp it sample code

Light up your Silverlight skills with the all-new Global Silverlight Firestarter!

 

So let’s continue where the last post left off and finish the high-level pimping of the PivotViewer control…

If you want to follow along then you need to locate the PivotViewerSample code that shipped with the control. By default it is here for the August 2010 release:

C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Aug10\Source\PivotViewerSampleXapCode.zip


In the previous post the sample code showed you how to hide the left side Filters Panel and the right side Info Panel. It showed you also how to alter the background to help brand the control’s appearance.

The original code was a bit raw so I have put together a small demo application that wraps the functionality up into the custom PivotViewer class override. The sample allows you to toggle the Visibility of the tiles as well as the filters and information panels.

The custom properties can simply be used as in this sample:

...
if (PivotViewer.TileVisibility == Visibility.Visible)
{
PivotViewer.TileVisibility = Visibility.Collapsed;
}
else
{
PivotViewer.TileVisibility = Visibility.Visible;
}


C# Sample: Hide/Show the collection tiles

And the background can be set to ImageBrush like this:

...
// Main tile view background - ImageBrush
StreamResourceInfo sr = Application.GetResourceStream(new Uri("PimpThePivotViewer;component/Resources/Island.jpg", UriKind.Relative));
BitmapImage bmp = new BitmapImage();
bmp.SetSource(sr.Stream);
PivotViewer.GridBackground = new ImageBrush() { ImageSource = bmp };
sr.Stream.Close();


C# Sample: ImageBrush

The sample has a button to toggle the background between:

SolidColorBrush = Colors.Black

SolidColorBrush = Colors.Transparent

RadialGradientBrush

LinearGradientBrush

ImageBrush

You can try out the sample Silverlight application here:
Pimp-the-PivotViewer

Here is the source code for you to play with, if you find it useful, let us know. We have extended the PivotViewer control in other ways to.

Pimp-the-PivotViewer source code ZIP.

PivotViewer Yoga Theme

Adventures with PivotViewer Part 5: Pimp my PivotViewer

If you are not partial to a little code-behind then I would leave now as there is no blendability whatsoever to be found here that is for another day…

And if you are here then you should be interested in these two items so I will give them a plug:

Light up your Silverlight skills with the all-new Global Silverlight Firestarter!

Silverlight – Forums – PivotViewer Control

So let’s pimp the control…

Skinning is used to good effect to brand the PivotViewer control and integrate it into this GameMarx website An Xbox Live Indie Game search pivot.

If you want to follow along then you need to locate the PivotViewerSample code that shipped with the control. By default it is here for the August 2010 release:

C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Aug10\Source\PivotViewerSampleXapCode.zip


To achieve a similar effect to the GameMarx website you need to set the background to black and hide the Filter Panel and the Info Panel:

...
using System.Windows.Controls;
using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Views;

namespace PivotViewerSample
{
/// <summary>
/// Override of PivotViewer
/// </summary>
public class CustomPivotViewer : PivotViewer
{

public override void OnApplyTemplate()
{
base.OnApplyTemplate();

Grid partContainer = (Grid)this.GetTemplateChild("PART_Container");
CollectionViewerView cvv = ((CollectionViewerView)(partContainer).Children[0]);
Grid container = cvv.Content as Grid;
Grid viewerGrid = container.Children[1] as Grid;

// Background
container.Background = new SolidColorBrush(Colors.Black);

//
// Filter Panel
//
// Hide it
viewerGrid.Children[2].Visibility = System.Windows.Visibility.Collapsed;
// Reuse the space occupied by the grid column
viewerGrid.ColumnDefinitions[0].Width = GridLength.Auto;

//
// Info Panel
//
// Hide grid column that contains it
viewerGrid.ColumnDefinitions[2].Width = new GridLength(0);

}
}
}

C# Sample: CustomPivotViewer

If you prefer not to use your own filter UI controls then don’t hide the Filter Panel, ditto the Info Panel, but you all probably want the background changed at some point.

Let us now see the effect of a LinearGradientBrush:

...
// PivotViewer background
GradientStopCollection gsc = new GradientStopCollection {
new GradientStop { Color = Colors.Orange, Offset = 0.0 },
new GradientStop { Color = Colors.Yellow, Offset = 0.5 },
new GradientStop { Color = Colors.Green, Offset = 1.0 }
};
container.Background = new RadialGradientBrush(gsc) {
Center = new Point(1.0, 1.0),
GradientOrigin = new Point(1.0, 1.0),
RadiusX = 1.0,
RadiusY = 1.0
};


C# Sample: LinearGradientBrush

And finally, but not least, for this blog post an ImageBrush:

PivotViewer Desert Island Theme

...
// PivotViewer background
StreamResourceInfo sr = Application.GetResourceStream(new Uri("PivotViewerSample;component/Resources/bgrd.jpg", UriKind.Relative));
BitmapImage bmp = new BitmapImage();
bmp.SetSource(sr.Stream);
container.Background = new ImageBrush() { ImageSource = bmp };
sr.Stream.Close();


C# Sample: ImageBrush

There are other brushes, not least, the VideoBrush but it can start to be a bit overwhelming. Now let us see some cool PivotViewer applications out there!

Windows Phone 7 – WP7 LOB App Dev

Don’t you love all the new acronyms! Well maybe not for everyone. Interested in LOB then also look at #TEE10 MEAP, MEAP! Sounds like the roadrunner cartoon.

With all this Windows Phone 7 goodness around all those blogs and videos can be pretty overwhelming. At heart we are games developers but in reality we are LOB application developers and for some odd reason we never came across Rob Tiffany’s blog until this week. We think it needs a plug.

It is so full of WP7 goodness that I thought it was worth re-blogging links to his series of articles. The articles ‘do what they say on the tin’, enough said.

Rob Tiffany
Thoughts on Mobility, Wireless, Entrepreneurship, Writing, Speaking, Wine, Strategy and Architecture

20-JUL-2010 Windows Phone 7 Line of Business App Dev :: The Overview Video

27-SEP-2010 Windows Phone 7 Line of Business App Dev :: Building a WCF REST + JSON Service

15-OCT-2010 Windows Phone 7 Line of Business App Dev :: Moving your WCF REST + JSON Service to Windows Azure

27-OCT-2010 Windows Phone 7 Line of Business App Dev :: Consuming an Azure WCF REST + JSON Service

05=-NOV-2010 Windows Phone 7 Line of Business App Dev :: Working with an In-Memory Database

Hope you like them too. Many thanks to Rob for sharing them…

My Experience using Entity Framework for WCF/SQL Server Layered Application

This post is a little late coming , as I first starting using Entity Framework 4 when it was on CTP 1 at the start of the year. I used it up to CTP2 in March/April 2010.  Forgive me if there have been changes since and please do visit the MSDN site here and do read up on it (I read Julia Lermans book and her blog here)

First let me start by saying EF4 is a great product. It has the potential to not only generate code and classes for communication with database but also now has the ability to generate the database schema based on your code. This is great for developers who are not confident with databases or T-SQL, or do not have a lot of time to create a working system.

My background is primarily as a sql dba and developer, perhaps this is why I had a few problems with EF.

I have always believed that a good database layer is the best starting point for a good application design.  I realise there are times when this is not always possible …

However, I like using stored procedure when writing real applications.

1. They have the ability to protect the application from schema changes making it easier to change code without redeploying your front end.
2. They can protect the database from unscrupulous client developers who like writing badly performing inline sql (you know who you are …!)
3. They generally have the capability to perform well (of course they have to also be written well!)
4. They can be used to protect from direct table access and permissions can be applied both externally and programatically within the procedure.
5. They can enforce atomic updates to your data across multiple tables.
6. Most importantly for me.  They can remove a lot of complexity from the application and can allow you to create a normalised data schema, but protect the developers from the complexity of multi-tabled updates.

So why is this a problem I hear your ask.  Entity framework can be used with stored procedures can’t they?

Well yes and no …

Of course you can map your insert/update/delete portion of the entity to your stored procedures.  But they have to be written in a certain way and they must return key values in a select statement (no output parameters allowed here).

No out of the box support for the Get data process being a stored procedure, this needs to be a table or a view, unless you like editing the xml files.  I found this side of the entity framework to be incredibly painful, in terms of setting an exact entity that could use a view for the Get and stored procedures for the rest.  Let alone when you want to add a column and have to start all over again.

However what I did find useful in the entity framework was the ability to knock up a working demo system in an incredibly short amount of time. I had a WPF/WCF/SQL 2008 system working with a single table process in a matter of days.  But what I found was that I couldn’t take it any further without wasting a lot of time remapping schema changes to the entities.  I also decided to take a look at some of the generated SQL statements from the entity sql and linq sql. It wasn’t the worst I’ve seen but boy was it verbose !

My conclusion is … use the EF if you want create quick proof of concepts or prototypes but when it comes to writing real database applications stick to the stored procedures and real T-SQL, your DBA will thank you for it when he has to take it over and support it.  Microsoft seem to be approaching the whole code generation tools from the front end.  What I really need is the reverse, I want a really good database design, with standard stored procedures for data updates and tool to help me connect it to a front end without me writing all the code!

Please try it for yourself and do read the material at the start of the post  – make up your own mind!