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 our past releases, getting started with Intersoft Premier Studio was quite inconvenience and tedious. With tons of shortcuts to choose from, you can be easily confused where to start from. In this release, we think hard on what’s the best possible scenario for users to get started quickly with our products. At the end, we came to a conclusion: samples.

Samples provide a hands-on experience for developers as well as practical code for implementing the desired features to their applications. We’ve made it super easy for you to run the samples and opening the sample solution in Visual Studio, all right from a single web interface.

Introducing the New Get Started Experience

When you install Premier Studio, you’ll get the following dialog box.

When you click Finish with the checkbox ticked, a new browser will be opened, this will lead you to a landing page that will help you get started with our products (assuming that you have a working internet connection).

Simply select one of the products you would like to get started with, you will be immediately presented with the available samples designed in stunning card view interface. Then hover on the samples you’re interested in to perform an action.

Note that the Get Started experience works only on Windows with Premier Studio (2016 and above) properly installed.

Getting Started with WebUI

Nothing explains better than a video. Here’s a 1-minute video experience on how to get started with WebUI through the new Get Started experience.

The samples for WebUI is categorized according to its respective controls, so you can quickly jump to the controls you’re interested in.

When you hover on a sample, you’ll get the following experience.

When you click on Open Solution, a new Visual Studio instance that contains the sample will be automatically opened. When you click on Run Sample, a locally-running sample for that particular sample will be launched. Clicking on Learn More takes you to the WebGrid documentation.

Getting Started with Crosslight

And here’s a minute-and-a-half video that shows the Get Started experience with Crosslight.

The samples for Crosslight are categorized as follows:

• Basic Samples: These are the basic and recommended samples if you’re just starting out with Crosslight. It contains the basic fundamentals of Crosslight development, such as MVVM pattern, data binding, display data list, perform CRUD operation, and more.
• App Samples: These samples showcases small, working apps made with Crosslight.
• UI Samples: These samples showcases various UI components available in Crosslight, such as Crosslight Charting, Crosslight Material Design, Crosslight Signature Pad, Crosslight Maps, Crosslight View Slider and more.
• Services Samples: These samples demonstrates how you can work with Crosslight services which are built-in to the Crosslight ViewModel and other library extensions as well. For example, performing calls, scanning barcode, sending emails, sharing content to social media and more.
• Data Samples: These samples shows you how to work with data-related operations with the built-in repositories and how they work together in harmony with the open-source Crosslight App Framework.

When you hover on an item, you’ll be presented with the following.

When you click on Download, you’ll immediately get a zip file that is immediately runnable using Xamarin Studio or Visual Studio (works on either Mac or Windows). If you click on Learn More, you’ll be taken to the respective sample page in the Developer Center.

Getting Started with ClientUI

Last but not least, here’s another minute-and-a-half video that shows the Get Started experience with ClientUI.

The samples for ClientUI are categorized as follows.

The categorization follows the previous categories available in the ClientUI Live Samples. When hovering to an item, you’ll be presented with the following experience.

If the sample has a WPF counterpart, then an additional combo box will be displayed for WPF, as well as the Run Sample option. If the WPF counterpart is not available, then the combo box will not appear. When clicking on the Open Solution, then the Silverlight solution will be opened. Similarly, clicking on Run Sample will run the Silverlight sample locally on your computer.

Conclusion

We hope you enjoyed the new Getting Started experience available in this new release. Should you have any feedback with the Getting Started experience, feel free to initiate a chat with us, and we’ll be more than happy to assist you for the best on-boarding experience.

Till next post,
Nicholas Lie

The wait is over! Premier Studio 2016 is here, our biggest and most revolutionary release since Intersoft was established. Our team worked very hard to ensure the best quality of the products delivered in this release. A big thanks to you all for your continuous support and feedback to make this great release a reality.

This latest release brings major upgrades to all our toolset across 5 platforms, including ASP​.​NET, Silverlight, WPF, iOS, and Android. It reflects on our continuous commitment to create the most innovative and forward-thinking toolset that dramatically improve productivity and shorten development time. We’re very excited to have something new for everyone!

We started out by revamping our entire product lineups starting with WebUI, which includes 40+ web components, with Unified Theming support. The new feature now uses advanced SCSS in combination with Node SASS and Web Compiler to achieve a modern, unified look and feel across the lineup. It’s the best of both worlds: industry’s most advanced web components with beautiful and gorgeous design combined into a single, complete package. More importantly, all WebUI lineups have been reengineered with the latest and greatest web technologies, so you can expect responsive design and full support for latest major browsers like IE11, Edge, Safari 9, Chrome 48, Firefox 44.

Next, the most anticipated improvement for Crosslight is here. Fully embracing Material Design, building gorgeous Material apps is no longer a chore. The new v7 library introduced in this release was built from the ground up, taking account the user experience and interaction covered in the new Material Design. With the new library and simplified APIs, you can now easily add Material Design elements and interactions such as Floating Action Buttons, Collapsing Toolbars with expand/collapse behaviors, parallax scrolling, Material Navigation Drawer, and so much more.

Another important milestone in this release, we’ve smoothened out the development experience by fully embracing NuGet package manager as the main delivery channel for future Crosslight builds, so you don’t have to worry about tedious packages references to ensure your Crosslight solution and samples work properly.

Introducing the new ClientUI Reporting for WPF, now you can easily author and build gorgeous enterprise reports from the convenience of your desktop. Fully optimized and fine-tuned for WPF, ClientUI Reporting for WPF ensures that your existing ClientUI reports will continue to work as it is, whether it’s on the desktop or on the web.

Visualizing your data in your reports? We have something special in store for you. In this release, new charting support with over more than 20+ types of charts are now available in ClientUI Reporting, for both WPF and Silverlight platforms. Whether it’s doughnut, pie, line, bar, columns, anything. We’ve got it all covered. This new addition is sign of our enduring commitment towards ClientUI and continues to strengthen ClientUI’s position as the best toolset for enterprise development on Silverlight and WPF platforms.

Download Now

To begin enjoying this new release, simply sign-in to your account to download the latest release, or request a trial here.

While waiting for downloads, please follow the links below to learn more what’s new in this latest release:

• Press Release — an official overview of the release
• 2016 Tour — a comprehensive details of each new component and new feature introduced in this release

