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

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

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

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

Advanced Functionality Meets Beautiful Design

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

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

Introducing WebUI Unified Theming

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

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

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

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

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

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

Bootstrap-themed WebUI

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

WebButton

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

WebProgressBar

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

WebTab

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

Coming in 2015 R2

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

Cheers,
Nicholas Lie

Last year, we successfully redesigned our website and brought account management together in a single, authentic Intersoft experience. Today, I’m pleased to announce that we’ve completed a major milestone in our roadmap to migrate Developer Network to the main Intersoft’s website which features greater usability and latest web standards support such as HTML5 and CSS3.

Introducing the all-new, redesigned Team Developer, you can now easily manage the licenses for your developer team, create new company account for your team, assign and remove subscriptions for your team, and quickly review the summary of your licenses such as the total and occupied licenses. Now, you can also see your account and license information through mobile, so you don’t have to question on its portability. Finally, you can also delegate the Developer Manager role to someone in your team, if you prefer.

Let’s tour the new Team Developer!

Team and Licenses Management Simplified.

The all-new Team Management is now fully integrated to the Intersoft Account portal under the Team tab which can be easily enabled if you’ve purchased multiple licenses. It features an intuitive and easy-to-use interface that conforms to Intersoft’s aesthetic standards, allowing you to conveniently manage your licenses and team developers in a much streamlined interface.

With just a button click, you can easily add your developer into the team, or remove them as they’re no longer in charge. You’ll be presented with a new account dialog – now revamped with only important fields in cleaner interface, such as shown below.

Once registered, the Team Management smartly detect available licenses that can be assigned to the new member. You can  now simply check the subscriptions or individual licenses, and tap the Assign button to finish. It’s that easy – see the following illustration.

Streamlined Corporate Info Management.

If you have not registered as Developer Manager, you will need to enable your account as Developer Manager and setup corporate information before you can add members to your team. Setting up the corporate information is now easy and painless – thanks to the clean, intuitive form design which now shows only relevant fields. The new corporate information screen can be seen below.

As seen in the above illustration, you can delegate the developer manager role to the other registered team member if you prefer. However, once you delegated the role, you are no longer able to manage the Team Developer as you are no longer the ‘Developer Manager’.

In the last section of the page, you can now easily review the ‘License Summary’ which shows information the total licenses that you have under your team. The summary will also show the amount of available and occupied licenses. This will help you in distributing the licenses effectively among the members.

As you see above, the new Team Developer features incredibly intuitive user experience with modern look and feel. Everything is thoughtfully designed – from the icons, styles, and layout. You can easily add product or remove it by simply hover on the item in the list.

In this redesign, a lot of unnecessary and tedious steps have been removed. Our goal is to make it easy and simple for you to manage your account and licenses for your development team. I hope you loved the new Team Developer as much as we love building it.

Happy new year to you from all of us at Intersoft! Thank you for being part of the Intersoft community in 2013. Your success means everything to us. Looking ahead, the new year is ripe with possibility. At Intersoft, we resolute to serve you better with improved products and new product category that will truly save development time and cost, as well as providing you with even better, responsive support.

We’re very excited to welcome 2014 with some great product plans and roadmap that we think you will really love. However, before we get into the new year’s roadmap, let’s take a quick recap on the achievements we’ve made during the past year.

2013 Year In Review

2013 was absolutely an incredible year for us! Considered our busiest and most productive year ever, we managed to ship over 400 high quality components across 7 platforms. And for the first time ever, we expanded our product portfolio to 4 new platforms and deliver them at once in a single release. At a glance, all 2013 product plans were successfully delivered, and exceeded much more than the plans.

Here are the list of our top 8 achievements that I would like to share.

• Shipped Crosslight — the industry’s first advanced toolset for cross-platform native mobile apps development supporting iOS, Android, Windows Phone and Windows 8
• Delivered 400+ UI components across 7 platforms, covering desktop, RIA, web, and mobile apps development — all packed with comprehensive documentation and tons of samples
• All 40+ ASP.NET components revamped to support latest web standards, HTML5 and CSS3
• Released Reporting lineup for Silverlight, the industry’s first reporting tool offering end-to-end, comprehensive business reporting capabilities.
• Redesigned websites, streamlined account and license management with single sign-on, yielding more compelling and engaging user experiences
• Modernized Intersoft experiences leveraging balanced design aspects that takes account minimalism, content exposure, layout, identity and typography.
• Major product rebranding with the introduction of Premier Studio, the first time in our history as we’re expanding our products portfolio into new market segments such as the cross-platform mobile development industry
• Joined Visual Studio 2013 Launch Partner, releasing a major service pack that updates all components to support Visual Studio 2013, Internet Explorer 11 and Windows 8.1 in timely fashion

2014 Focus — Enterprise Mobile Development Made Easy

In 2014, we will be laser-focused on the cross-platform mobile development tools. Our works in 2013 is just the beginning of our holistic mobile roadmap. Building on the foundations laid in the initial Crosslight release, we’re striving to make cross-platform enterprise apps development even easier and simpler with a multitude of new features, components and services that work reliably across multiple platforms such as iOS, Android, Windows Phone 8, and Windows 8.

