Techwave 2006 Advanced Datawindow Functionality

ADVANCED DATAWINDOW PRESENTATION TECHNIQUES FOR POWERBUILDER, APPEON, POCKETBUILDER AND DW.NET

Buck WoolleyConsultant, dw-eXtreme

Advanced Datawindow Presentation Techniques

Extreme Datawindows…. What are they?• Graphical. Used to create sophisticated data presentation

and manipulation user interfaces. Normally more of a graphical style rather than a text or report style.

• External. Normally sourced from other datastores or files. This separates the data source from the data presentation.

• Dynamic. The functionality is too complex and to varied to create statically.

• Take advantage of the many powerful native methods within the datawindow. Specifically those that appear in expressions.

• Use the same methods and techniques in Powerbuilder, Pocketbuilder or .net. The functionalities are the same across platforms.


Extreme Datawindows.... Characteristics• Datawindows have 5 powerful characteristics.

– Sophisticated data storage (data types, filters, row access) – Sophisticated native methods

(getrow,string,mid,cumulativesum)– Runtime access to object properties (visibility, color, x, y, width,

text) – A number of objects native to the datawindow can be powerful

graphic elements (rectangles, lines, ellipse, text, images)– Can be generated at runtime

• Flexibility, with these 5 characteristics the number of possible derivatives are infinite


Extreme Datawindows… Solutions• Any business need where it may be better to visualize data

in a manner other than a grid or report • Especially useful for any type of relational data

– Any data that has a datetime or start date/end date component– Any data that has pointers to other data – Any data that has a parent – child relationship

• Focus on mouse based solutions. Point, click and drag to create simple actions to trigger complex activity. Especially useful on PDA and touch screen devices

• Often used to provide a richer experience to the user and to encourage upgrades


Extreme Datawindows… Techniques• Storing properties data as metadata. Metadata has been

described as data about data. The third dimension of the datawindow.

• Reliance on dynamic building of datawindow syntax at runtime. This give users complete control. All display parameters (start/end times, length, colors, heights) can be set at runtime

• Use of property expressions within objects on a datawindow(visibility, colors, x, y, width, height), as well as liberal use of built-in functions within expressions

• Building large strings to improve performance. The modify statement can handle all you can give it.


Extreme Datawindow Examples > Planner3 datawindows datawindow displayed


1. Treeview Datawindow 2. Planner Datawindow


3. Calendar Datawindow


Extreme Datawindows… Metadata• Metadata has been described as data about data.

Datawindow metadata is long strings of data stored in string columns and is accessed within datawindow objects in a positionally defined basis.– Relational data

Row Patient Procedure Date Charge1 Bob Crown 050105 800.342 Bob Cavity 050204 234.343 Bob X-Rays 050407 92.34

– MetadataRow Patient Procedure Date Charge1 Bob ‘Crown Cavity X-Rays’ ‘050105 050204 050407’ ‘800.34 234.34

92.34’


Extreme Datawindows… Metadata(cont.)• Metadata stores property data of many objects in a single

string. Metadata is best used in situations where multiple rows are used in the display process.

• The data is built at runtime in powerscript.FOR…

dw_1.setitem(ii_row,"color",color_val+right(' '+is_color,8))dw_1 setitem(ii_row,"bcolor",bcolor_val+right(' '+is_bcolor,8))dw_1 setitem(ii_row,"btype",btype_val+is_btype)

NEXT…


Extreme Datawindows… Metadata(cont.)• The data accessed using datawindow expressions.

FOR ll_seq = 1 TO 3Key1 = ll_seq >> 1,2,3Key8 = (ll_seq * 8) – 7 >> 1,9,17brush.hatch="0~tlong(mid(btype,'+Key1+',1))“brush.color="0~tlong(mid(color,'+key8+',8))“background.color="0~tlong(mid(bcolor,'+key8+',8))“

NEXT1 2 3


Extreme Datawindows… Metadata(cont.)• Results of metadata expressions

– x="0~tlong(mid(x,1,6))" width="0~tlong(trim(mid(w,1,6)))“– x="0~tlong(mid(x,7,6))" width="0~tlong(trim(mid(w,7,6)))“– x="0~tlong(mid(x,13,6))" width="0~tlong(trim(mid(w,13,6)))"


Extreme Datawindows.... Stock Chart


Extreme Datawindows.... Stock Chart create rectangle(...visible="if(TRIM(MID(max_price,3000 - 683,12)) =

'',0,1)" brush.color="IF(REAL(MID(open_price,3000 - 683,12)) >

REAL(MID(close_price,3000 - 683,12)),0,16777215)" ...//(If the open price > close price, white, black)

