Click here to Skip to main content
Click here to Skip to main content
Go to top

Azure-Volta 2013 Engineering Calculator is up and running!

, 20 May 2013
Rate this:
Please Sign up or sign in to vote.
Migration from VS2010->VS2012->Azure cloud computing: practical and didactic aspects

Please note

This article is an entry in our Windows Azure Developer Challenge. Articles in this sub-section are not required to be full articles so care should be taken when voting. Create your free Azure Trial Account to Enter the Challenge.

AZZURRO !!!!!!!!!

by Adriano Celentano

Azzurro by A. Celentano

Video Player powered by the best
YouTube API for ASP.NET [4]
(#1 on Goog for several years)

Introduction

The article is an entry to Windows Azure Developer Challenge, addressing both practical and didactic aspects of Azure project development.

1.     First Challenge: Getting Started. Done

Note:  Creating Azure account with existing 'live.com' id was rather simple and straightforward process

2.     Second Challenge: Build a website. Done 

As FYI: fully-functional web site has been developed and deployed to Windows Azure cloudlink 

Note: Web site has been originally created with VS2010, then the project was migrated to VS2012 for Web (Express edition), and revised/updated. Deployment via standard 'Publish Web Site' option was flawless and rather efficient. Important notice: don't forget to check the button 'File Publish Options' ->'Remove additional files at destination'. Those files may cause the conflict with newly uploaded (e.g. ambiguous class names), so it better to keep the web directory clean.


Fig.1. CSS3 style corresponding to normal ("Dark") background

3.     Third Challenge: Using SQL on Azure. On schedule 
4.     Fourth Challenge: Virtual Machines.
On schedule 
5.     Fifth Challenge: Mobile access. 
On schedule 

WINDOWS AZURE: GREAT EXPECTATIONS

Potential benefits of migration to Windows Azure are listed below

  • From a Web developer perspective, it's like a web hosting service, but a really good one. I found web deployment and change management to be rather straightforward and reliable process.
  • Scalability would be another potential benefit of migration to Azure cloud. 
  • Intrinsic modularity of Azure platform is adding huge value to web development, and future project enhancements/upscaling.
  • Multiple web project integration on Azure seems to be relatively easy process due to modularity (mentioned in the previous line item 3) and efficient resource sharing.
  • Data Layer is of particular interest to me. There has been an issue with my current host service provider when I tried to find reliable/simple SQL server backup/restore/migration procedure pertinent to my multiple remote DB. I hope that Azure team has properly addressed that quintessential issue. In particular, I would like to have installed multiple file-based DB (like "good-old" Microsoft Access .mdb, or the latest newcomer SQL Server 2012 Express edition .mdf files), which I can simply copy-paste to another web app upon necessity with minimal DB-connectivity headache. 

WINDOWS AZURE: REALITY CHECKS AND PRACTICAL EXPERIENCE

a). Staring with a project migration from Visual Studio 2010 to 2012. The project itself (award-winning application VOLTA 2013 [1]) implemented as HTML5 web application adheres to software paradigm of separation of programming concerns:  

  • Content: HTML5 
  • Presentation: CSS3
  • Functionality: jQuery (2.0) 

Bear in mind that those 3 items are not precisely orthogonal as some overlapping area exists. For example, CSS3 could be used to implement some basic functionality while jQuery code can implement dynamic formatting , e.g. dynamically load stylesheets (this technique has been used in current app).  

Data layer functionality implemented using XML data storage and non-blocking asynchronous AJAX data access technique. In future release, SQL database should replace XML file-based data storage.

Detailed project migration to VS 2012 has been described in [8]. I was satisfied by the process simplicity and clarity. No any major issue found.

b). Creating trial Account (90 days) on Windows Azure and subsequently, creating the first Azure Web were both rather satisfying experiences. And so was a deployment of my locally-developed web site (currently in proto stage) to Azure platform. I've got my first fully-functional online engineering Calculator VOLTA-2013 on Azure in a matter of couple hours or less (refer to the link [6] and also see the sample screenshots at the end of the article). 