In addition to product bits, we’ve moved forward to a better direction which greatly enhance and simplify installation experience. The first thing you notice when downloading the new installer is its absolutely small size, 480MB, which is about half the size of previous installer. It’s made possible as we no longer ship offline documentation since we’re completely transitioning to agile workflow for all products (including WebUI and ClientUI now). This direction allows all our documentation to be updated online, whenever new features are added, instead of waiting for the next installer update. As the result, Intersoft Developer Center has been significantly updated to cover new documentation for all the three platforms. You can start exploring here.

Finally, we hope you enjoy our latest release as much as we love building it. We look forward to see what you will build next!

Note: New licenses will be sent out to all active subscribers in 24 hours after this announcement. You’ll receive a notification email when your account is updated.

All the best,
Jimmy

Hi guys, I’m back with another blog post, this time covering how to use the a custom view for header and footer to be used alongside iOS TableView / Android TableView. You’ll see how you can easily create custom views and use them as headers and footers in your Crosslight apps.

After this project has completed, you’ll end up with a custom header and footer in your ListView/TableView. When you click on the Add Item button on the top, new item will be added to the list, and you can see how the header and footer is correctly persisted when the items collection is updated.

To complete this project, there are several steps need to be completed:

• Preparing the project
• Creating custom views for iOS
• Preparing the BIndingProvider
• Preparing the ViewModel
• Modify iOS ViewController and running the project
• Creating custom views for Android
• Modifying Android ListActivity and running the project

Without further ado, let’s get started.

Preparing the project

For this sample, I’ll keep it nice and simple. This time, I’ll start from the Navigation template created using Crosslight Project Wizard. I’ll name this project: HeaderAndFooter.

Creating custom views for iOS

Let’s begin by creating a new custom header view for iOS, by right-clicking on the VIews folder in HeaderAndFooter.iOS/Views folder and choose Add, New File.

Then choose Crosslight, Crosslight iOS View for iPhone.

Give it a name of CustomHeader. This will generate two files, CustomHeader.xib and CustomHeader.cs for the designer files.

Then open the CustomHeader.xib using Xcode Interface Builder.

In Xcode Interface Builder, drag a Label and a button.

Set the label outlet as TxtHeader and the button as BtnHeader. I won’t go too much on the layouting details, but you can ensure the followings are set:

• Set the View size as Freeform, so you can adjust the view size freely.
  
• Turn off Auto Layout.
  
• Ensure that the View background is set to Default (no fill), this will avoid clipping issues when placed as the header view.
  

Your custom header is now ready. Let’s move on to custom footer.

Basically, you’re going to perform the same tasks as adding a custom header, but the difference is that you’re going to give it a file name of CustomFooter, then provide a label with the outlet of TxtCopyright.

Preparing the BindingProvider

Since you’ve successfully created the custom views, let’s prepare the BindingProvider first to prepare the properties and commands you wish to bind to the View. Open up NavigationBindingProvider (I renamed this file to MainBindingProvider to avoid confusion) and add the highlighted lines.

using Intersoft.Crosslight;

namespace HeaderAndFooter
{
    public class MainBindingProvider : BindingProvider
    {
        #region Constructors

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

            this.AddBinding("TableView", BindableProperties.ItemsSourceProperty, "Items");
            this.AddBinding("TableView", BindableProperties.ItemTemplateBindingProperty, itemBinding, true);
            this.AddBinding("TableView", BindableProperties.SelectedItemProperty, "SelectedItem", BindingMode.TwoWay);
            
            this.AddBinding("BtnHeader", BindableProperties.TextProperty, "ButtonText");
            this.AddBinding("BtnHeader", BindableProperties.CommandProperty, "AddCommand");
            this.AddBinding("TxtCopyright", BindableProperties.TextProperty, "CopyrightText");
            this.AddBinding("TxtHeader", BindableProperties.TextProperty, "HeaderText");
        }

        #endregion
    }
}

From the added lines, notice that we’re going to do the following:

• Bind ButtonText property in the ViewModel to the BtnHeader button.
• Bind the ViewModel’s built-in AddCommand to the BtnHeader button. This is available in the EditableListViewModel shipped in Crosslight.
• Bind the HeaderText property in the ViewModel to the TxtHeader label.
• Bind the CopyrightText property in the ViewModel to TxtCopyright label. This is for the footer.

Since you’ve prepared everything in the BindingProvider, let’s modify the ViewModel.

Modifying the ViewModel

The  NavigationViewModel now looks like the following. It’s located inside the HeaderAndFooter.Core/ViewModels folder.

using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.Linq;
using Intersoft.Crosslight;

namespace HeaderAndFooter.ViewModels
{
    public class NavigationViewModel : SampleListViewModelBase<NavigationItem>
    {
        #region Constructors

        public NavigationViewModel()
        {
            ObservableCollection<NavigationItem> items = new ObservableCollection<NavigationItem>();

            items.Add(new NavigationItem("Simple Page", "About", typeof(SimpleViewModel)));
            items.Add(new NavigationItem("About This App", "About", typeof(AboutNavigationViewModel)));

            this.SourceItems = items;

            this.ButtonText = "Add Item";
            this.CopyrightText = "Copyright © Intersoft Solutions";
        }

        #endregion

        #region Properties

        private string _aboutText { get; set; }
        private string _buttonText { get; set; }
        private string _copyrightText { get; set; }
        private string _headerText { get; set; }

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

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

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

        public string HeaderText
        {
            get
            {
                _headerText = this.Items.Count() + " items.";
                return _headerText;
            }
            set
            {
                if (_headerText != value)
                {
                    _headerText = value;
                    OnPropertyChanged("HeaderText");
                }
            }
        }

        #endregion

        #region Methods

        protected override bool CanExecuteAdd(object parameter)
        {
            return true;
        }

        protected override void ExecuteAdd(object parameter)
        {
            base.ExecuteAdd(parameter);

            NavigationItem newItem = new NavigationItem("Simple Page", "About", typeof(SimpleViewModel));
            var items = this.SourceItems.ToObservable();
            items.Add(newItem);
        }

        protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
        {
            this.OnPropertyChanged("HeaderText");
        }

        #endregion
    }
}

Let’s take a deeper look at this class, starting from the top. In the constructor, we’ve prepared our SourceItems with ObservableCollection. We then initialize the ButtonText property and the CopyrightText property. The ButtonText and CopyrightText property are all MVVM-ready properties. The HeaderText is also an MVVM-ready property, but in the property getter, the text is always updated according to the number of items which exists in the list.