x="1194" y="686 - (units_per_dollar * (IF(REAL(MID(open_price,3000 -

683,12)) > REAL(MID(close_price,3000 - 683,12)),REAL(MID(open_price,3000 - 683,12)),REAL(MID(close_price,3000 - 683,12))) - min_price))" ...//If the open price > close price,close price,open price - minimum price for the chartheight="4+ABS(units_per_dollar * ((REAL(MID(close_price,3000 - 683,12)) - min_price_for_all) - (REAL(MID(open_price,3000 - 683,12)) - min_price)))"//ABS(open price - close price) - minimum price for the chart


Extreme Datawindows.... Railyard


Extreme Datawindows.... Time Line


Extreme Datawindows.... Media Scheduling


Extreme Datawindows… Object Manipulation• Using the datawindow as a container for graphical objects, a

graphic canvas. • Display in a datawindow a list of different size images.• Ability to use the mouse to manipulate objects within the

canvas.• Ability to move objects from other sources to the canvas.• Using child windows to create virtual viewports


Extreme Datawindows… Graphical Objects


Showing images of different size on each row in a datawindow.

ll_rows = dw_1.rowcount()IF ll_rows > 0 THEN FOR ll_row = 1 TO ll_rows p_1.picturename = dw_1.object.bitmap[ll_row] p_1.originalsize = TRUE dw_1.object.width[ll_row] = p_1.width dw_1.object.height[ll_row] = p_1.height dw_1.object.x[ll_row] = (dw_1.width / 2) - (p_1.width / 2) dw_1.object.y[ll_row] = 20 dw_1.setdetailheight(ll_row,ll_row,p_1.height + 120) NEXT dw_1.object.desc.width = dw_1.width - 100END IF


Extreme Datawindows… Object Manipulation• Associating the mouse pointer to an object.Pbm_lbuttondown eventis_object = idw.getobjectatpointer()is_object = left(is_object,POS(is_object,'~t') - 1)

