Intersoft Solutions Corporate Blog » ClientUI

Getting Started with Premier Studio 2016

Nicholas Lie — Mon, 07 Mar 2016 11:52:18 +0000

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

Premier Studio 2016 is here.

Jimmy Petrus — Mon, 29 Feb 2016 05:21:36 +0000

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

A Closer Look at Premier Studio 2016

Jimmy Petrus — Fri, 29 Jan 2016 07:09:32 +0000

In this first post of the year, I’d like to share something fresh and exciting for all of you. As you might have aware, we’ve been working hard on a big release since the past few months. It’s in deed our biggest release yet so far — with major upgrades to all flagship products across all 7 platforms which include WebUI, ClientUI, and obviously, Crosslight. So what does that mean to you, and what you can expect in the upcoming release? Read on.

Whether you have a Premier subscription, or individual platform subscription, you’re getting the most out of your investment, and more importantly, get ready to kick off the new year with new goodies we’ve prepared for you.

As we’re reaching the RTM milestone, most of the product bits are ready. That said, here are some latest previews, fresh from the kitchen.

A Whole New Level of Crosslight Development Experience

Crosslight developers, rejoice! Gone are the days of assembly references nightmare. In the new release, we’re strongly focused in creating a better development experience in addition to new tools and features. Our goal is to make getting started with Crosslight as easy as 1-2-3, where you can start from a blank Xamarin project or downloading a Crosslight sample, add Crosslight package, and start writing some code.

To make that happen, we’ve created over 60 NuGet packages that you can consume with a simple click. We designed our packages to be atomic which align with the Crosslight nature: highly extensible and modular.

Unlike typical packages, Crosslight NuGet packages are designed for cross-platform targeting, allowing you to simply add a single package which automatically install to multiple projects in the solutions, including Core, iOS, Android, Windows Phone and Windows 8 projects. In addition, we also made available special packages for Xamarin Support and Google Play Services which have been strongly signed. The end result is clear, a much streamlined, hassle-free development experience.

More importantly, Crosslight’s packages implemented auto dependencies which greatly improve developer experince. Let’s say you want to add logging with Azure integration, you just need to add the Crosslight Logging Azure Insights package. It automatically adds required dependencies such as Crosslight Logging and Azure Service packages to all client and server projects.

This makes building cross-platform apps with Crosslight ultimately simple and easy. Not to mention you can now perform updates in a single click as new Crosslight updates are available. No more frustrating, error-prone manual updates.

But wait, does it work in Xamarin Studio on the Mac? Yep, absolutely. The entire goal of adopting NuGet is due to cross-platform nature of Crosslight where developers typically work with the project across different operating systems and IDEs. Using NuGet is the perfect strategy for such cross-platform development since all references are stored locally in each solution folder.

To make NuGet works the way we desire, we shipped a special package manager console add-in for Xamarin Studio. This allows you to simply type a command, and have the specified package added to all projects in the solution.

Here’s an example result of a Crosslight solution with NuGet in Xamarin Studio.

Note that although Crosslight 5 pre-release packages have been made available to NuGet for a while, they are published particularly for testing purpose. The latest submission is a near-final build which is feature-complete and stable. Surely you can give it an early look, although we recommend you to wait for a little while, at least until we released the accompanying samples next week.

Introducing Crosslight Android Material

Crosslight Android Material is arguably the most anticipated features in Crosslight 5. The new release ships thousands of new features and resolved backlogs. But what excites me the most in this release is the all-new, shiny Crosslight for Android Material, which is a result of many months of intensive engineering and meticulous UX design.

We’ve made it super easy for you to create beautiful Android Material experience. It’s all started with the new Crosslight Fragment component which provides a wealth of APIs and built-in features. Let’s take a quick look at the Material version of our popular Inventory sample.

http://blog.intersoftsolutions.com/wp-content/uploads/2016/01/inventory-material.mp4

Unlike the native Android development, creating Material experience with Crosslight is simple yet elegant. Here are some code snippets to give you some ideas how Crosslight Material APIs look like.

Want to add bar items? It’s easy.

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

    this.AddBarItem(new BarItem("SaveButton", CommandItemType.Save) { ShowAsAction = ShowAsAction.Always });
    this.AddBarItem(new BarItem("CancelButton", CommandItemType.Cancel) { ShowAsAction = ShowAsAction.Always });
}

