Archive

Archive for the ‘JQTouch’ Category

Desktop vs Touch

December 15, 2010 2 comments

For my slider control I would ‘like’ it to work on both the desktop and touch environment, if only because it’s much easier to debug the script on the desktop than on the ipod!

I have been trying to figure out how to standardize the mouse and touch events between the desktop and the touch device but after a lot of too-ing and fro-ing I have decided it will be much easier NOT to do that and have, sad to say, two blocks of code, one for the the desktop and one for the ipod. As much as I hate this the differences are just too much for my feeble javascript skills to sort out so this seems the easiest approach. I am not quite sure how I will test the touch part on the desktop yet but I’ll cross that bridge when I come to it although I suspect some ‘test only ‘ code will be a big part of it!

Categories: Coding, iPhone, JQTouch, jQuery

jQTouch/jQuery plugin fun

December 6, 2010 Leave a comment

After a couple of days of pissing around trying to create a pugin for JQTouch I gave up. It’s not that the plugin itself is hard but I found it impossible to get it to play nicely with multiple elements on a page. As soon as I tried to create TWO slider elements with different settings things got all screwed up and no matter how much I messed with the code I could not get it to play nice with JQTouch in there.

Then I thought, hang on! Why am I bothering to create q JQTouch plugin, I don’t actually need to interact with JQTouch itself, just the DOM elements on the page and I can do that with jQuery. So I have ended up creating a jQuery plugin that will creates nice sliders on an iPhone/iPod touch that work with touch events instead of just the mouse events like the jQuery UI slider widget. It also won’t need all the jQuery UI framework stuff like mouse and widget to actually work.

Well it will when I am done. Having gotten it working initially I ran into the same problem I had with JQTouch when I tried to create multiple sliders on a page.

After a couple more  of days of reading and experimentation I have finally gotten my framework plugin to actually work correctly now so I just need to port in the other stuff I did for the slider itself which should not be too hard.

Then all I need to do is do the mouse/touch capture stuff and make the slider move. Compared to the hurdles I have just cleared, that should be a piece of cake (ha ha!).

Categories: Coding, JQTouch, jQuery

Reinventing the wheel…

November 30, 2010 Leave a comment

Having spent ages making my own Windows Media Payer OCX, I have just discovered that Microsoft already created one!

On the plus side I learned lot of stuff AND mine does exactly what I want it to do, so it was not all wasted time.

 

I’ve also decided to try and create my own slider control that will work with JQTouch instead of trying to force the jQuery UI one to work in a touch environment which it ‘almost’ does but not quite. All I have to do is convert the JQuery UI one to accept touch events instead of mouse events. Should be dead easy.

Yeah, right…

Categories: Coding, JQTouch, jQuery, VB6

Well that sucks…

November 21, 2010 Leave a comment

I’ve just spent ages building a web based iPhone UI using jQuery and jQTouch. One of the elements I wanted to use was a slider control and JQuery has a really nice one. I got everything working, got it talking to my back end and updating the back end in real time, pretty cool.

Trouble is I’ve been doing all my testing on Safari on my desktop. Tried it on the iPod touch and you cannot drag the slider control. I can touch the control and the slider jumps to where I touched which is great for coarse control but without the ability to drag the slider itself I have no fine control.

I don’t really want to use a couple of buttons to move the slider, seems a bit daft. I may have to use them though, remove the slider and just display the setting as a value. Not as good visually but it’ll do if I have to go that route.

Not in a happy place right now!

Categories: Coding, iPhone, JQTouch, jQuery Tags:

Playing with BIRT

January 16, 2010 5 comments

Some time ago I started to experiment with BIRT, the eclipse based Business Intelligence and Reporting Tool. Recently I’ve been taking another look at it. I found some examples of how to set it up to talk SOAP and after a little bit of experimentation got it to work. Great!.

Then I thought, what about viewing the reports in a web browser. A bit more digging and I found some info on using the BIRT Report Viewer (in the run time download) with Apache tomcat. So off I toddled to grab tomcat and the viewer,  and after a few false starts (never done this before) I managed to get it all running and my report visible in my web browser.

So now I am wondering if I can format the reports nicely to view on an iPhone (should just be some CSS) but also, could I embed some javascript like jQuery or iUI into the reports so that they behave like regular web apps but give me the ability to do the actual design using a decent tool.

Mmmmm. Brain cells are waking up….

The war is lost (for now)

December 17, 2009 2 comments