• Associating objects to a selection rectangle.il_x1 = LONG(idw.object.size_rect.x)il_y1 = LONG(idw.object.size_rect.y)x = il_x1 + LONG(idw.object.size_rect.width)y = il_y1 + LONG(idw.object.size_rect.height)ids_nodes.setfilter('x + width >= '+STRING(il_x1)+' AND x <= '+STRING(x)+' AND

y + height >= '+STRING(il_y1)+' AND y <= '+STRING(y))ids_nodes.filter()

• Indicate selection by setting invert propertyDw.modify(ls_object+’.invert = 1’)


Extreme Datawindows… Object Manipulation• Moving an object associated with the mouse.Pbm_mousemove eventls_mod = ls_object+’.x = ‘+STRING(xpos + ll_xoffset)+' ‘+ls_object+’.y =

‘+STRING(ypos + ll_yoffset)Dw.modify(ls_mod)

• Moving a group of objects associated to a selection rectangle.

Move the selection rectangle as if it was an objectPbm_lbuttonup eventLoop through all objects filtered in ids_nodes and adjust the x, y propertiesFOR…ls_object = ids_nodes.object.node[ll_cnt]ls_mod = ls_mod+ls_object+'.x='+STRING(ll_x)+' '+ls_object+'.y='+STRING(ll_y)

+' '+ls_object+'.invert=0 ‘NEXT…dw.modify(ls_mod)


Extreme Datawindows… Object Manipulation• Moving an object to the canvas from another

datawindow.Have an object inherited from the picture control on associated

with the originating datawindow. Set to not visible and move properties from the selected image to the picture control.

Pbm_lbuttondown eventp_1.picturename = this.object.bitmap[ll_row] //image filenamep_1.y = (LONG(this.object.datawindow.detail.height) * (ll_page_row - 1)) +

this.object.y[ll_row] + 8 //so picture appears on top of selected imagep_1.x = this.object.x[ll_row] //so picture appears on top of selected imagep_1.originalsize = TRUE //resizes picture control to the new image sizep_1.il_x = (p_1.x + (p_1.width / 2)) – xpos //x offset for rendering on canvasp_1.il_y = (p_1.y + (p_1.height / 2)) – ypos //y offset for rendering on canvasp_1.is_object = this.object.desc[ll_row] //image descriptionp_1.drag(begin!)


Extreme Datawindows… Object Manipulation• Moving an object to the canvas from another

datawindow.Move properties from the picture control and create a new

image on the canvas.dragdrop eventIF source.typeof() = picture! THEN

lp = sourcels_bitmap = lp.picturenamels_item = lp.is_objectis_object_type = lp.is_typeis_function = 'newnode'lr_zoom = 100 / LONG(idw.object.datawindow.zoom)ll_x = idw.pointerx() + (lp.il_x / lr_zoom)ll_y = idw.pointery() + (lp.il_y / lr_zoom)this.post event uoe_new_node(is_object_type,ls_item,ll_x,ll_y,ls_bitmap)

END IF


Extreme Datawindows… Object Manipulation• Moving an object to the canvas from a treeview.Create a treeview having treeview items with dragdrop not set

to auto.Selection changed eventIf the selected object is movable then set dragauto = TRUEIF string(this.picturename[ltvi_item.pictureindex]) = 'arrow2.bmp' THEN

this.dragauto = TRUEELSE

this.dragauto = FALSEEND IF


Extreme Datawindows… Object Manipulation• Moving an object to the canvas from a treeview.Move properties from the treeview item and create a new image

on the canvas.Drag drop eventIF source.typeof() = treeview! THEN

lt_tree = sourcell_handle = lt_tree.finditem(currenttreeitem!,0)lt_tree.getitem(ll_handle,lt_item)ll_parent = lt_tree.FindItem(ParentTreeItem! , ll_handle)lt_tree.getitem(ll_parent,lt_parent) //get the bitmap for the nodels_bitmap = string(lt_tree.picturename[lt_parent.pictureindex])ls_item = lt_item.labelis_object_type = 'node'is_function = 'newnode'this.post event uoe_new_node('node',ls_item,idw.pointerx(),idw.pointery(),ls_bitmap)

END IF


Extreme Datawindows…. Organization Chart


Extreme Datawindows.... Product Placement

Main window

Graphic frame child window (no border)

Graphic view child window (with border)


Extreme Datawindows… Child Windows as View Ports

Graphic canvas datawindow


Extreme Datawindows… View port layers

1. Basic Window

2. Graphics Frame Child Window (No border)

3. Graphic view child window (with border)

4. Graphic canvas datawindow

5. Multiple graphic view child windows within the graphics frame.


Extreme Datawindows… Child Windows• In the open of the main window

openwithparm(w_graphic_container,ls_win_parms)//pass display parms

• In the open of child window w_graphic_containerthis.x = ls_win_parms.x //set w_graphic_container display parmsthis.y = ls_win_parms.ythis.width = ls_win_parms.widththis.height = ls_win_parms.height

Open first child window w_graphicls_win_parms.x = 0 //set w_graphic display properties to passls_win_parms.y = 0ls_win_parms.width = this.widthls_win_parms.height = this.heightwindow lw_winname = 'w_graphic'openwithparm(lw_win,ls_win_parms,name,this)

• In the open of w_graphicparentwindow().event dynamic we_reg_graphic(this) //register as childiw_parent = parentwindow() //register w_graphic_container as parent


Extreme Datawindows… Child Windows• Move the graphic canvas datawindow within w_graphic

This moves the entire graphic canvas using the mousemove event

ll_y = iw_graphic.pointery() - (il_prev_y)ll_x = iw_graphic.pointerx() - (il_prev_x)iw_graphic.setredraw(FALSE)

//Resize the canvas datawindow so the right and lower borders match the right and lower borders of w_graphicidw.resize(iw_graphic.width - (ll_x + 36), iw_graphic.height - (ll_y + 108))//Move the canvasidw.move(ll_x, ll_y)iw_graphic.setredraw(TRUE)


Extreme Datawindows… Row Spanning Objects Display a datawindow object over multiple rows. A process

of making a row based object appear to be a single object. The object appears to be in the foreground or background

layers,but unlike foreground or background objects, row spanning objects can be moved by horizontal and vertical scrolling

Uses metadata to store the graphic and text properties


Extreme Datawindows… Multi Row Objects Appointment Object


Extreme Datawindows… Multi Row Objects

Calculate a Y value so that the Y location of ‘Vendor Meeting’ for each row is at 524 relative to the datawindow, not the row.

Desired Y Location

Cummulative rowheight()

Y Value for ‘Vendor Meeting’- =


Extreme Datawindows… Multi Row Objects

Multi row viewNormal viewMulti row view showing

slices


Extreme Datawindows… Multi Row Objects• Data stored in metadata only in first row. Accessed using

First() function.

Y location Appointment Text

expression="FIRST(MID(text,'+STRING(ll_length * 50)+'+1,50) for all)"


Extreme Datawindows… Pocketbuilder Must make design changes to account for available viewable

space No code changes required!!! Concentrate on mouse (stylus) based functionality


Extreme Datawindows… Pocketbuilder

Windows PocketPC version of the planner using PocketBuilder


Extreme Datawindows… vb.net and dw.net• Excellent Integration• Excellent code completion• Excellent help

Differences…..• Some datawindow specific commands in vb.net are different

from Powerscript• Defining and initializing datastores in vb.net• You must define event handlers for datawindows• Differences in commonly used built in functions


Extreme Datawindows… vb.net and dw.net

Vb.net version of the planner using dw.net


Extreme Datawindows… vb.net and dw.net• Commonly Used Event Handlers – Itemchanged

– Private Sub dw_ItemChanged(ByVal sender As System.Object, ByVal e As Sybase.DataWindow.ItemChangedEventArgs) Handles dw_list.ItemChangede.ColumnNamee.ColumnNumbere.RowNumbere.Data

• Setting return code– e.Action =

Sybase.DataWindow.ItemChangedAction.RejectAndAllowFocusChangeSybase.DataWindow.ItemChangedAction.AcceptSybase.DataWindow.ItemChangedAction.Reject


Extreme Datawindows… vb.net and dw.net Excellent Integration Excellent code completion Excellent help

Differences….. Some datawindow specific commands in vb.net are different

from Powerscript Defining and initializing datastores in vb.net You must define event handlers for datawindows Differences in commonly used built in functions


Extreme Datawindows… vb.net and dw.net• Differences in Native Functions (PB > VB.NET)

– Always use (“) not (‘) ls_text = ‘test’ > ls_text = “test” Long(ls_text) > Val(ls_text) Time("6:00:00") > TimeValue("6:00:00") Date("01/01/1900") > DateValue("01/01/1900") DaysAfter(startdate, enddate) > DateDiff(DateInterval.Day,

startdate, enddate) Round(9.334,0) > Math.Round(9.334,0)


Extreme Datawindows… vb.net and dw.net• Differences in Native Functions (PB > VB.NET)

String(‘123’) > Str(“123”) RelativeDate(start_dt, 5) > DateAdd(DateInterval.Day, 5, start_dt) DayNumber(startdate) > Weekday(startdate) RegistryGet("HKEY_CURRENT_USER\Control

Panel\International","sShortDate", RegString!, local_setting ) >

Dim regKey As Microsoft.Win32.RegistryKey Microsoft.Win32.Registry.CurrentUser.OpenSubKey(“controlpanel\\international", False) local_setting = regKey.GetValue("sShortDate")


Extreme Datawindows… Appeon for Powerbuilder• Appeon 5.0 for Powerbuilder

– Easiest way to deploy PB apps to the browser while retaining your PB coding skills

– Can handle the most complex dynamic datawindow generation and presentations

– Minimal code changes required– Minimal loss of functionality– Extremely easy to set up– Extremely easy to compile and deploy


Extreme Datawindows… Appeon for Powerbuilder

Which planner is Appeon??


Extreme Datawindows… Appeon for Powerbuilder

Which appointment is Appeon??


Extreme Datawindows… Appeon for Powerbuilder• Coding Techniques

– HorizontalScrollPosition is not availableBuild your own horizontal scrolling using a child window and horizontal scroll bar object or something similar.

– SetDetailHeight is not available

Use Autosizeheight to set your detail heights. Use some type of object in the datawindow to manipulate the autosizeheight function.

– Drawing of object on a datawindow with mousemove event

Although this can be done, the effect is not desirable as background object redraw slowly giving a sloppy appearance.Replace with some type of static method that gives the same feedback without the drawing process. In some cases you can draw Powerbuilder objects such as a text box over a datawindow to simulate an object in a datawindow.


Extreme Datawindows… Appeon for Powerbuilder• Coding Techniques

– Late binding to non existent events causes problems

parent.event dynamic oe_this_must_exist(). If the event doesn’t exist then the rest of the calling routine is skipped.

– Objects on a datawindow must have different names

You can get by with this in Powerbuilder but not in Appeon

– Scrolling Properties are not available HorizontalScrollPosition

HorizontalScrollMaximumHorizontalScrollSplit


User Examples


User Examples


Changing datawindows from grid to non-grid…• Edit source of datawindow.

Non Grid> datawindow(units=0 …. processing=0……Grid> datawindow(units=0 …. processing=1……

PB 10.5 Treeview datawindows

Non Grid> datawindow(units=0 …. processing=8……Grid> datawindow(units=0 …. processing=9……


Extreme Datawindows… Resources

Powerbuilder Developers Journal Vol. 8 Issue 7“Not Your Fathers Datawindow” Powerbuilder 9: Advanced Client/Server DevelopmentChapter 7 – “Extreme Datawindows”

Website: www.dw-extreme.com Email: [email protected] Skype ID: bwoolley

mailto:[email protected]

Documents

Techwave 2006 Advanced Datawindow Functionality