Adding a floating action button? Just a single API to call.

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

    this.FloatingActionButtons.Add(new FloatingActionButton("EditItem")
    {
        Position = FloatingActionButtonPosition.BottomRight,
        IconId = Resource.Drawable.edit,
        Direction = FloatingActionButtonDirection.Up,
        HideOnScrollUp = true
    });
}

Presenting a parallax image with collapsible toolbar? Piece of cake.

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

    this.ToolbarSettings.Mode = ToolbarMode.Collapsing;
    this.ToolbarSettings.CollapsingToolbarSettings.EnableParallaxImage = true;
    this.ToolbarSettings.CollapsingToolbarSettings.ExpandedHeight = 240;
}

iOS-style swipe-to-action? That’s built-in.

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

    this.EditActions.Add(new EditAction("Sold"));
    this.EditActions.Add(new EditAction("Delete", true));
}

The result of the edit actions can be seen below.

As seen in several examples above, we’ve redesigned the entire Android development experience so you can define behaviors and features with simple API, minimizing the needs on AXML layout. That saves countless of hours, we’ve experienced that ourselves.

The Crosslight Android Material ships with 50+ components exclusively engineered for Material user experience. This includes a brand-new navigation view, card view, recycle view, collection view, and iOS-style split view complete with editing mode, multiple selection and all data-related functionality you would expect.

The following image shows the all-powerful SplitViewFragment.

To let you quickly learn and explore the new Crosslight for Android Material, we’re re-creating over 40 Crosslight samples to support the latest platforms and best practices. All Crosslight samples are also NuGet-enabled now, so you can now get started by simply downloading them and restore the packages. We’ll be publishing out these new samples ahead of the release so you can give it a try early. Stay tuned for our next announcement.

Big WebUI Revolution.

It’s unlike any WebUI you’ve seen before. All 40+ WebUI components are redesigned from the ground-up to leverage the latest technologies and trends in web development. In the previous post, Nicholas has shown you a preview of the upcoming WebUI redesign. But that’s only a fraction of what we’re working on. We introduced hundreds of new styles which are meticulousy designed for every component, every feature, and every little interaction detail.

In this post, I’m thrilled to show you WebGrid Enterprise 10, with its all-new, wonderful user interface design. It marries the best of both worlds — the most advanced data grid functionality and a modern user interface. Here’s how WebGrid 10 looks like at a glance.

The new WebGrid theme is designed to be timeless, incorporating SVG for all icons and glyphs, allowing your WebUI apps to look great in any screen display, from standard resolutions to iMac 5K display. To make that dream a reality, our designers have been busy creating some 500+ icons exclusively designed for WebUI, then engineered to perfection with our latest Unified Theming framework.

The redesign for hierarchical and batch update UI have been one of the most challenging tasks as they are unique features in WebGrid. You won’t find any design references on jQuery or Bootstrap-based grids which are mostly a plain table. So we invented one for you.

Pivot chart, one of the flagship features in WebGrid, has been completely redesigned along with the ribbon, pivot area, drag-drop interaction, data filter experience and more.

And even to every little details, such as sort indicator, filter elements, and context menu. Everything is new in WebGrid 10.

How about other WebUI components? Definitely you won’t be able to build a full-fledged web app with only a single WebGrid component. We’ve a lot of new and interesting UI goodies to offer. For instance, WebPaneManager now allows you to create various modern layout such as those found in Apple Mail app, OneDrive, or iCloud. The entire lineup of WebDesktop, WebEssentials, and WebScheduler are joining force this big WebUI revolution.

We can’t wait to deliver these exciting major WebUI release to you soon. Stay tuned for our next announcement when our new demo is published.

Stunning Charts for Enterprise Reporting.

As if it weren’t enough, the 2016 release also ships a major upgrade to ClientUI, the enterprise developer’s choice of toolset. We’re strongly focused in creating new features that make enterprise desktop apps development even easier.

You can now add professional-looking charts right in your reports. It works the way you expect it to be — drag the chart to the designer surface, bind it to a data source, and choose a chart type from the intuitive Chart Designer. Voila! Here you go.

The following images show the chart designer and the report viewer respectively.

We offer dozens of chart types commonly used in financial and enterprise reports, including bar, column, pie, doughnut, bubble, scatter, range and much more.

