Code On Time: User Interface

Blog

User Interface

Tuesday, May 22, 2012Print Subscribe

Code On Time web applications use Cascading Style Sheets (CSS) to theme the application elements, including colors, fonts, backgrounds, borders, paddings, margins, and other embellishments.

The screen below shows the Employees page of a web application generated using Social theme.

Most modern browsers have built-in page inspection capabilities. For example, if you are using Internet Explorer 9, you will need to press F12 to bring up Developer Tools. On the menu, click on Disable / CSS menu option.

The page style sheet will be disabled, and the page will look like the screenshot below. You can see that it is now “black on white” - just black text and blue links. If you want to completely revamp the page, it may be best to start from here.

Alternatively, you can add incremental enhancements to existing themes. Let’s make a cosmetic enhancement to the Social theme.

On the Developer Tools menu bar, click on Disable / CSS menu option again to enable the site styling. Click on the Arrow icon on the toolbar to activate Inspection mode. In this mode, when you mouse over an element in the page, it will be surrounded by a blue border.

Click on the first cell underneath the Address column. The Developer Tools window will find the HTML corresponding to the selected element. Three CSS classes Cell, Address, and StringType are currently assigned to the table cell. Let’s create a CSS class that will add a gray background to the Address column.

Start Code On Time web application generator, click on the project name, and press Develop to open the project in Visual Studio. In the Solution Explorer, right-click on the ~/App_Themes/MyCompany folder and click on Add New Item option. If you changed the namespace of your application, then choose the corresponding folder.

In the window that opens, select your programming language, and then choose Style Sheet. Optionally rename the file, and then press Add.

Replace the default text in the style sheet with the following rule.

.Cell.Address
{
    background-color:#F2F2F2!important;
    border-bottom-color:#F2F2F2!important;
}

Note the use of the !important suffix. This suffix needs to be used when your custom CSS rules come into conflict with the core theme, and you would like your own rule to prevail.

Save the file, and refresh the web page. You will see that the Address column now has a gray background.

Cascading style sheets offer an infinite number of options to affect the presentation of pages without changing a single line in the web application itself. Applications created with Code On Time do not explicitly specify colors or fonts anywhere in the source code. You can alter your application to your exact specifications.

Labels: Tutorials, User Interface, Web Application Generator

Friday, May 11, 2012Print Subscribe

Grouping Data Views Under the Same Tab

It is possible to create multi-level master-detail pages in a Code On Time web application. One option is to render the master-detail data views in a flat list one under another. Another option is to group the detail data views in the same container.

In a Northwind sample with a Classic page layout, the Customers page will have the Customers master data view at the top, and three child data views in their own tabs underneath.

The child data views belong to the same container, and have tabs as activators.

In the above layout, the Order Details tab is a child of the Customers data view. Let’s make the Order Details data view a child of Orders data view and have it displayed when Orders tab is selected.

Start the Project Designer. Double-click on Customers / container2 / view4 data view node.

Change the following properties:

Property	New Value
Text	Orders
Filter Source	view2
Filter Field #1	OrderID
Auto Hide	Self

Press OK to save the data view. On the tool bar, press Browse to generate the application.

When your default web browser opens, navigate to Customers page. You are presented with a list of Customers. Select a customer, and the Orders and Customer Demo tabs of container2 will become visible. Select an Order, and relevant Order Details will appear underneath.

If you choose Customer Demo tab, then both Orders and Order Details data views will become hidden.

Labels: Master/Detail, User Interface, Web Application Generator

Tuesday, May 8, 2012Print Subscribe

Feature: Adaptive Filtering

Code On Time web applications offer adaptive filtering out of the box. Adaptive filters limit the list of filtering options according to the current data set and other active filtering options.

For example, consider the Northwind sample web application. Navigate to the Products page. Mouse over the Category Name column header, and activate the dropdown. Click on “Beverages” filter option.

You will see the list of products has been filtered to only display those records with a Category Name of “Beverages”.

Now, filter Supplier Company Name by “Exotic Liquids” using the same method. The combination of filters has produced two matching records.

Activate the dropdown for Category Name again. You will see that the list of categories has been reduced to only those that match the other filtering constraints (Supplier Company Name equals Exotic Liquids).

Clear the Category filter by clicking on the text “Category Name equals Beverages”.

Filters do not require lookup tables. The filter options are drawn from the data set itself. For example, activate the drop down for Reorder Level in the list of Products. If Supplier Company Name is filtered to “Exotic Liquids”, you can see that the only available filtering options are “10” and “25”, which match the current data set (shown above).

You can clear the whole filter by pressing the “x” on the right side of the filter header.

Filters will continue to adapt regardless of the complexity of a filtering operation. For example, activate the dropdown for Category Name, and click on “Filter…” option.

Toggle the checkboxes next to the following categories: “Beverages”, “Dairy Products”, “Meat/Poultry”. Press OK to apply the filter.

Click on text Unit Price in its header to sort the products in descending order of price.

Activate the Unit Price dropdown, and click on Number Filters | Between. Write “10” and “30” in each box, respectively.

Press OK to apply the filter.

Activate the Supplier Company Name dropdown, and click on “Filter…” option. Checkmark several suppliers from the list, and press OK to apply the filter.

Activate the dropdown for Reorder Level and click on “Filter…” option. Choose several reorder levels and press OK to apply the filter.

The filtering options will all be displayed in a filter detail bar underneath the action bar. You may have noticed that as you made each filter, the subsequent filters had less values. This is due to the power of adaptive filtering.

You can also click on the text of any specific filter description to remove that filter.

Labels: User Interface, Web Application Generator