Contents tagged with html 5
-
Customizing HTML5 enterprise apps with Visual WebGui themes
This is the 5th post in our series highlighting new features of Visual WebGui v7. Here we discuss pre-built Visual WebGui themes that come standard with v7 - we will discuss the themes feature generally and show an example of how to customize your app with a theme.
Visit out blog for our entire selection of blogs
Gizmox BlogDesigning an HTML5 enterprise app is not the same as building a website
As enterprise app developers know, there are many differences in designing an HTML5 user interface to an enterprise app versus designing a basic website. While both require a sense of design, managing the look and feel of the many different controls, user input patterns, and screens of an app is different from managing the flat surface of a basic website. While a high end B2C app may warrant bringing in the skills of UI design specialist and the time to customize the look and feel of all of the controls and other application surfaces, many enterprise app developers building B2B and B2E apps are under budget and time pressure to rapidly adapt their existing apps to web and mobile. The themes feature within Visual WebGui7 provide an approach to rapidly designing or re-skinning the look and feel of your app with pre-built themes including Android, iOS, Windows, and more. As an example of how themes work, check out the calendar control in the Visual WebGui CompanionKit. Click "Themes" in the upper right to choose alternate themes and see how it changes the basic look of the calendar control.Using Visual WebGui themes to design a user interface for HTML5 apps
Visual WebGui themes affect the resulting user interface in 2 broad ways:- Themes are responsible for how the client application is rendered on a browser. For example, the theme defines that a TextBox is rendered on the browser as some levels of <div> tags with an <input> tag for the input.
- Themes affect how the the core application code drives client side behavior. For example, the theme also defines that the TextBox input area should be rendered in certain color and font size.
Working with Visual WebGui Themes
A Visual WebGui theme is defined by a set of controls that when applied, are responsible for all appearance and control behavior related properties. The controls in the themes designer are stacked in a TreeView format on the left side of the themes designer screen. When you click on the control level, a properties pane will appear on the right-hand side. Here you are able to customize the properties view of the app’s controls such as its BackColor, its BorderColor, BorderWidth, Font etc. To work on a specific section of a theme, you must work on that section’s family control such as “ButtonBase”, “ComboBox”, “CheckBox”, etc.Creating a new Visual WebGui Theme
Before we provide an example of customizing an existing theme, we will explain the simple detail of how you create a new theme based on another specific theme. You do this by creating a theme in Visual Studio (Add / New Item / Visual WebGui / Theme…) then you edit the source file for the theme and change the inheritance, so your new theme inherits from a specific theme. It may also deserve a mention that, as with all themes used in a VWG application, you need to register your theme in web.config (through the Registration tab in VS integrations).Customizing a HTML5 mobile theme
To simplify the explanation of customizing your very own HTML5 mobile theme, we will work on an existing android theme that looks like this:
We would like to change the default ForeColor for this entire mobile theme to the color fuchsia, the ListView border color to red and edit a specific arrow control’s color.
Let’s first customize the ForeColor of this Andriod mobile theme. Select the control level from the TreeView on the Left pane and edit the ForeColor on the properties grid on the right pane as shown below:
The resulting change will appear as follows in the given mobile web application:
As you can see, the ForeColor has changed across the entire app to the color fuchsia. Next, we would like to customize the bottom arrow image in this Android theme. The arrow is part of the ListView family so we would need to select the ListView family control on the left pane. The images associated with this family appear in the middle resources pane. In this example, we will customize the top “ArrowArrowLTR” arrow image. As we can see that it has been inherited to this theme (the small arrow on the bottom left is the sign that it is inherited), we need to save the image to our current theme before we could edit it and therefore we will right click on the image and select “override”.
Now that the image has been copied to our current theme (and is no longer inherited) we can go ahead and edit the image. Simply double click on the image and it will open in your graphic design software. Go ahead and edit it as you wish, change its color or texture if you like. Don’t forget to save it to the theme when you’re done!
Next, we would like to customize the BackColor of the theme from its current default color to red. We do not wish to apply the change to the entire app rather, only to the ListView level, we will choose the ListView family control in the TreeView pane and customize the “BackColor” under the properties pane as shown below:
Once we’re finished, we will be able to view our app with the changes to the theme that we made.
We have our new ForeColor text, ListView BackColor and arrow color and we’re all set!
Considerations when changing pre-built themes
While it is relatively easy and safe to change the simple attributes of a control in a theme(in the property grid, and even override an image), it is important to be aware of the consequences regarding later upgrades once you start overriding any of the xslt, html, js and css resources:- If you override such a resource (say an xslt or js), this resource will keep on being overridden and will contain the data/code it had at the time it was overridden.
- If you decide to upgrade your Visual WebGui version in a later stage, this overridden resource will keep on containing the data at the time of the original overriding of that resource. This means that updates/fixes/enhancements Gizmox is making to that particular resource will not be included in your theme, unless you delete the overridden resource, re-override it and re-apply your customizations to that resource.
Go ahead and start customizing your mobile web app’s look and feel!
Start building rich HTML5 mobile applications within Visual Studio today. Trial a full-feature version of Visual WebGui Professional for 30 days with no commitment.
Free Trial
Gizmox Blog
-
Transposition - the success story of VB6 migration
Since all of you VB developers in the present or past would probably find it hard to believe that the old VB code can be migrated and modernized into the latest .NET based HTML5 without having to rewrite the application I am feeling I need to write another post on our migration solution. Hopefully, after reading this and the previous post you will be able to understand the different approach of our solution which already helps organizations around the world move away from the constraints of VB6 and free them to access the applications from any computer or browser-supported devices. I will write on such organization later in this post.
-
Trends in HTML5 and mobile development - webinar recording
A couple of weeks ago I wrote a blog post inviting you all to our webinar we presented with Forrester Research.
-
The link between Windows CE/Windows Mobile applications, ASP.NET and HTML5
Windows CE/Windows Mobile applications are practically .NET applications that based on a subset of the .NET Framework (.NET Compact Framework). Windows CE applications got descent popularity with early PDAs and smartphones that were based on Microsoft’s Windows CE operating System. In the past few years it was replaced by Windows Phone without backwards compatibility or Visual Studio support beyond VS 2008.
-
Visual WebGui HTML5 Framework Makes .NET developers Mobile Developers
The new mobile framework extends to the Enterprise Mobility the revolution that Visual WebGui brought to Enterprise RIA Applications with almost 1 million downloads and around 40,000 deployments. Just like Visual WebGui for Web, EnterpriseMobile also provides a classic .NET development paradigm within Visual Studio. This allows leveraging existing development skillset for building HTML5 mobile applications and extending enterprise IT to the post PC era.
-
ASP.NET Ajax will not be left behind the HTML5 rush
It takes a short overview of Microsoft development tools and platforms evolvement in order to demonstrate the importance of supporting Web Forms development for ASP.NET Ajax with HTML5 enhancements. In an article that Todd Anglin publishes in Redmond Developers, under the title "Silverlight: What Web Forms Wanted to Be", Todd says that ASP.NET was supposed to be Web Forms. A framework that meant to duplicate VB6 ease of development or rather its more mature successor Window Forms. Asp.Net was expected to deliver this simple and easy development paradigm for web. But it failed, Microsoft could not reproduce stateful based development paradigm for a stateless environment. Years later Microsoft rolled out Silverlight that is really another trial to come up with Web Forms paradigm for website development. Todd says in his article " Silverlight is what Web Forms wanted to be, a stateful application development model that can be deployed and updated as easily as traditional Web sites. Unencumbered by the limits of stateless pages, developing for Silverlight finally achieves what ViewState could not: It allows traditional desktop application developers to reuse their skills and development patterns for applications that can be deployed with no installation, save for the Silverlight plug-in"