That’s not all. The new chart feature will be also available and fully supported in WPF platform. In the previous release, the reporting suite are only partially available in WPF. And starting in this release, we’re pleased to announce that all ClientUI components and features in Silverlight have been made available in WPF. Our WPF team has been working hard to optimize every control and features so they run with best performance and flawlessly in WPF as well as in the latest Windows 10 release.

And as a bonus, ClientUI 12 will include a report conversion tool for Crystal Report files. So if you’re tasked to migrate a bunch of CR reports, you’ll love this small yet time-saving tool.

Coming Soon

Premier Studio 2016 is slated for a public release on mid February 2016. Our team is currently making final touch to the products and preparing an even better development experience to everyone. Last but not least, we’re also working on a new series of getting started guide and improvements to over hundreds of documentation pages.

Last but not least, we’re giving out a free 3 month extension for all expiring subscriptions between Nov 2015 and Jan 2016. We’d love to have you joining us to celebrate our biggest release yet.

At the meantime, we want to hear from you what new tools/features in the upcoming release that you anticipated the most. We’ll also welcome any feedback!

Best,
Jimmy

A Sneak Peek at ClientUI vNext

Nicholas Lie — Wed, 04 Nov 2015 00:01:00 +0000

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

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

All the great features you love. Even better.

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

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

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

Various report types support.

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

Datasource-agnostic.

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

Complex data operation support.

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

Rich report components.

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

Comprehensive report parameter support.

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

Pre-built conditional formatting.

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

Advanced globalization support.

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

Powerful scripting capability.

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

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

Faster. Snappier. Desktop-class performance.

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

Charts. Right in Your Reports.

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

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

Optimized for Windows 10.

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

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

Built for Your Eyes.

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

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

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

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

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

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

Cheers,
Nicholas Lie

Video Tutorial: Creating Your First Crosslight App

Nicholas Lie — Tue, 05 Aug 2014 13:56:53 +0000

For those of you new to cross-platform development, fear not. Crosslight is here to the rescue. Building cross-platform apps has never been easier using Crosslight. Crosslight is a cross-platform toolset that helps you to create cross-platform apps using C#, leveraging the MVVM pattern. If you haven’t got a copy of Crosslight, grab one here!

To help you get started, we have just released a new video tutorial that will help you to create your first Crosslight app using the Crosslight Project Wizard and run the project on all four platforms: iOS, Android, Windows Phone and Windows Store.

Find out more about Crosslight at our Developer Center. Also checkout our newbie-proof Crosslight tutorial. If you have any questions, feel free to post it in our community forum, or drop us a mail.

Video Tutorial: Getting Started with Crosslight Reporting Service

Nicholas Lie — Wed, 18 Jun 2014 16:24:20 +0000

Crosslight 2 provides a capability to view enterprise reports across multiple platforms including iOS, Android, Windows Phone and Windows 8. The reporting services is built upon the company’s flagship reporting, ClientUI Reporting, to produce identical reports across multiple platforms. You can quickly add reporting feature to your apps since Crosslight has encapsulated all of the functionality required to display the reports on multiple platforms natively. Check out the following video to learn how to configure the report server and display the report on Crosslight apps, which runs on four major platforms: iOS, Android, Windows Phone 8 and Windows Store.

You can also get the source code for this video from our new Git server: http://git.intersoftpt.com/projects/CROS-SUPP/repos/simple-reporting/browse. To learn more about Crosslight reporting service and how it works, see Viewing Enterprise Reports. If you have any questions, feel free to post it in our community forum, or drop us a mail.

Coming in 2014 R1: ClientUI Reporting 2.0

jackysite — Wed, 20 Nov 2013 12:41:53 +0000

Ever since we released the first version of ClientUI Reporting in 2013 R1, we continuously shaped up the entire reporting lineup with significant enhancements and new exciting features. With our fast-pacing sprint-based development process, we are very excited to announce that the next major release, ClientUI Reporting 2.0, will be available in 2013 R2. We will ship it along with a host of professionally-designed business report samples as well as comprehensive documentation.

In this blog post, I will share some interesting features that will be available in the upcoming release.

Sub Report

We have received tremendous requests asking whether sub report will be supported in ClientUI Reporting. Today I’m pleased to announce that sub report will be included as built-in report components in 2013 R2.

