CUSTOM CONTROLS. Pieter Saelens Henri Reterink. Building for the future. Better, faster, everywhere.

Size: px

Start display at page:

Download "CUSTOM CONTROLS. Pieter Saelens Henri Reterink. Building for the future. Better, faster, everywhere."

Jewel Andrews
6 years ago
Views:

1 CUSTOM CONTROLS Pieter Saelens Henri Reterink

2 Why a custm cntrl? Extra functinalities! Generic reusable cntrls Graphs / Charts Scheduler HTML Editr (Frala) TimePicker Mre feature specific Prcedural questinnaire Dynamically generated dashbard

3 HTML Editr cntrl example cwebfralaeditr

4 Timepicker example cwebtimefrm

5 What is a custm cntrl? DataFlex cmpnent that yu can add t a view. Usually smething visible DataFlex Server side prtin A Class Prvides API s fr the applicatin t wrk with JS JavaScript Client side prtin Implements the wanted feature using the framewrk API s Usually renders smething n screen A pseud Class in javascript

6 Knwledge required DataFlex classes and subclassing JavaScript HTML and DOM Manipulatin WebApp Framewrk basics T sme extent... CSS Ajax

7 Case Build a scheduler cntrl fr the DF Web Framewrk

8 Determining the initial set f requirements CRUD: Create, Read, Update and Delete events Easy t use, intuitive Relatively easy t implement in a variety f applicatins Accept event data in a fixed frmat, but frm multiple surces Flexible and custmizable

9 Build r wrap? Building it urselves Wrapping an existing library Prs Cntrl ver usage, lk, etc. Pssibly mre DF native Prs N reinventing the wheel Can save a lt f time Cns Having t build every single piece urselves Cns Limited cntrl ver usage, lk, etc. N API standards Pssible dependency n ther libraries like jquery

10 Winner: DHTMLx Scheduler Clean, simple but effective lk User friendly interactin with drag&drp and in-calendar dialgs Very flexible Very custmizable Well dcumented(!) Cns: License fr cmmercial prducts

11 Winner: DHTMLx Scheduler

12 Setting up

13 At the DataFlex side Create a package fr ur Class Extend frm a WebApp Framewrk base class, cmmn nes are cwebobject cwebbaseuiobject cwebbasecntrl

14 Define ur JS class name This will have t match with the name defined in the JS file later Class cwebdhxscheduler is a cwebbasecntrl Prcedure Cnstruct_Object Frward Send Cnstruct_Object Set psjsclass t "dfhx.webdhxscheduler" End_Prcedure End_Class

15 Cnfigure super classes Prcedure Cnstruct_Object Frward Send Cnstruct_Object // Cnfigure super classes Set pbfillheight t True Set piclumnspan t 0 Set pbshwlabel t False Set psjsclass t "dfhx.webdhxscheduler" End_Prcedure

16 At the JavaScript side Create a.js file Create a namespace bject (ptinal) Create ur cnstructr functin Cnfigure superclasses // Create namespace bject (dfhx = dataflex dhtmlx) if(!dfhx){ var dfhx = {}; } JS dfhx.webdhxscheduler = functin WebDhxScheduler(sName, Prnt){ // Cnfigure superclasses dfhx.webdhxscheduler.base.cnstructr.apply(this, arguments); };

17 Define ur class (matches with class defined in DF) Extend frm a base class, cmmn nes: df.webobject df.webbaseuiobject df.webbasecntrl // Create namespace bject (dfhx = dataflex dhtmlx) if(!dfhx){ var dfhx = {}; } dfhx.webdhxscheduler = functin WebDhxScheduler(sName, Prnt){ // Cnfigure superclasses dfhx.webdhxscheduler.base.cnstructr.apply(this, arguments); JS }; df.defineclass("dfhx.webdhxscheduler", "df.webbasecntrl", { // Cntrl functins and lgic will g here });

18 WebPrperties Can be used t stre things like data, status infrmatin and settings fr the cntrl Prperty value is shared and maintained between Client and Server Engine generates default Get & Set functins in JS if n custm nes are defined Called when executing WebGet and WebSet functins in DF, and at several ther times Implement a custm setter methd as set_psprpertyname Implement a custm getter methd as get_psprpertyname

19 WebPrperties Dataflex definitin // Defines whether events can be dragged r nt {WebPrperty = True} Prperty Blean pballweventdrag JavaScript definitin dfhx.webdhxscheduler = functin WebDhxScheduler(sName, Prnt){ dfhx.webdhxscheduler.base.cnstructr.apply(this, arguments); // Define ur prperty this.prp(df.tbl, "pballweventdrag", true); }; JS Our custm setter set_pballweventdrag : functin(bval){ if(this._ecntrl){ // DhxNResize true tells the dhtmlx scheduler t nt allw event dragging // Calling "Set pballweventdrag false" frm DF wuld set DhxNResize t true, and blck event dragging df.dm.tggleclass(this._ecntrl, "DhxNResize",!bVal); } }, JS

20 Displaying yur cntrl n screen OpenHtml, ClseHtml and AfterRender

21 Rendering the cntrl UI Objects render themselves n the client by generating HTML Recursive functins penhtml, clsehtml and afterrender are triggered penhtml and clsehtml are used t insert HTML elements int the dcument afterrender is called afterwards t perfrm DOM Manipulatin Creatin Object definitins are sent t the client by the server Render render() penhtml(ahtml) clsehtml(ahtml) afterrender()

22 penhtml, clsehtml Our penhtml and clsehtml functins Create a cntainer fr ur scheduler t fit in using HTML elements On initializatin we ll tell the dhtmlx Scheduler t render itself inside this cntainer // Creates the HTML elements t "draw" fr ur cntrl penhtml : functin(ahtml){ // "Frward send" dfhx.webdhxscheduler.base.penhtml.call(this, ahtml); JS ahtml.push('<div class="dhx_cal_cntainer" style="width:100%; height:100%;">'); ahtml.push(' <div class="dhx_cal_navline">'); ahtml.push(' <div class="dhx_cal_date"></div>'); ahtml.push(' </div>'); ahtml.push(' <div class="dhx_cal_header"></div>'); ahtml.push(' <div class="dhx_cal_data"></div>'); ahtml.push('</div>'); }, // Creates the HTML elements t "draw" fr ur cntrl // Called after all penhtml functins are dne clsehtml : functin(ahtml){ // Just "Frward Send" fr nw dfhx.webdhxscheduler.base.clsehtml.call(this, ahtml); },

23 afterrender Our penhtml and clsehtml functins Create a cntainer fr ur scheduler t fit in using HTML elements On initializatin we ll tell the dhtmlx Scheduler t render itself inside this cntainer // Called after the cntrl has been rendered n screen afterrender : functin(){ // Find ur cntainer, mark it as ur cntrl rt this._ecntrl = df.dm.query(this._eelem, ".dhx_cal_cntainer"); JS }, // Frward send dfhx.webdhxscheduler.base.afterrender.apply(this, arguments); // This functin sets dhtmlx Scheduler prperties and initializes it in ur cntainer this.initscheduler(); // Can nly call this setter after cntrl is rendered this.set_pballweventdrag(this.pballweventdrag);

25 Making it d stuff ServerActins and ClientActins

26 ServerActins Basically just DF prcedures / functins Can be called by the JS Client by using: this.serveractin("methdname", aparams); Optinally prvide a return value Must be made available t the client by using WebPublishPrcedure PrcedureName WebPublishFunctin FunctinName

27 ServerActin t lad events Our ServerActin, a DataFlex prcedure Prcedure LadEvents String smde String sstartdate String senddate twebvaluetree tvt String[] aparams Date dstart dend // Event Array t be filled and sent t the client twebdhxevent[] aevents Mve (CnvertFrmClient(typeDate, sstartdate)) t dstart Mve (CnvertFrmClient(typeDate, senddate)) t dend // Event hk, allws augmentatin fr applicatin specific lgic. Fill event array Send OnLadEvents (&aevents) smde dstart dend // Serialize Event array t a WebValueTree ValueTreeSerializeParameter aevents t tvt // Call clientactin t prcess data Mve smde t aparams[0] Mve sstartdate t aparams[1] Mve senddate t aparams[2] Send ClientActin "handleevents" aparams tvt End_Prcedure

Event hk Event hk fr ur ServerActin Allws yu t define the main universal lgic yurself Develpers can place applicatin specific lgic inside the event Shws up in Object Prperties panel!