Right after the properties, we then override the built-in CanExecuteAdd method to return true so that the AddCommand can be executed, as well as overriding the actions for the ExecuteAdd method. Here, we simply add a new NavigationItem to the list. Just right after the method, Crosslight has provided an elegant way to perform any additional changes to other properties or any other implementation by overriding the OnCollectionChanged method. In the method, we trigger the OnPropertyChanged of the HeaderText, so that the number of items is always updated in our custom header.

Modify iOS ViewController and running the project

Now that you got the Core project covered, let’s modify the MainViewController (located inside HeaderAndFooter.iOS/ViewControllers) a bit.

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<NavigationViewModel>
    {
        #region Properties

        public override UIViewTemplate HeaderViewTemplate
        {
            get { return new UIViewTemplate(CustomHeader.Nib); }
        }

        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; }
        }

        #endregion

        #region Methods

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

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

        #endregion
    }
}

In the MainViewController, we’ve overridden the HeaderViewTemplate as well as FooterViewTemplate to return the Nib for each custom header and footer view that we’ve just defined. We also made things simpler by not showing the group header as wellas ensuring that the used TableViewStyle is Plain. Run the project. You should get the following result.

If you’re curious about the separator that exists between the header with the table view, as well as the footer with the table view, it’s because I’ve added an additional view in the custom header and footer layout, with the height of 1 unit and giving it a light gray background, to show the boundaries of the custom header and custom footer view. We’re going to do the same with Android layout later. You’ve completed the iOS version. Let’s move on to the Android.

Creating custom views for Android

Similar to iOS, you’ll need to create a custom header view first for Android. To do this, simply right click on the Resources/layout folder in the HeaderAndFooter.Android/Views folder, then choose Add, New Item.

From the dialog that appears, choose Android, Layout, and give it a name of CustomHeader.

And here’s the contents of the CustomHeader.axml file.

<?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="wrap_content"
    >
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <TextView
        	android:id="@+id/TxtHeader"
        	android:layout_width="fill_parent"
        	android:layout_height="30dp"
        	android:textSize="20sp"
        	android:gravity="left"
            android:layout_weight="1"
        />
        <Button 
            android:id="@+id/BtnHeader"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        />
    </LinearLayout>
    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="1px"
            android:background="#f2f2f2"
        />
</LinearLayout>

This layout simply contains a pretty much similar layout with iOS, that contains a label, a button, and a gray separator at the bottom. Repeat the same procedure for the custom footer layout. Here’s the contents of the CustomFooter.axml file.

<?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="wrap_content"
    >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="#f2f2f2"
    />
    <TextView
    	android:id="@+id/TxtCopyright"
    	android:layout_width="fill_parent"
    	android:layout_height="30dp"
    	android:textSize="12sp"
    	android:gravity="center"
        android:fontFamily="sans-serif-light" 
    />
</LinearLayout>

Modifying Android ListActivity and running the project

Since you’ve prepared the custom views let’s modify the Android ListActivity to display our custom header and footer. Open up MainActivity in the HeaderAndFooter.Android/Activities folder and take note of the following changes.

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<NavigationViewModel>
    {
        #region Methods

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

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

        #endregion

        #region Properties

        protected override int ContentLayoutId
        {
            get { return Intersoft.Crosslight.Android.Resource.Layout.listgroupsectionlayout; }
        }

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

        protected override int HeaderLayoutId
        {
            get { return Resource.Layout.CustomHeader; }
        }

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

        #endregion
    }
}

All you need to do is just override the FooterLayoutId as well HeaderLayoutId and provide the layout you’ve just created. If you notice in the template, right in the InitializeView method, we’re registering the ListView with the TableView identifier at runtime. This is how you would register a view at runtime. For more information in registering view at runtime, check out this document in the Developer Center.

You’re now ready to run the project. You should get the result similar to the following.

Wrapping Up

You’ve seen how easy it is to set up a custom header and footer view to use with iOS TableView and Android ListView. With Crosslight, the custom views are automatically compatible with data binding and Crosslight takes care of the magic, so you can focus on building your app instead of having to worry about wiring behind the scenes. Hopefully this gives you a good insight on how Crosslight accomplishes business scenarios elegantly, without compromising any of the MVVM-design pattern enforced throughout the app.

As always, you can find the source code to this post here: http://git.intersoftsolutions.com/projects/CT/repos/crosslightheaderandfooter/browse.

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

One of the greatest new components in Crosslight 4 is a powerful, full-fledged Charting component, enabling Crosslight developers to easily add stunning charts to their business cross-platform mobile apps. Fully MVVM capable, it works beautifully across iOS and Android platforms.

Have you checked out the new Crosslight Charting yet? If not, then this post is the perfect guide for you. This post will help you learn how to get started with Crosslight Charting.

Starting Off

Let’s try to create the illustrated column chart from scratch. To start off, I created a Blank Crosslight project with Crosslight Project Wizard. I’ll call this CrosslightCharting for now. After the project is created, don’t forget to add the necessary references as well.

Necessary References

• Core project: Add Intersoft.Crosslight.UI.DataVisualization assembly.
• iOS project: Add Intersoft.Crosslight.UI.DataVisualization and Intersoft.Crosslight.UI.DataVisualization.iOS assembly.
• Android project: Add Intersoft.Crosslight.UI.DataVisualization and Intersoft.Crosslight.UI.DataVisualization.Android assembly.

Now you’re ready to begin writing some codes.

Preparing the ViewModel

Let’s prepare the ViewModel that will provide the data to the chart. I’m going to create a ColumnViewModel class inside the CrosslightCharting.Core/ViewModels folder, and write really simple code to initialize the Chart model. Here’s how.

using Intersoft.Crosslight.UI.DataVisualization;
using Intersoft.Crosslight.ViewModels;

namespace CrosslightCharting.Core
{
    public class ColumnViewModel : ViewModelBase<ColumnSeries>
    {
        private Chart _chart;

        public Chart Chart
        {
            get { return _chart; }
            set
            {
                _chart = value;
                OnPropertyChanged("Chart");
            }
        }

        public ColumnViewModel()
        {
            InitializeChart();
        }

