All posts by George Mockford

Embedding Web Grids #2 – Editing

HTMLGrid for Windows Applications – Part #2

JQGrid/JQuery

This is part #2 of my JQGrid series and although later than originally intended but the extra time was for a number of reasons including enhancements in the JavaScript, adding more data to the examples, and bringing the JQGrid software up to the latest release. The consequence of doing that was that the original samples posted within Uniface.info had to be re-worked.  Hopefully the Uniface.info samples will be updated but for the moment you can download the New version using the link at the bottom of this post.

That may be annoying but it does bring in additional grid features not present in the previous versions so I think that it will prove worthwhile. However this sample does contain both old and new sample components. The back-end service has also been re-factored to support both XML and JSON instead of separate components and a rework of the structs portion for good measure.

The sample contains all of the code you need described within the readme document but they say “an image can speak a thousand words” so for this post I simply want to show you what the options look like with the following screen captures. It makes this blog a bit long but hopefully you can better see the benefits of using this grid.

The focus this time is primarily  editing and three of the sample components show the three editing types namely form based, row based, and a variant of cell editing that behaves like the native grid and allows updates to multiple rows. All three options provide full C.R.U.D functionality. Look at the names of the form components in the title for the following images and match to the components in the downloadable sample.

Form Based Editing. Notice in the sample the addition of extra icons on the toolbar for Add, Edit, and Delete. Not very visible in this screen shot but look carefully and you can see them at the bottom. Select a row and click on the appropriate toolbar icon and a simple data entry form will pop-up to allow you to update, delete, or add new rows. Pressing the appropriate button  will effect the transaction. In this form rows are edited one-by-one.


Inline editing. This time editing icons are presented for each row( except add which is still in the toolbar). Select a row and choose action using the grid inbuilt action icons on each row. Save icon stores the changes.


Inline row Editing. Once again editing icons within the toolbar but this time on selecting a cell it becomes editable (if enabled), including options to format changes like the datepicker shown.  Not shown in this image but there is a Uniface form button in the sample that when pressed will cause the changes to be applied. In this form of editing multiple updates are done together. I do have to warn you though I was a bit lazy so in the event that you switch to a new page the updates are lost but I figured that this might be something to add and get experience using the grid API.

As there was a delay in providing this second part I added some extra examples to show large file paging (5,000 and 50,000) rows including options to group data by columns and column selection.


Grouping by column.     Choose a column via the dropdown list and the grid regroups on that selection.      

      

Column Selection I added the column selection icon to the toolbar that when selected provides a simple column selector.

Theme selector Lastly I added to all of the samples a theme switcher so that you may experiment viewing the grid under different theme effects provided by the jquery UI library, although of course you can create your own. You can of course fix the theme and remove the switcher but have fun with the sample themes provided.
These are just a few examples of the capabilities of this grid, I hope that you find them useful and next time we will explore other areas like cell formatting and tree grids and given time I might throw in a few other bells and whistles

Download updated Sample
When downloaded look for readme file

JQGRID was created by Tony Tomov at Trirand Inc http://www.trirand.com/blog/ 
JQGRID Demos http://trirand.com/blog/jqgrid/jqgrid.html

Embedding Web Grids

HTMLGrid for Windows Applications – Part #1

JQGrid/JQuery

During this years North American User Group we presented an alternate to the standard Uniface Client/Server grid control using a web based grid inside of the Uniface HTML control.

The grid uses a JavaScript library, JQGRID/JQUERY to render data in a style similar to a classic window or client/server control.

Following the user group we had a number of requests for more information so we decided to use this as an opportunity to start a blog series on that subject and in the process get feedback from our user base and gain insight on what can be done with this powerful and flexible control.

The purpose of this is not to replace the regular grid but to explore web/JavaScript technologies and how they may be incorporated into Uniface. Over recent years these libraries have advanced to the point where the features and abilities equal, and in some cases surpass, features available to windows based controls making it possible benefit from these advances within traditional Uniface applications.

This is the first in a series of articles based around JQGRID but JQgrid is only one of many and if sufficient interest occurs perhaps in the future we will expand the series to include others but first we need to describe the basics and from there expand to encompass the full range of features.

