Contents tagged with vb.net
-
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
-
A Visual Studio tool eliminating the need to rewrite for web and mobile
We have already covered the BYOD requirements that an application developer is faced with, in an earlier blog entry (How to Bring Your Own Device (BYOD) to a .NET application). In that entry we emphasized the fact that application developers will need to prepare their applications for serving multiple types of devices on multiple platforms, ranging from the smallest mobile devices up to and beyond the largest desktop devices.
The experts prediction is that in the near future we will see that the majority of all applications developed, will need to be able to service these multiple platforms and devices in one way or the other, in order to survive.
Where does that leave our legacy single-platform targeted desktop applications, in which we have even invested decades of manpower?
We could build a User Interface front-end for those legacy applications, still running the legacy application as a back-end. That does in some cases require considerable effort, and it doesn't change the fact that the back-end is still running the legacy, and potentially obsoleted technology, code. On top of that, we will have two tiers to manage, the back-end and the new front-end.
We could rewrite or convert the legacy application for the new technology. For that there are multiple code conversion tools out there on the market that will assist you and make your conversion process a bit easier than to do it all "by hand". All the current tools in this category have one thing in common though, they do code conversion for you, and some of them even pretty well. You will still need to rewrite or reconstruct the parts of code where there is no corresponding library on the target platform.
We could migrate the legacy application to the new technology using any of the migration solutions available. The currently available solution base their migration on a fixed set of black-box built-in rules with no (or very limited) ability to adapt to your special migration needs. In many cases this will only help with the migration of a portion of your code, still requiring rewriting or reconstruction of considerable percentage of your code.
Taking on such a conversion or migration task means that you will use the code conversion/migration tool of your choice to convert/migrate your code. You will most likely have huge sections of code that need to be rewritten and/or reconstructed because there is no direct correspondence between the libraries used on the legacy application and the ones on your new platform. As soon as you start the conversion process, you will be converting the legacy application version that is current at that time, which can present major additional efforts in both management and coding if you need to continue maintaining the legacy application after you have started the conversion process.
What you really need here is a conversion tool that "knows" more about your legacy source application platform and the target platform and "knows" how to "map" between the two whenever possible. In addition, you often may need to continue development on the legacy application while you are converting/migrating. What you need is to lift that requirement and not freeze the development of the legacy application.
Based on these needs, Gizmox's built its solution and called the action transposition rather than migration or conversion. The Transposition studio is a rule based migration and modernization solution. It comes with built-in rules that will automatically handle about 95% of the conversion right out of the box. In some cases it will be able to migrate all your code. In other cases there will be portions that you need to work on yourself, but the entire work is done within the Transposition studio which is integrated into Visual Studio and offers you wizards and guiding tools to minimize risk and required resources.
What distinguishes the Transposition from other migration solutions are mainly three things:
First, it's migration rules are fully open and adjustable so you can change the default migration at will and thereby gradually adapting it to your own specific needs. It uses a very powerful pattern matching engine along with equally powerful template engine that enables you to make very advanced and complex conversions on small and large code segments, all by defining a set of rules and templates within the Transposition studio itself. The Transposition Studio integrates directly into the Visual Studio development environment and you have the legacy source code right at your fingertips and also allows you to override the defined rules by directly customizing parts of the code according to your needs. The rules and templates are stored in user definable libraries, where you can build multiple sets of related rules, which can then be used for, or shared with, other migration projects.
Second, there is no need to freeze development on the legacy source application, so you can continue developing your old application, while you are transposing. Using traditional migration/conversion procedures, you do a one time migration/conversion of the code, and then you start reconstructing/rewriting the parts of the outcome where necessary. This is completely different in Gizmox's Transposition studio. The majority of the required work is spent on defining migration rules and templates within the Transposition studio itself and then you simply re-run the transposition (migration) process to produce a new set of target code. You re-run the transposition as often as you need/like and it is only at the last stage, when you have migrated everything that can be migrated, that you start working directly on the target platform code.
Third, one of the target platform options is a cloud enabled and mobile enabled ASP.NET application with HTML5 front end (based on the Visual WebGui framework) which will fulfill the BYOD requirement of modern applications perfectly. -
Migration & Modernization: Windows/VB6 Apps to ASP.NET HTML5
I would like to invite you to a webinar we are doing in collaboration with Jeffrey S. Hammond, Principal Analyst serving Application Development & Delivery Professionals at Forrester Research.
The webinar is free and it will will introduce the substantial changes brought on by the move to Web Applications and Open Web architectures, and the challenges it places on application development shops. We’ll also introduce how we at Gizmox are helping client navigate this mobile shift and evolve existing Windows applications with a new set of Transposition tools called Instant CloudMove. We will discuss the alternatives in the market to evolve your existing applications and focus on our transposition tools that reduce migration risk, minimize costs, and accelerate your time to market. -
Security - Overcoming Data-Centric RIA Challenges
This is the 4th and last post discussing the challenges in developing business RIA applications. This week I am going to talk about security.
-
Data-Binding - Overcoming Data-Centric RIA Challenges
This is the second of a series of posts that discuss the major pains of rich data-centric internet applications development. This time I would like to discuss the data-binding task which becomes more and more complex as more data oriented and business applications make their way to the web.
-
Ajax Connectivity - Overcoming Data-Centric RIA Challenges
The transition of business applications from client-server to web based applications has brought significant improvement in terms of accessibility, deployment and maintenance but the typical data intensiveness and richness of those applications also brought many challenges in the development process.
-
Visual WebGui for the web and cloud, is what Visual Basic was, for the desktop
Just a decade and a half ago, the process of building a simple Windows-based application could have been described as a nightmare. The introduction of Visual Basic changed it so developers could for the first time implement Windows applications in an intuitive, graphical environment by dragging controls onto a form.
-
Completing a trading desk application's UI in a few weeks with Visual WebGui
I would like to share with you the following story showcasing how Visual WebGui enabled MBI to replace the old VB 6.0 with a modern web application that presents an enhanced user experience for the trading desk system. With the old VB 6.0 based system the trading job took a whole day to complete, but with Visual WebGui the process takes only a few hours and is nearly automatic.
-
How to Embed a Visual WebGui Form in an ASP.Net application
Today, we are going to learn how easy it is to embed a Visual WebGui (VWG) form in an ASP.Net application. This capability allows you to quickly develop modules or port WinForms application to Web using VWG and then embed them in your currently working ASP.Net application.
-
Manually wrapping ASP.Net controls without the use of Visual WebGui designer
In this tutorial we will learn how to wrap an ASP.Net control without the use of a designer or wizard and use that control in a Visual WebGui application. The ability to wrap ASP.Net controls allows you to use third party controls for ASP.Net and your own custom controls and to enrich your arsenal of controls to create rich internet applications.
Visual WebGui extends ASP.NET. It extends an ihttp handler and implements its own pipeline. VWG is actually an ASP.NET site. The diagram bellow illustrates the technological hierarchy which puts VWG at the same level as ASP.NET. Since the application and session are shared integration between ASP.NET and Visual WebGui is possible.