        private void InitializeChart()
        {
            this.Chart = new Chart();
            this.Chart.Title.Text = "Agile Sprint Status";

            // setup series for In Progress
            Series inProgressSeries = new ColumnSeries();
            inProgressSeries.Title = "In Progress";
            inProgressSeries.Items = new List<DataPoint>();
            inProgressSeries.Items.Add(new DataPoint("Android", 70));
            inProgressSeries.Items.Add(new DataPoint("iOS", 42));
            inProgressSeries.Items.Add(new DataPoint("WinPhone", 20));
            this.Chart.Series.Add(inProgressSeries);

            // setup series for Resolved
            Series resolvedSeries = new ColumnSeries();
            resolvedSeries.Title = "Resolved";
            resolvedSeries.Items.Add(new DataPoint("Android", 53));
            resolvedSeries.Items.Add(new DataPoint("iOS", 32));
            resolvedSeries.Items.Add(new DataPoint("WinPhone", 40));
            this.Chart.Series.Add(resolvedSeries);
        }
    }
}

As you can see, all we did is simply initializing the chart in the ViewModel and populated two ColumnSeries for it, and add the data points for each series which will be displayed side-by-side. Crosslight Charting library includes component models that you can consume in the shared Core project. The Chart model represents the data source required for the chart, and also provides a wealth of chart configuration and settings. The Series, ColumnSeries, and DataPoint are another example of the component models available in the Charting library.

For the sake of simplicity, the above sample uses static data points as the items source for each series. If your data points are heavily reused across your application, you can definitely refactor the data points into a repository or data manager class which you can easily consume with a simple method call. Later, you can learn more about it from my sample project.

It’s also noteworthy to point out that changes to the Chart model will automatically propagated to the view, thanks to the powerful binding architecture of Crosslight. This means you can add or remove Series dynamically in your app. Of course, you can also set the items source of the Series later in the app’s cycle, such as after fetching data from the server in most real-world scenarios. Better yet, changes you made to the Chart model will not be only propagated to the view, they will be also smoothly animated from the current point to the new point. Absolutely no additional code needed, it just works!

For your reference, here’s a code snippet how to initialize the items source of a Series combined with an async data load.

protected override async void Navigated(NavigatedParameter parameter)
{
    this.Chart.Series.First().Items = await this.Repository.GetAgileStatusAsync("In Progress");
}

That’s pretty cool, right?

Crosslight Charting emphasizes not only on powerful charting capabilities, but also provides developers with easy-to-use and intuitive APIs, so you can get things done without having to worry about the heavy work. If you notice, you don’t necessarily need to define the dependent and independent axes for the chart, since Crosslight Charting comes with automatic axis detection that generates meaningful axis and range, purely based on the given data. Simply beautiful.

Preparing the BindingProvider

Since our ViewModel and Chart model is ready, let’s prepare the Binding Provider which will bind the Chart model to the view. This is where the magic will happen.

Simply create a new Crosslight Binding Provider using the item templates built into Visual Studio (Windows) or Xamarin Studio (Mac). I’ll call this ColumnBindingProvider, and I’ll put it inside the CrosslightCharting.Core/BindingProviders folder.

#region Usings

using Intersoft.Crosslight;
using Intersoft.Crosslight.UI.DataVisualization;

#endregion

namespace CrosslightCharting.Core
{
    public class ColumnBindingProvider : BindingProvider
    {
        #region Constructors

        public ColumnBindingProvider()
        {
            this.AddBinding("ChartView", ChartProperties.ChartProperty, new BindingDescription("Chart", BindingMode.TwoWay));
        }

        #endregion
    }
}

There’s not much to explain here as the code is self explanatory. It simply binds the ChartView to the Chart property of the ViewModel. That’s it. Now you have the ViewModel with complete data populated as well as the BindingProvider.

Creating the Chart for iOS

You’re now ready to create the ViewController that will host the chart in iOS. I’ll create a new ViewController called ColumnViewController inside the CrosslightCharting.iOS/ViewControllers folder. Here’s the ColumnViewController file:

#region Usings

using CrosslightCharting.Core;
using Intersoft.Crosslight;
using Intersoft.Crosslight.UI.DataVisualization.iOS;

#endregion

namespace CrosslightCharting.iOS
{
    [ImportBinding(typeof(ColumnBindingProvider))]
    public partial class ColumnViewController : UIChartViewController<ColumnViewModel>
    {
        protected override void InitializeView()
        {
            base.InitializeView();

            this.NavigationItem.Title = "Column Series";
        }
    }
}

As you see from the code above, the ViewController contains almost nothing except for the BindingProvider and the ViewModel I’ve just created before. Also note that you need to subclass the UIChartViewController class. The UIChartViewController provides a ChartView property which returns the instance of UIChartView that it manages. It also automatically registers the ChartView as an identifier, allowing you to easily bind to the chart view in the binding provider.

Simply run the project to see the Crosslight Charting in action.

You’ve just created your first Crosslight Charting application in iOS. Congratulations! Well, how about the Android platform?

Creating the Chart for Android

Well, since you’ve prepared the ViewModel and the BindingProvider, so, as you guessed it, all you need to do, is just to provide the “view” for Android platform. Let’s create an Activity for that. I’ll call it ColumnActivity, and put it inside the CrosslightCharting.Android/Activities folder.

#region Usings

using Android.App;
using Intersoft.Crosslight.Android;
using CrosslightCharting.Core;
using Intersoft.Crosslight;

#endregion

namespace CrosslightCharting.Android
{
    [Activity(Label = "Column Series")]		
    [ImportBinding(typeof(ColumnBindingProvider))]
    public class ColumnActivity : Activity<ColumnViewModel>
    {
        protected override int ContentLayoutId
        {
            get
            {
                return Resource.Layout.ColumnSeriesLayout;
            }
        }
    }
}

Again, nothing’s here except for the ViewModel and the BindingProvider we’ve created earlier. As you can see, I’ve provided a layout for this activity by creating an Android layout file inside the CrosslightCharting.Android/Resources/Layout folder, called ColumnSeriesLayout.axml. Let’s see how this file looks like.

<?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="@android:color/white"
    android:gravity="center">
    <Intersoft.Crosslight.UI.DataVisualization.Android.ChartView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/ChartView" />
</LinearLayout>

The layout is simply a ChartView that covers the entire screen. I’ve also put a white background to get better visibility of the chart. Android version is done. Let’s see it in action.

Now, I want you to pay attention to how Crosslight Charting manages to create the axes automatically for you, and define the “smart” ranges for those axes that fits the screen nicely. Also notice that the legend is automatically generated for you based on the given data points. How cool is that? See, I told you that it works consistently between iOS and Android platform.

