Servoy Forum

Hi All

I need to build a form which has a selection of images (blobs) in a grid rather than a list view.

I would be grateful for any advice on the best way to approach this. I was starting to think about doing it with an html table, but I think it would be tricky to be able to interact with the data on the form (like clicking an image to focus on that record etc.)

Should I do this with a solution model form instead? Is there a plugin for a grid view?

Thanks for any advice anyone can give me.

Bevil

Hi Bevel,

I have done stuff like that using the labels and global relations on a detail form.
So for each image in the grid you have a global field for the ID and corresponding relationship to your image table. Then you can put the labels with related dataproviders on the form at designtime or via code using the solution model. Then using code you fill (or clear) these global variables with the PK's of the images you want to show.
In my experience this is a better approach than using HTML because it takes a while for all the images to load inside a HTML_AREA. With labels you have the benefit of lazy loading so it feels more responsive to the user.

Hope this helps.

Hi Robert.

Thank you for that. How do you deal with putting x number of labels across and y number down? I might also want to be able to programatically change the size of the images (I could calculate how many times a given width image will fit across the width of the form, but how do you actually place x number of labels across and then y number down the form?) I will not know how big my foundset will be on any given search.



Bevil

Hi Bevil,

You can do this using the solutionModel and some math . You can then also adjust the height of the form so it actually scrolls like it was a list view.
And for changing the size of the images, you can do that using runtime properties or by recreating the labels using the solutionModel (like on the onResize event).

excellent. I better get learning on how to use solutionmodel..

Thanks Robert.

bevil wrote:excellent. I better get learning on how to use solutionmodel..

http://www.servoy.com/content.jsp?t=1463

See you next month

Hey Marc

Not sure yet if I'm going to be there next month.. We'll see..

How can there be a ServoyWorld without C.#1?

Hi Marc

Ever since Servoy exposed the SolutionModel API, some developers have had trouble understanding the concept

Looking forward to your session as I'm certainly in that group of people

However - if you need to know more about the LBW rule in Cricket I can probably help . . .

grahamg wrote:However - if you need to know more about the LBW rule in Cricket I can probably help . . .

LOL

There are many html/jquery galleries out there (http://192.241.236.31/themes/preview/sm ... llery.html). An alternative approach would be to wire one of these up via the html viewer (if smart client) or just a plain html field (if web client). The trade off is that for an advanced UI that is already built you have to wire it up. Performance-wise the results should be better than using native Servoy elements because the UI is all in the client and you are just passing data back and forth. I suspect the new Servoy 8 web client operates along the same principles.

At this point, I"m not sure how valuable learning solution model from scratch really is. And I speak from being the first outfit to do "servoy-within-servoy" (2008?). For starters the target of solution model is the current Servoy clients, all of which are all way behind the tech curve now. For future web client, there is no reason for the extra solution model abstraction for dynamic UI's when the you can just do it in html/jquery/components/whatever directly.

Learning solution model and client-side html programming is about the same level of difficulty (and have a lot of similarities). So do you want to learn an approach where you have to build all of your own UI's by hand or do you want to learn an approach where you can start with a whole world of UI components as your starting point?

Hi Bevil,

Apart from the global/relationship approach you could also use HTML inside the labels and then use the blobloader to load the images.
No dataproviders needed on the labels then.

Hope this helps.

Hey Robert

Thank you for the reply

The problem I have is how do I literally place independent labels across a form? If it is not one html label that then does the tables within it, how do I make it flow right across x columns, and then down etc.?



Bevil

Hi David

Thanks for the reply.

Hmm... Use solutionmodel / DON'T use solutionmodel.. I am confused.

I still have not made the jump to pure webclient, but I suspect that when I do, I expect the html way of doing it will be the better choice..

I suppose I have to accelerate the process of moving to webclient. I will look through the html/jquery galleries and see if I can figure out how to wire it up...

My worry at the moment is still how to approach rows in the database and graphically tell them to appear in columns. I guess it is a programatic factor of how big the columns are, and how many rows we have ?...

I've got my work cut out for me. Might just tell the client that I can't do that, not sure that this one little feature is actually worth the time.



Bevil

Hi Bevil,

bevil wrote:The problem I have is how do I literally place independent labels across a form? If it is not one html label that then does the tables within it, how do I make it flow right across x columns, and then down etc.?

You will have the same challenge when you create the HTML table since you need to generate the rows and columns then too. Of course the HTML engine will take care of the filling out across the form.

I started on a small module to easily create such a grid using the solutionModel and the blob loader but I ran into some snags.
With the following code I create the grid below:

Code: Select all

function onLoad() {
    foundset.loadAllRecords();

    // params are form name to show the grid on, foundset with images, image colum name
    var _oGrid = new scopes.IMAGEGRID.JSFoundSetImageGrid(controller.getName(), foundset, 'image_data');

    // set the amounts of columns
    _oGrid.setColumnCount(5);

    // create the grid on the form using the solutionModel and the blob loader
    _oGrid.createGrid();
}

But as you can see it crops the images instead of reducing them (even though I very much tell it to).
And another issue is that it performs pretty well in Developer 6.1 but when running it in Developer 7.4 it's an incredible hog. So it looks like this will be a non-starter unless Servoy really fixes these performance issues in 7.4.