Tutorials

Ajax File Upload Tutorial

Tagged:  

As you are writing an Ajax application, you may want to allow users to upload files through an Ajax form. The folks over at AnyExample.com have put together a good tutorial on the subject. The tutorial uses PHP for the back end, but the principal is the same for any server side language.

Below is an excerpt from the tutorial.

How IFRAME file uploading works?

  • There is a simple <form... which contains only <input type="file" ... > field.
    Target for this form is a hidden IFRAME (with "display: none;" CSS style) and
    OnChange event for the file field is set to JavaScript function which checks file extension (optional for this example, but
    very useful in general) and submits form.
  • Special part of the script (marked FILEFRAME, see comments) saves file upload, checks for uploading errors and outputs JavaScript code to that
    hidden IFRAME.
    The javascript code uses parent.window.document object, which allows to modify parent document (visible page, which users is viewing).
    It sets filename value and enables submit button on the other form using getElementById method.
  • The other form has 'description' text-field and hidden field 'filename'. User may fill 'description' field while file is uploading.
    When file uploading is finished, user press submit and "file information" page is generated (based on filename from hidden field and user's
    file description).

Possible drawback of this method is file garbage: files are uploaded even if user does not press submit button. You may need to write 'garbage file
collector' which will delete any unused file.

This example stores all uploaded file in filesystem folder. You need to specify it at the beginning of script, see variables $upload_dir and
$web_upload_dir. There is fail-checking which checks whether it is possible to write create files in upload directory.

We use following functions in this example:

PHP

  • move_uploaded_file - move file uploaded to web server
  • fopen - open file
  • fwrite - write to opened file
  • fclose - close file
  • str_replace - replace one substring by another
  • filesize - returns file size in bytes
  • filemtime - returns file modification time

You can read the full post here.

Compress JavaScript with Gzip

I found interesting tutorial today about using JavaScript with Gzip:

The main problem when we are using ajax framework is because of their big size. Of course, it will extremely slow down the sites load time. For example, if we use the standard jQuery, it’s almost 100Kb. It’s even more if we use the complete Prototype and Scriptaculous that will cost around 150Kb.Compress JavaScript with Gzip | Ajax Tutorial, Nov 2008

Read the whole tutorial here.

New Web design tool & Themes

The new Point & Click web design tool - the Control & Theme Designer - presents a ground breaking simple, intuitive developer/designer interface to creating advanced, customized, and creative customer-facing Web user interfaces (UIs) without any need to code in HTML and CSS.
The new tool will allow to easily create custom themes for Visual WebGui applications or download complete themes. New themes created by Gizmox that would give your Visual WebGui application familiar, cool looks are going to be available for download. Here are some examples of the themes that you should expect to see when 6.4 Preview is released demonstrated by screenshots of the same control with a different theme each time.
Mac Theme:
dialogbox with Mac Theme

Google Analytics Theme:
Google Analytics Theme
dialogbox with Google Analytics Theme
 
Gmail Theme:
Gmail Theme
dialogbox with Gmail Theme

Facebook Theme:
Facebook Theme
dialogbox with Facebook Theme

Vista Theme:
Vista Theme
dialogbox with Vista Theme

XP Theme:
XP Theme
dialogbox with XP Theme
Black Theme:
Black Theme

You can also get more information through the following resources:

 

Designing custom controls with the innovative visual Web design tools

The visual Control & Theme Designer web design tools introduced in version Visual WebGui 6.4 version allows to create cool new designs and themes and also custom controls. The new 'how to' tutorial shows how simple it is to create a Visual WebGui custom control with the new designer tool.

This 'How to' is divided into two parts whereas the first part demonstrates the creation of the programmatic part of the water mark text box control and the second part shows how to add the design time of the control.

View the full tutorial here:
Design Visual WebGui custom controls with the new Control & Theme Designer

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

Syndicate content