Our team is currently hard at work creating the next iteration of Crosslight which will make available many functionalities common to line-of-business apps development. Announcing “Crosslight 2”, we will be adding over 200 new features and dozens of new, highly reusable services to the already powerful mobile toolset.

The new Crosslight will be the industry’s first, one of its kind, that lets you create the most demanding business apps that leverage advanced capabilities such as offline data storage, pending changes management, automatic synchronization to cloud, push notifications, user authentication, social network integration and much more. And better yet, all these services can be programmed in a single codebase — not each codebase per platform. So imagine how many months you can shave off from your development time table!

Building fully functional, usable data-driven apps is really time-consuming as there are a lot of things to consider. For examples, your apps need to be “timezone aware” if you have users located in different regions and time zone. Your apps need to handle two-way time zone conversion between the local device’s timezone with the server. Adding to the complexity — data synchronization, offline storage, and data editing — all need to be thoughtfully considered and integrated for them to work in harmony, ultimately producing great apps that are beautiful inside and out. Sounds too much hassles? Fear not — we’ve got it covered!

The new data services in the upcoming release will be built with “timezone aware” enabled by default. Furthermore, it will take account the best practices of building highly scalable enterprise-class apps, and consider every little detail that you might not aware of. All you need is simply consuming the services and customize the settings with a few lines of code, and Crosslight will handle the rest behind the scene.

To summarize the Crosslight roadmap, please take a look at the following diagram which lets you easily overview and compare the existing state of Crosslight with the expanded offering in the upcoming release.

As seen in the diagram above, the upcoming release will be strongly focused on enterprise data services and core mobile services such as discussed above which include entity services, authentication, social network integration and push notifications. In the second release later this year, you can expect more data visualization and user interface components optimized for the mobile apps scenarios.

An important announcement with regards to our release cycle, we will be adjusting the first iteration of the release to the beginning of the year while the second one is planned for the mid of the year. We believe this schedule changes are beneficial to us, our partners and our valued customers as the releases will occur in more appropriate timing for project planning, and more ideal time to market.

This blog post only provides a high level overview of the planned mobile tools roadmap. In the near future, we will post the complete details of the mobile features as well as the roadmap for other platforms such as ASP.NET and Silverlight in our public community forum. Stay tuned for the next announcement.

Last but not least, I hope you liked our upcoming product plans and roadmap. Please feel free to drop your comments or feedback related to the roadmap, or if you wish to see something in our next milestone.

All the best,
Jimmy

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.

<ReportDocument Name="Report1" xmlns="http://intersoft.reporting.com/schemas" ReportUnit="Centimeters">
	<ReportDocument.DataDefinitions>
        ...
	</ReportDocument.DataDefinitions>	
	<ReportDocument.Pages>	
		<ReportPage Name="Page1" PageHeight="29.7" PageWidth="21" Margin="1,1,1,1">
			<ReportPage.Components>				
				<HeaderBand Name="InvoiceHeader" LayoutBox="0,7.4,19,0.8">
					<HeaderBand.Components>
						<TextBlock LayoutBox="0,0,2.2,0.8" Text="Product ID" TextAlignment="Center"/>
					</HeaderBand.Components>
				</HeaderBand>

				<DataBand Name="InvoiceData" LayoutBox="0,9,19,0.8" ObjectDataSourceGuid="ab5ee58b31fd440aa34aaec8735abf29">
				...
				</DataBand>

				<FooterBand Name="InvoiceFooter" LayoutBox="0,10.6,19,0.8">
				...
				</FooterBand>			
			<ReportPage.Components>		
		</ReportPage>
	</ReportDocument.Pages>
	<ReportDocument.Styles>
        ...
	</ReportDocument.Styles>   
</ReportDocument>

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.

<TextBlock Text="@[Invoice.ShipPostalCode + ' ' + Invoice.ShipCity + ' ' + Invoice.ShipCountry]"/>
<TextBlock Text="@[string.Format('{0:C2}', (Invoice.UnitPrice * Invoice.Quantity * (1-Invoice.Discount)))]"/>

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

In my previous post, I shared about numoerus powerful and rich UI components that will show up in our next 2013 release for ASP.NET. In this post, I will continue to share about the next product lineup that will get major improvements in the upcoming release. Many of you have demanded new features and improvements in our flagship WebScheduler control such as better support for daylight saving in all view types, faster rendering performance, HTML5 and support for latest browsers such as IE 10 and Firefox 20.

We’re pleased to announce that the next release will include WebScheduler 4 which is strongly focused on core scheduling features and latest browsers support. It’s noteworthy that it will also sport the new modern UI with a host of enhancements and new features inside.

Better Daylight Saving Time (DST) Support

One of most anticipated feature requests that we received is to make better support for DST in WebScheduler. Our team has been hard at work and focusing to make DST support a reality in the next WebScheduler release which takes account a vast array of scenarios. By default, WebScheduler will automatically detect the DateTime settings in the server and apply it as necessary. This means that all you need to do is upgrading your project with the new WebScheduler assemblies – and you’re all set. There’s no additional settings that need to be configured.

New Modern UI Theme

In this release, you’ll be also seeing the new Modern UI visual theme. Beyond just simple CSS styling, many of the WebScheduler UI elements were completely revamped to match the Modern user experience, such as the addition of the accent-colored element, redesigned layout, and all-new icon set that conform to the Modern user interface standards. Please see the following screenshots in below.

As you can see, WebScheduler now have much cleaner look – from the tabs, calendar, to every grid lines and event. You might also notice that the event doesn’t depend on the background color anymore. The resources and event are now associated with each accent color that makes the content outstanding and beautiful. Of course, the Modern design is so much more than just styling, it also requires fundamental changes to the element structure and rendering.

In the next few screenshots, you can see that all views and elements are consistently redesigned to match the Modern visual theme.

The simple, clean and elegant UI for Callout when you select an event.

The year view gives stronger focus on content – thanks to the accent color usage in the Modern visual theme.

Only DayView, WeekView and SplitView apply the accent color at the top border side. For the rest of views event, the accent color will be applied at the left border side.

The TimeLine, Agenda and SplitView are beautifully designed in the Modern theme. Notice that all elements are rendered pixel-identically for the most elegant user experiences.

Last but not least, the built-in editing form will also receive the new Modern visual theme which will surely bring the entire scheduling experience to the next level.

With this new WebScheduler among many other major product upgrades lining up in the upcoming release, we will continue to deliver the best-of-breed ASP.NET components that boost your application development time and add great values to your apps with stunning user interface and powerful functionalities.

I hope you loved what we have to offer so far, and let me know if you have any feedback or questions.

Cheers,
Handy

As outlined in our 2013 product roadmap, we’re going to have very exciting new products coming up soon. There will be entirely new kind of lineups that we’ll introduce such as reporting and cross-platform native mobile development tools. On top of that, we will also be making available several major product upgrades to the ASP.NET lineup which include WebScheduler, WebTextEditor, WebEssentials, WebInput and the rest of the ASP.NET components.

All of the upgraded components will feature full HTML5 and CSS3 support. This means that – for the first time ever – our entire ASP.NET lineup have fully support HTML5. This allows you to use any combination of the components in your HTML5-powered web apps. Furthermore, we’re implementing nearly 90% of user-driven feature requests and reported issues.

In this post, I’ll share some details about the improvements and new features made available to the WebTextEditor and WebEssentials.

Improved Spell Checker and Redesigned WebTextEditor

The WebTextEditor suite is one of the products that will receive major updates in the upcoming release.  The WebTextEditor suite includes three components: text editor, spell checker and file uploader. All of them

One of the most frequently requested feature is the tighter integration between spell checker and text editor component. When integrated to text editor, the spell checker component has now supported spell checking in multiple sections. This allows users to simply press the spell checker button, and it will go through all the sections available in the text editor. See screenshot below.

More importantly, all the three components in WebTextEditor now fully support HTML5. This is a significant upgrade due to the various different editing behaviors across multiple browsers – even when they run on same HTML5 doctype.

Furthermore, the next generation WebTextEditor will sport the new Modern UI design consistently throughout the entire user interface elements – from the look and feel, colors, icons, panels to the status bar and tool bars. It’s important to note that, unlike competing products, our Modern theme is not just a simple visual styling, many various elements and layout are also revamped to look best with the Modern theme. Take a closer look at the screenshot below.

And here’s another shot showing the Modern theme with the enhanced Gallery task pane, context menu, dropdown button, and the rest of the input controls.

The same goes to the spell checker component. When used in standalone mode, the dialog box now sports Modern UI theme as well.

All-new Modern UI Themes

In the upcoming release, WebEssentials will also receive major version upgrade. It will  join the flagship product family to fully support HTML5 that renders identically in all modern browsers today.

As Microsoft-based software shop, you may have feel the pressure from your customers to align your products’ user interface to match the latest design from Microsoft. You’re in luck – all 15+ user interface components in the WebEssentials umbrella will sport Windows 8 style (“Modern”) user experiences. Get a closer look at the WebEssentials components with the Modern theme design applied. I hope you liked them!

WebAccordion

WebRating

WebCalendar

WebProgressBar

WebSlider

WebListBox

In addition to the new theme, WebListBox will include a much anticipated feature: Horizontal orientation. You will now be able to use the listbox as scrolling toolbar or navigation menu with intuitive user experiences.

WebSlidingMenu

WebRibbon

Summary

In this blog post, I’ve shared some high-level details toward the upcoming release for the ASP.NET lineup. This will be a very exciting release as we’re renewing all our ASP.NET components to support the latest technology. None left behind! This means that you’ll be able to use any combination of our tools in your HTML5-based project without worrying the compatibility issues across major browsers, including recent ones such as Firefox 20 and Internet Explorer 10.

And with the all-new Modern UI design theme made available to the entire user interface components, you can align your application’s look and feel with the latest Microsoft’s user interface design, and further take your application to the next level.

In the next post, I will share the rest of our ASP.NET product family that will join the HTML5 and Modern UI revolution, including WebScheduler, WebInput, and WebTreeView. Thanks for reading, and stay tuned for the next post!

Warm Regards,
Handy