As we continue to grow, we continually seek for a better place to live. That’s why we’ve move d to a better, more cozier place to stay. We’ve moved everything there to make sure nothing gets left behind. Without further ado, pay a visit to our new home: blog.intersoftpt.com. Don’t forget to bookmark as well!
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!
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.
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.
We have released a new, easy-to-understand video tutorial that shows how you can easily extend Crosslight and leverage the sophisticated IoC (injection of container) feature into your application. In this video, we will show how you can create your own custom presenters to integrate into Crosslight-powered solution, all in easy to follow step-by-step tutorial.
You have seen how easy and straightforward it is to customize and extend Crosslight functionalities to match your business process. Imagine how you can unleash your ideas and creativity to implement them across multiple mobile platforms to give the best of user experience.
Using this approach, not only you have the freedom of creating message presenter natively, also a manageable code maintenance, since the caller is a single, centralized call from the view model, with native implementations in each platform. In the next video, I will discuss how you can create your own custom mobile services to use with Crosslight while still leveraging the IoC feature.
You can find the source code for this video at our GitHub: http://github.com/IntersoftSolutions/CustomPresenter. Don’t forget to subscribe to our channel for more videos weekly! For more information, visit our site at: http://www.intersoftpt.com/Crosslight.
Cheers,
Nicholas Lie
In the previous HTML5 development part 1, we have shared our development roadmap for several WebDesktop components which were redesigned to fully support HTML5. As you may already aware, the WebDesktop UI suite contains dozens of standalone components ranging from tab control, navigation panes, to desktop and windowing controls.
In this blog post, we’re going to discuss more about the explorer pane and some windowing controls that have been redesigned for HTML5. WebExplorerPane is a well-known UI component to create rich user interface where a series of navigation items are divided into sections.
Rendering layout in HTML5 is much more complex than HTML4. The new specification in HTML5 introduces a number of limitations of TABLE usage thus we spend extra efforts to modify the layout rendering that use TABLE into DIV. In other words, we’re going to create a new WebDesktop version that fully supports HTML5 and CSS3. The goal is to create rich controls with less foot print to improve the overall performance.
Tweaking WebExplorerPane to HTML5 is quite challenging. Most of the issues are coming from the layout and behaviors. As seen in the below figures, the Fig 1.1 shows the rendering problems – notice the padding and the layout issues. The Fig 1.2. shows the tweaked version with pixel-perfect layout and structure.
Moving on, we found that expand and collapse behaviors in WebExplorerPane are no longer working in HTML5. Initially, the explorer pane is set to collapse. However, the script behind explorer pane doesn’t work as instructed. This caused the expand/collapse function to fail, which you can see in Fig 2.1 and Fig 2.2 screenshots below.
At the current state, the WebExplorerPane has been completely revamped with the expected behaviors and smooth animation. It’ll be shipped as part of WebDesktop 4.0 in the upcoming release.
Layout and behavior issues are also found when rendering WebDesktopManager in HTML5. As you can see in Fig 3.1 screenshot below, the desktop window is gone from the screen.
The taskbar is rendered well in WebDesktop, but the others are not. This issue occurs because the height’s configuration in HTML5 is more complex. However, this problem can be solved by changing the height of DIV container to 100%. 
As a result, the window which is normally visible now becomes invisible due to overflow in the table. When the overflow is removed, it still fails rendering the window as you can see in Figure 3.3.
After exploring a lot of sources and references, we’ve decided to eliminate the usage of TABLE because it will produce more complex issues in the future development. Therefore, we decided to use the DIV markup as the main layout rendering in all the windowing controls.
In conclusion, there are several things that we’ve modified in rendering layout, such as WebDesktopManager uses DIV structure so that it’s expandable as well as its window, and the window header’s height is adjustable. The taskbar and shortcut structures are stay the same for now, but we will look forward their next development in the future.
In overall, the result can be seen in the figure below:
The enhancement also applies to WebDesktop’s UI interaction such as resizing or moving the window. As you can see in Fig 4.1 below, the layout structure is not well-rendered and it is again due to table structure issue in HTML5.
After several modification on the layout and structure by using the DIV markup, the issue in the window controls can be elegantly solved. See the following figure.
In addition, we’ve successfully tweaked the entire user interaction features such as window moving, resizing, and drag-drop. With these enhancements, the shadow mode is rendered well when you move or resize the window. See Fig 4.3 and Fig 4.4 for moving and resizing window.
In this blog post, we’ve just scratched the surface of the next chapter of our UI tools. Our goal is to revamp all WebDesktop family members to fully support HTML5, and watch out for the brand-new themes that we will ship in R2. Stay tuned for our next development series!.
Cheers,
Handy
WebUI Studio 2012 R1 has been released a month ago and we’ve developed several new controls and enhancements to the existing controls. As you know, we already delivered WebGrid 8 and WebCombo 6 in the release which includes full support for HTML5 and CSS3.
For the R2 release, we’re putting major efforts on supporting HTML5 to the rest of our ASP.NET components, including the 30+ WebDesktop UI components and WebEssentials suite. Even though HTML5 is still in the development phase, nowadays many developers are speeding up their web development to HTML5 technology. Looking into HTML5 capability and advantages, it’s surely promising for web development in the future.
The biggest challenge that we found during development in HTML5 is its layout. Rendering layout in HTML5 is more complex than HTML4. Based on HTML5 discussion forum, in order to make the layout’s size in percentage (%), the parent level height must be defined as well. Mostly, both <html> and <body> tags are set to 100% for its height.
We realize that WebDesktop structures are mostly using table. However, using table is not recommended because it has a limitation in HTML5. Therefore, we decided to revamp/modify WebDesktop’s structures to fit user’s requirement.
In this first series of my blog post, I’ll be sharing our experiences on the HTML5 development for the 2 members of WebDesktop family, WebCallOut and WebTab. Let’s take a deep look of what we’re currently doing with them.
The first time when we convert WebCallOut to HTML5, we got numerous issues with the layout such as shown below.
Notice that the rendering is completely messed up, and the pointer is also offset from the correct position.
After improving the control to support HTML5, the layout and rendering now shows perfect results, such as shown below.
In the HTML5 migration, we tried our best to achieve pixel-identical results when comparing to the HTML4 implementation. So, if you host the control back to HTML4 doc type, the results will be identical – all with the same codebase.
For the WebTab control, we decided to revamp the structure only for the content because the content itself needs to be in fluid. You’ll see numerous layout issues when using WebTab control in HTML5 such as shown below.
During the research phase, we found that the usage of table no longer support fluid content in HTML5. The percentage height of fluid content is getting smaller or rather bigger than its container. When we tried to specify height in fluid content to pixels, it works like charm. Unfortunately, this method makes WebTab’s performance slower than before. Ultimately, we decided to revamp the entire rendering structure and no longer using table as the container to achieve the fluid layout.
In addition, our team pay detailed attention on the UI aspects such as the tab header position and alignment, fixing the animation for active and normal tab header, adjusting style for complex image, and improving the style caused by the tab header’s height.
The tab header that uses complex images will also produce undesired results, which is caused by the table structure that involves multiple rows, shown below.
Thankfully, we found that it is possible to use one row in order to fix the WebTab and put additional final touching. After applying the new technique, the WebTab control now renders perfectly.
Hopefully this post gives you insights and big picture of what we’re doing for the HTML5 initiatives. I will share our development progress for the other controls in the next series of blog posts. So, be sure to keep updated with the next series of our development story.
Cheers,
Handy
Intersoft Solutions Corporate Blog 