Slightly disappointing was a lack of FPSE (Front-Page Server Extensions); this technology has been around for more than a decade, so I get used to it, especially in a context of VS Web development. That would be nice to find a sort of substitute for this functionality, in particular, to be able to see both local/remote webs residing in to contiguous on-screen areas with tree views related to file management (as it was in case of using FPSE).

c) Web site change management was also mostly pleasant experience. For the practice purpose adding several Web User Controls (.ascx) to the default page; that increased it's functionality (see "My IP" and "Check Browser" options added to the page footer). After success with that auxiliary parts, I have have converted entire Calculator project into Web User Control and added it to the default page. Now the project exists in a modular form, with increased readability and clear architecture. More web items will be added soon.

This section will be continuously updated as the project evolves.


SO, HERE COMETH THE CLOUD

Knockin‘ on Heavens Door
by Guns N‘ Roses

"Mama, put my guns in the ground
I can't shoot them anymore.
That long black CLOUD is comin' down
I feel like I'm knockin' on heaven's door..."
-Bob Dylan

and CLOUD Number 9| Bryan Adams



Background

Since the day I got my first electronic calculator (kinda antics from last millennium) and up until now it’s really hard to resist the temptation to divide by zero and see what happen. Even more exciting is to enter 0/0 and curiously expecting the little piece of technology to reveal the answer to that quintessential math enigma. Indeed, it’s even better than popping the bubble wrap from the fresh delivered UPS package with brand new "Intel inside". Yeah, the instant joy of dividing by zero in “do-it-yourself” calculator apps is really hard to overvalue...

Calculator app was chosen due to my traditional approach of “litmus-testing” any novel technology set by coding calculator software from the scratch.  For over two decades of my programming experience with Microsoft development tools and variety of open source web technologies this pragmatic approach has been very productive. Instead of that notorious apps built around almost omnipresent greetings to the world (“Hello, cruel world”) I am usually practicing with 3 fundamental types of software applications listed below, which cover the lion share of real-life use cases:

  1. Data-centric apps (e.g. phone book)
  2. Algorithm-centric apps (e.g. calculators)
  3. Mixed type apps with balanced complexity of data and algorithms (e.g. calculator with reference data operations)

This simple applications taxonomy also exists in a huge variety of different terminological constructs, but I stick to this one due to its clarity. For the purpose of practicing with that high-decibel buzzing sounds of “water vapors” (aka Cloud computing) I have selected my popular engineering calculator Volta, previously developed with HTML5, CSS3 and jQuery and then converted into standard desktop application (currently available at Intel AppUp store [5]).

BEYOND THE JOY OF DIVIDING BY ZERO...
Beyond division by zeros, online Calculator Volta-2013 allows performing basic arithmetic and extended scientific operations, plus a set of specific electrical engineering computations. It also includes reference tables of standard E-Series (this corresponds to the data layer operations mentioned above). Refer to the User Manual online for more details [7].

Using the code 

Great deal of app's functionality and sample coding technique has been discussed in the previously published articles at [1-3]. Following code snippet reflects an important revision: Data access layer modification using AJAX for non-blocking page execution.

DATA ACCESS VIA AJAX 