A key part of this integration is to try and keep within the concepts and usage of the grid as used within a regular web page and not place too much emphasis on making it perform exactly like C/S grids although there are obvious similarities.

JQGRID was created by Tony Tomov at Trirand Inc. who maintains a blog http://www.trirand.com/blog/  where you can download the latest versions and if you wish purchase support for commercial projects. Having said that JQgrid is open source and available for free without support although Tony’s free blog is a rich source of questions and answers. The list of features is truly impressive and can be best visualized by visiting the demonstration site http://trirand.com/blog/jqgrid/jqgrid.html

One thing of note is that even though this grid is web based and normally driven via a webserver we recognize that such a requirement is not a part of windows based applications. For that reason we have introduced techniques to eliminate that requirement and interface directly with the application via the “extended-trigger” trigger and the direct use of the local file system for grid resources. We have tried to keep the use of JavaScript to a minimum although to gain maximum use  of these techniques  a familiarity with JavaScript and in particular the JQUERY library is a must.

A part of this will be to provide discrete samples within Uniface.info’s samples area for download and I’ve created a more detailed document that tries to explain some of the grids working in detail.

The focus of this first session is on data retrieval (read only) and in the next session we will deal with editing data. Beyond that we will touch on topics like field formatting including themes,  sub-grids, grouping and a host of other features. Take a look at the HTMLgrid part1 sample and also the more detailed explanation and remember I’m hoping that this is a two-way-street so feel free to question, adjust and improve the samples especially if you find a better way to do things.

Taking a bite out of the Big Apple!

 

No not New York silly the one located in my old stomping ground in Cupertino,  Apple Computers.

I will admit I’ve never been happy about Uniface hanging on to and supporting old stuff like character mode and some of the constructs in proc-code that have stayed the same for, well, for ages. And as for that saying ‘never a technology Break’, perhaps it’s time to move on?

However I started a new project developing apps to run on Apple iPads and iPhones and immersing myself into the depths of objective C and Xcode during which I experienced a reality check that demonstrates that one software manufacturer doesn’t have such scruples with maintaining old code and in particular 1st generation iPads.

Diving into the manuals I successfully created my first app, worked through the maze of licensing and deployment, which BTW is challenging to say the least, testing it in the sim and then finally deploying it to a device.   Sadly no, it didn’t work opps!  So what went wrong?

I’m using the latest and greatest xcode under ios 6.1 where the default is to use storyboards to design/configure the user interface graphically. As a consequence the procedure uses the latest method calls and requires, according to the documentation, ios 5 as a minimum.  OK that’s cool as the sim is 6.1 and my test device is a 1st gen iPad has ios 5.1.1 so that’s OK, isn’t it?

Then again maybe it isn’t!  It seems Apple has decided not to provide an update to the iPad 1st gen keeping it at the ios 5.1.1 level.  Gen 2 and above, that’s the ones with cameras BTW, can happily update to 6.1.

OK so ‘hold the phone’, that means that as app developers move forward there is a very real possibility, no wait, probability that apps will refuse to run on my iPad and I’ll have to buy new, and considering that the iPad was introduced in 2010 means mine is less than 2 years old!!!

As it turns out all is not lost because there is a simple change to disable autolayout and all is well again, but that assumes all developers will use this moving forward which I doubt.

So looks like I’ll have to shell out for a newer device, for $600. Damn I wish I’d thought of this. Maybe we get everyone to re-purchase Uniface licenses every two years? Yeah like that is going to work!

Maybe the Uniface saying ‘never a technology break’ isn’t such a bad thing after all?

Meanwhile anyone wants to buy an iPad, works well with all apps, except camera apps naturally.

At least until the newer apps come out!

Only one careful owner?

I’ve been Sent to Coventry!

 

To a brit to be sent to Coventry is a phrase used to punish someone. According to Wikipedia:

To send someone to Coventry is a British idiom meaning to ostracise someone, usually by not talking to them.

Which is funny considering that the UK user group was held in that fair city a few weeks ago and I was directed to attend?  I wondered, was someone trying to tell me something?  To anyone who has attended any of this year’s User group workshops,  attendees will find within the sample application a kind of “Easter egg” or one of those “undocumented features” put to good use as a technique to manipulate fields and frames.

