Jump to content
uniGUI Discussion Forums

cdev

uniGUI Subscriber
  • Content Count

    21
  • Joined

  • Last visited

Community Reputation

0 Neutral

About cdev

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi, I have a TUniEdit component with the following property: ClientEvents.ExtEvents.afterrender: function afterrender(sender, eOpts) { var me=sender; me.inputEl.setStyle('text-align','left'); me.setEmptyText('123'); me.inputEl.setStyle('background-image', 'url(./images/Required-a-16.png)'); me.inputEl.setStyle('background-repeat', 'no-repeat'); me.inputEl.setStyle('background-position', 'center right'); me.inputEl.setStyle('border', '1px solid #ff9999'); } this aligns the text in the edit area to the left, sets the emptyText to '123' to indicate we expect numeric input, sets a small icon at the right of the input area to indicate it is a required field and draws the borders of the input area in a red color. This works fine. What I want to do is to have initially that edit-component exactly the same without the red borders. Only when a button is clicked and there is no input in that component, that the borders get red. So, based on the input of that component the last line should be added or removed. (me.inputEl.setStyle('border', '1px solid #ff9999'); ) How do I do this in runtime ?
  2. cdev

    DevExtreme + UniGui

    This is also something I am interested in. I saw for example their example TextBox on their website : https://js.devexpress.com/Demos/WidgetsGallery/Demo/TextBox/Overview/jQuery/Light/ 1. add the following in Uniserver.Customfiles: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js https://cdn3.devexpress.com/jslib/19.2.7/css/dx.common.css https://cdn3.devexpress.com/jslib/19.2.7/css/dx.light.css https://cdn3.devexpress.com/jslib/19.2.7/js/dx.all.js 2. Drop a THTMLFrame-component on your form and assign the following HTML-code to it: (exactly the same as explained on their website) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.7/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/19.2.7/js/dx.all.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> <div id="simple"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">With placeholder</div> <div class="dx-field-value"> <div id="placeholder"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">With clear button</div> <div class="dx-field-value"> <div id="clear-button"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Password mode</div> <div class="dx-field-value"> <div id="password"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Text mask</div> <div class="dx-field-value"> <div id="mask"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <div id="disabled"></div> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Events and API</div> <div class="dx-field"> <div class="dx-field-label">Full Name</div> <div class="dx-field-value"> <div id="full-name"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Email (read only)</div> <div class="dx-field-value"> <div id="email"></div> </div> </div> </div> </div> </div> </body> </html> 3. uniHTMLFrame.Afterscript : (index.js on their website) : $(function(){ $("#simple").dxTextBox({ value: "John Smith" }); $("#placeholder").dxTextBox({ placeholder: "Enter full name here..." }); $("#clear-button").dxTextBox({ value: "John Smith", showClearButton: true }); $("#password").dxTextBox({ mode: "password", placeholder: "Enter password", showClearButton: true, value: "f5lzKs0T", }); $("#mask").dxTextBox({ mask: "+1 (X00) 000-0000", maskRules: {"X": /[02-9]/} }); $("#disabled").dxTextBox({ value: "John Smith", disabled: true }); $("#full-name").dxTextBox({ value: "Smith", showClearButton: true, placeholder: "Enter full name", valueChangeEvent: "keyup", onValueChanged: function(data) { emailEditor.option("value", data.value.replace(/\s/g, "").toLowerCase() + "@corp.com"); } }); var emailEditor = $("#email").dxTextBox({ value: "smith@corp.com", readOnly: true, hoverStateEnabled: false }).data("dxTextBox"); }); This works like a charm. My question: what about the databound widgets ? I would like to bind the more advanced widgets as Chart or Graph to a datasource (the Delphi way) Please, can someone tell me how I could bind such a JS or JQuery widget to a TDatasource ?
  3. Attached, you can find a small sample project in which you can see that the first time the html is loaded everything is fine. From the moment the html code is loaded a second time or is loaded in another frame the expected display is gone. uniHTMLFrameTest.zip
  4. Of course, for example your solution of this topic : First, I add the following lines in ServerModule.CustomFiles: https://cdn.quilljs.com/1.3.6/quill.snow.css files/style.css https://cdn.quilljs.com/1.3.6/quill.js Then I load the html-code in the TUniHTMLFrame.HTML : <div id="editor-container"> </div> And finally I edit the TUniHTMLFrame.Afterscript : var Delta = Quill.import('delta'); var quill = new Quill('#editor-container', { modules: { toolbar: true }, placeholder: 'Compose an epic...', theme: 'snow' }); // Store accumulated changes var change = new Delta(); quill.on('text-change', function(delta) { change = change.compose(delta); }); // Save periodically setInterval(function() { if (change.length() > 0) { console.log('Saving changes', change); /* Send partial changes $.post('/your-endpoint', { partial: JSON.stringify(change) }); Send entire document $.post('/your-endpoint', { doc: JSON.stringify(quill.getContents()) }); */ change = new Delta(); } }, 5*1000); // Check for unsaved data window.onbeforeunload = function() { if (change.length() > 0) { return 'There are unsaved changes. Are you sure you want to leave?'; } } I obtain this (correct): I have saved for example the HTMLCode in a stringlist slHTML and the AfterScript-code in a stringlist slAS When I 'reload' the code in the same way as the first time: uniHTMLFrame1.HTML.Text := slHTML.Text; uniHTMLFrame1.AfterScript.Text := slAS.Text; When I do this: my uniHTMLFrame displays nothing, as if nothing was loaded. And when I load a second instance of the same uniHTMLFrame in another Frame with the same code, I also don't get anything in that second frame, but my first instance looks now like this : I am convinced the reason of this unwanted behaviour is related to the ID in the HTML-code: editor-container. But when I load the code directly in my browser twice in two separate tabs, I get it twice right. As if the code is loaded in two separate sessions, where there is no id overlapping. In UniGUI I think I have an ID overlapping. How can I solve this ?
  5. Hi, When I load some HTML code in the HTML property and some JavaScript-code in the AfterScript property of a TUniHTMLFrame (both refering to some ID's in the HTML), at the first load everything works fine, but I encounter two problems : 1. When I 'reload' the same TUniHTMLFrame-component with the same HTML and JS, I don't get any longer the same as in the first instance. 2. I have my TUniHTMLFrame-component on a frame. When I load a second instance of that frame, this means a second instance of my TUniHTMLFrame and load the same HTML and JS, I also don't get any longer the same as in the first instance. When I load several instances in my internetbrowser of that HTML-code with the JS-code, they are all being displayed correctly. In my UniGUI-application, I get the correct display once, but all other 'loads' of the same HTML-code are incorrect. Who can help me ? What am I doing wrong ?
  6. Hi, In the following post there is nice example and explanation how to use HighCharts in UniGuUI: Now, I'm looking for a similar example that demonstrates the use of a ExtJS component (panel, chart, grid,...) in UniGUI. Is it possible to give a similar step-by-step explanation for the integration of ExtJS-components ?
  7. Hi cbr, thank you, this helped me a lot.
  8. cdev

    Refresh of TUniMemo

    MainModule.EnableSynchronousOperations = True
  9. cdev

    Refresh of TUniMemo

    I have a number of calculations that take a long time. I would like to keep the user informed of the progress by putting text line per line in a TUniMemo. Unfortunately, the newly added line(s) are not reflected automatically. How do I refresh or repaint or update the TUniMemo so that the newly added line gets visible ?
  10. Hi, On a form or frame, I have TUniPageControl with an active Tabsheet. On that tabsheet I have a TUniPanel. I would like to center that panel in the middle of the tabsheet. I went through the examples but I didnot find the answer to my problem. Can anyone help by explaining how I should set the properties of the components ?
  11. But how do I catch the event that a particular column has been marked visible/hidden ?
  12. Yes, I want to store the column visibity of each column in cookies. When next time the user gets back to the grid, he gets his grid with the same visible columns as the previous time.
  13. OK, I can catch these events in the ClientEvents columnhide and columnshow. But now I have a new question: I have a global boolean in my unit bColumn0Visible. How can I set that boolean to True or False from within these ClientEvents ?
  14. Hi I can save the column widths of a grid in a cookie. Next time the user loads the application he gets his grid with the same column widths as he left the application. I save the column width information in the OnColumnResize event handler of the grid and I load the column width information in the OnAfterLoad event handler of the grid. Now, I want to do the same for the columns that are marked invisible or visible in runtime. But I don't know in what event handler I can catch this. Anyone has a clue how I could achieve this ?
  15. Anyone has an idea how the uniGUI Runtime Package can be installed on Microsoft Azure ?
×