...
The utility supports the migration of trigger code to matching event handler methods in the GUI for .NET class file. Currently these events are supported:
| ABL Event name | GUI for .NET Event name |
|---|---|
| CLICK | Click |
| LEAVE | Validating |
| VALUE-CHANGED | ValueChanged |
The following is an example of an ABL Trigger Block in the original program:
...
Generating Angular JS Views
...
Using the Generate Web2 View button in the Ribbon the utility does also support saving an html file representing the Angular JS template for a viewer with the same layout.
| Code Block | ||
|---|---|---|
| ||
<form class="form-horizontal" style="margin-top: 0.5em; background-color: white; position:relative;">
<fieldset>
<label style="position:absolute; left:7px; top:17px;">Cust Num</label>
<input type="text" id="eCustomer_CustNum" style="position:absolute; left:85px; top:12px; width: 59px;" ng-model="<%= get-field ('scope':U) %>.CustNum"></input>
<label style="position:absolute; left:397px; top:17px;">Balance</label>
<input type="text" id="eCustomer_Balance" style="position:absolute; left:475px; top:12px; width: 131px;" ng-model="<%= get-field ('scope':U) %>.Balance"></input>
<label style="position:absolute; left:7px; top:42px;">Name</label>
<input type="text" id="eCustomer_Name" style="position:absolute; left:85px; top:37px; width: 208px;" ng-model="<%= get-field ('scope':U) %>.Name"></input>
<label style="position:absolute; left:397px; top:42px;">Credit Limit</label>
<input type="text" id="eCustomer_CreditLimit" style="position:absolute; left:475px; top:37px; width: 104px;" ng-model="<%= get-field ('scope':U) %>.CreditLimit"></input>
<label style="position:absolute; left:7px; top:67px;">Address</label>
<input type="text" id="eCustomer_Address" style="position:absolute; left:85px; top:62px; width: 241px;" ng-model="<%= get-field ('scope':U) %>.Address"></input>
<label style="position:absolute; left:397px; top:67px;">Discount</label>
<input type="text" id="eCustomer_Discount" style="position:absolute; left:475px; top:62px; width: 49px;" ng-model="<%= get-field ('scope':U) %>.Discount"></input>
<label style="position:absolute; left:7px; top:92px;">Address2</label>
<input type="text" id="eCustomer_Address2" style="position:absolute; left:85px; top:88px; width: 241px;" ng-model="<%= get-field ('scope':U) %>.Address2"></input>
<label style="position:absolute; left:397px; top:92px;">Terms</label>
<input type="text" id="eCustomer_Terms" style="position:absolute; left:475px; top:88px; width: 143px;" ng-model="<%= get-field ('scope':U) %>.Terms"></input>
<label style="position:absolute; left:7px; top:118px;">City</label>
<input type="text" id="eCustomer_City" style="position:absolute; left:85px; top:113px; width: 176px;" ng-model="<%= get-field ('scope':U) %>.City"></input>
<label style="position:absolute; left:7px; top:143px;">Postal Code</label>
<input type="text" id="eCustomer_PostalCode" style="position:absolute; left:85px; top:138px; width: 101px;" ng-model="<%= get-field ('scope':U) %>.PostalCode"></input>
<label style="position:absolute; left:7px; top:168px;">Country</label>
<input type="text" id="eCustomer_Country" style="position:absolute; left:85px; top:163px; width: 143px;" ng-model="<%= get-field ('scope':U) %>.Country"></input>
<label style="position:absolute; left:7px; top:191px;">State</label>
<input type="text" id="eCustomer_State" style="position:absolute; left:85px; top:186px; width: 143px;" ng-model="<%= get-field ('scope':U) %>.State"></input>
<label style="position:absolute; left:7px; top:263px;">Contact</label>
<input type="text" id="eCustomer_Contact" style="position:absolute; left:85px; top:258px; width: 208px;" ng-model="<%= get-field ('scope':U) %>.Contact"></input>
<label style="position:absolute; left:7px; top:288px;">Email</label>
<input type="text" id="eCustomer_EmailAddress" style="position:absolute; left:85px; top:283px; width: 338px;" ng-model="<%= get-field ('scope':U) %>.EmailAddress"></input>
<label style="position:absolute; left:7px; top:313px;">Fax</label>
<input type="text" id="eCustomer_Fax" style="position:absolute; left:85px; top:308px; width: 143px;" ng-model="<%= get-field ('scope':U) %>.Fax"></input>
<label style="position:absolute; left:7px; top:338px;">Phone</label>
<input type="text" id="eCustomer_Phone" style="position:absolute; left:85px; top:334px; width: 143px;" ng-model="<%= get-field ('scope':U) %>.Phone"></input>
<label style="position:absolute; left:7px; top:364px;">Sales Rep</label>
<input type="text" id="eCustomer_SalesRep" style="position:absolute; left:85px; top:359px; width: 62px;" ng-model="<%= get-field ('scope':U) %>.SalesRep"></input>
<label style="position:absolute; left:7px; top:407px;">Comments</label>
<input type="text" id="eCustomer_Comments" style="position:absolute; left:85px; top:402px; width: 533px;" ng-model="<%= get-field ('scope':U) %>.Comments"></input>
<div style="position:absolute; left:0px; top:0px; width:689px; height:486px; border:1px; solid #C0C0C0;"></div>
</fieldset>
</form> |
Generating Kendo UI Builder Views
The utility does also support converting the ABL GUI screens into Kendo UI Builder views. By clicking on the Kendo UI Builder View button in the Ribbon the following wizard is launched:
