Tutorials

Cutting-edge Web UI design patterns with no HTML/CSS

This is a first tutorial of the new, cutting-edge Theme & Control designer offered as a preview in the upcoming version of the Visual WebGui RIA development & deployment platform.

The Theme & Control designer enables developers and designers to create or edit controls and to make custom themes in the simplest most efficient way. The Theme & Control designer consolidates all the resources that build up the control into one place and allows to visually manage, edit and custom the design of the UI using point & click and without having to write HTML/CSS code.

View the Basic usage of the new Visual WebGui Theme & Control designer tutorial and learn how to edit images that make up a standard button and quickly transform it to Mac styled buttom.

Sneak Peek video of Visual WebGui 6.4 with Theme & Control Designer

Visual WebGui released a short video as a sneak peek of the new version and its major new features - the Theme & Control Designers although a preview version of Visual WebGui Rich Internet Applications Platform version 6.4 will become available in a couple of weeks.

The new designers which will be available with the upcoming 6.4 Preview version enable simple and quick customization of controls and themes thus enabling developers/designers to create rich, branded, and engaging customer-facing UI's.

Click here to watch the Theme Customization with the new Designer.

Having Fun with Pligg - Installing

Last time I told you that I was setting up a Pligg site for my new video game site, wastingtimegames.com. This is second in a series of posts where I will explain how to get a working customized Pligg site.

To install Pligg you will first need to download the files from pligg.com. The most current release is 1.0.0 RC2. Once you download the .zip file you will need to unzip all of the files into a folder.

To get the rest of the software installed you will just need to follow the below directions, taken from the Pligg readme file.

  1. Create a mysql database. If you are unfamiliar with how to create a mysql database, please contact your web host or search their support site. Please pay careful attention when creating a database and write down your database name, username, password, and host somewhere.
  2. Rename settings.php.default to settings.php. Do the same for /libs/dbconnect.php.default.
  3. Upload the files to your server (please note that your server will need to be running PHP 4.3.0 or higher).
  4. CHMOD 755 the following folders, if they give you errors try 777.
    • /admin/backup/
    • /avatars/groups_uploaded/
    • /avatars/user_uploaded/
    • /cache/
    • /cache/admin_c/
    • /cache/templates_c/
    • /languages/ (And all of the files contained in this folder should be CHMOD 777)
  5. CHMOD 666 the following files
    • /libs/dbconnect.php
    • settings.php
  6. Open /install/index.php in your web browser. If you are reading this document after you uploaded it to your server, click on the install link at the top of the page.
    • Select a language from the list.
    • Fill out your database name, username, password, host, and your desired table prefix.
    • Create an admin account. Please write down the login credentials for future reference.
    • Make sure there are no error messages!
  7. Delete your /install folder.
  8. CHMOD 644 libs/dbconnect.php
  9. Open /index.php
  10. Log in to the admin account using the credentials generated during the install process.
  11. Log in to the admin panel ( /admin ) and you will then be presented with information intruducing you to Pligg.
  12. Configure your Pligg site to your liking. Don't forget to use the Modify Language page to change your site's name.

Once you are done with these steps you'll have a basic Pligg site running. Next time I'll explain how to change the language features and install modules.

Having Fun with Pligg

Tagged:  

Pligg is a content management system that has evolved from a Digg clone to a full feature content management system. I've been working on some on-line video games and have been working on a site to host them. After some thought about the site, I decided to use Pligg and to allow users to submit their own game content as well as post my games.

The Pligg install is very easy to get up and running. So, my next few posts will be about the Pligg install and how I will modify the template and add modules to the site.

You can see the site that I've setup at wastingtimegames.com. The site is fully functional although I will be adding new features over the next few weeks and will be posting my games soon. So, stay tuned to see how to get your own Pligg site running quickly.

You can learn more about Pligg here.

Override alert() with a YUI Dialog

We all know that using alert in a finished application is not good design, but we often overlook this for the ease of using alert. Well, over at YUICoder they have put together a good post on replacing alert with a YUI dialog box.

Below is an excerpt from the post.

You know and I know and everyone knows the alert boxes generated by the browsers are OLD-SCHOOL and look like garbage. Well using YUI you can easily change that by just including a little code in you page. Simply add the code below to the bottom of your page just before the end body tag then add the body style to the begining body tag called “yui-skin-sam” and that’s it. Oh and don’t forget to include your YUI Framework base and the additional scripts “container”, “dragdrop” and “animation”. For an example on how to included the YUI Framework and load specific parts check out for a quick start guide for YUI Loader and Yahoo CDN.

AlertDialog = new YAHOO.widget.SimpleDialog("dlg1", {

  width: "200px",
  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.15},

  fixedcenter:true,
  modal:true,
  visible:false,

  close: true,
  constraintoviewport: true,
  buttons: [ { text:"close", handler: function(){this.hide();}, isDefault:true }],

  draggable:false,
                effect: [
                      { effect:YAHOO.widget.ContainerEffect.FADE,duration:0.1 }]

});
 