And if you need to customize anything about the Chart, whether its data source, series, or other settings, you do it only once in the  ViewModel. At this point, I hope you’ve started to get the point how Crosslight works in overall, and how it lives to its highly acclaimed 100% shared UI logic.

Learning more about Crosslight Charting

You’ve successfully created a column chart with Crosslight Charting. In addition to column charts, Crosslight Charting also supports many other chart types such as area, bar, doughnut, line, pie, scatter, step area, and much more.

If you’re interested in learning more, I highly suggest you to check out the list of topics here:

• Understanding chart series
• Understanding chart axis
• Understanding chart legend
• Understanding chart title
• Configuring chart appearance
• Understanding animation
• Enabling zoom
• Using data annotation

I also highly recommend you to check out the samples directly to see all of the features hands-on. It is available in the Git repository in this link.

You can also find the source code to this our Git repository here.

Till next post,

Cheers
Nicholas Lie

In my post last month, I mentioned about data optimization feature in Crosslight 4 which could greatly improve the overall performance and experience of your Crosslight apps. So here we are, this week’s post will feature this optimization feature, and you will learn how to apply it to your apps. Read on.

In Crosslight 4, we shipped a lot of new stunning components like charting, barcode reader, dialog presenters and much more. But that’s not all. We also pay a lot of attention on small and unseen areas such as the data framework, logging, and view projection. In fact, no feature is too small. For instance, the new extensible filters in RestClient enable you to add request and response compression and make your apps work 75% faster, particularly if you’re building enterprise apps that sync relatively large data. Let’s see how it works.

Adding a new request or response filter to the RestClient is extremely easy, thanks to the new, intuitive API. Here’s how:

this.GetService<IActivatorService>().Register<IRestClient>(
c =>
{
    RestClient restClient = new RestClient(appSettings.RestServiceUrl);
    restClient.AddRequestFilter(new GZipRequestFilter());
    restClient.AddResponseFilter(new GZipResponseFilter());

    return restClient;
});

If you’re using Crosslight App Framework, you can simply add the code in the AppService class where all container registrations are defined. The Rest client in the entire app will automatically have the filters applied.

Since the filter is provided as interface, you can plug any capabilities you desire, whether it is a compression filter, an encryption filter, etc. In this case, let’s not reinvent the wheel. We’ll just grab an existing Microsoft.Bcl.Compression library from NuGet. Here’s an example how we can extend a third-party library to work with our filter interface:

public class GZipRequestFilter : GZipFilter, IRestRequestFilter
{
    public void Filter(IRestRequest request)
    {
        request.AddHeader("Accept-Encoding", "gzip, deflate");
        Parameter requestBody = request.Parameters.Where(o => o.Type == RequestParameterType.RequestBody).FirstOrDefault();

        if (requestBody != null)
        {
            request.AddHeader("Content-Encoding", "gzip");
            requestBody.Value = this.Compress(requestBody.Value.ToString());
        }
    }
}

public class GZipResponseFilter : GZipFilter, IRestResponseFilter
{
    public void Filter(IRestResponse response)
    {
        Parameter contentEncoding = response.Headers.Where(o => o.Name == "Content-Encoding").FirstOrDefault();

        if (contentEncoding != null && contentEncoding.Value.ToString().ToLowerInvariant() == "gzip")
            response.Content = this.Decompress(response.RawBytes);
    }
}

As seen above, we can just extend an existing class, say, the GZipFilter class, then implement the IRestRequestFilter and IRestResponseFilter. Both interfaces require an implementation of Filter method, that’s where you perform the actual logic of the filter.

On the server-side, if you’re using IIS for the web server, then you can just enable the dynamic compression feature. Afterward, the WebAPI response will be automatically compressed.

One thing to note though, WebAPI doesn’t automatically recognize the compressed requests. Fortunately, Microsoft already has a NuGet package for that. So we’ll just grab the ASP.NET WebAPI Compression Support, then add the following code to the WebAPI config class.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.MessageHandlers.Insert(0, new ServerCompressionHandler(new GZipCompressor(), new DeflateCompressor()));
    }
}

Pretty easy, right?

Based on performance test on one of the apps we built for our enterprise client, enabling the compression filters speed up our apps performance by nearly 4x. Previously, in certain case, the app took 9 minutes to synchronize a thousand of data over the Edge connection. With compression enabled, the app only took only 2 minutes to sync the same set of data over Edge, and only a few seconds over Wifi. The user couldn’t be happier. So we hope you can do the same too, your users will thank you so much.

To see the feature in action, pull the sample from our Git, and play around with it. The feature is also fully documented, which you can find here. Happy optimizing!

Best,
Jimmy

In my post last week, I have introduced a truly time-saving feature in Crosslight 4 called view projection. As its name implies, this feature supposed to be used only for data listing/viewing purpose. Typically, you will use a much simple (flat) object model that represents the shape of data which can be conveniently bound to the list view. However, the flattened object does no longer represent the actual hierarchy of your data, thus making it non suitable for editing. That said, how can we handle data editing scenario? Is it possible to enable data editing while leveraging view projection? Read on.

The quick answer is yes — data editing can be used together with view projection, but we’ll get there a bit later. When using view projection, we suggest that you load only necessary data that is actually used in the list view. Since the loaded data is not designed to be editable, the best practice for data editing is to reload the data complete with the related entities on demand, typically when user tapped on the cell to navigate. Thanks to the full-fledged app framework and entity services in Crosslight, that can be easily done in the Navigated method of EditorViewModel instance, like so:

public async override void Navigated(NavigatedParameter parameter)
{
    base.Navigated(parameter);

    if (parameter.Data != null)
    {
        this.ActivityPresenter.Show("Loading");
        this.IsDataLoading = true;

        // reload item along with the specified navigation properties
        await this.Repository.GetSingleAsync((parameter.Data as SalesOrderHeader).SalesOrderID, new string[] { "Customer", "Address1", "SalesOrderDetails", "SalesOrderDetails.Product" });

        // call OnItemChanging so the recently fetched related entities can be tracked after item reloading
        this.OnItemChanging(this.Item, this.Item);

        this.IsDataLoading = false;
        this.ActivityPresenter.Hide();
    }
}

