This release packed-in numerous important updates across all platform lineups since the last year’s release. One noteworthy milestone is the full support for Visual Studio 2017 (all editions), bringing in the toolbox, project and item templates, designers and editors, extensions, and get started wizards.

Furthermore, this release shipped cumulative updates for WebUI lineups, particularly improved standards compliance and support for latest major browsers such as Chrome 58, Firefox 54, and Safari 10. Several flagship components such as WebGrid Enterprise and WebCombo have received major improvements in client-side data access and templating. Specifically, a new extensible binding foundation has been built, allowing these data powerhorse to be used in conjunction with next-generation templating frameworks that we will introduce in the near future. Finally, with significant reliability updates committed so far, we made sure this release to be most stable Premier Studio release yet, perfectly balancing the major innovations we set forth in previous release.

As for the Crosslight lineup, we will be making it as a separate update through the NuGet channels, so you won’t find the latest bits in the 2017 installer. There are really a lot of exciting stuff that the team has worked on since the last release, with 1000+ commits and counting so far. It’s truly an over-delivery this time as we’re adding new scopes to our roadmap such as Nougat support, transition to Firebase Cloud Messaging, and more. We’ll keep you posted when the bits is available in NuGet.

Last but not least, the 2017 release is free to download for all customers with active subscriptions. Simply login to your Intersoft account to start downloading. Enjoy and have fun building your next big apps!

In light of Microsoft’s Build Event 2016 last week, Microsoft has officially announced partnership with Xamarin on March 2016, making Xamarin accessible to even more mobile developers across the world.

What’s great about this partnership is that Xamarin’s price has been significantly reduced from $1000/developer/platform/year to absolutely FREE. This is a huge news for us and it effectively reduces Crosslight’s subscription price to a total of $999, from $2,999 (including Xamarin). A whopping 66.66% reduction in total cost.

Our years of investing in Xamarin technologies have finally paid off and now you can easily build mobile apps with even faster than ever, thanks to Crosslight. Built on top of Xamarin’s technologies, Crosslight bridges the gaps between Xamarin.iOS and Xamarin.Android, effectively allowing 100% business logic code sharing with strong MVVM patterns.

Leveraging extensible architecture, MVVM design pattern and integration with Xamarin Platforms, Crosslight lets you easily build powerful iOS, Android and Windows native apps with a common application codebase including domain model, data access, and user interaction logic. And that’s nearly 96% of your project’s codebase. Built with cutting-edge portable framework and MVVM pattern, Crosslight lets you build cross-platform mobile apps by leveraging the programming skills and tools you loved – such as C#, MVVM, .NET and Visual Studio. Key features include:

• Comprehensive and advanced mobile frameworks leveraging MVVM design pattern
• Build native iOS, Android, Windows Phone 8 and Windows 8 apps with a single application codebase
• Elegant, developer-friendly API based on platform standards
• Universal data management with automatic binding
• Streamlined navigation services supporting push, modal and nested navigation mode
• Rich form builder with 20+ pre-built editors
• Highly customizable editor controls ranging from auto resize textbox to image picker with camera support and more
• Comprehensive mobile services for business apps
• Native user experiences conforming to platform design guidelines
• Support Visual Studio 2012 and Xamarin Studio
• Integrated to Xamarin platforms with full AOT compliance
• Time-saving Project Wizard featuring 30+ templates variants supporting iOS, Android, Windows Phone 8 and Windows 8

Sample Code

Display a button, then when clicked, show the number of taps. This is the default Xamarin’s cross-platform, single-view template.

Xamarin.iOS Code

With Xamarin.iOS, the code is more event-based, handled in the ViewController level.

using System;
        
using UIKit;

namespace XamarinCrossPlatform.iOS
{
    public partial class ViewController : UIViewController
    {
        int count = 1;

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

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

            // Perform any additional setup after loading the view, typically from a nib.
            Button.AccessibilityIdentifier = “myButton“;
            Button.TouchUpInside += delegate
            {
                var title = string.Format(“{0} clicks!“, count++);
                Button.SetTitle(title, UIControlState.Normal);
            };
        }

        public override void DidReceiveMemoryWarning()
        {        
            base.DidReceiveMemoryWarning();        
            // Release any cached data, images, etc that aren‘t in use.        
        }
    }
}

And on Android,

using Android.App;
using Android.Widget;
using Android.OS;

namespace XamarinCrossPlatform.Droid
{
    [Activity(Label = “XamarinCrossPlatform“, MainLauncher = true, Icon = “@mipmap/icon“)]
    public class MainActivity : Activity
    {
        int count = 1;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the “main“ layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button button = FindViewById<Button>(Resource.Id.myButton);
            
            button.Click += delegate
            {
                button.Text = string.Format(“{0} clicks!“, count++);
            };
        }
    }
}

Which may lead to problems if you’re trying to centralize the business logic. Let’s compare this with Crosslight. With Crosslight, simply create a new ViewModel that will contain the centralized business logic, which will be bound to the View using BindingProvider. Here’s the ViewModel.