AlertDialog.setHeader("Alert");      
AlertDialog.render(document.body);

window.alert = function(text) {
  AlertDialog.cfg.setProperty("text",text);

  AlertDialog.show();
};

You can read the full post here.

While this post was written for the Yahoo! User Interface library, it should be fairly easy to port it to a different framework as the concept is the same. So, now we have no excuse to use the standard alert.

Migration of desktop applications to the web using Visual WebGui

The following is the first part of a 3 parts series of articles ppublished on VisualWebGui website describing the various available migration options of desktop/smart client applications to the web using Visual WebGui migration tool.

In order to discuss the migration process of legacy desktop applications to the web, we should first agree on 3 different types of desktop applications:

  1. WinForms based desktop application (C#/VB.NET). The UI layer is coded using .NET languages – the business can be .NET, COM+ or any other interop.
  2. VB 6.0 based applications. The UI layer is coded with VB 6.0.
  3. Other desktop or smart client technologies (C++ MFC/ATL, Delphi, Java etc). Any other smart client technology based applications.

WinForms based desktop applications to Web
Background
Normally, without Visual WebGui the migration process of a WinForms desktop application to the web will require a full re-engineering of the UI layer to fit the web architecture and capabilities.

If we take WinForms migration to ASP.NET for example using any AJAX 3rd party controls in order to provide a rich UI experience, we will have to consider:

  • Entirely new API.
  • Entirely new update approach.
  • Entirely new look & feel – or work hard to customize the UI to look the same.
  • Lighten the amount of data transferred to the client and presented at any given time to avoid severe latency.
  • Compromise on features list due to the web limitations.
  • Handling security holes created as a result of opening services consumed by client side AJAX and transferring business logics to the client.

Visual WebGui SDK is fully integrated with Visual Studio and provides the exact same API and set of tools/capabilities which are provided out-of-the-box with WinForms 1.0 and 2.0. This fact enables the native capability of simply copying any existing WinForms source code to a VWG project and providing a fully functional equivalent web application.

The Process
The basic 3 steps of migration (view a walkthrough tutorial):

  1. Open a new Visual WebGui application.
  2. Copy the code from your WinForms project into this new web application.
  3. Replace any reference to WinForms API namespace (“System.Windows.Forms”) within the code to Visual WebGui API reference (“Gizmox.WebGUI.Forms”).

Any standard WinForms application which is using the 58 WinForms out-of-the-box controls will then compile and execute as a plain web application.

The outcome of this short process is an ASP.NET based solution in terms of deployment and runtime and has the following properties:

  • Deployment is copy & paste equivalent to an ASP.NET web site.
  • Server infrastructure requires an IIS and .NET CLR only.
  • The application can be consumed from any plain browser - no installation is made on the client.
  • Minor static and cached footprint on the client ~200kb of plain JS and HTML code due to the Empty Client concept.
  • Support for multiple presentation layers with the same code base (DHTML/Silverlight or Smart Client).
  • Maintain a single layer of code – no need to write or maintain JavaScript, HTML and services.
  • Highly secured due to the Empty Client concept.

Considerations & Exceptions
There are 3 major setbacks you might have on the process which you can quantify in advance and estimate the amount of work that has to be done in order to migrate your application:

  1. Minor differences between the VWG API and WinForms which are mainly caused by architecture differences.
  2. The amount of 3rd party controls that are used in your application. This section describes a situation of using some non-WinForms out-of-the-box controls (for example Infragistics or DevExpress controls etc). In those cases you can select the most suitable solution from the following 3 options:
    • Choose a similar control from the WinForms out-of-the-box, adjust your code to use it and then perform the migration process.
    • Select an equivalent 3rd party ASP.NET control (Infragistics, Telerik, DevExpress etc.) which provides the same functionality, wrap it by a click of a button in VWG and adjust your code to use it.
    • Write your own VWG custom control which will perfectly suit your needs and then adjust your code after the migration process to use this control.
  3. Adjustments of a single user desktop application to a multiuser web environment. This section summarizes some of the major issues of transforming a single user application to a multiuser application sharing the same CPU, Memory space and other resources.
    • Thread safety – since a WinForms application can contain static members which are accessible to a single user, you should now consider one of the following:
      • Replacing those static members to a synchronized multi-thread safe data structures.
      • Lock critical read/write sections to protect concurrent multi user access.
      • Remove the statics and find instance or DB based solutions.
    • Memory load – in a desktop application, there might be places when the original consideration of the amount of memory in use was based on the assumption that the executing machine is local. therefore, many items are loaded to memory simultaneously without limitation.

Now, on a shared memory environment, when the server does the heavy lifting, the amount of memory consumed by each user will set the number of concurrent users that can be served by each server.

The following steps are recommended:

  • Consider loading items to memory on demand (keep only the headers and the identifiers in memory).
  • Remove any large objects read to memory – for example, don’t save binary objects to memory, instead write the binary to the response stream directly to the client.
  • Prefer DB based paging on entire prefaces and memory based paging. Visual WebGui provides mechanisms to enable it easily.

Summery
Migration of any WinForms application to the web using Visual WebGui has the following advantages:

  1. In 3 simple steps you will be able to get very close to a working web application.
  2. The effort you have to make in order to accomplish a fully functional web application is measurable.
  3. The application can keep using the existing BL and DL layers, and only the UI is either migrated automatically or adjusted.

Click to read the remaining articles:
VB 6.0 to Web
Smart Client and other Technologies to Web

or to view the tutorial:
How to Migrate WinForms to the Web

The new Visual Studio integration demonstrated on Webcast

On Nov 24 at 9am PT, Visual WebGui will be presenting another Webcast as part of the MSDN Webcast series:
Integrating Visual WebGui into Visual Studio Simplifies Development and Saves Time and Money

In this webcast, we will demonstrate the new integration, usability & compatibility features introduced with version 6.2.

Attend this webcast to learn how the Visual WebGui platform increases productivity when developing AJAX DHTML and Microsoft Silverlight applications, saving time and money. And learn about Visual WebGui's complete integration into the Microsoft Visual Studio development system, a consolidated installation process, and the opportunity to use Microsoft Visual Studio Express Editions for software evaluation and trials.

Register online

Creating a Virtual Keyboard

Tagged:  

With devices like the iPhone and many of the new touch computer monitors we are using traditional keyboards less and less. Add this to the fact that when many people are on the go they use public computers with possible security threats like keyloggers. With these trends in computing you may look at putting a virtual keyboard in your web applications (where it makes sense). Well, over at Design Shack they have put together a nice example of this using jQuery (although you could take the same concept and use a different library).

Below is an excerpt from the post.

For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.

Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

You can read the full post here.

Implement Keypress Navigation using jQuery

Bedrich Rios at NETTUTS.com has put together a tutorial for creating keypress navigation using the jQuery JavaScript library. A keypress navigation, if implemented well, can increase usability of your web applications and sites. Basically, you create a way for users to navigate through your site [or part of it] without the use of their mouse. This has long been possible/common with rich desktop applications, but usually isn't implemented in many of today's web applications.

Bedrich's 8 step tutorial will have you creating keypress navigations in no time. Check out the demo if you want to get a taste. For the 8 course meal, visit How to Create A Keypress Navigation Using jQuery

Streaming Server Side Proxy in .NET

If you want to get XML data from a different domain you will need to use a server side proxy. While you could use JSON to get around this there are times when a JSON feed may not be available and a proxy must be used.

In the past I have written posts about creating such a proxy, however all of the example code was is PHP. Well, if you are a .NET developer then you are in luck, because the CodeProject has posted a tutorial on creating a Server Side Proxy in .NET.

Below is an excerpt from the post.

A Basic Proxy Such a content proxy is also available in my open source Ajax Web Portal Dropthings.com. You can see from its code from CodePlex how such a proxy is implemented. The following is a very simple synchronous, non-streaming, blocking Proxy:

[WebMethod]
[ScriptMethod(UseHttpGet=true)]

public string GetString(string url)
{
        using (WebClient client = new WebClient())
        {
            string response = client.DownloadString(url);
            return response;
        }
    }
}   
 