As one of the most anticipated features, sub report allows you to embed one or more reports into a single report document. This can be useful when there is a particular report structure which have a consistent appearance and functionality that needs to be included many times in a report. In addition, you can also use it to easily create side-by-side reports similar to the screenshot below.

Entity Definitions

I expect, at a glance you must be wondering what Entity Definitions is? What is it for? Is it related to the data definitions in a Report Document? Yes, it’s close enough. But before discussing furthermore, I will give some flashback on how do we define data definitions in a report previously.

Suppose you need to display sales in 2012 and sales in 2013 separately inside a report. The generated report XAML will look like the following.

If you look into the above code, you can notice definition redundancy in the data sources. In the next version, we’ve greatly improved our reporting architecture in our mission to reduce report size and increase overall performance. Thanks to the new Entity Definitions, the data sources definition look much cleaner. And the good thing is, it’s highly reusable. See the following code.

With this improved architecture and design, it will effectively suppress the size of report document thus enhancing overall user experience.

Enhanced Table Cell

We have been intensively working to bring some great enhancements to the table component. You would love to see that our table now supports cell merging. As seen in the following screenshot, the table cells can be merged either horizontally or vertically. Furthermore, some new commands have been added to ribbon bar, allowing you to easily merge and split the cells.

In addition, our table component also supports image and checkmark, allowing you to create truly appealing business reports. Definitely, you can easily customize it from the ribbon bar.

Designer Lock

Another interesting feature not to be missed is the ability to prevent end-user from editing the report document at runtime. It will ensure there is no changes can be made to report document at runtime. As can be seen in the screenshot below, all of editing commands is disabled while this feature is turned on.

Not only for an entire report document, the designer lock can also be applied on specific pages, or on specific report components.

Custom Report Templates

While working with reports, sometimes you need to ensure consistency between each reports. In this case, it’s necessary to use report template to provide standard layout pattern. Some repetitive tasks while creating a new report can be skipped, so you can focus on the specific requirements of the new report. These tasks may include customizing page layout, defining data definitions, headers, footers, and also styling.

It’s easy to create a report template, you only need to create a new report which contains customized page layout, data definitions, headers, footers, and styles, then store it as a resources in your application.

That’s all for now. I hope you liked these enhancements and new features. As usual, feedback and comments are warmly welcomed.

Warm Regards,
Jack

Create a Simple Report with Intersoft ClientUI Reporting

jackysite — Wed, 11 Sep 2013 10:38:17 +0000

In the previous posts, I’ve wrote about the overview and features of our new ClientUI reporting lineup. Now that we’ve released the Reporting lineup, you can download a copy of the new 2013 release here and test drive the much anticipated Reporting for yourself.

In this blog post, I will explain how to create a simple report using Intersoft Reporting. To get started, run the standalone Report Designer application which can be found in the Intersoft Premier Studio 2013 program group. The complete shortcut path can be found below.

C:ProgramDataMicrosoftWindowsStart MenuProgramsIntersoft Premier Studio 2013 R1WebUI Studio for Silverlight 5Reporting

Once launched, you will see the Report Designer running in the browser that looks like the following:

Reporting is all about presenting data from a specific datasource. So before we started designing a report, let’s define the data source and related data definitions first.

Defining Data Definitions

Before performing data definitions tasks, it’s important to understand the ClientUI reporting data management concept. At the heart of the ClientUI reporting is the entity-based data source, which can be any objects – a simple POCO object or a complex domain model object. This means that it doesn’t coupled to any specific data providers. You can simply get the data the way you want and throw in into the report’s data source. The report viewer will take care the rest.

Back to the report designer. You can easily define data source by simply navigating to the Report Explorer tab, then click the AddDataSource button. This will launch a dialog to add a new data source. See the following illustration.

You need to specify the name and type of your data source. Actually there are 3 data source types you can use here, such as Entity (table), Method (Stored Procedure), or View. In this scenario, an Entity will be provided as a data source. Also don’t forget, you need to specify the properties owned by your data source, including it’s name and type.

After added, now your Report Explorer tab will look like the following:

Designing the Report

Most functionalities you need to design a report can be easily accessed from the ribbon. From the ribbon, you can easily insert a title, logo, watermark, band, or report component into the design surface.