In the previous version, data load function (standard E-Series ref tables) was implemented in rather straightforward synchronous manner at the page load event. This may cause potential page blocking in case of data access failure. New version implements non-blocking asynchronous data load via AJAX as shown in the following code snippet 

    // E-SERIES OPERATIONS BUTTON  EVENTS **********************
    $("div#keyPad button.keyPad_btnESeries").click(function () {

        var _tab = $("#refTabESeries");
        switch (this.id) {
            case 'keyPad_btnE6': BuildTableE("E6", _tab); break;
            case 'keyPad_btnE12': BuildTableE("E12", _tab); break;
            case 'keyPad_btnE24': BuildTableE("E24", _tab); break;
            case 'keyPad_btnE48': BuildTableE("E48", _tab); break;
            case 'keyPad_btnE96': BuildTableE("E96", _tab); break;
            case 'keyPad_btnE192': BuildTableE("E192", _tab); break;
            case 'keyPad_btnCe': ClearTableE(_tab); break;
            default: break;
        }
    });

    // ** LOAD XML DOC AND BUILD E-SERIES TABLE (AJAX)
    function BuildTableE(xmlTag, tabOut)
    {
        // max columns in E-Series table
        var _maxCol = 24;
        var _url = "Data/ESeries.xml"

        try
        {
            // load E-Series XML doc from file using AJAX
            $.ajax({
                type: "GET",
                url: _url,
                dataType: "xml",
                success: function (xmlDoc)
                {
                    // get particular E-Series elements by its tag from XML doc
                    var arrSeries = xmlDoc.getElementsByTagName(xmlTag);

                    // get standard values for E-Series
                    var arrItems = arrSeries[0].getElementsByTagName('value');

                    // clear table
                    ClearTableE(tabOut);

                    // add table header showing selected E-Series
                    tabOut.last().append("<tr><th>" + xmlTag + "</th></tr>");

                    // populate table by rows
                    for (i = 0; i < arrItems.length; i++)
                    {
                        // actual column number
                        var _col = Math.min(_maxCol, arrItems.length);

                        // temp string to add row
                        var _str = "<tr>";

                        // populate row with standard values
                        for (j = 0; j < _col; j++)
                        {
                            _str += "<td>"+arrItems[i*_col+j].childNodes[0].nodeValue + "</td>";
                        }
                        _str += "</tr>";

                        // append row to the table
                        tabOut.last().append(_str);

                        // optional animation
                        //$("div#voltESeries").show(200);
                    }
                }
            });
        }
        catch (ex) { }
    }

    // Clear E-Series Table
    function ClearTableE(tabOut) 
    {
        // optional animation
        //$("div#voltESeries").hide(100)
        tabOut.empty();
    }

Points of Interest 

1. TIME FOR jQUERY 2 IS NOW and I don't care much about IE 6/7/8:

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

History

This award-winning application is probably looking familiar to many Codeproject members and occasional readers (refer to [1], and also [2,3] for more details of coding technique w/HTML5, CSS3 and jQuery).

1. 04/26/2013: The application was upgraded to run under Visual Studio 2012 and deployed on Azure platform [6] (see sample screenshots shown below using 'light' background style):


Fig.2. CSS3 style corresponding to "Light" background (jQuery code snippet takes care of switching between styles)

2. 04/27/2013 "Web project migration from Visual Studio 2010 to VS 2012", illustrated developer's guide published online [8]. 

3. 05/05/2013 Fully-functional web site deployed to Azure cloud [6]. 

4. As the world turns, Engineering Calculator VOLTA-2014P for Windows 7/8 has been released on 05/19/2013  

References

  1. Engineering Calculator VOLTA-2013
  2. Scientific Calculator ZENO-5000
  3. HTML5/CSS3 graphic enhancement: buttons, inputs
  4. YouTube™ API for ASP.NET
  5. Volta-2013 for Windows (Intel AppUp Store)
  6. Engineering Calculator VOLTA-2013 on Azure
  7. Engineering Calculator Volta-2013, User Manual
  8. Migration to Microsoft Visual Studio® 2012 for We

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience. He is Win/Web veteran, published 200+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, SQL, .NET, ASP.NET, WPF, C#, Speech Technology and Mobile apps. He's been among recent App submission winners (The Windows 8* & Ultrabook™ App Innovation Contest 2012). Sample pubs:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Edumatter-M12 for Windows, app overview
  5. Engineering Calculator VOLTA-814D
  6. CoolPhone: phone numbers-to-text converter
  7. SQL generates large data sequence
  8. Aggregate Product function extends SQL
  9. Top-50 Digital Cameras
  10. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects (Finance/Investment, Engineering, Edu) w/total code base exceeding 250k lines; doing consulting in NYC for 20 yrs.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 20 May 2013
Article Copyright 2013 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid