Starting from Premier Studio 2016, WebUI took a completely new look and feel with the new Unified Theming made for ASP.NET. As the name implies, Unified Theming allows you to impose a unified design language that applies to the entire suite of WebUI components with a modern CSS theming language that combines mixins and overridable variables.

This blog post is simply made to show you how to create a new Unified Theming project using the new project template that comes with Premier Studio 2016 or higher.

What You Need

To follow this tutorial, simply install Premier Studio 2016 or newer. You’ll also need to have Visual Studio 2012 or higher installed on Windows 7 or newer. If you haven’t installed it yet, please download it from our site. Or, simply login to your account.

Let’s Do This

Simply open up your Visual Studio instance, then hit New, Project. From the dialog that appears, choose Visual C#, Intersoft Solutions, ASP.NET, then choose Intersoft Unified Empty Web Application.

Enter the necessary details such as the project name, location and solution name. Hit OK when you’re done. To run this project, simply right-click on the Default.aspx file, then choose View in Browser.

You’ll get the following screen.

This new Unified Theming template is intuitively design so as to provide basic ideas on how to get started quickly with a new WebUI Unified Theming application, complete with working data bindings for WebCombo, WebInput, WebGrid, and more. At the bottom part of this page we’ve also provided several business-inspiring samples to help inspire your next big web applications.

Wrapping Up

To learn more what you need to do to use the new Unified Theming in your existing applications, check out the documentation. Or, if you prefer to try migrating an existing WebUI sample, for example the WebGrid’s Enterprise sample, I highly recommend you to check out my previous blog post, where I’ve covered a step-by-step walkthrough on how to migrate the sample to use Unified Theming.

To get a better grasp on the Unified Theming feature and what customizable areas available for each control, feel free to check out these great documentations:

• WebGrid Modern Theme Style Reference
• WebCombo Modern Theme Style Reference
• WebInput Modern Theme Style Reference
• WebDesktop Modern Theme Style Reference
• WebScheduler Modern Theme Style Reference
• WebEssentials Modern Theme Style Reference
• WebTextEditor Modern Theme Style Reference
• WebTreeView Modern Theme Style Reference

We can’t wait to see what you’ve built with this new Unified Theming feature. Let us know in the comments section below!

Till next post,
Nicholas Lie

We’ve recently released our new Unified Theming for WebUI, which will dramatically alter the look and feel of your WebUI-powered apps, giving it a fresh, modern look and feel. But, how will you be able to take advantage of this new feature? In this post, I’m going to show you how convert the WebGrid Enterprise sample to use the new WebUI Unified Theming. At the end of this post, you should have the following result.

Here’s a single image of the revamped sample in full Unified Theming glory.

Ready to begin?

What You’ll Need

Before you begin, you’ll need to ensure that you have properly installed Visual Studio 2012 or higher and have installed Premier Studio 2016 (or higher). If not, feel free to perform Request Trial from our site to get the latest installer. Or, if you have purchased a subscription, you can easily obtain the latest version of the installer by simply signing in to your account.

Let’s Begin.

In overview, here’s what we’re going to accomplish:

• Create a new Unified Theming project using the new Project Template.
• Import the existing WebGrid’s Enterprise sample (from the old sample) to the new project.
• Remove all style-related attributes.
• Convert the sample to use the new Unified Theming.

Create New Unified Theming Project

Open up Visual Studio and create a new Unified Theming project by selecting Visual C#, Intersoft Solutions, ASP.NET, Intersoft Unified Empty Web Application, as shown in the illustration below. Let’s call this project FirstUnifiedTheming and hit OK.

Let’s import the Enterprise.aspx from the old sample to our project. To do this, right-click on your solution, then choose Add, Existing Item.

Navigate to C:\Program Files (x86)\Intersoft Solutions\Samples\For ASP.NET\ISNet.WebUI.Samples\cs\WebGrid and select Enterprise.aspx. Just select the .aspx file and its code-behind will be automatically added as well.

Now that you have the file imported, we need to convert it so that it will be compatible with Web Application. Select the file, then go to Project, then choose Convert to Web Application as shown below.

Removing Unnecessary Styles

By default, the Unified Theming project template provides a handy App.master file contained in the Master folder. So, we can use this master file for our imported sample. Change the MasterPageFile for the Enterprise.aspx from ./DefaultMaster.master to ~/Master/App.master.

Next, search for this file that contains any “style” attributes. To do this, press Ctrl+F on your keyboard and search for “style” (without the quotes).

Here are the list of attributes / elements that you have to remove within this file:

• UseDefaultStyle=”True”

• DefaultStyleMode=”Elegant”

• <CellStyle HorizontalAlign=”Right”></CellStyle>

• <CellStyle HorizontalAlign=”Center”></CellStyle>

Note that these are the attributes contained in this file. In your existing project there might be more “style-related” attributes that you need to remove.

Next, let’s fix the code-behind so that this project is compile-able. To do this, open Enterprise.aspx.cs, and delete this line.

using Intersoft.SampleFramework.V2009;

Also remove, the three methods: WebGrid1_AddRow, WebGrid1_UpdateRow, WebGrid1_DeleteRow. Then, in Enterprise.aspx, remove this line.