First, let’s insert a ReportHeaderBand into the design surface. A report header will be printed once in a report, so it’s the best place for the report’s title or logo. You will notice that a visual adorner is attached to the left side of the band. The adorner allow you to re-positioning the band by using drag-drop. Besides that, you will also find a resize grip at the bottom side of the visual adorner. See the following screenshot.

Next, insert the logo. Simply click the ‘Logo’ button and a file dialog will be appeared which require you to specify an image file. Then click the ‘Title’ and ‘Date & Time’ button to insert the report’s title and date. Suppose you need to customize it, you can done these easily from the property grid.

The next step is to display data in a report. Drag the data source which has been created before and drop it into the design surface. See the illustration below.

A dialog will be appeared, require you to specify which columns will be displayed in the report. Also you can define filter, sort, or group definitions in there by using drag-drop. See the following screenshot.

Once the dialog is committed, a DataBand and it’s related band, such as HeaderBand, FooterBand, GroupHeaderBand, and GroupFooterBand, will be inserted automatically.

Last, we will printed an image at the bottom of every report pages. In this scenario, a PageFooterBand will be used because page footer will be printed at the bottom of every pages.

Insert an Image to the PageFooterBand, like the screenshot below.

Double click on the Image, then a dialog will be appeared and you need to provide the image source. See screenshot below.

After following those steps, your final report document will actually look like the following screenshot. Try to preview the report or open it using Intersoft ReportViewer, and don’t forget to save the report document for further usage.

Displaying Report with Intersoft Report Viewer

In this section, we will open the saved report document using Intersoft Report Viewer. First, you need to create a simple Silverlight application. Then define the ReportViewer in your View like the following code:

Then provide the ViewModel. See the following code:

public class MainPageViewModel
{
   private Uri _reportUri;
   private ReportDefinition _reportDefinition;
   private ReportDataProvider _reportDataProvider;

   public Uri ReportUri
   {
      get { return _reportUri; }
      set
      {
         if (_reportUri!= value)
         {
            _reportUri= value;
            this.OnPropertyChanged("ReportUri");
         }
      }
   }

   public ReportDefinition ReportDefinition
   {
      get { return _reportDefinition; }
      set
      {
         if (_reportDefinition != value)
         {
            _reportDefinition = value;
            this.OnPropertyChanged("ReportDefinition");
         }
      }
   }  public ReportDataProvider ReportDataProvider
   {
      get { return _reportDataProvider; }
      set
      {
         if (_reportDataProvider != value)
         {
            _reportDataProvider = value;
            this.OnPropertyChanged("ReportDataProvider");
         }
      }
   }  public MainPageViewModel()
   {
      this.ReportUri = new Uri("Reports/SimpleReport.xaml", UriKind.Relative);
      this.ReportDataProvider = new NorthwindDataProvider();
   }
}

And don’t forget to define the report data provider. You need to derive it from ReportDataProvider class, and implement the ProvideData method. Make sure the provided data reflect the one which have been defined in your report document.

In this sample, we create a NorthwindDataProvider class which derives from the ReportDataProvider. The following code is provided for the sake of simplicity, you can obviously refactor it into a generic class and easily define the logic to get the data source using the preferred data service, i.e., WCF RIA Service or DevForce Service.

public class NorthwindDataProvider : ReportDataProvider
{
   List> operations = new List>();

   foreach (ObjectDataSource objectDataSource in reportDefinition.DataDefinitions.ObjectDataSources)
   {
      if (objectDataSource.IsRequired && !objectDataSource.IsLoaded)
      {
         Func op = this.GetQuery(reportDefinition, objectDataSource);
         if (op != null)
            operations.Add(op);
      }
   }

   Coroutine.StartParallel(operations, (op) => { this.MarkAsCompleted(); });
}