using Intersoft.Crosslight;
using Intersoft.Crosslight.Input;
using Intersoft.Crosslight.ViewModels;

namespace XamarinToCrosslight
{
    public class SimpleViewModel : ViewModelBase
    {
        public SimpleViewModel()
        {
            this.ButtonText = “Hello World, Click Me!“;
            this.Count = 0;
            this.ClickCommand = new DelegateCommand(ExecuteClick);
            this.Title = “XamarinToCrosslight“;
        }

        private string _buttonText;
        private int _count;

        public string ButtonText
        {
            get
            {
                return _buttonText;
            }
            set
            {
                if (_buttonText != value)
                {
                    _buttonText = value;
                    this.OnPropertyChanged(“ButtonText“);
                }
            }
        }

        public int Count
        {
            get
            {
                return _count;
            }
            set
            {
                if (_count != value)
                {
                    _count = value;
                    this.OnPropertyChanged(“Count“);
                }
            }
        }

        public DelegateCommand ClickCommand { get; set; }

        public void ExecuteClick(object parameter)
        {
            this.ButtonText = ++this.Count + “ clicks!“;  
        }
    }
}

And here’s the BindingProvider.

using Intersoft.Crosslight;

namespace XamarinToCrosslight
{
    public class SimpleBindingProvider : BindingProvider
    {
        #region Constructors

        public SimpleBindingProvider()
        {
            this.AddBinding(“myButton“, BindableProperties.TextProperty, “ButtonText“);
            this.AddBinding(“myButton“, BindableProperties.CommandProperty, “ClickCommand“);
        }

        #endregion
    }
}

Then, in iOS,

using System;
using UIKit;
using Intersoft.Crosslight.iOS;
using Intersoft.Crosslight;

namespace XamarinToCrosslight.iOS
{
    [Storyboard(“Main“)]
    [ImportBinding(typeof(SimpleBindingProvider))]
    public partial class ViewController : UIViewController<SimpleViewModel>
    {
        public ViewController(IntPtr handle)
            : base(handle)
        {       
        }
    }
}

And in Android,

using Android.App;
using Android.Widget;
using Android.OS;
using Intersoft.Crosslight.Android.v7;

namespace XamarinToCrosslight.Droid
{
    [Activity]
    public class MainActivity : AppCompatActivity<SimpleViewModel>
    {
    }
}

As you can see, the View-level code is very minimal, since the code is very much centralized in the ViewModel and glued to the View using MVVM data binding pattern, which makes it very efficient to develop and maintain enterprise-scale apps. Should you wish to check out the full scource code, find it here.

To learn how to create your first Crosslight app, follow this step-by-step tutorial here: http://developer.intersoftsolutions.com/display/crosslight/Walkthrough%3A+Creating+Your+First+Crosslight+App. Or, if you’re interested in a more full-fledged app that showcases Crosslight’s prowess, we’ve recently released the Crosslight Field Service sample, which was revamped from the Xamarin Field Service sample. I highly recommend you to read these two posts to learn more about the Crosslight Field Service sample: part 1 and part 2.

Should you ready to purchase Crosslight, simply head over to our store. To celebrate this occassion, we offer a limited-time offer: You can get Crosslight now for $499 using this coupon code: LAUNCH2016 and start developing great mobile apps in no time!

Till next post,
Nicholas Lie

Our months of hard work finally paid off. It’s finally here. With excellent craftsmanship and fine attention to detail, we’re very proud to announce the all-new and powerful WebUI 2016. The entire WebUI lineup consisting of highly-advanced 40+ web components now finally receives a truly deserved facelift.

Accessing the New WebUI Live Experience

For so long, customers have enjoyed our live WebUI demos through http://live.intersoftsolutions.com. While this experience is adequate, being redirected to another site for a hands-on experience just won’t cut it anymore. So we decided to integrate the new samples right our website. That’s right, now you can experience the new WebUI samples with the gorgeous unified modern theme, right from our website.

Don’t worry, we’ve put these buttons everywhere, so you can easily access them from various pages in WebUI, although it is very much recommended to access them from /WebUI. Should you miss this experience and open the old live samples, you’ll be greeted with the following dialog box.

Without further ado, let’s get right onto the new WebUI Live Experience.

The Home Screen

Right when you launch the new Live Experience, you’ll be greeted with a nice and modern blurred background, showcasing the flagship products of WebUI. This experience works best on modern desktop browsers supporting HTML5 and CSS3.

If you click on products such as WebDesktop and WebEssentials, you can also find a grid of sub-components in them.

WebGrid

When you launch WebGrid for the first time, you’ll be greeted with the First Experience.

This first experience sample demonstrates many of the top UI features available in WebGrid, combined with some unique features such as column freezing, filter suggestion and more.

Some of the top features demonstrated in this sample are:

• Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
• Improved user interface with a new set of fresh icons, background images and UI elements.
• New context menu engine. Try to right click on the Grid area to experience the new context menu system.
• LiveFreeze™ column freezing feature. The only column freezing implementation that perfectly simulates Excel® freezing behavior.
• Automatic Filter Suggestion. Try to right click on a cell (eg, “Owner”), then choose one of the available filter options. The suggested filter options are based on selected cell’s data type and value.
• Filter Status Indicator. When one or more columns are filtered, notice that the filter indicator status is changed to “Filtered”. This indicator helps end users to understand the current state of filters without has to display filter bar. You can click on the filter status indicator to toggle the filter state.
• SmartWebResources™. This innovative technology enable this sample to run without dependencies to “physical” client resources. All client resources such as scripts and images are retrieved directly from resource assembly.
• Declarative datasource control binding. Notice that there are no codes required for the data binding operation (see C# and VB tab).

Samples Navigation Experience

To navigate between samples, you can easily use the arrows on the left and right-hand side of the screen, or use the menu button on the top-left corner of the screen. This will open the Menu panel and you can easily jump between samples.

If you wish to go back the controls grid, simply click the Home button. Should you encounter any problems or hassles with the samples, feel free to chat with us directly using the live messenger on the bottom-right corner.

WebCombo

This the First Experience when you launch the WebCombo sample.

This sample demonstrates the unified modern theme of WebCombo and many of its key features such as SmartWebResources™ and declarative datasource control binding.

Notice that there are no code required for the data binding operation (see C# and VB tab). Try experimenting with the WebCombo controls in this page to see some unique features in action. For instance, Reports-To is using multiple selection feature combined with image column type.

WebInput

This is the First Experience when you launch the WebInput sample.

This sample demonstrates the unified modern theme of WebInput and its key features.

Some of the new features demonstrated in this sample are:

• Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
• Ordinary input text and multiline input text features, like demonstrated in FirstName, LastName, Address, City, Country fields.
• Display and edit format features, like demonstrated in Birth Date field.
• Other edit format feature, like demonstrated in First Name, Last Name, Phone, Extension fields.

This sample also demonstrate integration between WebInput and .NET Validator Control such as RequiredValidator and CompareValidator.

WebScheduler

This is the First Experience when you launch the WebScheduler sample.

This sample is designed to model a car-rental tracking scenario – demonstrating how WebScheduler performs in real-world enterprise application. Bound to over 3000 events, WebScheduler delivers responsive user experiences regardless of the data size.

The powerful JSON technology and smart client paging rendering significantly improved the overall WebScheduler performance to a new level not possible before. This sample combines both the ViewPort™ and EventPageSize™ Client Paging rendering enabling WebScheduler to load in a flash.

Try to play around with the scheduler. Use the upper right vehicle locator for a quick jump. Click on the visual indicator on the resources area to populate the car information.

WebDesktop

This is the First Experience when you launch the WebDesktop sample.

This reference sample demonstrates the beautiful modern theme and many groundbreaking features in WebDesktopManager such as shortcuts and comprehensive window management. It also showcases the integration of various WebDesktop components to create full-fledge and immersive web applications, which include WebPaneManager, WebToolBar, WebTab, WebDialogBox, WebNotification and more. Try to double click each icon to see the WebDesktop components in action.

WebEssentials

This is the First Experience when you launch the WebEssentials sample.

This reference sample perfectly demonstrates WebEssentials component suite which comprised of 8 innovative controls, ranging from accordion, calendar, slider, to rating. WebEssentials enables you to create interactive and visually engaging modern web applications.

In this Online Resume scenario, WebAccordion is used as the main container, dividing this lengthy form into three sections. WebProgressBar is used to indicate the section completion process. The bar will be filled as users click on next. WebCalendar is used for date input and WebSlider for selecting a specific range. WebSlidingMenu is used on the right FAQ section. Click on a question and the answer is shown in a swift and smooth sliding animation.

Additionally, WebFlyPostBackManager is used to populate the section’s content on demand as users click the next button. In Section 1, WebFileUploader is used for image uploading, demonstrating its seamless AJAX upload experience.

WebTextEditor

This is the First Experience when you launch the WebTextEditor sample.

WebTextEditor is the industry’s first text editor that integrates intuitive writing tools, in-line spelling checker, and sophisticated uploading capability in a single interface – enabling you to rapidly build rich CMS application that delivers breakthrough, unique editing experience to your end users.

This sample demonstrates tight integration with Desktop Manager, Spell Checker, File Uploader and many UI components from WebDesktop to produce sophisticated, state-of-the-art CMS application that ultimately feels like a desktop word processing application.

WebTreeView

This is the First Experience when you launch the WebTreeView sample.

WebTreeView provides rich features that lets you easily create hierarchical data presentation. This powerful control incorporates numerous unique features such as:

• Data Binding
• Tristate checkbox
• Add, edit, and delete node
• Drag and Drop node(s)
• Keyboard Navigation
• Load On Demand
• Layout Manager and Structure Manager
• Auto Postback
• Flexible and highly customizable to meet your design needs
• client-side API – WebTreeView Designer

The above sample utilizes Enable Tristate CheckBox and Keyboard Navigation features.

Explore the Samples

We hope that you liked our new samples. To start taking advantage of our best WebUI release yet, feel free to download the new Premier Studio 2016 here. Happy exploring!

Hi guys, Arief here from the Intersoft Consultant team. Today I will talk about how to use iOS Collection View and Android Grid View in order to create a beautiful cross-platform navigation menu. At the end of this tutorial, you’ll learn how to use the collection view in your Crosslight applications, which looks similar to the following illustration.

Introduction

Collection View / Grid View (will be referred as Collection View from now on) is a very versatile user interface. As a matter fact, both iOS and Android have always been using it as a native pattern for Springboard (iOS home) as well as lots of other Android launchers. Nowadays those trends start to spread throughout business apps considering how user-friendly and eye-pleasing when compared to the plain old list view.

If you are interested in creating a gorgeous and cool business apps, using collection view is a must! In this tutorial, I will guide you step by step how you can create collection view using the Crosslight style.

Here are the steps that you need to follow:

• Core Preparation
• Assets Preparation
• Designing Android Grid View
• Designing iOS Collection View
• Capturing Selection

Without further ado, let’s get started!

Preparing the Project

The first thing you’ll need is, of course, the project itself. Start by creating a new project using Crosslight Project Wizard and choose the Blank template. To do this, from Visual Studio 2012 and upwards, choose New, Project. From the dialog that appears, choose Crosslight and choose to create a new Crosslight application with the Blank template. For the purposes of this tutorial, we’ll name this project: CollectionView. Now that you have your project ready, let’s move on.

Core Preparation

Here are several things you need to prepare at the project Core level:

• Prepare the ViewModel
• Prepare the BindingProvider

Prepare the ViewModel

Begin by creating a new ViewModel in CollectionView.Core/ViewModels folder. Simply right-click on the ViewModels folder and choose Add, New Item. We will be repeating this method several times in later sections to add new items to our project, so keep this in mind.

Crosslight also ships with built-in item templates that are integrated with Visual Studio, so you can quickly create Crosslight classes right within Visual Studio or Xamarin Studio. In the next dialog that appears, choose Visual C#, Crosslight, then choose Crosslight List View Model. Name this ViewModel as CollectionViewModel.

Copy-paste these codes to the newly-created CollectionViewModel.cs:

using Intersoft.Crosslight;
using Intersoft.Crosslight.ViewModels;
using System.Collections.Generic;

namespace CollectionView.Core.ViewModels
{
    public class CollectionViewModel : ListViewModelBase
    {
        #region Constructors

        public CollectionViewModel()
        {
			List items = new List();

			items.Add(new NavigationItem("Ride", typeof(SimpleViewModel)) { Image = "CrosstransRide.png" });
			items.Add(new NavigationItem("Delivery", typeof(SimpleViewModel))  { Image = "CrosstransDeliver.png" });
			items.Add(new NavigationItem("Food", typeof(SimpleViewModel))  { Image = "CrosstransFood.png" });
			items.Add(new NavigationItem("Shop", typeof(SimpleViewModel))  { Image = "CrosstransShop.png" });

			this.SourceItems = items;
        }

        #endregion
    }
}

Let’s take a quick look at the above code. In the constructor of the CollectionViewModel, we initialize a list of NavigationItems that holds the navigation menus. NavigationItem is a very useful class provided by Crosslight that you can utilize to create a menu, as it holds all the common properties you need to create a navigation item. All you have to do is simply populate it with the menu title, image/icon name, and the target ViewModel as navigation target.

Preparing the BindingProvider

Next step would be adding a new Crosslight List Binding Provider under your CollectionView.Core/BindingProviders folder. Give it a name of CollectionBindingProvider.cs.

And change the code to the following:

using Intersoft.Crosslight;

namespace CollectionView.Core.BindingProviders
{
    public class CollectionViewBindingProvider : BindingProvider
    {
        #region Constructors

        public CollectionViewBindingProvider()
        {
            ItemBindingDescription itemBinding = new ItemBindingDescription
            {
                DisplayMemberPath = "Title",
                ImageMemberPath = "Image",
                NavigateMemberPath = "Target"
            };

            this.AddBinding("GridView", BindableProperties.ItemsSourceProperty, "Items");
            this.AddBinding("GridView", BindableProperties.ItemTemplateBindingProperty, itemBinding, true);
            this.AddBinding("GridView", BindableProperties.IsBatchUpdatingProperty, "IsBatchUpdating");
            this.AddBinding("GridView", BindableProperties.SelectedItemProperty, "SelectedItem", BindingMode.TwoWay);
            this.AddBinding("GridView", BindableProperties.SelectedItemsProperty, "SelectedItems", BindingMode.TwoWay);
            this.AddBinding("GridView", BindableProperties.IsEditingProperty, "IsEditing", BindingMode.TwoWay);

            this.AddBinding("RefreshButton", BindableProperties.RefreshCommandProperty, "RefreshCommand");

            // navigation
            //this.AddBinding("TableView", BindableProperties.DetailNavigationTargetProperty, new NavigationTarget(typeof(TViewModel)), true);

            // edit commands
            this.AddBinding("AddButton", BindableProperties.CommandProperty, "AddCommand");

            this.AddBinding("DeleteButton", BindableProperties.CommandProperty, "DeleteCommand");
            this.AddBinding("DeleteButton", BindableProperties.CommandParameterProperty, "SelectedItems");
        }

        #endregion
    }
}

In the above code, we simply comment out the DetailNavigationTargetProperty, as it won’t be needed because our goal is only to create a navigation menu. It will be needed if you want to create Master-Detail Navigation. We also assign the MemberPaths with the properties from NavigationItem, such as ImageMemberPath for the icon, DisplayMemberPath for displaying the title, and NavigateMemberPath for the target ViewModel menu. To learn more about Crosslight Binding Provider, check out this link.

Your Core is up and ready. Let’s prepare our assets next.

Assets Preparation

Previously in the Binding Provider, you have already specified the Image property in NavigationItem from ViewModel which contains the filename for the .png file that we will use. When you bind it to the BindableProperties.ImageProperty or ImageMemberPath, it will find the appropriate files to use in CollectionView.Android/Resources/drawable or in CollectionView.iOS/Resources. So you need to put these files inside both folders because we will be using it for our app’s interface.

Tip: Make sure to optimize the size of your image files. In some phones, images with humongous file size will be ignored and they won’t show. Okay, since you have finished preparing the assets, let’s continue to Android GridView!

Designing Android GridView

Designing a view for Android is relatively easy and simple. In overall, we’ll be doing these tasks:

• Create an Activity for CollectionActivity.
• Create the view layout.
• Define the ContentLayoutId and ItemLayoutId.

To start, simply add a new item and use Crosslight Android Activity to get started. Put it inside the CollectionView.Android/Activities folder and name it CollectionActivity.cs.

After your CollectionActivity is created, change the contents of the class to the following code.

using Android.App;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android;

namespace CollectionView.Android.Activities
{
    [Activity(Label = "Menu")]
    [ImportBinding(typeof(CollectionBindingProvider))]
    public class CollectionActivity : GridActivity
    {
        public override ListViewInteraction InteractionMode
        {
            get{ return ListViewInteraction.Navigation; }
        }

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

        protected override int GridItemLayoutId 
        {
	       get{ return Resource.Layout.ItemLayout; }
	    }

        protected override void InitializeView()
        {
            base.InitializeView();
            this.GridView.NumColumns = 2;
        }
    }
}

We need to replace the Activity with GridActivity, in which then you have more properties to override: ListViewInteraction. By overriding the ListViewInteraction into ListViewInteraction.Navigation, it allows the user to use the grid as a navigation button when an item is tapped.

ContentLayoutId is also overridden since we want to customize the appearance of our GridView, which we will do in just a moment. The ItemLayoutId is overridden to customize the item layout to be used with the GridView. Both ContentLayoutId and ItemLayoutId refers to Android layout files which exist in the CollectionView.Android/Resources folder.

Since we only have two columns for this scenario, we can simply provide the number of columns to show in the overridden InitializeView method by setting this.GridView.NumColumns to 2. The advantage of using this method is: you actually don’t need to specify the width of the Grid. The GridActivity automatically adjusts the optimal number of items by taking account the viewport width.

Earlier, we’ve specified the ContentLayoutId and ItemLayoutId in our Activity. Now let’s create those layouts. You will need to create two layouts inside CollectionView.Android/Resources/layout folder using Android Layout item template. We will name it CollectionLayout.axml & ItemLayout.axml.

Here’s the code for CollectionLayout.axml and ItemLayout.axml respectively.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/CrosstransBg"
    android:minWidth="25px"
    android:minHeight="25px">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout1"
        android:gravity="center_horizontal">
        <ImageView
            android:src="@drawable/CrosstransLogo"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:id="@+id/imageView1" />
    </LinearLayout>
    <GridView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:verticalSpacing="20dp"
        android:horizontalSpacing="20dp"
        android:id="@+id/GridView" />
</LinearLayout>

From the designer’s view, the CollectionLayout looks like the following:

and here’s the contents for ItemLayout.axml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:minWidth="25px"
    android:minHeight="25px"
    android:background="#CC2368C0"
    android:gravity="center_horizontal">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/linearLayout1"
        android:gravity="center_horizontal|center_vertical">
        <ImageView
            android:src="@android:drawable/ic_menu_gallery"
            android:scaleType="centerCrop"
            android:adjustViewBounds="true"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:id="@+id/ImageView" />
    </LinearLayout>
    <TextView
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:id="@+id/TextLabel"
        android:gravity="center_horizontal" />
</LinearLayout>

From the designer’s view, it looks like this:

In summary, what I do in CollectionLayout.axml is setting the background for the page, add a header, and provide enough spacing between GridView items. The most important things to note is I’ve defined the GridView id,  @+id/GridView. The will be the reference that we defined in BindingProvider to the property in ViewModel, so make sure the id name is right!

We will be doing a similar task with ItemLayout.axml, where we assign both ImageView to the Image Property in ViewModel and TextView to Title Property in ViewModel. By default, Crosslight provides two built-in ids for showing an image and a text for item template, which has the name ImageView and TextLabel respectively. But if you want to add additional view elements to the item template, then you can simply add a new binding definition in the binding provider like this which must be done in BindingProvider:

itemBinding.AddBinding ("CustomView", BindableProperties.TextProperty, "Title");

Run the project. You should get a result similar to the following:

Next, let’s create the iOS version.

Designing iOS CollectionView

Similar to Android, building CollectionView on iOS follows a pretty similar path:

• Create a ViewController for MainCollectionView.
• Create the cell and the header.
• Set the outlets.

Let’s start from the ViewController. Add a new item using Crosslight iOS Collection View Controller template and put it inside your CollectionView.iOS/ViewControllers folder and name it MainCollectionView.cs.

This is the code for the ViewController.

using CollectionView.ViewModels;
using CollectionView;
using Intersoft.Crosslight;
using Intersoft.Crosslight.iOS;
using Foundation;
using UIKit;

namespace CollectionView.iOS
{
	[Register ("MainCollectionView")]
	[ImportBinding (typeof(CollectionBindingProvider))]
	public class MainCollectionView : UICollectionViewController
	{
		#region Constructors

		public MainCollectionView ()
			: base ("MainCollectionView", null)
		{
		}

		#endregion

		#region Properties

		public override UIViewTemplate CellTemplate {
			get { return new UIViewTemplate (CollectionViewCell.Nib); }
		}

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

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

		public override UIViewTemplate SectionHeaderTemplate {
			get { return new UIViewTemplate(CollectionHeader.Nib); }
		}

		#endregion

		#region Methods

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

			this.NavigationItem.Title = "Home";
                        UIImageView backView = new UIImageView(UIImage.FromFile ("CrosstransBg.png")); 
                        backView.ContentMode = UIViewContentMode.ScaleAspectFill; 
                        this.CollectionView.BackgroundView = backView;
			// Register Views
			this.RegisterViewIdentifier ("GridView", this.CollectionView);
		}

		#endregion
	}
}

Let’s take a look at some of the overridden methods and properties.

• CellTemplate: This property is the equivalent of Android’s ItemLayoutID, which will define the view to be used as navigation item inside the Collection View.
• InteractionMode: This method is the equivalent of Android’s ListViewInteraction, that defines the interaction when users tap on the navigation item.
• SectionHeader & SectionHeaderTemplate: It will be used to specify the header for the Collection View.
• InitializeView: This method is called when the view is initialized. Here, we set the background view of the Collection View. Afterward, this.RegisterViewIdentifier (“GridView”, this.CollectionView); is used to associate the Collection View with the GridView view identifier to be used by the Binding Provider.

Now your view controller is done! Next, we’ll create the CollectionView Header and Cells. Inside your CollectionView.iOS/Views, add 2 new items: Crosslight iOS Collection Cell, we will name it CollectionViewCell.cs (feel free to choose between iPhone or iPad) and  Crosslight iOS Collection View Group Header which we will name it CollectionHeader.cs.

If you check back your MainCollectionView.cs, you can see that both CollectionViewCell.Nib & CollectionHeader.Nib are now detected. The Nib represents both .cs files that we’ve created before. However, we won’t touch any codes, instead we will play around with the layout using iOS XCode.

Let’s first open the MainCollectionView.xib inside your CollectionView.iOS/Views using Apple XCode. Inside the Document Outline, you can select File’s Owner, then the Identity Inspector will change according to what  you selected. Specify the Custom Class as MainCollectionView.

Using the Connections Inspector, control + drag the view from Outlets to the Collection View to set the outlet, as shown in the following illustration.

Then, in the File Inspector, turn off Auto Layout.

In the Size Inspector, specify the cell’s width and height, also adjusting the auto-resizing behaviors so that it will layout nicely when the device is rotated.

Now you are done configuring your MainCollectionView.xib.

Let’s continue to CollectionViewCell.xib, in this case, you don’t need to worry about  your File’s Owner,  Simply drag and drop a Label and ImageView from the Object Library to the view.

Select your Label (or anything in your designer interface), Press the conjoined circle button on the right top. A panel with codes will appear, this is the Assistant Editor which will help you create Binding without having you to code anything.

Next, let’s set the outlets using the Assistant Editor. Select your CollectionViewCell.m and change it to CollectionViewCell.h, control + drag your Label into the panel and give it TextLabel as a name, then set the ImageView outlet with the name of ImageView.

You need to turn off the auto layout from both image, label, and their parent to use auto resizing. Here’s what I’ve done to each of them:

• View: Change the background color, turn on the horizontal and vertical scaling so that it won’t grow or shrink when the display rotates.
• TextLabel: Change the alignment to the middle,  Pin it to the bottom using auto resizing and change the width to 120 and height to 50
• ImageView: Change the view mode to Aspect fit, turn on the horizontal and vertical arrow inside auto-resizing, and changes the width and height to 60

In CollectionHeader.xib, what we do is just drag and drop an ImageView. Here are the settings for ImageView:

• Change the image with CrosstransLogo.png,
• View Mode to Aspect Fit,
• Width = 150,
• Turn on the horizontal and vertical arrow inside auto resizing

Here is the result:

Your app is pretty much done, but we still ned to capture what user has selected.

Capturing Selection

In this section, we’ll learn how to capture selection made when the user taps on any of the navigation items.

If you recall earlier, we’ve defined how our CollectionView should navigate, which is done in our BindingProvider in the NavigateMemberPath inside using ItemBindingDescription.

ItemBindingDescription itemBinding = new ItemBindingDescription
            {
                DisplayMemberPath = "Title",
                ImageMemberPath = "Image",
                NavigateMemberPath = "Target"
            };

As you are aware, each MemberPath represents the component of our menu. In fact, it also contains the whole data associated with the specific Item you choose from the list that you have created in your ViewModel back then.

public CollectionViewModel()
        {
			List items = new List();

			items.Add(new NavigationItem("Ride", typeof(SimpleViewModel)) { Image = "CrosstransRide.png" });
			items.Add(new NavigationItem("Delivery", typeof(SimpleViewModel))  { Image = "CrosstransDeliver.png" });
			items.Add(new NavigationItem("Food", typeof(SimpleViewModel))  { Image = "CrosstransFood.png" });
			items.Add(new NavigationItem("Shop", typeof(SimpleViewModel))  { Image = "CrosstransShop.png" });

			this.SourceItems = items;
        }

BindingProvider will obtain the target of your navigation, represented by typeof(SimpleViewModel)). However even though we already successfully navigate,  in our case each of our Item have the same Navigation target. What if we want to know which item/menu is selected? Here is how:

When you navigate to a new ViewModel, the Navigated method is called in the target ViewModel, and it contains the sender value which holds the information of the caller ViewModel. For the simplicity of this tutorial, we’ll change the SimpleViewModel to handle user input. Let’s change our SimpleViewModel.cs (CollectionView.Core/ViewModels folder):

using Intersoft.Crosslight;
using Intersoft.Crosslight.Input;
using Intersoft.Crosslight.ViewModels;

namespace CollectionView.ViewModels
{
    public class SimpleViewModel : ViewModelBase
    {
        #region Fields

        private string _footerText;
        private string _greetingText;
        private string _newText;

        #endregion

        #region Properties

        public string FooterText
        {
            get { return _footerText; }
            set
            {
                if (_footerText != value)
                {
                    _footerText = value;
                    OnPropertyChanged("FooterText");
                }
            }
        }

        public string GreetingText
        {
            get { return _greetingText; }
            set
            {
                if (_greetingText != value)
                {
                    _greetingText = value;
                    OnPropertyChanged("GreetingText");
                }
            }
        }

        public string NewText
        {
            get { return _newText; }
            set
            {
                if (_newText != value)
                {
                    _newText = value;
                    OnPropertyChanged("NewText");
                }
            }
        }

        public DelegateCommand ShowToastCommand { get; set; }

