ra:frontend
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
ra:frontend [2018/08/24 13:02] koubel |
— (current) | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | 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 [[https://protank.visualstudio.com/_git/PD/pullrequest/1402?_a=files|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 [[https://protank.visualstudio.com/_git/PD/pullrequest/1396?_a=files|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'. | ||
| - | * show for errors in Console first, specially for syntax errors, JS 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. | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
ra/frontend.1535108544.txt.gz ยท Last modified: 2018/08/24 13:02 by koubel
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
