In my previous post, I’ve shown you how to use a header and footer with custom views in a list/table view. Now, what if I want to show a dockable view at the bottom of the screen? Let’s take the previous sample a bit further to look like the following.

Starting off

To start off, I’ll just copy off the previous sample. If you haven’t read the previous post on how to provide header and footer to your TableView / ListView, it is highly recommended for you to do so before continuing.

If you have done so, let’s move on.

Creating dockable view on iOS

To create the dockable view on iOS, you’ll need to do the following:

• Preparing custom table root view
• Modifying the View
• Modifying the View Controller

Preparing custom table root view

To provide the custom table root view, you’ll need to create a new Crosslight iOS View for iPhone, which is accessible from the Item Templates, available after you’ve successfully installed Crosslight.

Right click on the Views in HeaderAndFooter.iOS/Views folder and select Add, New Item.

Then choose, Crosslight iOS View for iPhone. Give it a name of CustomTableRootView.

First, let’s try to create a the custom table root view. Open the CustomTableRootView.xib in Xcode Interface Builder.

Adding the Docked View

Drag a new View from the Object library, set the outlet as DockedView, and provide the following constraints:

• Horizontal Space Constraint: from Superview.Trailing equal to the View.Trailing with the following values.
  
• Vertical Space Constraint: from Superview.Bottom equal to the View.Bottom with the following values.
  
• Horizontal Space Constraint: from DockedView.Leading equal to the Superview.Leading with the following values.
  

Now that the docked view is ready, let’s drag a Label, set the outlet as TxtHeader, and drag a button, set the outlet as BthHeader. Both of them are given the previous outlet names, so that no code changes will be required in the BindingProvider side. If you wish, you can set the following constraints:

• Give the DockedView a height of 45.
  
• Vertically align the label as well as the button.
  
• Give an inner padding of 20.
  

That’s pretty much it. Let’s modify the View a bit.

Modifying the View

Let’s open the CustomTableRootView.cs and modify that a bit by adding a new ResizeTableView method.

using System;
using System.Drawing;
using System.Linq;
using CoreGraphics;
using Foundation;
using UIKit;

namespace HeaderAndFooter.iOS
{
    public partial class CustomTableRootView : UIView
    {
        #region Constructors

        public CustomTableRootView(IntPtr handle) : base(handle)
        {
        }

        #endregion

        #region Fields

        public static readonly UINib Nib = UINib.FromName("CustomTableRootView", NSBundle.MainBundle);

        #endregion

        #region Methods

        public static CustomTableRootView Create()
        {
            return (CustomTableRootView) Nib.Instantiate(null, null)[0];
        }


        internal void ResizeTableView(nfloat top)
        {
            var tableView = this.Subviews.FirstOrDefault(o => o is UITableView);
            tableView.Frame = new CGRect(0, top, tableView.Bounds.Width, this.Bounds.Height - top - this.DockedView.Bounds.Height);
        }

        #endregion
    }
}

Here, we prepare a handy method to resize the table view when the view is used, called ResizeTableView. By calling this method, the TableView that contains this dock view will have its bounds re-adjusted. This is done so that the scrolling container in the TableView does not exceed the docked view. Take a closer a look at the contents of the method.

In line 36, we first search for the TableView that is added as a subview of the ViewController. In line 37, we set a new bounds for it, not changing the width at all, but just by adjusting the height by taking account the DockedView.Bounds.Height as well.

Modifying the View Controller

Next, open up the MainViewController.cs. Here’s the contents.

using CoreGraphics;
using Foundation;
using HeaderAndFooter.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.iOS;
using UIKit;

namespace HeaderAndFooter.iOS.ViewControllers
{
    [Register("MainViewController")]
    [ImportBinding(typeof(MainBindingProvider))]
    public class MainViewController : UITableViewController<MainViewModel>
    {
        #region Properties

        public override UIViewTemplate FooterViewTemplate
        {
            get { return new UIViewTemplate(CustomFooter.Nib); }
        }

        public override TableViewInteraction InteractionMode
        {
            get { return TableViewInteraction.Navigation; }
        }

        public override bool ShowGroupHeader
        {
            get { return false; }
        }

        public override UITableViewStyle TableViewStyle
        {
            get { return UITableViewStyle.Plain; }
        }

        public override bool UseCustomRootView
        {
            get { return true; }
        }

        #endregion

        #region Methods

        protected override void InitializeView()
        {
            base.InitializeView();

            // set navigation title
            this.NavigationItem.Title = "Crosslight App";
        }

        protected override UIView GetCustomRootView()
        {
            return CustomTableRootView.Create();
        }

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

            // adjust tableview frame based on top layout guide	
            ((CustomTableRootView)this.View).ResizeTableView(this.TopLayoutGuide.Length);
        }