        #endregion

        #region Constructors

        public SimpleViewModel()
        {
            IApplicationContext context = this.GetService().GetContext();
            if (context.Platform.OperatingSystem == OSKind.Android)
                this.GreetingText = "Hello Android from Crosslight!";
            else if (context.Platform.OperatingSystem == OSKind.WinPhone)
                this.GreetingText = "Hello WinPhone from Crosslight!";
            else if (context.Platform.OperatingSystem == OSKind.WinRT)
                this.GreetingText = "Hello WinRT from Crosslight!";
            else if (context.Platform.OperatingSystem == OSKind.iOS)
                this.GreetingText = "Hello iOS from Crosslight!";

            this.FooterText = "Powered by Crosslight®";
            this.ShowToastCommand = new DelegateCommand(ShowToast);
        }

        #endregion

        #region Methods

        public override void Navigated (NavigatedParameter parameter)
        {
            if (parameter.Sender is CollectionViewModel) 
            {
                this.ToastPresenter.Show("You are choosing: " + (parameter.Sender as CollectionViewModel).SelectedItem.Title);
            }
        }

        private void ShowToast(object parameter)
        {
            this.ToastPresenter.Show("You entered: " + this.NewText);
            this.GreetingText = this.NewText;
        }

        #endregion
    }
}

