Jump to content

cdev

uniGUI Subscriber
  • Posts

    40
  • Joined

  • Last visited

Posts posted by cdev

  1. I have a badge made with this code:

    image.thumb.png.b1760545e2c2720fab015f65ed6d5dd8.png

     

    The badge of the label displays with this 'test'.

    But now I want to change this badge to 'test2'.   How do I do this from within Delphi ?

    Something like : uniLabel1.JSInterface.JSCall('plugins', ['test2']);

    But this does not seem to work.  

    Anyone can help me ?

     

  2. Hello,

    I have a UniGUI application with a loginform with username/password credentials.

    Now, I would like to make it possible as with most webapplications, when you click on a button 'Forgot password' you can enter your emailaddress, you get an email with a link and once you click on that link you can set a new password.

    Does anyone have an idea how I could do this.    I guess I have to generate a unique identifier as link and mail this to the user.   This should be no problem, but how do I send this unique identifier back to the UniGUI-application to check that it is OK to set the new password ?   With parameters ?  Is this the way or is there a better way ?

  3. Hello,

    I have a query that takes some time to open.   I would like to display a screenmask  'Data loading, please be patient ...' while the query is opening and the data is not yet available.

    How do I do this ?   I had a look at the screenmask sample, but this shows how to display a screenmask with the sleep function.

  4. I made a small test project.

    At the left I placed a TUniImage and loaded a 120x120 pixels png-image in the Picture-property.  At the left I placed a TUniBitBtn and loaded the same image in the Glyph-property.  I set the caption := '' as I only want the button to look exactly as the image at the left. 

    In design time it looks like this : (which looks as the way I want it)

    image.thumb.png.0d5b29a6b0220ba00f6621df23099c61.png

     

    In my browser it looks like this:

    image.thumb.png.14bbab321d28d9fae187014b8f2933e2.png

     

    Enclosed you can find the source files.

     

    LargeImageOnButtonProject.7z

  5. I am working with Client Alignment.

     

    For example I have this screen, layout made on a 1920x1080 monitor :  (Let us suppose this is good, this is how I want my page to look)

    image.thumb.png.092071efbbb3caafbe98857869e6c266.png

    But when I display this on a bigger screen, I get this :

    image.thumb.png.bdfc760c76a426611e130acbf8d9f141.png

    On a 4K-screen :

    image.thumb.png.f4c549d2a826feec8aba5630de8df05a.png

    Or even on a small screen :

    image.thumb.png.940a032e79f4f5b16b0cdcd81b354da0.png

     

    With these examples, you will surely understand what I mean.  What I would like to have is more or less the same look as on the first screen.  That the elements on the page are proportionally resized (stretched or shrunk) depending on the screen display.  (Something similar as the stretch property of an image, but here for all elements on the page: image, label, panel, ...)

    If we focus on the text, on the first screen the size of the font is 16: this looks good.

    But on bigger screens or screens with a higher resolution, the font size should be higher, on smaller screens or lower resolution: the font size should be less.

    Is there a way to achieve this ?

    I guess this is also a hint for all developers: your application can look quite good on your monitor, but nowadays people work with small 11-inch screens as well as huge 4K-screens.  Your application can look quite different and even completely unwanted as in my last screenshot, where even my text is not fully displayed.

     

     

     

     

  6. Hi,

     

    I made a fine looking layout on my big high resolution screen.  But when displayed on a 13 or 11 inch screen, I loose whole parts of my layout.

    I found the custommeta property in servermodule and the desktopviewport properties in the mainmodule, but I don't know what exactly I have to do to 'scale' my application to the client screen.

    Can anyone help me as to this matter ?

  7. Hi,

    I had an issue with hyperserver which previously worked fine.  I uninstalled everything of FM uniGUI on my server, I noticed there were still a few directories of uniGUI in my program files directory, so I deleted them manually.

    Then I installed the runtime package, the themes package and the hyper server config package of the latest uniGUI version on my server.

    My uniGUI application works fine, but I still get a blank screen when I want to open the hyperserver, even after restarting IIS.

    But when I look closer at the installed files, I cannot find the hyperserver files: hyper_server.exe, hyper_server.dll, hyper_server.cfg.  

    Anyone has an idea why these files are not present after the install procedure ?   Anyone knows which package installes these hyperserver files ?

  8. Hi,

     

    I want the selected row/cell in a TUniDBGrid to be displayed in a particular way.

    I have found that this can be done with this code:

    .x-grid-row-selected .x-grid-cell-inner {
        font-weight: bold;
        background-color:red;
    }

    Where should this be entered ? 

    I guess in the UniEvents-property of the UniDBGrid, but there I can select Ext.grid.Panel, Ext.data.Store, Ext.selection.CellModel,  Ext.selection.RowModel, Ext.selection.ChekboxModel and Ext.toolbar.Paging.  And in what event should I put this code ?

    Thank you

  9. 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 ? 

  10. 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/

    image.png.f61d0c054acebc8a3452b404699748f0.png
    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 ?

  11. 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):

    image.thumb.png.ff5a6fcc8a8a030530cb83d778e2205f.png

    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 :

    image.png.ff49b47341a3b78195aa4f970dd4a175.png

    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 ?

     

     

     

  12. 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 ?

  13. 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 ?

     

×
×
  • Create New...