        #endregion
    }
}

Here, we removed the overridden property for HeaderViewTemplate, since we’re going to use the new DockedView to replace the header. Therefore, we then override a new property called UseCustomRootView and return true.

After we’ve done that, we then override the GetCustomRootView() method to return the CustomTableRootView that we’ve just created by calling CustomTableRootView.Create();

The custom root view is one of the unique features introduced in Crosslight’s advanced UITableViewController. It allows you to easily replace the root view with a custom one with just a few property sets, while still retaining the developer experience and automatic binding feature. In the case above, when UseCustomRootView is returning a true value, the GetCustomRootView method will be automatically called when the controller is initializing.

Lastly, we override the ViewWillLayoutSubviews method. This method is called when a new subview is added to the ViewController, which can be done at any time, whether during ViewController creation or programmatically adding a subview at runtime, therefore, when the DockedView is added, we then call our handy method to resize the TableView so that the scrolling container wouldn’t “bleed” past the DockedView.

That’s it. Run the project and you should get the result similar to the following video.

Creating dockable view on Android

Now that we’ve finished the iOS version, let’s create the Android version. To create the docakble view on Android, you’ll need to complete the following:

• Preparing custom layout
• Replacing the content layout in Activity

Preparing custom layout

First things first, let’s create a new Android Layout, and let’s name it CustomLayout.axml. To do this, right click on the HeaderAndFooter.Android/Resources/layout folder.

Select Add, New Item. Under Android, select Layout.

Provide the layout for the CustomLayout.axml as follows.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/Footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="1px"
            android:background="#f2f2f2" />
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingLeft="20dp"
            android:paddingRight="20dp">
            <TextView
                android:id="@+id/TxtHeader"
                android:layout_width="fill_parent"
                android:layout_height="30dp"
                android:layout_weight="1"
                android:gravity="left"
                android:textSize="20sp" />
            <Button
                android:id="@+id/BtnHeader"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/Footer" />
</RelativeLayout>

Let’s take a closer look. Here, we’ve used a RelativeLayout as the root ViewGroup and we’ve added 2 major elements to the RelativeLayout, which is a LinearLayout that will act as our DockedView and ListView.

At a glance, you might be wondering why the ListView is defined after the LinearLayout. This is purely for build purposes. The XML parser parses the text from top to bottom. Since in the ListView, we’ve defined android:layout_above=“@id/Footer”, the build will fail if the LinearLayout is not defined beforehand. Hence, the ListView is defined after the LinearLayout.

One important thing to notice that the ListView’s id is set to @android:id/list. This conforms the standard method to override the built-in ListActivity’s layout in native Android development itself. For more information on that topic, click here. This is done because in the ListActivity class, you can reference the ListView as simply as calling this.ListView, however since you’ve overridden the whole layout, then the ListView must be re-referenced this way so that the Android understands. Everything else is just standard Android layouting process.

Replacing the content layout in Activity

After the layout is prepared, let’s modify some codes in the Activity. Open up MainActivity.cs inside HeaderAndFooter.Android/Activities folder and see the contents as follows.

using Android.App;
using HeaderAndFooter.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android;

namespace HeaderAndFooter.Android
{
    [Activity(Label = "Crosslight App", Icon = "@drawable/icon")]
    [ImportBinding(typeof(MainBindingProvider))]
    public class MainActivity : ListActivity<MainViewModel>
    {
        #region Properties

        protected override int ContentLayoutId
        {
			get { return Resource.Layout.CustomLayout; }
        }

        protected override int FooterLayoutId
        {
            get { return Resource.Layout.CustomFooter; }
        }

        public override ListViewInteraction InteractionMode
        {
            get { return ListViewInteraction.Navigation; }
        }

        #endregion

        #region Methods

        protected override void InitializeView()
        {
            base.InitializeView();

            this.RegisterViewIdentifier("TableView", this.ListView);
        }

        #endregion
    }
}

In the ContentLayoutId property, we’ve replaced the old layout to the new CustomLayout that we’ve created earlier and we’ve also removed the HeaderLayoutId. You’ve completed the Android version. Let’s run this project and you should get the result similar to the following.

Wrapping Up

You’ve seen how easy and elegant it is to provide a dockable view to your table view on iOS as well as list view on Android. Achieving the same task without Crosslight would be really tedious and time consuming. The dockable view also comes with automatic binding support, so you can take advantage of native binding process with whatever layout you have. Nice and simple.

You can find the code to the sample here:
http://git.intersoftsolutions.com/projects/CT/repos/crosslightdockableview/browse. To use this sample, you’ll need at least Crosslight build 4.0.5000.323 and above.

See you in the next post,
Nicholas Lie