The menu that user chooses will be represented by SelectedItem and there are two things to note here: SelectedItem actually obtained from the sender ViewModel which is from CollectionViewModel.cs and SelectedItem actually the default property provided from CollectionViewModel implementing the ListViewModelBase. In this case, we will show a toast presenter to indicate which menu the user has chosen, by obtaining the Title of SelectedItem and show it using Toast Presenter.

Also, If you put a breakpoint in the highlighted line above and inspect the NavigatedParameter, you can see from the shot below that it holds lots of information not only the SelectedItem but the whole CollectionViewModel.

You will use this neat trick to accomplish a lot of cool things using Crosslight, so don’t forget to save this favourite this blog for later uses. Okay, now let’s run our project!

Wait… should we also change the Android and iOS? No need at all using Crosslight you only need to change it in Core and it will be applied to each platform, very convenient! Here is the result:

Wrapping Up

With Crosslight, you will never have to worry about the code behind the scene. However, in  this session, I want to emphasize the customizability of Crosslight, using minimal effort and codes we already successfully create a simple and gorgeous navigation menu. I believe the next steps for you is to discover more about Crosslight features and we still have more tutorials coming in the futures! So stay tuned with us and have fun!

You can find the source code for this post here: http://git.intersoftsolutions.com/projects/CT/repos/crosslightcollectionview/browse