When assembling the sample last September I didn’t think much about revealing how it works, but during and after user groups I’ve received reactions that vary all the way from “OMG! You can’t tell anyone about that!” to “Brilliant, I’ve been asking how to do that for years!”

To which I respond with the classic sales mantra “The customer is always right!”, and apparently customers are asking how it works so it must be right? As its already public knowledge to workshop attendees I thought I’d share with non-attendees.

The Easter egg was about programmatic manipulation of splitter bars. Y’know those handles that you can use to attach to fields with which the user can drag and resize stuff with their mouse.

Internally each splitter is assigned a name “S0” to “Sn” assigned sequentially as each splitter is added to the screen. Remove one and all higher numbered splitters are renamed. True not exactly optimal, but if you can determine what the splitters internal name is by counting as each is created then you can use “$windowproperties” to programmatically move the splitter to either side of the frame, if you define a vertical bar, or top/bottom of the frame for a horizontal bar.

For example the first vertical splitter (That would be “S0” BTW), you can code:

$windowproperties(“<formname>”,”splitbar”)=”splitbar=S0:MIN”; Move to the left
$windowproperties(“<formname>”,”splitbar”)=”splitbar=S0:MAX”; Move to the right
$windowproperties(“<formname>”,”splitbar”)=”splitbar=S0:RESTORE”; Restores it back to the original position

So now you know.

Perhaps when considering attendance at the next User Group Conference, aside from the delights of Las Vegas and Coventry you might consider what else you might learn, and who knows maybe there may be another Easter egg next time?

Uniface 9.6 Workshops: The Good, the Bad and Internet Connections

Last time we looked at our User group workshop from our side so now I’d like to share with you some of the comments.

Happily most, actually 89%, of respondents agreed with our basic reason for the workshop and that was to get some “hands-on” experience with 9.6, and to generate ideas on how to use new features in their work. So that was cool. Remember there are no pre-requisites for attending the workshop and I was happy that there were a few non-technical people in attendance as well.

Ok so enough of the fluffy-bunny stuff what was the stuff that people didn’t like and what can we do to fix that?

First comment, workshop was slow to start, wasted 30-45 minutes. Yeah well that was down to me, we had the German user group the week prior and when I setup the environment for Las Vegas I choose the German VM instead of the one for the USA.  Opps!, my bad, so apologies for that. Funniest thing about that was Stefan, who is a native German speaker, was also having problems because it was in a dialect for a specific region in Germany. Who knew there was a difference?

One part that was out of our hands was the discovery that the Vdara Internet policies control Internet access by limiting connections to 30 minutes after which you had to reconnect. Ok for most hotel visitors, but not for us. Next time we will have to ask for a permanent and unrestricted connection and no doubt the next venue will charge extra for that.

One other part that is out of our control and that is the response time. I think Cloud Shares response was workable but it’s never going to be the same as a local server so if you are a hard-code developer or gamer then you are going to have to learn to type a little bit slower.

Interestingly considering that connections were a little slow and the hotel disconnected after 30 minutes I’d say that over 50% of attendees requested access to the environment after the workshop. We are charged for each of these so it could get a little expensive, but if we provided one of these what would people think is a price that they would be willing to pay for ongoing access?

One set of responses did get me a little confused and that was the workshop document. Some said it was too detailed while some said that it needed to have more detail. I had a similar set of comments regarding the workshop example in that some wanted more coding examples while others were fed up on the amount of coding even though most was cut-n-paste and some components were pre-built.

The workshop isn’t a race so we gave attendees four options namely; code it yourself, for hard core developers. Cut-n-paste for those of us, including myself, who are keyboard challenged. Import the pre-built exercises, one by one or for those keen to explore the delights of Las Vegas one more time simply import the entire solution, compile, done!

Not sure what else to provide as it simply proves that you can’t please all of the people all of the time!

Having said that perhaps this is the point at which you can tell us what you would like to see at one of these workshops. If you have ideas that will make the next one that little more ‘special’ then drop me a line and we will see what we can do.