private Func GetQuery(ReportDefinition reportDefinition, ObjectDataSource objectDataSource, QueryDescriptor queryDescriptor = null)
{
   if (queryDescriptor == null)
      queryDescriptor = new QueryDescriptor();

   queryDescriptor.SuspendQueryChanged = true;

   if (objectDataSource.ParsedFilterDescriptors.Count > 0)
      queryDescriptor.FilterDescriptors.Add(objectDataSource.ParsedFilterDescriptors);

   queryDescriptor.SuspendQueryChanged = false;

   if (queryDescriptor.FilterDescriptors.Count > 0)
   {
      CompositeFilterDescriptorCollection collection = queryDescriptor.FilterDescriptors.OfType().FirstOrDefault();
      List sorts = collection.OfType().Where(o => o.PropertyName == "SortBy").ToList();
      if (sorts != null && sorts.Count > 0)
      {
         foreach (FilterDescriptor sort in sorts)
         {
            queryDescriptor.SortDescriptors.Add(new SortDescriptor() { PropertyName = sort.Value.ToString() });     }

         queryDescriptor.FilterDescriptors.Remove(collection);
      }
   }

   Action initializeData = this.InitializeData(reportDefinition, objectDataSource.Name);

   switch (objectDataSource.Name)
   {
      case "Customer":
         queryDescriptor.SortDescriptors.Add(new SortDescriptor() { PropertyName = "CustomerID" });
         return () => this.DataManager.Customers.ExecuteAsync(queryDescriptor, initializeData);
   }

   return null;
}

private void AddDataSource(ReportDefinition reportDefinition, string objectDataSourceName, IEnumerable dataSource)
{
   if (!reportDefinition.DataSources.ContainsKey(objectDataSourceName))
      reportDefinition.DataSources.Add(objectDataSourceName, dataSource);
   else
      reportDefinition.DataSources[objectDataSourceName] = dataSource;
}

private Action InitializeData(ReportDefinition reportDefinition, string dataSourceName)
{
   Action action = (results) =>
   {
      this.AddDataSource(reportDefinition, dataSourceName, results);
   };

   return action;
}

Run the ReportViewer, and the result will look like the following screenshot.

Conclusion

In this post, I have explained how to create a simple report using Intersoft Report Designer and open it using Intersoft Report Viewer. Once you have the provider and ViewModel ready, you can rapidly create reports and present them in your application. Now feel free to try and make your own report. Should you find any difficulties or have any feedback, feel free to drop us a line in the comment box.

Warm Regards,
Jack

ClientUI Reporting is Coming in 2013 R1 – Part 2

jackysite — Thu, 01 Aug 2013 01:56:28 +0000

As we are heading toward R1 release, you may expect to hear more about ClientUI Reporting. Continued from my previous post, I will expose some interesting features in our Report Designer which will ship along with the report viewer. With the built-in design tool, definitely you can create a stunning report in a short time without spend too much hard work. Our engineering team also have put so much thoughts on these, so that it has great usability and superior user experiences. Featuring industrial-standards user interface, definitely you will be more convenient with such a powerful and visually attractive design workspace.

Introducing Industry’s Most Advanced Report Designer

ClientUI Report Designer is built from the ground up with modern design workspace that emphasize on true WYSIWYG experience. Unlike traditional designers, ClientUI report designer features clutter-less surface that allows you to work with the report elements as if they were in an actual page. This means that you will not see any designer-related visual adorners getting in the way on the designer surface. Instead, we created gorgeous visual adorners on the left side of the report with distinguished colors allowing you easily recognize each report section defined in the page.

We streamlined the overall report authoring process by arranging most frequently accessed commands in three major workflows represented in the ribbon tab group: Design, Format and Arrange. The Design tab lets you easily insert new report elements, while the Format and Arrange tabs let you quickly beautify the report elements. Everything is thoughtfully designed so both end users and developers will find the report designer very intuitive and pleasant to be used. See the following screenshot for the visual details.

As seen in the above image, the Report Explorer tab on the right will show the report’s hierarchy. Inside there, you can see the already defined data sources and parameters. All report components also will be listed here. In addition, you can also perform various operations, such as add, edit, or delete, for each data source or parameter.

Advanced Property Editing

Handling vary types of object with it’s specific editor is not an easy task. A report component has a lot of properties which is difference from each others. In this scenario, performance issue need to be considered. To overcome it without performance degradation, Report Designer employs the most advanced property editing control, UXPropertyGrid. The property grid features high-performance UI virtualization that allows blazing-fast properties listing and rendering when you select an object. See the following screenshot.

Independent Data Source Provider

Discussing about a report, you must be aware about the data source. As stated before, there are literally no constraints about the data source you should use, so you can utilize any kinds of data. All you need here is only to define the data definitions. You can define it manually like the following illustration.