See you in the next post,
Arief Handany

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

Today, we’re excited to announce that we’ve completed the final phase of the new web-based live chat integration with our account management and back-end system. Back two months ago, we started out some experiments by integrating a new web-based chat service for pre-sales and account support, which some of you may have noticed. The integration was a huge success, increasing communication efficiency by 200%.

But we didn’t stop there. Earlier this month, we continue to bring the web-based chat service to the entire line of our organization, taking our customer experience to a whole new level. Now, from pre-sales to support, you can reach us instantly — right from our website. Read on.

Customer Experience At Its Best

Most companies today still rely heavily on emails for primary communication. Far from ideal, there are typically dozens of emails to remember, one for sales, another for support, the other for feedback, and so on. We did it the same way. Here’s how our previous Contact page looks like.

I know what you’re thinking, there’s too much email addresses — yep, you’re spot on. Couldn’t we do something about that, you asked? Well, the good news is, that page is now a thing of the past! Here’s what our Contact page looks like today.

Beautiful, isn’t it? No email addresses to remember anymore — just real-time, productive conversations in a simple button click!

Now, whether you have sales questions, account inquiries, or need technical support — or just wanted to drop by and say hello, we’ll be there for you. There’s only one simple button to click to reach us, that’s what we called, the Messenger button.

