Grid view of images

Questions and answers for designing and implementing forms in Servoy

Grid view of images

Postby bevil » Fri Sep 05, 2014 1:49 pm

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
bevil
 
Posts: 163
Joined: Thu Oct 18, 2012 7:31 pm

Re: Grid view of images

Postby ROCLASI » Fri Sep 05, 2014 2:40 pm

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.
Robert Ivens
SAN Developer / Servoy Valued Professional / Servoy Certified Developer

ROCLASI Software Solutions / JBS Group, Partner
Mastodon: @roclasi
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5438
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: Grid view of images

Postby bevil » Fri Sep 05, 2014 2:46 pm

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
bevil
 
Posts: 163
Joined: Thu Oct 18, 2012 7:31 pm

Re: Grid view of images

Postby ROCLASI » Fri Sep 05, 2014 2:55 pm

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).
Robert Ivens
SAN Developer / Servoy Valued Professional / Servoy Certified Developer

ROCLASI Software Solutions / JBS Group, Partner
Mastodon: @roclasi
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5438
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: Grid view of images

Postby bevil » Fri Sep 05, 2014 3:37 pm

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

Thanks Robert.
bevil
 
Posts: 163
Joined: Thu Oct 18, 2012 7:31 pm

Re: Grid view of images

Postby mboegem » Fri Sep 05, 2014 3:58 pm

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


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

See you next month ;-)
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Grid view of images

Postby bevil » Fri Sep 05, 2014 4:02 pm

Hey Marc

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

:)
bevil
 
Posts: 163
Joined: Thu Oct 18, 2012 7:31 pm

Re: Grid view of images

Postby mboegem » Sat Sep 06, 2014 1:56 am

How can there be a ServoyWorld without C.#1? ;-)
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Grid view of images

Postby grahamg » Sat Sep 06, 2014 10:03 am

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 :oops:

However - if you need to know more about the LBW rule in Cricket I can probably help . . .
Graham Greensall
Worxinfo Ltd
www.worxinfo.com
grahamg
 
Posts: 752
Joined: Fri Oct 03, 2003 3:15 pm
Location: Midlands UK

Re: Grid view of images

Postby mboegem » Sun Sep 07, 2014 9:43 pm

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


LOL
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Grid view of images

Postby david » Mon Sep 08, 2014 8:06 pm

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?
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1727
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.

Re: Grid view of images

Postby ROCLASI » Tue Sep 09, 2014 9:36 am

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.
Robert Ivens
SAN Developer / Servoy Valued Professional / Servoy Certified Developer

ROCLASI Software Solutions / JBS Group, Partner
Mastodon: @roclasi
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5438
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: Grid view of images

Postby bevil » Tue Sep 09, 2014 12:54 pm

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
bevil
 
Posts: 163
Joined: Thu Oct 18, 2012 7:31 pm

Re: Grid view of images

Postby bevil » Tue Sep 09, 2014 12:58 pm

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
bevil
 
Posts: 163
Joined: Thu Oct 18, 2012 7:31 pm

Re: Grid view of images

Postby ROCLASI » Tue Sep 09, 2014 1:16 pm

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();
}


Screen Shot 2014-09-09 at 13.04.54.png
ImageGrid with some screenshots
Screen Shot 2014-09-09 at 13.04.54.png (92.37 KiB) Viewed 10122 times


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.
Robert Ivens
SAN Developer / Servoy Valued Professional / Servoy Certified Developer

ROCLASI Software Solutions / JBS Group, Partner
Mastodon: @roclasi
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5438
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Next

Return to Forms

Who is online

Users browsing this forum: No registered users and 5 guests