But it would be very inconvenient if you need to specify a lot of data definitions manually. Actually you can import the definitions from a generated WCF RIA or DevForce assembly, without specifying it one by one. See the following illustration.

Powerful Design Tool with Drag-Drop Functionality

Drag and drop is one of the key feature in report designer. Report designing task will become more easy and simple with this functionality introduced. Various complex actions, such as object positioning, object creation, data field sorting, and much more, which usually need 3 or more actions to perform it, can be achieved elegantly by using drag-drop. Thanks to ClientUI’s robust Drag-Drop Framework, so our teams can quickly provide fluid drag-drop capabilities for the Report Designer.

Precise Layouting with Guidance Ruler and Snap to Grid Feature

Layouting is the most important step while creating a report, which will affects the final result. For some scenario, guidance ruler will be very helpful, especially for object positioning. As you can see on the below screenshot, those rulers are placed on top and left side of the design surface. Besides that, you can also enable Snap-to-Grid feature, which allowed you to precisely resize or move objects to a specific location.

Create Report Efficiently using Smart Tag

To create a report fast and more efficiently, you can take advantage of using the smart tag. Actually the smart tag has been designed to display some actions which is basically needed in most business scenario. It can save your time a lot rather than browse it from the property list.

Undo/Redo Capability

Undo/Redo is a very useful feature in Report Designer. As the name explains, it allows you to undo/redo a number of recent actions. Suppose you accidentally delete an object or something else, these actions still can be reverted easily.

Preview Report at Design Time

Another important feature not to be missed is the ability to preview a report at design time, because the iterative process of perfecting a report is accomplished by moving back and forth between the Preview and Design section. Of course, the preview section will show the result exactly the same as when it is printed. See the screenshot below.

Okay, I think it’s enough although there are still so much exciting stuff about the Report Designer. I’d love to hear if you have any comments, questions or feedback about our Report Designer. Thank you for reading and stay tuned for the next update.

Warm Regards,
Jack

ClientUI Reporting is Coming in 2013 R1

jackysite — Tue, 21 May 2013 05:04:55 +0000

As announced in our roadmap here, we’re going to introduce new major lineup for Silverlight and WPF in the coming release. A standalone reporting product is something that we’ve been working intensively since the past year. Designed from the ground-up, ClientUI reporting is a full-fledged XAML reporting engine which includes a powerful C# style scripting support for the most demanding business reports.

Our development team have put so much hard work on the new breed of reporting solution for Silverlight and WPF, so that it has the power and flexibility you need to produce great-looking reports. It will also feature blazing-fast rendering performance, great usability and superior user experiences.

In this blog post, I will share the high level overview of the reporting’s uniqueness and its key features.

XAML-based Report Engine

Creating a business report using Intersoft reporting tools is definitely easy. It will be very familiar for Silverlight/WPF developers and won’t spend too much effort to learn it as it’s completely defined using a XAML-like report metadata. Since the reporting XAML conforms to the Visual Studio specification, you get all the productivity features you loved, such as Intellisense, property value auto completion and more.

The following example illustrates a XAML report document.

The XAML report document introduces numerous great benefits, such as it support property value inheritance, an interesting feature introduced in Silverlight/WPF XAML, which enables child elements in report tree to obtain the value of a particular property from parent elements, inheriting the value as it was set in the nearest parent element. To make the report even more neat and simple, it also support style which can be shared by all of the elements inside the report.

Full Client Rendering. Datasource Agnostic.

Talking about a report solution, many developers are concerned about the datasource support. Does it support SQL Server? How about Oracle? And so on. Unlike many reporting solutions which are server-based reporting, it’s important to understand that our reporting solution fully runs on client-side, from the data source population to the pixel-identical report generation and rendering. This means there are literally no constraints on the datasource, so you can retrieve data from domain service, web service, WCF service, or virtually any kind of objects that can be serialized over the wire.

The independence to the server allows our reporting engine to perform many tasks by its own in the client-side. There are numerous great benefits associated to this design, such as faster and more responsive user experience in the client-side. And more importantly, the authored report document is truly self-contained, which means that a single report document is all you need to deploy for user consumption. And since the report is a XAML file, you can quickly deploy a report by uploading the file to the website – it’s that easy.