The web development trend recently revolves around providing great look and feel for the users of World Wide Web. Nowadays, we see lots of beautifully-designed web components along with the rise of CSS frameworks such as Bootstrap and even Material Design. These frameworks provide a way for developers to universally theme their web apps, making it consistent and beautiful for their users, across the entire site.

WebUI Studio. Undoubtedly, this is our best-selling suite ever. With impressive range of versatile, ready-to-use components, WebUI Studio has become the industry’s benchmark for suite of web components. More than just simple controls, WebUI components are designed to be functionality-rich, making developers’ lives much easier whilst bringing high-performance web components to their ASP.NET web applications.

Just, what if, you can incorporate these beautifully-designed elements to WebUI? At Intersoft Solutions, we take pride in our meticulously-designed user experiences. In our next biggest release ever, we’re going to bring a whole new look and feel of your web apps. Embrace the next evolution of web apps with WebUI. First-class web components meets first-class design.

Advanced Functionality Meets Beautiful Design

Before diving further, can you take a guess at some of these WebUI controls below?

From the top: WebCombo, WebInput with DateTime Picker, WebToolBar, and WebInput with Calculator Editor. Gorgeous, aren’t they? And this is just the tip of the iceberg. Goodbye old-fashioned looking web applications. It’s all thanks to the new technology we’re building for the next release, called Unified Theming.

Introducing WebUI Unified Theming

In the current release, you can already style WebUI controls through Layout Manager or via API at runtime. However, you need to do the styling on each WebUI control individually which could be tedious and repetitive for dozens of controls. This is going to change in WebUI vNext. Meet our brand-new Unified Theming framework.

The new Unified Theming allows you to apply consistent look and feel across your entire web applications just by using a single theme definition, similar to the ones found in popular CSS frameworks. Bigger buttons, more rounded buttons, gradient-styled buttons, flat buttons, anything. You now have total control over your app’s look and feel.

For example, you wish to change the corner radius of a popup panel. Just configure it once, and all of the WebUI controls in your application that use the popup element will automatically apply the same look and feel. To achieve this, it requires delicate, yet rigorous engineering to ensure all 30+ components work as expected using the new unified theming feature. Not only that, the combination of settings provided with each control makes it even tougher to achieve a consistent look with whatever settings you throw at it. And yes, there’s that cross-browser support as well.

When we designed the unified theme, we make sure that each control works in concert with native features and behaviors of the control itself. For example, here’s how it looks when the WebCallOut Bootstrap theme is applied with various types of settings. Here’s a shot with WebCallOut’s PointingPosition set to PointingBottomRight and PointingTopLeft.

And here’s another with PointingPosition set to PointingTopRight and PointingBottomLeft.

And the best of all, the Unified Theming framework leverages the industry’s most popular CSS extension language today, SASS. Written entirely in SCSS syntax, we’re able to streamline all styles across 30 components, creating variables and mixin that you can easily customize. This also means that you don’t have to learn a new language to customize the styles. Instead, you can use any SASS compatible editors such as Visual Studio 2015 or Sublime.

Bootstrap-themed WebUI

Along with the unified theming framework, we will also ship a new Bootstrap theme for the entire WebUI components. Let’s take a look at some of the WebUI controls restyled with Bootstrap theme.

WebButton

The rounded corners and vibrant pastel colors for the WebButtons are inspired from Bootstrap. All color schemes from mouse-over, default, disabled, and selected states are taken from Bootstrap.

WebProgressBar

These Bootstrap-themed WebProgressBar have arrived to captivate your users with vibrant, animated colors. The wide range of colors are also taken from Bootstrap. Also pay attention to the nicely shaped rounded corners of the progress bars.

WebTab

Each tab in WebTab is now more spacious with generous padding on all its sides. We’ve also added various Bootstrap styles such as Frame, Frameless, Pill and Line tabs. And to make everything look really great even in hi-res display, we’ve replaced all common icons with font-based icons, all comes pre-built in the WebUI Bootstrap theme.

Coming in 2015 R2

What you see in this post is just a small glimpse of what’s next to come. We can’t wait to show it live to you in the next 2015 R2 release. It’s going to be the biggest release ever! Refreshing the entire WebUI lineup, a major release for Crosslight, and the launch for ClientUI Reporting for WPF with charting will be the main dish for this release. Stay tuned for more exciting updates!

Cheers,
Nicholas Lie

While most of our recent blog posts were targeting Crosslight, that doesn’t mean we forget our other lineups. Quite the contrary, we will have big updates to all our lineups in the upcoming release, including WebUI and ClientUI across all the 7 platforms we supported. So, if you’re building Silverlight and/or WPF applications, then this blog post is for you! I’m thrilled to share with you many exciting features that you can expect in the next release of ClientUI. Read on.

