Author Archives: handy23

Announcing the New Community and ClientUI Website

The Intersoft 2014 release delivers not only a great deal of tools, but also a multitude of new range and improved services dedicated to all our customers. You can read about our 2014 release highlight and introduction of our new Developer Center and Git Center here.

In this blog post, I want to share several important services that we have launched together with the 2014 release. This includes the revamped community portal, now with ability to submit product feedback and report bugs which I’m sure you’ll find them really useful. In addition, we have also launched a brand-new, completely redesigned ClientUI website.

Improvements to Intersoft Community

We are proud to bring you the new face of our community portal. You will see cleaner and more elegant user interface design based on the Intersoft’s user experiences which results to more intuitive navigation and easier access to most important functions like search, starting a new thread, and more.

When you visit the community home, you will now see the new design such as seen below.

Community Home

The text editing experience has also been significantly improved. It now sports a modern interface for the text editor with improved performance. Furthermore, the file upload component integrated to the editor has been significantly improved in this release. You can now upload files in the background asynchronously with no more file corruption. The file upload component has also supported the latest Safari for Windows and Mac as well as IE 11 which use special multipart specifications.

Modern TextEditor

Introducing New Product Feedback

One of the major improvements that our web team have been working with in the past months is the ability to let our customers easily submit product feedback and bug report. We put user experiences at our top most priority and concern. We definitely do not want our customers to re-login to a different site just to submit feedback or report bugs – unlike many other vendors which simply rolling out a separate site with disjointed experiences.

That said, I’m thrilled to announce the launch of our new product feedback system – built right into the heart of our community experience.

In addition to questions or discussion, you can now post product feedback including Feature Request or Bug Submission – all from the community site. You can quickly start from creating new discussion through the button such as shown below, then choose the thread type. It’s so simple and easy.

Create New Discussion
Alternatively, you can also easily find the product feedback option in the thread list or thread detail page through the Create New drop down.

See the following screenshot.

Create New Discussion
Once you arrived to the product feedback page, you can choose the feedback type, whether it is a bug submission or a feature request. You will also see a specialized form dedicated for this new product feedback type, such as the development environment information, operating system, product builds, and more.

The text editor will also automatically transform into multiple-section editor where you can conveniently fill in the steps to reproduce, description, and more – all in a beautiful text editor interface.

New Product Feedback
Another interesting feature we added is “Like this”. You can put “Like” on the thread which you think provide helpful solution for your problems. This will help us analyzing and evaluating the product feedback you submitted. Ultimately, we hope that you enjoy many of these new improvements which give you greater experience to work with us and the Intersoft’s community.

Like this

ClientUI Website Redesigned with Authentic Intersoft Experiences

As if it weren’t enough, this release also includes a major redesign to our ClientUI website to celebrate the 10th major release of our Silverlight and WPF product lineup.

You can now browse and discover all ClientUI controls with simple, clean and elegant look and feel. Consistent with Intersoft’s authentic experiences, you can now easily navigate to different part of the sites thanks to the smooth floating toolbar. The translucent design lets you focus better on content and brings you a more comfortable way to interact with the website such as searching information, accessing to the download or buy button, and so on.

Smmothing Floating Toolbar

The major redesign of the ClientUI website includes full support for Retina display with true HD quality. You can view all images in any Retina or HD devices without compromised image quality or distortion. Featured Showcase and navigation controls have been totally revamped to show all rich features that you will be interested to see.

Featured Showcase

We also revamped our navigation for all controls. The new navigation is placed at the top, no longer at the left side. With this design, you can learn quickly discover the key features available in each component. To experience it directly yourself, please visit the new ClientUI website here.

Enhanced Control Feature Overview

Last but not least, we hope you enjoyed all these new, exciting improvements. We are striving to create the world’s best products with the most excellent services and support. Again, thank you for your feedback and continuous support so far!

Cheers,

Handy 

Introducing the New Team Developer in Intersoft Web

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.

Register New Developer

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.

Prompted to Assign license copy

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.

Developer Manager

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.

New in 2013 R1: WebScheduler 4

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.

The New Modern Default Style

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 Callout

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