28 Event hk Event hk fr ur ServerActin Allws yu t define the main universal lgic yurself Develpers can place applicatin specific lgic inside the event Shws up in Object Prperties panel! // Called by LadEvents { MethdType=Event } Prcedure OnLadEvents twebdhxevent[] ByRef aevents String smde Date dstart Date dend // Augment this prcedure with yur wn business lgic t lad events End_Prcedure

29 Expsing and calling ur prcedure Expsing ur prcedure t the client Prcedure End_Cnstruct_Object Frward Send End_Cnstruct_Object End_Prcedure // Allws ur "ServerActin" t be called frm the JS Client WebPublishPrcedure LadEvents Calling ur prcedure frm the client laddata : functin(smde, dstart, dend){ // Calls the "LadEvents" prcedure n the server, with given parameters this.serveractin("ladevents", [ smde, this.tsvrdate(dstart), this.tsvrdate(dend) ], null, functin(){ // Lgic t be executed if the functin / prcedure has returned smething }); }, JS

30 ClientActins Functins in JavaScript Can be called by the DF Server by using Send ClientActin "methdname" aparams Send ClientActin "methdname" aparams twebvaluetree twebvaluetree is data serialized t a frmat the client and server can bth read and deserialize Wrk asynchrnusly Parameters are prvided as Strings

31 Calling ur ClientActin Calling ur ClientActin handleevents frm the server // Serialize data ValueTreeSerializeParameter aevents t tvt // Call clientactin t prcess data Mve smde t aparams[0] Mve sstartdate t aparams[1] Mve senddate t aparams[2] Send ClientActin "handleevents" aparams tvt End_Prcedure

32 Our ClientActin Our ClientActin, a functin in JavaScript // (De)serializers fr data sent by and t the server deserializevt : df.sys.vt.generatedeserializer([ dfhx.twebdhxevent ]), serializevt : df.sys.vt.generateserializer([ dfhx.twebdhxevent ]), JS // ClientActin called by the server handleevents : functin(smde, sstart, send){ // Deserialize received data var i, aevents = this.deserializevt(this._tactindata); if(this._scheduler){ this._scheduler.clearall(); // Cnvert dates fr(i = 0; i < aevents.length; i++){ aevents[i].start_date = df.sys.data.stringtdate(aevents[i].start_date, "yyyy/mm/ddthh:mm:ss.fff"); aevents[i].end_date = df.sys.data.stringtdate(aevents[i].end_date, "yyyy/mm/ddthh:mm:ss.fff"); } }, } // Pass t scheduler cntrl this._scheduler.parse(aevents, "jsn");

33 Using yur cntrl in multiple prjects

34 Hw t imprt yur cntrl Develp yur cntrl in a separate, standalne wrkspace In yur applicatin wrkspace... add the cntrl wrkspace as a library cpy the cntrl.js file t an AppHtml subflder cpy any ther required files used by the cntrl as well if needed add a reference t the required.js files in yur Index.html Yu can even add it t the class palette fr cnvenience!  <script src="dhtmlx/dhtmlxscheduler.js" type="text/javascript"></script> <script src="dhtmlx/ext/dhtmlxscheduler_limit.js"></script> <script src="dhtmlx/ext/dhtmlxscheduler_units.js"></script> <script src="dhtmlx/ext/dhtmlxscheduler_timeline.js"></script> <script src="dhtmlx/ext/dhtmlxscheduler_multiselect.js"></script> <script src="dhtmlx/ext/dhtmlxscheduler_tltip.js"></script>  <link rel="stylesheet" href="dhtmlx/dhtmlxscheduler_flat.css" type="text/css">  <script src="custm/webdhxscheduler.js"></script>

35 Dem: Credentials: U: dem P: dem

36 There s much mre t learn! Sme things we haven t talked abut include... Events in-depth Private client prperties Synchrnized WebPrperties Serializing and deserializing data Etc. Want sme examples? The default WebApp classes are right there! Take a lk in the AppHtml/DfEngine f yur webapp Study cntrls like the WebButtn, WebFrm, etc.

37 Thank yu fr yur attentin Are there any questins?

The Login Page Designer

The Login Page Designer The Lgin Page Designer A new Lgin Page tab is nw available when yu g t Site Cnfiguratin. The purpse f the Admin Lgin Page is t give fundatin staff the pprtunity t build a custm, yet simple, layut fr their