Last year, we brought you the reporting suite that changed how you build and author enterprise reports on the Silverlight platform. It’s a game-changer. Comes with true WYSIWYG experience, it allows you to author exactly the way you want your report to be. And now, for the first time ever, we’re bringing you the same, great reporting suite on the Desktop. Say hello to ClientUI Reporting for WPF.

All the great features you love. Even better.

WPF has been and will continue to be a great platform for line-of-business applications. Microsoft has stated it very clear that WPF isn’t going away anytime soon as it’s the heart of the Windows itself, particularly on the recent paradigm shift in Windows 10 which puts everything back to the desktop mode. Similarly at Intersoft, we remain committed to continue improving and expanding our WPF toolset further. In overall, we have very exciting roadmap for the Windows platform, but I couldn’t unveil that yet at this time.

As the result of our commitment, the upcoming release will include a major update to ClientUI where we’ll be strongly focused in enterprise-grade components. In particular, we’ll be making available our ClientUI Reporting suite entirely to WPF. All the reports you have authored in Silverlight will continue to work in exactly the same way and manner in WPF.

Before I delve further, let’s get some refresh on the excellent features currently offered in the Reporting suite.

Various report types support.

Create any reports you like, from simple listing, multiple reports, invoice, master detail, group, hierarchical, table, label, to form and side-by-side reports, and much more.

Datasource-agnostic.

Built for ultimate flexibility. You can connect to any datasource as long as they are reachable – from web services, Web API, WCF RIA Services, DevForce, to virtually any objects that can be serialized over the wire.

Complex data operation support.

Perform any complex data operation, completely run on the server-side, such as filtering, sorting and grouping.

Rich report components.

Utilize all of the report bands and components to make great-looking reports that will look good on any device.

Comprehensive report parameter support.

Pass any data as report parameters to be included in report rendering process. Native data types will be automatically associated with suitable editors. You can also easily perform any custom logic based on the given report parameters.

Pre-built conditional formatting.

Change the appearance of report components depending on predefined conditions. For example, you can highlight several data bands in red, allowing the user to take notice whenever a certain condition is met, like when an item’s Quantity in Stock is reaching depletion. You can also display different conditions, such as data bar, color scale and icon set conditions.

Advanced globalization support.

Reports run in multiple cultures and localization support. Your reports now speak with the reader’s native language. Confusion averted.

Powerful scripting capability.

Fully supports ClientUI powerful C#-style scripting, allowing you to perform any complex operations within the report document. The scripting feels natural and uses similar C# scripting language. You can use the full array of mathematics operation similar to the ones found in System.Math library.

That’s just a handful of features that I could mention here. For the complete feature list, please check it out here.

Faster. Snappier. Desktop-class performance.

Authoring enterprise reports on Silverlight is fast. On the desktop? It’s lightning fast. Harnessing the CPU cores as optimal as possible, we use the best algorithms to max out the reporting suite performance on the desktop. It’s all thanks to our team of expert engineers.

Charts. Right in Your Reports.

The long-awaited, Charting for ClientUI Reporting is finally here! With the new and improved ClientUI reporting, we not only add support for the desktop, we also added a set of new features that you will absolutely love: you can now display gorgeous charts right within the reports.

You can now easily add various charts to your reports, such as area, bar, bubble, column, doughnut, line, pie, scatter, spline, and more. This opens up a plethora of new business scenarios in which visual charts might be favorable compared to data grid-based reports.

Optimized for Windows 10.

The new ClientUI Reporting experience is now optimized for Windows 10. Pay attention to the ribbon experience and see how it fits and blends with the overall Windows 10 aesthetics. You’ll begin to appreciate the small details in the engineering effort we’ve put so much into this remarkable reporting suite.

The reporting suite has been tested with previous versions of Windows and still retains the same great look and fidelity.

Built for Your Eyes.

Our team of engineers used only the best-looking interface and rendering engine algorithm available, so it looks pixel-perfect and ultra-crisp, even if you’re running the reporting suite on a computer with a powerful display. To make that happen, we’ve fine-tuned every single ClientUI component – topping over 360 components – to work and look great on WPF.

See the result when the the reporting viewer running the chart is zoomed all the way to its maximum value of 250%.

The reporting designer also retains the same great fidelity if the designer surface is zoomed all the way to its maximum value.

It won’t be long. Coming soon in 2015 R2.

We promise you it will be worth the wait. With the new ClientUI Reporting, we’re proud to say this is the most comprehensive and unmatched reporting suite in its class. With the power of desktop-class reporting engine, you can now author reports even faster and even add charts to it!

To get this feature immediately when it’s released, make sure your subscription is active by renewing your subscription today. In case your subscriptions have lapsed, please chat with us for special subscriber promotions we’re running this month.

Cheers,
Nicholas Lie