Month View

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

Year View

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.

Timeline View

Agenda View

Split View

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.

Modern EdittingForm UI

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

Coming soon in 2013 R1: New Features for ASP.NET Lineup, All-new Modern UI Themes, and more

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.

Spell check for multiple sections

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.

All Modern UI experience for integrated controls

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.

Modern UI theme across all visual elements in WebTextEditor

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

New DialogBox UI

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

Accordion styling based on accented color

WebRating

WebRating styling based on accented color

WebCalendar

WebCalendar Green

WebCalendar Orange

WebProgressBar

ProgressBar Green

ProgressBar Orange

WebSlider

Silder Green

Slider Orange

WebListBox

WebListBox with Modern theme

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.

Horizontal WebListBox

WebSlidingMenu

SlidingMenu Blue SlidingMenu Conversation Blue

SlidingMenu Orange SlidingMenu Conversation Orange

WebRibbon

WebRibbon with Modern theme

WebRibbon with Modern theme

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

Enable HTTPS mode in SqlReportViewer and SQL Report Service

Normally, SQL Report Service (SSRS) is configured to run in HTTP by default. In this blog post, I will show you the steps required to configure the SSRS to use HTTPS mode, and how to configure the SqlReportViewer control to target the HTTPS-enabled report server.

First, you can set HTTPS mode in SSRS by clicking Advanced button.

SSRS Configuration

When configuring HTTPS, please use a valid Certificate for HTTPS. In this case, please contact your Certificate vendor.

Once SSRS has been configured HTTPS, it will look like the following screenshot.

SSRS HTTPS Configuration

Now that the SSRS server has been changed to HTTPS, the ReportServer property of the SqlReportViewer needs to be changed as well.

Example:

<Intersoft: SQLReportViewer ReportServer=”https://win7-x32-1:443/ReportServer”/>

Finally, in order to support HTTPS mode completely, you need one more additional setting in the web.config of the web application that hosts the Silverlight application. Otherwise, you will get the error below.

Error Configuration

To resolve the error, change the security mode from TransportCredentialOnly to Transport in web.config. These changes are important due to the nature of HTTPS which requires more secure communication channel.

The code in the web.config looks like the following.

Config Changes

If you have any difficulties or issues regarding this scenario, please feel free to leave your comment, or post your questions to Intersoft Community.

Warm Regards,
Handy

Customize UXFlow Appearance Based on Item Position

The latest ClientUI release (2011 R2 SP1) introduces several enhancements for UXFlow control. Some of the significant enhancements are the new AutoReflection property and PositionStates visual states. They are introduced to set different styles in UXFlowItem according to its position.

The new PositionStates enhancement enables you to customize the layout and appearance of the item based on the flow position. See the following illustration.

Customize UXFlowItem based on the position

In this blog, I’m going to share how to achieve the above scenario in a step-by-step walkthrough.

1. Put additional text to the UXFlowItem.

You will need Microsoft Expression Blend to edit the ItemContainerStyle of the UXFlow control.Edit ItemContainerStyle

After the generated template is shown, put the text in CoverElementPerspective. CoverElementPerspective contains the ImageLoader of UXFlowItem. That’s the reason why the text requires to be put in that element. In this case, TextBlock is used as the text.

To easily maintain the layout, let’s use Grid and StackPanel container with configuration as shown below:

<Intersoft:ContentPerspective x:Name="CoverElementPerspective" AutoRefresh="False" EnableReflection="{TemplateBinding EnableReflection}" VerticalContentAlignment="Bottom">
     <Border Background="Silver" BorderBrush="#8D8D8D" BorderThickness="2" CornerRadius="8">
          <StackPanel>
                 <Grid >
                        <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                                   <ColumnDefinition/>
                                   <ColumnDefinition Width="Auto"/>
                              </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                        <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Intersoft:ContentTransformer x:Name="ContentTransformer" Grid.ColumnSpan="2">
                               <TextBlock Text="{Binding Contact.Name}" FontSize="24" Margin="4" HorizontalAlignment="Center"/>
                        </Intersoft:ContentTransformer>
                        <Intersoft:ImageLoader Grid.Row="1" Grid.Column="1"   ImageStretch="None" x:Name="CoverElementImage" AutoSyncPerspectiveReflection="False" ImageSource="{TemplateBinding ImageSource}" ProgressBarHorizontalAlignment="Stretch" ProgressBarVerticalAlignment="Bottom" ProgressTextVisibility="Collapsed"  ProgressBarMargin="15,0,15,15"/>
                </Grid>
                <StackPanel x:Name="info" >
                        <TextBlock Text="{Binding Contact.Email}" TextAlignment="Center" FontSize="10" />
                        <TextBlock Text="{Binding Contact.Twitter}" TextAlignment="Center" FontSize="10"/>
                </StackPanel>
         </StackPanel>
    </Border>
