User Tools

Site Tools


ra:frontend

This is an old revision of the document!


There are many frontend technologies in old application. WebForms, DevExpress webforms, DevExpress MVC with ScriptSharp and jquery. DevExtreme as javascript solution. React

Webforms

Some pages are as webforms (*.aspx), or webforms controls (*.ascx). For both Id element attributes are very necessary. These are mostly as properties in code behind.

  <asp:Label runat="server" ID="lblRom" meta:resourcekey="lblRomResource1" Text="ROM: "></asp:Label>

Most components are from devexpress package

  <dx:ASPxComboBox Width="100%" ID="ddPHMDivisionSelect" runat="server"
     DataSourceID="DSPHMDivision" ValueField="Item1" TextField="Item2" Text='<%# Bind("DivisionIdText") %>'>
  </dx:ASPxComboBox>

Data for controls are bound to particular (mostly static) class and method mostly via DataSourceID attributes, for our comboBox above, definition for data source class is

  <asp:ObjectDataSource ID="DSPHMDivision" runat="server"
     SelectMethod="GetDivisionsDS" TypeName="PSAS.Business.PHM.CacheManager">
  </asp:ObjectDataSource>
  

Webforms has some limited html like markup for e.g. conditions, call methods e.g. Component usage is prefered.

Examples:

Gridview with edit form with hidden field for special usage of updating, inserting rows. Input in row without binding - [PR](https://protank.visualstudio.com/_git/PD/pullrequest/1361?_a=files)

DevExpress MVC

All elements with their names are processed by some devexpress global JS and these are in accessible in JS a global variables. Sometimes, devexpress controls are in DOM (via server sider rendering) condtionally. It's necessary use check for checking of undefined type.

Fo ajax forms, it's necessary to preserve correct binding for server side calls. HTML elements names must be same as properties on serve side. When the name of DevExpress control is changed e.g. DevExpressConrol.Name property for combo box in Razor/HTML. It's necessary use other field - mostly hidden field - to store value of original control. This hidden field value must be updated when original combo box value is changed, mostly via DevExpress change event. Example fix for road office.

React

Calling the API: there is some controllers on server side. It's necessary to make changes in DTOs on server and client.

  • makes the changes on server side first (some DTOs)
  • build the assembly
  • call NSwaggerStudio, load the config from Application/PSASWeb/Areas/API (e.g. CoreServiceNSwagConfig)
  • regenerate C#, typescript clients
  • call the clients from the mobx state objects

Most of src is Application/PSASWeb/React/src: stores - for states and business logic, components, for components. TSX files are mostly for html. For hot reloading is necessary in this dir call npm run dev. npm run build-dev builds files. In browser, source map works, try to CTRL + SHIFT + f for searching function/method call. Sometimes it's necessary to call `npm install` mostly when builds return error message about missing package e.g.

  ERROR in ./src/node_modules/pd-client-controls/PDFormElements/PDMaskedInput.tsx
  Module not found: Error: Can't resolve 'react-maskedinput'
  • All event processing is through event component props which update mobx state via actions. Some actions are called only via one method. So copy state object is necessary.
  • Form validation is according refs. Input components needs to have 'ref' prop, 'required' prop, and validate prop for own validation

See some react related tasks for more information and examples.

Internet Explorer Support

Protank Dynamics web application is supported for Internet Explorer 11 browser. There are some troubles with it. E.g. Syntax error in some JavaScript stops execution of following JavaScript calls.

Recommendation for debugging web app in in IE

  • Disable or remove all Addons from browser
  • Use development tools via F12 in own non-docked windows.
  • Stop showing log messages in Console, there is a lot of messages from Identity Server. It's possible only via left mouse button menu in Console - menu Item 'Log'.
  • Try to find errors in Console first, specially for JavaScript syntax errors, exceptions etc.
  • Don't select JavaScript file for debugging via search for file by name - left top corner - it's very slow and all Development Tools stop working.
  • Has debugger unconnected (menu Debugger, icon of plug point) whenever possible. It slows down all tools a lot. Connect debugger only if necessary.

Task which fixes some IE troubles

* BC compatible Javascrit PR * IE compatible CSS commit

ra/frontend.1535108989.txt.gz ยท Last modified: 2018/08/24 13:09 by koubel