Since this is a Web Application project, not a Web Site project, you’ll need to rebuild it once before you can preview the result in the browser. To rebuild the project, right-click on the project/solution, and hit Rebuild.

After the rebuild process is done, let’s try viewing this project in the browser. Right-click on the Enterprise.aspx file and choose View in Browser.

When you run the project, you’ll get the following error.

This indicates that the WebGrid was unable to connect with the data source. Let’s resolve this by adding the necessary database file and modifying the Web.config‘s connection string.

Adding the Database

To make our project’s file organization neat and less cluttered, let’s create a new folder called Common at the root of the project. Right-click on the project and select Add, New Folder.

Give it a name of Common. Let’s add the database file used for the project. Right-click on the newly-created Common folder and choose Add, Existing Item.

Choose the file named dsEnterprise.xsd contained in the C:\Program Files (x86)\Intersoft Solutions\Samples\For ASP.NET\ISNet.WebUI.Samples\cs\WebGrid\App_Code.

Repeat the process for AppData folder. Right-click the AppData folder, choose Add, Existing Item. Then choose Northwind.mdb file contained in C:\Program Files (x86)\Intersoft Solutions\Samples\For ASP.NET\ISNet.WebUI.Samples\cs\WebGrid\App_Data.

Next, we need to modify the SchemaType and TypeName of ISDataSource so that it will point to the correct database file. To do this, open the Enterprise.aspx file and perform a Replace All for the following string: SchemaName=”dsEnterprise (the unclosed quotes are intentional) to SchemaName=”FirstUnifiedTheming.Common.dsEnterprise (again, the unclosed quotes are intentional).

Repeat the process one more time for the TypeName. Search for TypeName=”dsEnterprise and replace it with TypeName=”FirstUnifiedTheming.Common.dsEnterprise. Save the file.

Lastly, let’s add a connection string in the Web.config file for this a new connection the Northwind database. Open up Web.config and add the following connection string to the ConnectionStrings node:

<add name=“NorthWindConnectionString“ connectionString=“Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\NorthWind.mdb;Persist Security Info=True“ providerName=“System.Data.OleDb“/>

You’re Almost There.

We’ve roughly finished the migration, but it’s still missing a few final touches. For now, refresh your browser to see the result.

As you can see, the WebGrid is now applied with Unified Theming. But there are are still two issues left:

• Adjusting the height of the WebGrid
• Providing the missing icons.

Let’s address these issues. To adjust the height of the WebGrid, you can easily do so by modifying the Height attribute of the WebGrid inside the Enterprise.aspx file. Give it a good value, perhaps 90%.

We also need to modify the height of the parent container to 100%. To do this, open up App.master inside the Master folder and add inline-style for the parent container with height set to 100%.

Next, let’s provide the missing image icons. To do this, right click on the Assets folder and select Add, New Folder.

Give it a name of images. Add the following images from this folder C:\Program Files (x86)\Intersoft Solutions\Samples\For ASP.NET\WebUI.Unified.Samples\assets\images:

• Customer.svg
• order-detail.svg (rename this file to order-details.svg)
• orders.svg
• shipvia1.svg
• shipvia2.svg
• shipvia3.svg

You should have the following images as follows.

Lastly, perform a Find and Replace for the following string inside the Enterprise.aspx file. Replace ./images with ~/assets/images.

Then, another Find and Replace for .gif to .svg. Save the file, rebuild the project and refresh your browser.

We’ve successfully set the WebGrid height to fill 90% of the parent container, in which the parent container has been set to 100% height, as well as providing the correct SVG icons for the WebGrid.

One cool thing about the SVG icons are they’re actually vector icons (SVG is a short form of Scalable Vector Graphics), which will retain its crispiness and hi-res colors when viewed in any devices with varying screens resolutions. To do this, try bumping up the zoom level to 400% or higher.

Conclusion

As you can see, adopting the Unified Theme in your project is quite simple and easy. To learn more about Unified Theming, I highly recommend you to explore the documentation about Unified Theming. You can find the link to the finished sample here.

In this post, we’ve learned how to create a Unified Theme project in the shortest and fastest manner using the project templates. In smaller projects, this approach is feasible, but not for larger projects. If you wish to focus solely on migrating your project to Unified Theming, you can follow this documentation: Applying Unified Modern Theme in WebUI Application.

You can also find local working samples once you’ve installed Premier Studio 2016 on your computer. To get started quickly with the local samples, please read my previous blog post.

Should you have any questions, feel free to initiate a live chat session with us and our team will get back to you as fast as we can.

Till next post,
Nicholas Lie

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

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

Accessing the New WebUI Live Experience

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

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

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

The Home Screen

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

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

WebGrid

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

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

Some of the top features demonstrated in this sample are:

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

Samples Navigation Experience

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

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

WebCombo

This the First Experience when you launch the WebCombo sample.

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

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

WebInput

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

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

Some of the new features demonstrated in this sample are:

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

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

WebScheduler

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

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

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

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

WebDesktop

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

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

WebEssentials

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

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

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

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

WebTextEditor

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

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

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

WebTreeView

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

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

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

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

Explore the Samples

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

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

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.

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