</Intersoft:ContentPerspective>                                                                                                                                                                                                                                                                                                                    

2. Implement the visual state and switch the position by using PositionStates in VisualStateGroup.

As stated before, PositionStates is available only in the SP1 release.

<VisualStateGroup x:Name="PositionStates">     
     <VisualState x:Name="LeftSide"/>     
     <VisualState x:Name="Center"/>     
     <VisualState x:Name="RightSide"/> 
</VisualStateGroup>

The PositionStates is automatically generated after you use EditItemContainer template.

Center is the default state when an item is selected. Therefore, you only need to customize position, animations and styles for the LeftSide and RightSide.

<VisualStateGroup x:Name="PositionStates">
      <VisualState x:Name="LeftSide">
             <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Transform)" Storyboard.TargetName="ContentTransformer">
                          <DiscreteObjectKeyFrame KeyTime="0">
                                 <DiscreteObjectKeyFrame.Value>
                                        <CompositeTransform Rotation="-90"/>
                                 </DiscreteObjectKeyFrame.Value>
                          </DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Margin)" Storyboard.TargetName="ContentTransformer">
                         <DiscreteObjectKeyFrame KeyTime="0" Value="20,20,0,20">                     
			 </DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ContentTransformer">
                     	 <DiscreteObjectKeyFrame KeyTime="0">                          
			 	<DiscreteObjectKeyFrame.Value>                               
					<System:Int32>1</System:Int32>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ContentTransformer">
                        <DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<System:Int32>2</System:Int32>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="info">                     
			<DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<Visibility>Collapsed</Visibility>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>          
	     </Storyboard>     
       </VisualState>     
       <VisualState x:Name="Center"/>     
       <VisualState x:Name="RightSide">          
	    <Storyboard>               
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Transform)" Storyboard.TargetName="ContentTransformer">                     
			<DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<CompositeTransform Rotation="90"/>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>               
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Margin)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0" Value="0,20,20,20">                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>2</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ContentTransformer">
                    	<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>1</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>2</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="info">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<Visibility>Collapsed</Visibility>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>         
	   </Storyboard>      
     </VisualState> 
</VisualStateGroup>

3. Set AutoRefreshReflection to true.

When using the default UXFlow configuration, the reflection will be automatically cached. This may cause a reflection issue while switching the styles. To avoid this issue, simply set AutoRefreshReflection to true.

You can also download the sample project for your references.

I hope this post can give you some insights about styling with UXFlow control. As usual, feedback and comments are always welcome.

Warm Regards,
Handy

Improve Page Performance in WebGrid When Used With WebMenuBar

Recently some customers reported that they experienced performance issue in their page which contains WebGrid along with WebMenuBar control. The issue is noticable when using Internet Explorer browser to view the page. After further research, this performance issue occured only when the Grid has AutoFitColumns property set to true while the WebMenuBar is using predefined styles that produced from the server-side settings.

Apparently, Internet Explorer has a serious flaw in performance when a script is trying to add styles programmatically while loading, and at the same time when layouting is performed by other scripts.

To eliminate the performance issue, all styles in WebMenuBar should be defined as CssClass instead of using server-side predefined styles.

For comparison, I have attached two samples (with and without CssClass). Run the samples and compare the performance difference between them.

Note: This technique also works on standalone WebToolBar which causes the same issue.

Regards,
Handy.
Support Engineer.