Although it shows the general principle, but it's no where close to a real proxy because:

  • It's a synchronous proxy and thus not scalable. Every call to this
    web method causes the ASP.NET thread to wait until the call to the
    external URL completes.
  • It's non streaming. It first downloads the entire
    content on the server, storing it in a string and then uploading that
    entire content to the browser. If you pass MSDN feed URL,
    it will download that gigantic 220 KB RSS XML on the server and store
    it on a 220 KB long string (actually double the size as .NET strings
    are all Unicode string) and then write 220 KB to ASP.NET Response
    buffer, consuming another 220 KB UTF8 byte array in memory. Then that
    220 KB will be passed to IIS in chunks so that it can transmit it to
    the browser.
  • It does not produce proper response header to cache the response on the server. Nor does it deliver important headers like Content-Type from the source.
  • If external URL is providing gzipped content, it decompresses
    the content into a string representation and thus wastes server memory.
  • It does not cache the content on the server. So, repeated
    call to the same external URL within the same second or minute will
    download content from the external URL and thus waste bandwidth on your
    server.

So, we need an asynchronous streaming proxy that transmits
the content to the browser while it downloads from the external domain
server. So, it will download bytes from external URL in small chunks
and immediately transmit that to the browser. As a result, browser will
see a continuous transmission of bytes right after calling the web
service. There will be no delay while the content is fully downloaded
on the server.

You can read the full tutorial here.

This post not only shows you haw to make a basic server side proxy, but also shows you how to make it streaming. If you are a .NET developer looking to make a server side proxy, I recommend this post.

Syndicate content