The above code is quite self explanatory. It will asynchronously load the entity along with the related entities given its primary key value when the editor view is navigated. The essence of the above code lies in the GetSingleAsync method which now has a new overload that accepts an array of related properties to be reloaded along with the entity in one shot. That’s really intuitive.

To improve performance, it’s wise to load the entity only when it’s navigated the first time. That’s pretty easy to implement, let’s make changes to the code like this:

public async override void Navigated(NavigatedParameter parameter)
{
    base.Navigated(parameter);

    if (parameter.Data != null)
    {
        // only load additional data if it hasn't been loaded previously
        if (this.Item.Customer == null)
        {
            this.ActivityPresenter.Show("Loading");
            this.IsDataLoading = true;

            // reload item along with the specified navigation properties
            await this.Repository.GetSingleAsync((parameter.Data as SalesOrderHeader).SalesOrderID, new string[] { "Customer", "Address1", "SalesOrderDetails", "SalesOrderDetails.Product" });

            // call OnItemChanging so the recently fetched related entities can be tracked after item reloading
            this.OnItemChanging(this.Item, this.Item);

            this.IsDataLoading = false;
            this.ActivityPresenter.Hide();
        }
    }
}

Piece of cake. Now, if the properties of the entity has changed, or the related entities have changed during editing, the changes won’t sync back to the list view. That’s actually normal, because the objects in the list view is no longer related to the entities being edited. Remember the code we wrote above? We reloaded the entity specifically for editing purpose during navigation.

There’s where the new entity.UpdateProperties() API comes to rescue. Simply call the API on the edited entity, it will automatically scan the changes and reflect them back to the projected properties. And even better, if you’ve upgraded to Crosslight 4’s Enterprise App Framework, then you have zero line of code to write. That’s made possible because the API is now baked to the DataEditorViewModelBase class, specifically in the OnDataChanged method. Here’s the code snippet for your convenience:

/// Called when a data item is changed.
protected override void OnDataChanged(TModel item)
{
    IEntity entity = this.Item as IEntity;
    if (entity != null)
        entity.UpdateProperties();

    base.OnDataChanged(item);
}

And here’s the result as expected using the view projection samples:

You might be wondering how the UpdateProperties API does its magic. How does it know which related entities have changed and which projected properties to sync back? The answer lies in the Crosslight’s powerful data framework which has complete information about the entity’s relationships and its metadata as well as built-in changes management.

If you haven’t familiar with Crosslight data framework — or haven’t used it yet, I strongly recommend you to start using it. Learn more here.

Now, let’s pull the data samples from our Git and see the editing in action with view projection. Run the sample in either iOS and Android platform, tap on a cell, edit some fields, i.e., City, then save it. Go back to the list view, voila, the changes are sync’ed back as expected, just as if it were an entity loaded with navigational properties.

In this post, we’ve looked at how a data-driven Crosslight app is built, covering both data list and editing by combining view projection and entity’s API. Now you also have better understanding on how Crosslight is designed to provide great developer experiences by eliminating much of the boilerplate code, so you can focus on the code that matters to your business apps. If you’ve any questions, we’d be happy to welcome you aboard on our community forum.

Best,
Jimmy

Couple weeks ago, we’ve finally released Premier Studio 2015, one of our most remarkable milestones. We shipped Crosslight 4 with a host of new exciting components, Visual Studio 2015 across all product lineup, and Windows Edge support for WebUI components. That’s not all. We also launched a fully redesigned website which was the result of months of redesign works. In case you missed the news, check out the full coverage on the release here, and the website redesign concept here.

So now you’ve got the new Studio installed, what’s next? We’ve made available a wealth of resources to help you quickly get started. For the starting point, I recommend you to check out the release notes and follow the links in the page. Over the next few weeks, we’ll blog around the new features introduced in this release, covering each of them in more practical way.

This week, I’d like to discuss about the new features in Crosslight data access components, and how you can leverage them to build faster, more reliable data intensive apps.

Displaying a list of data that includes information from several related tables is a very typical application scenario. Consider the order list in an order tracking app, it makes a good sense to show aggregated amount and shipping information along with the order item, perhaps something like this.

Showing the list from orders table only is certainly straightforward, but how to include the related information? That’s easy, thanks to the data service component (both client & server) included in Crosslight. Just use the Includes API in the query definition, so the related entities will be fetched automatically from the server, like so:

public override QueryDescriptor GetQueryDescriptor()
{
    QueryDescriptor queryDescriptor = this.GetBaseQueryDescriptor();
    queryDescriptor.Includes.Add("Customer");
    queryDescriptor.Includes.Add("Address1");

    return queryDescriptor;
}

That works well in most cases, particularly for list with few included related entities. However, when you added more related entities to the list, the payload will become larger too, exponentially. This often leads to issues like: longer time to transfer the data, more overhead in entity processing, and more critically, larger memory allocation. But, that’s all natural due to the way related entities work. To understand how a response with related entities look like, take a look at the JSON below.