No matter which pages you’re in, you can always find this button at the right bottom of our web page. Need to navigate to different page while you’re having ongoing conversation? No worries. Everything will be well persisted across page session — and even browser session — as long as you stay logged in to your account.

Good-bye Tedious Ticket Queues

Yup, you read it right — and you shall rejoice as there are no more support ticket queues at Intersoft! In the light of our new web-based messenger, we’ve dropped the contract with our “support helpdesk” vendor which, frankly speaking, doesn’t work very well all these times, even they turned out to be one of the best in the industry. Why? Because most of these helpdesk vendors aren’t good in fighting spams. As the result, only 25% of the incoming tickets are real messages from our customers, while the rest are all spams. We’ve done everything we could to fight spams at our side, no luck. The vendor gave up as well.

We knew that our customers deserve a better customer experience than the traditional ticket queues system, and we’ve always wanted to do something better, but haven’t found the right way and tools in the past. Thankfully, here we are today at the forefront in delivering the best customer experience in the industry.

Keeping in touch with us couldn’t get any easier. Here’s what our enhanced customer experience feels like — with questions answered in minutes, not days.

You’re welcome

And one more thing, in case you need to write longer messages or attach some files, we’ve provided a special VIP mailbox for that. We won’t be exposing that mailbox publicly. When you logged in to our website, you’ll be greeted with a welcome message from us, and that’s where you can find the VIP mailbox address. And the best of all, the messages you sent to that VIP mailbox will also sync to the conversations under your account. So the web messenger is where you’ll find everything, and resume your conversations right there.

Check Your Eligibility

As of today, for the first time in a decade, we are no longer monitoring incoming public-facing emails. If you need to reach us, just login to our website with your Intersoft ID, and you’re all set. That’s all it takes, that simple!

We have also redesigned our support level page with latest information and better presentation for easier reading. Check out the support level page and learn which support level you’re in.

Last but not least, if you used an Intersoft ID which is different with the account that actually contains a valid subscription or license, you can easily link both accounts with just a few simple steps. To learn more, check out this page.

We hope you liked our new and improved experience! So, see you soon on our web messenger.

All the best,
Jimmy

We are proud to announce the release of our next ultimate development toolset, Premier Studio 2014 R2. In this release, we continue delivering the next generation of our powerful cross-platform mobile toolset, Crosslight 3. Our Silverlight lineups also received numerous enhancements as well as our ASP.NET lineups. That’s not all. We also ship even better tooling support for cross-platform mobile development on both Mac and Windows. These exciting new features will definitely shave months off your development time table. Let’s tour some of the key highlights in this release.

Crosslight 2.0 Update 4 has arrived with tons of new features! New syncing services with push notifications, major improvements for iOS, stability improvements to Enterprise App Framework, and more. iOS now supports even more buttery-smooth scrolling, automatic dynamic cell height support, automatic aspect ratio calculation in thumbnail, automatic selection persistence in navigation drawer, and more. Check out the full release notes here.

In addition to hotfixes, we’re now updating the Mobile Studio installers for both Mac and Windows on every release (instead of just service pack or major release). With all our deployment processes automatically taken care, we want to make sure you get the latest product bits on every available channel, whether it’s from the update manager, access from your account, or through the trial download site. Furthermore, the new installers now clearly show the version of the Crosslight build to increase visibility of new installer builds.