After several hours of fighting with JQtouch I have given up for now. My application has a login screen that’s really just a simple form that I want to submit. If the login fails then the back end send a complete new page. To make it work with iUI I had to make a small modification to iUI to tell it to do a normal form submit (I added a tag to the form that the iUI javascript detects and does a normal form submit instead of using Ajax). In effect all that iUI is doing on my logon screen is formatting the html.

With jQTouch I just cannot get it to stop using Ajax. When it does I have the same problem as before in that it simply adds the new page to the DOM and I end up with duplicate logon ‘pages’ in the DOM, even though you can only see the last one because I put class=”current” on it.

If I turn off the jQT Ajax form submission using the init options then normal form submission just does not work either.

After some experimentation I got it to work with Safari on the desktop but it still would not work on my iPod. Plus I could not get a nice standard ‘whiteButton’ to work either as the submit button.

So that’s it for now, I’ve spent enough time on it. Part of the reason to use jQT was that it is built on jQuery and I want to use jqplot for graphing which is also built on jQuery so switching to jQT would result in using a common framework.

All that said though, jQT has some nice features, particularly the animations and I’ve learnt a heck of a lot more about building web applications for the iPhone/iPod Touch so it’s not been a waste of time at all. It is however time to start moving forward again.

Now I have to try to make iUI and jQuery/jqplot play together nicely. Should be fun!

Categories: iUI, jqplot, JQTouch, jQuery

One battle won, but not the war (yet!)

December 16, 2009 2 comments

I have been working on how best to convert my iUI based phone application to use JQTouch. My application consists of several levels of dynamically created pages of data. So you start at the Home level, click a link, go to the Results1 level, click a link on there and go to the Results2 level etc. Basically you are drilling down.

When the click results in a call to the back end, the level number increases by one as you drill down. Clicking on a link to book marked data takes you to a DIV within the current result set so the level does not change since there is no back end call.

In order to generate the level numbers the back end includes the current  level number as a parameter in the url of each link within a result set and increments it each time it runs as you drill down.

When you hit the back button, iUI would simple replace the currently displayed page with the previous one from the history cache. If you then hit a link that drove the back end again, the next result set would have the same id as the one you just came back from and iUI would replace it (So Home Page, click->Level1 result set,back->Home Page, click->Leve1 result set again with same id as before).

So far, so good.

When I switched to JQtouch I found that jQT does not replace an existing DIV with the new one in the result set if it has the same id. This meant I ended up with two DIVS with the same id. Not a problem really except that:

  1. If I need to reference anything within the new DIV, it was after the old one in the DOM so it never got found.
  2. It’s a storage leak since the overall DOM just keeps getting bigger.

In fact, issue two was much larger than it appeared because any book mark DIVs within a result set might never be replaced as each set was unique.

So what I needed was some way to delete all the DIVs at previous higher logical level than the one I was at. So if I am on the home screen (level 0) and I go to the next screen I am at level 1 so delete anything at level 2 (should not be anything). When I return to the home screen (level 0) delete any DIVs under the body at level 1. That will delete the main result set DIV and any attached bookmark DIVs for that result set.

The problem was, how to know which divs were at which level, and how to know when to delete them?

The logical level problem is actually quite easy. Since my back end knows what logical level the current page is because of the parameter value in any link that is clicked that drives it, I simple included the level number in the DIVs class, along with any other class values it might need. For example:

       <div id="home" class="0">

Then, in the head section of the initial page I added the following script:

$('*').bind('pageAnimationEnd', function(e, info){
   if (info.direction == 'in') {
   var classes = \$(e.target).attr('class').split(' ');
   var level=-1;
   for (var i=0;i<classes.length;i++) {
      var myclass = parseInt(classes[i]);   // make integer    
      if (classes[i] == myclass) {          // if numeric
         if (myclass > level) {             // if greater then prev
         level = myclass;                // save it
         }
      }
   }
   var leveltoremove = level+1;             // curr level or -1
   if (leveltoremove > 0) {                 // do not del home div
      $('body > div').remove('.'+leveltoremove);  // Remove divs
      }
   };
 });

This code runs when jQT completes the page animation, it is only interested in the target page (info.direction == ‘in’). It grabs the class(s) from the target page (DIV) which is a space delimited string of class names and splits them into an array. Then it looks for the numeric one which should be the level number of that DIV. It then adds one to that level number (I.E, the level above the one we just went to) and deletes all DIVs under the body with the that level number, So if we went forward to from say level 1 output to level 2, it would delete all DIVs under the body with a class of 3 (should not be any since we are going forward!).