{
  "$id": "1",
  "$type": "Intersoft.Data.WebApi.QueryResult, Intersoft.Data.WebApi.v4",
  "AffectedRows": null,
  "InlineCount": null,
  "Results": [
    {
      "$id": "2",
      "Address1": {
        "$id": "3",
        "AddressID": 1092,
        "AddressLine1": "99700 Bell Road",
        "AddressLine2": null,
        "City": "Auburn",
        "StateProvince": "California",
        "CountryRegion": "United States",
        "PostalCode": "95603",
        "rowguid": "79cdd89c-3c91-48db-8277-46d04aad7251",
        "ModifiedDate": "2002-09-01T00:00:00.000",
        "CompleteAddress": "99700 Bell Road\nAuburn, California"
      },
      "Customer": {
        "$id": "4",
        "CustomerID": 29847,
        "NameStyle": false,
        "Title": "Mr.",
        "FirstName": "David",
        "MiddleName": null,
        "LastName": "Hodgson",
        "Suffix": null,
        "CompanyName": "Good Toys",
        "SalesPerson": "adventure-works\\linda3",
        "EmailAddress": "david16@adventure-works.com",
        "Phone": "969-555-0117",
        "PasswordHash": "+gtwbVycsIIj2loVtrHNRN6IBLl20lQpRK8+JhzxyEo=",
        "PasswordSalt": "AwqZdYk=",
        "rowguid": "fdd7d9cb-9a81-40fc-baf6-facde8da4923",
        "ModifiedDate": "2002-09-01T00:00:00.000"
      },
      "SalesOrderID": 71774,
      "RevisionNumber": 2,
      "OrderDate": "2015-06-01T00:00:00.000",
      "DueDate": "2015-06-13T00:00:00.000",
      "ShipDate": "2015-06-08T00:00:00.000",
      "ModifiedDate": "2015-06-08T00:00:00.000"
    }
}

As seen in the above JSON, every included entity will be added as a child record in the server response. This allows the Crosslight entity manager to attach the records properly in the client side. In our simple test, the order list retrieved with the Includes approach took 72 KB in size.

If you’re new to Crosslight or unfamiliar with the QueryDescriptor API, you might want to check out Dynamic Data Access with Query Descriptor.

Obviously, you can address the above issues with custom server query or custom views, which are well supported by Crosslight. But, creating custom query every time you need to display data is counter-productive and tedious at best, agree?

So what solution do we have in store? Read on.

Enter View Projection.

Building on our experiences in architecting large scale enterprise apps, and also based on our customer’s feedback, we are introducing a more efficient way to create a shaped view in Crosslight 4. Called view projection, you can easily create a data view comprised of various information from related tables into a single flat list – dramatically shrinking payload size and processing time. We believe this is a better, more efficient, and more reliable way to fetch and present data in Crosslight apps.

Using the same order list scenario above, we can now extend the order entity with new properties to contain the additional information we’d like to fetch, then simply add the new Select attribute to indicate which property and related table to fetch, like so:

public partial class SalesOrderHeader
{
    [Select("Address1.CompleteAddress")]
    public string ShipAddress { set; get; }

    [Select("Customer.CompanyName")]
    public string CustomerCompany { set; get; }
}

By defining such a simple metadata in the client side, the server will automatically construct the query behind the scene. Back in the client, you’ll get the data with the additional information in a flat list, then simply bind it to a list view. Piece of cake.

Here’s the example result of the response.

{
  "$id": "1",
  "$type": "Intersoft.Data.WebApi.QueryResult, Intersoft.Data.WebApi.v4",
  "AffectedRows": null,
  "InlineCount": null,
  "Results": [
    {
      "$id": "2",
      "$type": "ViewProjectionSample.DomainModels.SalesOrderHeader, ViewProjectionSample.DomainModels",
      "SalesOrderID": 71774,
      "RevisionNumber": 2,
      "OrderDate": "2015-06-01T00:00:00.000",
      "DueDate": "2015-06-13T00:00:00.000",
      "ShipDate": "2015-06-08T00:00:00.000",
      "ModifiedDate": "2015-06-08T00:00:00.000",
      "SalesOrderDetails": [ ], 
      "Address": null,
      "Address1": null,
      "Customer": null,
      "ShipAddress": "99700 Bell Road\nAuburn, California",
      "CustomerCompany": "Good Toys"
    }
}

As expected, the Customer and Address entities are no longer included in the returned result. Instead, the ShipAddress and CustomerCompany properties are simply filled with the requested information.

Per our test using the same order query, the view projection took only 37 KB, about half the size of the response size using Includes approach. If you build relatively complex data apps, this view projection alone could reduce the response size up to 75%.

That’s not all. Nested properties is also supported, so you can easily include any entity regardless of the depth, as long as their relationships are well defined. Here’s an example of nested property selection.

[Select("Product.Category.CategoryName")]
public string ProductCategory { set; get; }

[Select("Order.ShipToAddress.Country.Name")]
public string ShipCountry { set; get; }

In addition to nested properties, the new Select attribute is also smart enough to do some heavy data aggregation and calculation. Say you want to include the order details count and total to the order list, you can specify the Select attribute like this:

[Select("SalesOrderDetails.OrderQty", Aggregate.Sum)]
public int ProductQuantity { set; get; }

As expected, the returned result will look something like this:

{
  "$id": "1",
  "$type": "Intersoft.Data.WebApi.QueryResult, Intersoft.Data.WebApi.v4",
  "AffectedRows": null,
  "InlineCount": null,
  "Results": [
    {
      "$id": "2",
      "$type": "ViewProjectionSample.DomainModels.SalesOrderHeader, ViewProjectionSample.DomainModels",
      "SalesOrderID": 71774,
      "RevisionNumber": 2,
      "OrderDate": "2015-06-01T00:00:00.000",
      "DueDate": "2015-06-13T00:00:00.000",
      "ShipDate": "2015-06-08T00:00:00.000",
      "ModifiedDate": "2015-06-08T00:00:00.000",
      "SalesOrderDetails": [ ], 
      "Address": null,
      "Address1": null,
      "Customer": null,
      "ShipAddress": "99700 Bell Road\nAuburn, California",
      "CustomerCompany": "Good Toys",
      "ProductQuantity": 2
    }
}

Unbelievably simple, isn’t it? We haven’t quite finished yet, read on.

How about using some mathematical operations along with the data aggregate, you asked. Well, we’ve got those covered too. Here’s a quick example:

[Select("SalesOrderDetails", "OrderQty * UnitPrice * (1 - UnitPriceDiscount)", Aggregate.Sum)]
public double SubTotal { set; get; }

In addition to sum, as you might already have in mind, we also supported other aggregate options such as count, min, max, and average.

And if you just realized, we haven’t touch the server part even a bit, are we missing something? Nope. The server recognizes all these new Select metadata, thanks to the much improved WebApi component introduced in the new Intersoft.Data.WebApi.v4 assembly.

In fact, all you have to do at the server side is to update the Intersoft WebApi assemblies and the related Nuget packages to the latest version. Check out this upgrade guide for details.

Last but not least, all the powerful new capabilities above are equally supported in Crosslight SQLite as well, so if you build sync-aware apps, the same metadata will work just fine, whether the app loads data from the remote server or local storage. In addition, the view projection has been carefully designed to support data editing and update scenario as well which I’ll cover in the next post.

We’ve designed Crosslight with strong focus on developer experience since the initial release. We continue to provide even greater developer experience in this new release, making the impossible possible with intuitive and simple API design.

We still have a lot of stories to cover around data access improvements, but for now, let’s pull some samples and see the demo of view projection features for yourself. If you have any questions, join us in our community forum.

Best,
Jimmy

The wait is over! Today we just released Premier Studio 2015, our biggest release ever. You will discover a lot of new features and enhancements, especially on our cross-platform mobile toolset, Crosslight 4. Our team has put big efforts on bringing WebUI Studio to fully support of the newest built-in Microsoft Edge web browser and Microsoft Visual Studio 2015. You can now enjoy utilizing our controls in these latest technologies.

Let’s see some of the key highlights in this release.

Crosslight 4: The Gold Standard for Enterprise Mobile Development Toolset is Here.

We have committed to provide the best and powerful features to Crosslight from version 1 until now. In this release, Crosslight 4 introduces more than 12,000 new APIs, three times more than the previous release. This release also adds a comprehensive data visualization suite supporting 20+ chart types, supercharged sync framework, view projection technology, barcode scanner service, a highly extensible logging framework featuring integration with Azure Application Insights, all-new dialog presenter, as well as hundreds of major improvements in data access components and synchronization framework.

Moreover, we also provide iOS storyboard support and many tooling support improvements, allowing you to design iOS views and work with Crosslight iOS components entirely in Xamarin Studio, whether in Mac or Windows. Discover more about Crosslight 4.

Crosslight Charting

You want it, we deliver them to you! As Enterprise mobile user, you will obviously need to process the data into meaningful information on the go. We are here to present Crosslight Charting which takes mobile charting to a whole new level. With over more than 20 chart types, you can freely visualize data on mobile devices like never before.

You will love the key features introduce in Crosslight Charting. We have lighting-fast performance with pixel-perfect rendering, smooth animation with elegant styles, interactive axis zooming and panning, built-in enterprise chart features and more. Let’s see what Crosslight Charting offers.

Crosslight Dialog Presenter

Since the initial version of Crosslight, Crosslight provides a way for you to easily display messages or user actions with a centralized call of the presenters from the ViewModel. You can freely choose from either one of the following presenters: Action Presenter, Activity Presenter, Message Presenter and Toast Presenter. It doesn’t stop here as we have added all new, very powerful and flexible presenter to the family: the dialog presenter. Using the dialog presenter, you can display virtually any content using the dialog presenter, complete with your own app branding. This takes out the pain from developers to display flexible content inside their apps. Learn more.

Crosslight Barcode Scanner

Never thought how you can create barcode scanner on your mobile devices? In this release, Crosslight 4 continues its innovation by introducing a new barcode scanner service that will help developers integrate barcode scanning feature right into Crosslight apps. Built from the ground up, Crosslight Barcode Scanner Service will be able to support and scan almost any types of barcode in the world as it supports more over than 20+ types of barcode format. Nice! Explore more on Crosslight Barcode Scanner.

Powerful, Extensible Logging Service

Powerful and comprehensive logging is an invaluable part of an enterprise app. It allows you to perform data mining, gather information about your users, and analyze errors and crashes for your app, especially when your app reaches production phase. In this release, we’re bringing you Crosslight Logging Framework, which will change how you log information from your app. You can also easily log your apps to Azure Application Insights. Learn more.

Improved Form Builder

Crosslight Form Builder has been a favorite feature since it was first introduced in Crosslight 1. Crosslight developers have long enjoyed the simplicity of achieving tasks like form validation, data binding, form element placements and more using Crosslight Form Builder. In this release, the Crosslight Form Builder receives two new enhancements: interactive section visibility with animation and a new numeric stepper editor.

The numeric stepper is the perfect editor for incrementing numeric values in small range, while the section visibility binding now allows you to show and hide sections at runtime, enabling more enterprise business scenarios. Learn more.

What’s New in Crosslight iOS

Good news for iOS developers! Crosslight 4 release marks an important milestone for iOS development specifically the addition for universal storyboards and Xamarin iOS designer support. It also added sophisticated data visualization library and a lots of beautiful UI components that will surely elevate your iOS apps to the next level, such as scale and slide drawer animations, segmented bar controller, gorgeous rounded button and more. See what’s new in Crosslight iOS.

What’s New in Crosslight Android

Not only iOS but we bring good news for Android developers too. Crosslight 4 gives great enhancements to Android which will make mobile development even easier, such as new rounded button, new numeric stepper control, fused location provider, add binding support, ListView improvement in FormBuilder and many more. See what’s new in Crosslight Android.

Improved IDE and Tooling Supports

We have provided a comprehensive and powerful IDE and tooling support that is compatible with Visual Studio or Xamarin Studio, such as Crosslight Project Wizard, numerous item templates and project templates.

All of these supports have truly helped developers to write, build, debug test and deploy their apps on devices. Crosslight 4 continues to enhance with even improved IDE and tooling support: iOS universal storyboard, Xamarin iOS designer, Visual Studio 2015 support and Visual Studio 2015 Android Emulator support. Learn more.

Visual Studio 2015 Ready

Along with the new operating system, Windows 10, Microsoft has announced the RTM availability of the .NET developers’ favorite IDE, the Visual Studio 2015.

The new IDE brings many exciting features to the table such as custom windows layouts, a better JustCode code editor with Roslyn support, shared project, IntelliSense support for XAML, Bower and NPM, and much more. Alongside these new features, developers can also enjoy accelerated development time with Intersoft Solutions’ award-winning toolset. The WebUI and ClientUI product lineup have been upgraded to fully support the design-time capabilities of the new IDE. Developers can enjoy the pure simplicity of drag-and-drop features when interacting with the designer tool. Crosslight developers can now enjoy the same, great development experience while working with Crosslight projects using the enhanced Project Wizard and templates that work wonderfully in Visual Studio 2015.

Windows 10 and Edge Support

With the announcement of public availability of Windows 10 on 29th July, 2015, we are dedicated to bringing full support to its product lineups from day 1. The entire WebUI suite is now enhanced to fully support the newest built-in Microsoft Edge web browser and renders in pixel-perfect retina display.

In addition, ClientUI controls have also been tested to fully work in supported browsers running on top of Microsoft’s latest and greatest operating system. Furthermore, Crosslight has also been improved to support the latest operating system as well. Thanks to our team for their hard-work as we continue our enduring commitment to bringing great products that will significantly speed up development time on top of Microsoft’s revolutionary operating system.

To discover the new features with better experiences, check out the 2015 Tour page.

Download Today

Visit our Crosslight Developer Center to get more information about Crosslight architecture, walkthroughs, samples as well as Crosslight roadmap. We just want to ensure that you always get the best “cutting-edge” toolset for your development. Download your free trial here and experience building cross-platform mobile, enterprise and web apps with less effort.

Cheers,
Nicholas Lie