C# Style Scripting Engine

One of the key features of Intersoft report engine is the powerful scripting engine. Scripting is essential to any reporting solution, so we want to make sure that we have the best-of-breed scripting engine that is intuitive to developers and require minimal learning curves. The engine has to be dynamic enough to evaluate complex, multi-line syntax – not only a single line expression – to support the most demanding business report authoring.

I’m pleased to introduce our C# style scripting engine, the industry’s first report scripting engine that supports complex C# style statements and syntaxes. Moreover, you have access to full .NET library and classes, you can get or set a property of an object, or even create new objects – all within the report scripting. And the best of all, our script engine performs nearly as fast as the compiled runtime execution – thanks to the full DLR integration and expression binding implemented in our scripting engine.

The following example demonstrates the basic usage of the scripting.

In addition, the report engine also supports scripting in the report events which can be authored directly in the report document. This allows you to accomplish dynamic report authoring without requiring code compilation. The following example shows what you can do in the Printing event of a TextBlock using our C# style scripting engine.

// TextBlock_Printing(object sender, EventArgs e)
var totalAmount = Math.Ceiling([Order.Order_Details.Qty] * [Order.Order_Details.UnitPrice]);
var highestAmount = Math.Max(totalAmount, [AllOrderAmount]);

if (highestAmount > [Customer.CreditLimit])
{
	e.Text = "Over limit";
	sender.Foreground = Colors.Red;
}
else
{
	e.Text = "Good";
	sender.Foreground = Colors.Black;
}

Enterprise-Grade Report Viewer

Of course, the report document is useless without the viewer that can render it. In this release, ClientUI will ships a viewer that can render the report document. What makes it truly set apart is its unique capability in handling large report document without performance bottleneck, thanks to the bare-metal virtualization implementation. It employs the most advanced rendering technique that prevent application from being freezed when rendering a lot of report pages.

In general, report rendering can be done in two ways, which can be set easily through the LoadingMode property. By default, all of pages will be rendered when report is loaded. Then busy indicator will be shown, prevent the report viewer from being accessed, until report is completely rendered. This is the mode that implemented in most reporting solutions in the market.

Freezing the report viewer while the report is being processed may sound just fine for reports with only a handful of pages. The main problem here is you may not have ideas how many pages that your report may eventually generate. It could be dozens of pages, or hundreds of pages, depending on the business data size. In this case, users will notice the significant slowness of the report generation, and worse, thinking that the application has crashed after waiting for minutes.

This is where our innovative background report generation comes to rescue. We invented very sophisticated techniques that allow the report generation to be done in the background, while updating the user interface without sacrificing performance. This makes the user interface truly responsive and thus translates to great user experiences. With this mode, users can view the report as soon as the first page is rendered, and scroll down as more pages are rendered in real-time. See the screenshot below.

Not only displaying report from the supplied data, it’s also possible to display a report based on user input at run-time. Our ReportViewer has provide a mechanism to generate and display the parameter dialog based on the report document. It’s really not an easy task to create the parameter dialog that handle different parameter type for each report you have manually.

As you can see in the figure above, the report viewer also implement the sophisticated viewing features already invented in ClientUI’s document viewer, such as printing, precise text selection, copy to clipboard, zooming, and searching. On the left panel, users can easily preview pages in a thumbnail form and navigate throughout the report pages. Actually the thumbnail will be rendered exactly same with the real page’s appearance. See the screenshot below.

To navigate through the section in a report, you can browse it using bookmark feature in ReportViewer.

In addition, our ReportViewer also provides a mechanism to display a report list which can be retrieved through many ways, such as directories lookup, from XML file, and etc. It also can be easily customized to overcome some specific scenario.

Modular and Extensible Architecture

ClientUI will ship the report engine with various built-in report controls, which generally used in most of line-of-business scenarios. Unlike other reporting solutions, Intersoft reporting engine is designed with highly modular pattern, instead of being bundled in a huge code base. You only need to include what you need, so you can maintain the solutions to be lightweight. Built with extensible capability, it’s also possible for you to add a custom report control to overcome your business specific scenarios.

That’s all for now. Hopefully this blog post gives you a high level overview of our upcoming reporting. On the next post, I will share more interesting features, the report designer parts, and much more. Thanks for reading, and stay tuned!

Regards,
Jack