IComeFromTheNet.net

I done some more work on the photo display widget. I have done the following today. I would say I have done a fair days work.

• Fixed the upload handler , now returns text/html instead of text/plain, the upload control uses a normal submission inside and temp Iframe. When the content type was set as ‘plain’ the returned JSON would be encapsulated insde <pre> html tags causing a eval error.
• Since the above was fixed had the upload form refresh the datastore to include the new images.
• I added a click listener to the dataview control, when an image is clicked it will load a new window positioned at the top of the screen(useful for the large screen shots) with the image inside, though not as pretty as say ‘lightbox’, it works.
• Implemented a pass key on the image upload form a security to stop unwanted uploads.
• Fixed a CSS issue with the dataview, overflows of floated elements.

I had a very happy Christmas and new year but now its back to work and learning. I purchased Learning Ext JS from packet publishing, the book came with a password protected pdf version which is always a plus with me.

I rate this book very highly for a beginner like me with plenty of well explained explanations. My two great criticisms

(1) Used coldfusion and PHP , should stick to one backend language.

(2) Not enough Meat once the beginners tag ends.

For the price and with the inclusion of an e-book and removing the beginner tag on one of the harder JavaScript libraries its a must buy and if you pirate it burn in hell.

The result of my first successful (nearly finished) project with the Ext JS library and .net background

The can be found on the root page (aka my portal) at http://www.icomefromthenet.net.

It allows images (jpg,gif,png) to be uploaded , these images are stored in a sql-lite DB. The Json stream is loaded at page start with the data filtered on the client side using the Ext JS store widget. An generic ASHX handler is used to retrieve each image from the DB, optional thumbnail function is included as well.

Areas Used from the Libary

1. DataVew and x-templates
2. FormPanel, normal Panel
3. FileUpload control
4. DB Bound combo Box
5. Json Store and Http Proxy.

Still to complete

1. Fix the DataVew CSS
2. Upload more photos
3. A Better selection of photos onload.
4. Maybe Less Blue.

I got a little bored today, so I decided to give a new theme a chance. As a base theme I download a theme called Envision. I found it in the list of themes on the blogengine.net homepage. The theme seemed to have the potential to be mine with a little tweaking of course. An example of the original is below.

Why did I like this theme, well it is based on a light colour scheme, that would go well with my new colours. It's a 2 column page , my previous was a two column fluid layout, so I wanted something different. I love grey background and after examining the image files, I determined that I could re-colour the header, footer ,menu and the the main content frame background.

Out a pull Gimp and 2 hours of 'trial and error' I arrive at what you see now.

Conditional Style Sheets

This is the first time that I used a conditional Style-sheet. A quick explanation is necessary. HTML conditional comments are an IE propriety ability, they are used to target different versions of Internet Explorer. Other browsers will ignore the comments and using conditionals is considered a safe Hack.

   1: <!--[if IE]>

   2:   <link href="/blog/themes/Envision.1.0/css.axd?name=IE.css" 

   3:                         rel="stylesheet" type="text/css" />

   4: <![endif]-->

IE  interprets this conditional and if true will print the html inside as normal content, other browsers will treat the conditional as a comment only and will not evaluate the expression.

By using a link statement I was able to create and IE only CSS style sheet to override settings in the master Style-Sheet that would not render correctly in versions of IE.

Current I am using rendered content using cssclass:after attribute selector, which IE7 and below do not support, IE will ignore that declaration but will miss out on necessary css settings, by using and IE only Sheet I can override the cssClass and add back the missing details (if you supply cssclass:after it will only apply css you declare to the attribute value of 'content:').

Well  have finished my last exam , on Tuesday. It was for my XML for web-applications, class I must admit I am glad that was the last exam, now I get to work on some personal projects. How did I do? Well after some exam nerves I made a good recovery and think a credit mark deserving for that paper.

So Now What?

Well I have made a start by completing my wow memorial page, I added a JavaScript clock to count up the number of days 'World of WarCraft' free.