When you go back the target level is the previous pages level, (E.G. 1 in this example) so it would delete all DIVs under the body with a class of 2 (which is where we just came from).

The –1 level is used to ignore  ‘page’ DIVs that might be invoked from the toolbar buttons for example such as an About screen or a Settings screen. When you open them, if they had a level the code would try to delete any DIVs with the next level number so if the toolbar screen had a level of say 1 and you were at logical level 3 when you invoked it, the code would try to delete logical level 2 DIVs. Not what you want!

Trying JQTouch Again

December 14, 2009 2 comments

I was playing with JQTouch again tonight and I managed to make it behave the way I wanted when loading external data from a link. Turned out to be far simpler than I thought.

I’d also found some sample code on how to invoke the jqplot javascript after the dynamic page containing it had loaded but the example uses jquery. That’s why I was messing with JQtouch again.

I can live with having to define the toolbar of each ‘page’ of data and a generic back button. So looks like I’ll be converting my app to use JQTouch now.

Such fun!

Categories: iPhone, JQTouch

Sticking with iUI

December 13, 2009 Leave a comment

So I’ve spent a couple of days trying to do some simple stuff with JQTouch. All I want is a link on one page that runs a script on the server, that delivers the next ‘page’ but I want the new ‘page’ to slide in like it does for a link to a bookmarked div (href=”#something”).

That’s pretty much the default behavior for iUI but it looks like in JQTouch you have to resort to using jQuery functions and implementing that yourself. More flexible? Yes. Harder? Yes? More error prone? Yes (since you have to figure out how to do that yourself). Frustrating? Definitely!

JQTouch does have some nice features though, not least of which is the ability to ‘customize’ it via startup options, as to how much it does for you but it’s still a bear to get started with. It also has some nice ‘themes’ but that’s just markup and some artistic ability (which I lack!).

I’d love to stick with it and maybe I will return to it later on but for now, life is too short to be fighting with tools that are supposed to be helping me. Remember, I don’t do this web stuff for a living, it’s just a side line to my regular work so for me at least it has to be simple and easy to use.

Categories: Development Tools, JQTouch

JQTouch Dir Structure

December 12, 2009 Leave a comment

It took me ages to get started with JQTouch, not helped at all by missing an end tag from one of my script sections (oops!)., but mainly because the sample header file code on the google download site did not match the directory structure that was downloaded. Basically this meant that the browser could not find half the stuff it needed when it loaded my test page and all I ended up with were blank pages.  So I thought it might be useful just to show what I did to get started.

This is what you get when you download and unzip the source:

After downloading the source I created a directory under my projects htdocs root directory (jqt) on my web server and copied in the ‘jqtouch’ directory and its contents from the download structure. Then I copied the ‘themes’ directory and content underneath the jqtouch directory so that it looked like this:

I then copied in the jqtouch.png file from the ‘demos\main’ sub directory of the downloaded jqtouch structure. This png is used to create the icon for the web app if you create a shortcut to it on the home screen of the iPhone.

After that, I was able to use the standard JQTouch HTML header setup that is shown on the Google download page in my index.html page (however see the note below):

<html>
   <head>
   <title>JQTouch</title>

   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
   <script src="jqtouch/jqtouch.js" type="application/x-javascript"
           charset="utf-8"></script>
   <style type="text/css" media="screen">@import
            "jqtouch/jqtouch.css";</style>
   <style type="text/css" media="screen">@import
           "jqtouch/themes/jqt/theme.min.css";</style>

   <script type="text/javascript" charset="utf-8">
     var jQT = new $.jQTouch({
      icon: 'jqtouch.png',
      addGlossToIcon: false,
      startupScreen: 'jqt_startup.png',
      statusBar: '',
      preloadImages: [
       'jqtouch/themes/jqt/img/back_button.png',
       'jqtouch/themes/jqt/img/back_button_clicked.png',
       'jqtouch/themes/jqt/img/button_clicked.png',
       'jqtouch/themes/jqt/img/grayButton.png',
       'jqtouch/themes/jqt/img/whiteButton.png',
       'jqtouch/themes/jqt/img/loading.gif'
     ]
    });
   </script>
   etc;...

Note:

I later discovered, when browsing my web server error log that the default paths to the preloaded images were wrong for my configuration, so I changed them to those shown above. The screen formatting still appeared to be working though even with the incorrect path for the preloaded images, so I suspect it was not finding them preloaded and simply getting them from the correct location.