{"id":1409,"date":"2012-06-27T18:14:22","date_gmt":"2012-06-27T23:14:22","guid":{"rendered":"http:\/\/anvil-of-time.com\/wordpress\/?p=1409"},"modified":"2021-03-11T12:32:43","modified_gmt":"2021-03-11T17:32:43","slug":"powerbuilder-gotcha-grid-datawindows-with-picture-controls","status":"publish","type":"post","link":"https:\/\/anvil-of-time.com\/powerbuilder\/powerbuilder-gotcha-grid-datawindows-with-picture-controls\/","title":{"rendered":"PowerBuilder ‘Gotcha’ – Grid Datawindows with Picture Controls"},"content":{"rendered":"

So I’m working on a ‘dashboard’ style datawindow in an application which shows a grid of data along with some graphics so the user can easily see changes\/important stuff. There are a number of reasons to use a grid datawindow for this, especially since they can easily be changed by the user to suit their particular tastes and preferences. Since the individual columns can be resized by the user, I can’t use the ‘display as bitmap’ option on a column to display my graphics since they can be resized which screws up the image on the datawindow. Fine, I’ll use picture objects placed on the individual columns and then use expressions to control the positioning of them automatically. Gee, isn’t PowerBuilder great?<\/p>\n

Now in my particular situation I have a series of picture objects placed on a column with the value of the column itself determining which of them is visible. This is standard stuff achieved via an expression on the visual property of the picture objects . The next thing to do is to set the X position on the picture objects based on the column it is placed upon; I’d like the position of the picture to change dynamically as the column itself changes due to the user dragging the column to a different position or if they make it larger\/smaller in width. So far, so good – I’m starting to count my chickens…<\/p>\n

I fire up the app and ‘wha, wha, wha, wha, whaaaa…<\/a>‘.<\/p>\n

Here is the application when I launch it.<\/p>\n

\"\"<\/a><\/p>\n

Looks fine, my visible expressions are correct.<\/p>\n

I resize the Mood column to make it larger and…<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Something’s not working as expected.<\/p>\n

Okay, lets try re-arranging the columns by dragging Name after Mood.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Well this sucks, grrrr….<\/p>\n

What happens if I make the Mood column smaller?<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Sigh.
\nOkay boss, when is the deadline for this?<\/p>\n

First let’s tackle the positioning issue. To make the expressions on the pictures work correctly, each has to be unique. So these expressions will not work:<\/p>\n

long(describe("custmood.X")) + 100\nlong(describe("custmood.X")) + 100\nlong(describe("custmood.X")) + 100<\/pre>\n
These are the X position expression for my three picture objects on the datawindow column. To make them unique I change them to:<\/p>\n
long(describe("custmood.X")) + 100 \/\/ p_1.X\nlong(describe("custmood.X")) + 100 + 0 \/\/ p_2.X\nlong(describe("custmood.X")) + 100 * 1 \/\/ p_3.X<\/pre>\n
Note also that ‘+ 100’ is different from ‘+100’ as far as this goes<\/p>\n
Now when I run the app and I change the order of the columns in the grid I get:<\/p>\n
\"\"<\/a><\/p>\n
Moving Name to after Mood.<\/p>\n
\"\"<\/a>
\nCool<\/p>\n
One thing of note. If you are going to use a Modify to change the X position expressions at runtime rather than within the datawindow definition, each of the ‘New’ expressions must be different from those in the original. Thanks to my manager Robert Sisk for this tidbit.<\/p>\n
The second issue is a bit trickier and is one I’ve encountered at various times in my PB career. You can look and look and look online for answers to this and find either nothing or many suggestions which don’t work too well. Often you are faced with preventing the user from resizing the column which eliminates one of the main reasons you choose the grid datawindow in the first place.<\/p>\n
Since we are dealing with controls which we have created in the datawindow painter to be the size we want them to be when they appear to the user, all we have to do is capture their widths and then re-apply them once the user has resized the columns on the datawindow. However, we have to create a user event on the datawindow to do this since there is no standard event which is triggered when the user resizes a grid column.<\/p>\n
First define an instance variable to hold the modify information on the picture objects for the datawindow.
\nNext capture the initial values of the widths of the picture objects once the window opens; a ‘post open’ style event is good for this. If your application dynamically changes these for some reason during run time, you will have to reset this after the change so the property is set to the correct value.
\nDefine a user event on the datawindow in question which will perform the modify on the picture objects.
\nDefine a user event mapped to pbm_dwnlbuttonup which will post the first user event. This event is triggered when a user releases the left mouse button on the datawindow (which happens when the are finished resizing the column).<\/p>\n
\/\/instance var and postopen event\ntype variables\nstring is_picture_widths\nend variables\n\nevent we_postopen();\/\/ triggered from open of window\nstring ls_objects, ls_object, ls_type\nlong ll_col_pos, ll_col_start, ll_len\n\/\/ load picture settings to instance variable\nls_objects = dw_1.Object.DataWindow.Objects\n\/\/ go through tab separated list\nll_col_pos = pos(ls_objects, '~t')\nll_col_start = 1\nll_len = len(ls_objects)\nDO WHILE ll_col_start < ll_len\n\tls_object = mid(ls_objects, ll_col_start, ll_col_pos - ll_col_start)\n\tls_type = dw_1.describe(ls_object + '.type')\n\tIF  ls_type = 'bitmap' then \/\/only concerned about bitmaps (picture objects)\n\t\tis_picture_widths += ls_object + '.width = ' + dw_1.describe(ls_object + '.width') + '~r'\n\tEND IF\t\t\t\t\t\n\tll_col_start = ll_col_pos + 1\n\tll_col_pos = pos(ls_objects, '~t', ll_col_start)\n\tIF ll_col_pos = 0 then\n\t\tll_col_pos = ll_len + 1\n\tEND IF\nLOOP\nend event\n\nevent ue_lbuttonup;\/\/ call event to resize pictures if needed, mapped to PBM_DWNLBUTTONUP on datawindow\nthis.setredraw(FALSE)\nthis.event post ue_checkmodified()\nend event\n\nevent ue_checkmodified();\/\/ posted from ue_lbuttonup\nstring ls_mess\n\nIF this.object.datawindow.syntax.modified = "yes" THEN\n\tls_mess = modify(is_picture_widths) \/\/ re apply the picture widths\n\tIF Len(ls_mess) > 0 THEN\n\t\t\/\/ error condition\n\tEND IF\nEND IF\nsetredraw(true) \/\/was set to false in calling event\nend event<\/pre>\n
So now when run the application we get this.<\/p>\n
Resize the column with the picture controls
\n\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
Now make it smaller.<\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
Ahhhh, all is good again.<\/p>\n
I’ve attached a sample application<\/a> (PB12.5.1) demonstrating how the resizing does not work and how it can be corrected. Exports of the objects are included as well if you need to create your own version. When running the example, first resize\/reposition the columns after the window opens. This will show the problems with the picture objects. When you click on the ‘Modify Bitmap X Expressions’ button the changes in the X position expressions for the picture objects will be displayed in the multi line edit control.
\n\"\"<\/a><\/p>\n
The ‘Reset DWO’ button resets the datawindow object if you need to.
\nCodeProject<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
So I’m working on a ‘dashboard’ style datawindow in an application which shows a grid of data along with some graphics so the user can easily see changes\/important stuff. There are a number of reasons to use a grid datawindow for this, especially since they can easily be changed by the user to suit their…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,10],"tags":[37,21,12,16],"_links":{"self":[{"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/posts\/1409"}],"collection":[{"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/comments?post=1409"}],"version-history":[{"count":9,"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/posts\/1409\/revisions"}],"predecessor-version":[{"id":2044,"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/posts\/1409\/revisions\/2044"}],"wp:attachment":[{"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/media?parent=1409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/categories?post=1409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anvil-of-time.com\/wp-json\/wp\/v2\/tags?post=1409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}