The Script

   1: //namespace declaration

   2: var CountUp = function ()

   3: { } //end of name space

   4:  

   5: // Class Declaration

   6: CountUp.Class = function () {

   7:     //private references

   8:     var currentTime=new Date()

   9:     var startingdate;

  10:     var timesup=false

  11:     var baseunit;

  12:     var result;

  13:     //private method:

  14:     var PrintResults = function(){

  15:         var strresults = " ";

  16:         //Display the result             

  17:         strresults += '<div style="width:300px; background-color:#383838; text-align:center; color:white; margin-bottom:15px; margin-top:5px;">'

  18:         strresults += '<div style="width:300px; font-size:120%; text-align:center; background-color: #5E3A3A; color:white;"> Number of Days Without WOW </div>'; //opend

  19:         strresults += result.days + ' :Days ';

  20:         strresults += result.hours +' :Hours ' ;

  21:         strresults += result.minutes + ' :Minutes ';

  22:         strresults += result.seconds + ' :Seconds ';

  23:         strresults += "</div>" //close 

  24:         document.getElementById("ClockDiv").innerHTML = strresults;         

  25:     } //end function 

  26:     return  { //the returned object here 

  27:         //public declarations (declare as below)

  28:         ExampleProperty: 1, // note need comma after 

  29:                 

  30:         //init function

  31:         init: function (time,baseunit) {

  32:             startingdate=new Date(time)

  33:             baseunit=baseunit

  34:         //Add call Function to the SetInterval 

  35:         setInterval(CountUp.Class.showTime,3000); 

  36:         //accessing private variable

  37:         //abc ="jfk"

  38:         },

  39:        //Public Functio

  40:         showTime:  function() {

  41:             currentTime.setSeconds(currentTime.getSeconds()+1);

  42:             var timediff=(currentTime - startingdate) /1000; //difference btw target date and current date, in seconds

  43:             var oneMinute=60; //minute unit in seconds

  44:             var oneHour=60*60; //hour unit in seconds

  45:             var oneDay=60*60*24; //day unit in seconds

  46:             var dayfield=Math.floor(timediff/oneDay);

  47:             var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);

  48:             var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);

  49:             var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));

  50:             if (baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level

  51:                 hourfield=dayfield*24+hourfield;

  52:                 dayfield="n/a";

  53:             }

  54:             else if (baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level

  55:                 minutefield=dayfield*24*60+hourfield*60+minutefield;

  56:                 dayfield=hourfield="n/a";

  57:             }

  58:             else if (baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level

  59:                 var secondfield=timediff;

  60:                 dayfield=hourfield=minutefield="n/a";

  61:             }

  62:             result={days: dayfield, hours:hourfield, minutes:minutefield, seconds:secondfield};

  63:             // call print method

  64:             PrintResults();  

  65:         } //, (remove comment syntax if more than one function)

  66:         

  67:     };

  68: }(); // the parens here cause the anonymous function to execute and return

  69:  

  70: //initilize the object

  71: CountUp.Class.init("January 5,2008, 17:15:00","days"); 

It was not very difficult I used the YUI pattern that I posted about a few months ago, as the base with the int method registering the time function with a setInterval() at repeat of 1 seconds or so.  The time function finds the difference from the base date compared to now then builds a result object and calls a print method.

Also to note that I used the script found on dynamic drive here, as the base for the Set-time function, I basically re-coded for the YUI pattern and wrote my own display method. 

I have just finished some CSS mockups of the interfaces that I previously mentioned here.

Images

I found the Chapter 5 Forms in "The Art & Science of CSS, to be very helpful and I recommend the book to any designer and especially to code developers like me who need that extra help in designing nice looking forms.

Before I start let me say this was the best of failures, I learn a-lot about  OOP Java-Script and Dom Scripting and using 3rd party library's , after working on the project I know 3 things, Java-Script is an extremely expressive language is a pain to debug but Is my firm favourite dynamic language. The second is don't use a 3rd party library that doesn't have excellent documentation its just not worth the pain.  Thirdly Active X objects are terrible way to integrate desktop applications into the web.

The Aim

• To develop a web based HTPC application that would list TV recordings and using MPClassic allow these files to opened and played.
• Display files based on there date in a number of lists and also a Calendar.
• Use Java-Script and Active X objects
• Use Internet Explorer as browser, and Active Desktop to host the web-page on a desktop. 
• Only be available on a local level. 

The Results

I was able to create a beta build using Active X file objects with the EXT Java-Script library to create  menus, based around weeks. This seemed appropriate as television shows tend to be grouped into weeks, I also build a Java-Script calendar that would show the shows recorded on that date. Using query String an another Active X object I was able to get MPClassic to load a particular file.

The bugs which were the killer, The calendar never quite worked correctly and the File list where to easily corrupted, I don't think any of these bugs where unfixable but I did not wish to invest the time , when I decided the Active X approach was not worth the effort. Since Fire-Fox does not support JScript Emulators the project was IE only.
  

File download of current Work: HTPCSite.zip (1.13 mb)

I plan to revisit the project in the future, and replace the Acitve-X objects with a .Net Web-Service and a JSON objects to pass the file information to the browser code, I will also like to change the Java-Script library to the YUI, as I found the Documentation to be easier on the brain :-).

The Design pattern below for a JavaScript widget, is inspired by the pattern used for YUI-Framework widgets. I have made a copy for future projects. Some of the Features of this pattern are.

• Constructor by calling object.init().
• Public and Private Variables.
• Public and Private Function.
• Encapsulated in a namespace.

//repeat below line only once to create the Namspace

var NameSpace = function (){//empty add properties later}

//widget model.

NameSpace.Name = function()
    {
        // Private Variable for the module. Not accessible from outside 
        // Private function. Not accessible from outside 
    return { 
                  //public properties 
   return this; 
                //public functions

     init : function(){ // Priviledged method. Can be called from outside
            // Here comes the initialisation code }, //end int function 
      }; //end of return 
  }();  //end of module