Kattes
-
Posts
144 -
Joined
-
Last visited
-
Days Won
11
Content Type
Profiles
Forums
Events
Everything posted by Kattes
-
But probably UnimContainerPanel is the right answer
-
Has somebody any idea, how this could work for UnimPanel - so for mobile applications? Unfortunately all above does not work here
-
Sorry for the late response, but my boss kept me overloaded with thousands of other things... @Norm - Yes, that goes in the right direction but does not solve the problem 100%, because it would create 2 big lines (one right and on the bottom) in the browser window. The solution is so simple that I am almost embarrassed to write this here. Simply setting MainFormDisplayMode = mfPage in the ServerModul.dfm let the borders go away, which is finally very logical
-
Building Mobile Drawer (floating menu) using Unigui
Kattes replied to mhmda's topic in Components and Code Samples
Wow, another great tutorial from Mohammad . Such posts keep the forum alive and help the community grow. Many thanks for that! -
Building Mobile Login Screen using Unigui
Kattes replied to mhmda's topic in Components and Code Samples
Mohammad you really know how to do it! I am very impressed with the video and I think it is great that you share your knowledge with us. It would be really great if we could create our own components that already have the necessary CSS settings for a certain layout. Then you could save yourself a lot of typing work and can use the components with a self defined design over and over again. -
Wow, that looks really nice and probably took a lonk time to achieve. I'm looking forward for your tutorial, Mohammad
-
Sherzod, my hero in darkest hours ! Thank you !!! Finally... <input type="submit" value="Login" style="font-size:22px;font-weight:550; width: 100%;" onclick="window.parent.ajaxRequest(window.parent.MainmForm.UnimURLFrame,'button', ['val1='+document.getElementById('EditboxEmail').value, 'val2='+document.getElementById('EditboxPW').value, 'val3='+document.getElementById('CheckboxSave').checked ])"> ..did make it work! Many many thanks - and also a big thanks to all the others for their help and comments!
-
Thank you Abaksoft, but currently I first need to understand why AjaxCall is not bind to the HTML Code, which I load into an UnimURLFrame. I only can guess that I am missing a reference to some JS Unigui library. Kind regards, Kattes
-
So what is the problem? What needs to be added to html code to have AjaxRequest available? Kind regards, Kattes
-
Why? I was asked to program a mobile app, which needs to look 100% as a given template. Using power of Unigui would be nice, but would require a very good understanding of css structure of the components to manipulate their look and feel accordingly. Responsive design is another topic... CSS is part of the html code only to make it easier to read in this test case.
-
Hi again, Attached ZIP-File contains the complete test case sources. Hopefully somebody can help to solve, why ajax calls do not get fired. Kind regards, Kattes Testcase.zip
-
Currently I am on a weekend trlp, so can share sources not before Monday. But finally the sources are already more or less listed above. Best regards K.
-
Thank you for the quick reply, but I also tried it in this way before without any success. So this what you see here was one of my last experiments having ajax call handler from mainm and unimUrlFrame pointing to the same handler. Unfortunately the solution is not so easy. Kind regards, Kattes
-
Hello, I have a very simple mobile application, which contains only MainForm and one component "UnimURLFrame". Here I am loading the following HTML code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>LoginDemo</title> <style> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'); } body { background-color: #3C3C3C; color: #000000; font-family: Roboto; font-weight: normal; font-size: 13px; line-height: 1.1875; margin: 0; padding: 0; } .Editbox { border: 0px #A9A9A9 none; background-color: transparent; color :#FFFFFF; font-weight: normal; font-size: 14px; text-align: left; vertical-align: middle; width: 100%; padding: 20px 5px; display: inline-block; outline: none; } .Line { border-width: 0; width: 100%; vertical-align: middle; height:4px } body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("/files/images/loginBack.png"); /* Full height */ height: 50%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } input[type="checkbox"] { visibility: hidden; } label { cursor: pointer; color: #fff; font-size:14px; font-weight: lighter; } input[type="checkbox"] + label:before { border: 1px solid #fff; background: #fff; color: #000; content: "\00a0"; /* Checkbox Symbol off*/ text-align: center; display: inline-block; font: 16px; font-weight: bold; /* Box size */ height: 16px; width: 16px; border-radius: 5px; margin: 0 0.75em 0 0; /* 0.75 em Label distance */ padding: 0; vertical-align: center; } input[type="checkbox"]:checked + label:before { background: #fff; color: #000; content: "\2713"; /* Checkbox Symbol on*/ text-align: center; } input[type=submit] { background-color: #3c9fd9; color: white; padding: 16px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #3673a5; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bg { /* The image used */ background-image: url("files/images/loginBack.png"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } input.largerCheckbox { width: 20px; height: 20px; background: #3d404e; } </style> </head> <body class="bg"> <form> <br><br><br> <img src="/files/images/LoginLock.png" id="Image2" alt="" style="display: block; margin-left: auto; margin-right: auto;width: 20%; height: auto;"> <div style="color: #fff; font-size:32px;text-align: center; font-weight:800;"> Login Demo </div> <table style="width: 100%;position:relative;top:50px"> <colgroup> <col span="1" style="width: 5%;"> <col span="1" style="width: 90%;"> <col span="1" style="width: 5%;"> </colgroup> <tbody> <tr> <td style="background-color: #ff000000"></td> <td> <input class="Editbox" type="text" id="EditboxEmail" value=""; placeholder="E-Mail" > <img class="Line" src="/files/images/img0001.png" id="Line1" alt="" style="position:relative;top:-20px"></div> <input class="Editbox" type="password" id="EditboxPW" value="" placeholder="Password" > <img class="Line" src="/files/images/img0001.png" id="Line1" alt="" style="position:relative;top:-20px"></div> <div class="unselectable" style="position:relative;left:-20px; height:75px"> <input type="checkbox" id="CheckboxSave" name="" value=""> <label for="CheckboxSave"><span>Save Data</span></label> </div> <div class="unselectable" style="height:136px"> <input type="submit" value="Login" style="font-size:22px;font-weight:550; width: 100%;" onclick="ajaxRequest(MainmForm,'button', ['val1='+document.getElementById('EditboxEmail').value, 'val2='+document.getElementById('EditboxPW').value, 'val3='+document.getElementById('CheckboxSave').checked ])"> </div> <div style="color: #fff; font-size:20px;text-align: center; font-weight:900;"> Unigui - HTML Test </div> </td> <td style="background-color: #ff000000"></td> </tr> </tbody> </table> </form> </body> </html> Mainm.pas looks like: unit Mainm; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, uniGUITypes, uniGUIAbstractClasses, uniGUIClasses, uniGUImClasses, uniGUIRegClasses, uniGUIForm, uniGUImForm, uniGUImJSForm, uniGUIBaseClasses,unimTimer, uniSweetAlert,unimURLFrame, uniTimer; type TMainmForm = class(TUnimForm) UnimTimerEvent: TUnimTimer; UniSweetAlert1: TUniSweetAlert; UnimURLFrame: TUnimURLFrame; procedure UnimURLFrameAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); private { Private declarations } public { Public declarations } end; function MainmForm: TMainmForm; implementation {$R *.dfm} uses uniGUIVars, MainModule, uniGUIApplication, ServerModule; function MainmForm: TMainmForm; begin Result := TMainmForm(UniMainModule.GetFormInstance(TMainmForm)); end; procedure TMainmForm.UnimURLFrameAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName='button' then Begin ShowMessage('Email '+ Params.Values['val1']+#13+ 'PW '+ Params.Values['val2']+#13+ 'CB '+ Params.Values['val3']); End; end; initialization RegisterAppFormClass(TMainmForm); end. But the Ajax event will not be fired when I press the HTML button. I am pretty sure that I made a stupid error, but cannot find it. So please guys help me! Kind regards, Kattes
-
UniURLFrame is a very popular UniGui component when it comes to integrating HTML code directly into a project with as few side effects as possible. Unfortunately, this component is always displayed with a surrounded border in the browser. Is there a simple way to switch off these borders?
-
Looks very promising. I definitely will have a closer look at this, thank you Norm for sharing your knowledge with us!
-
Thank you, That finally also worked for me ... Kattes procedure TMainForm.UniFormCreate(Sender: TObject); procedure AdjustDropDownFont(CB: tUniComboBox); begin // Only works if ItemIndex=0 is or if UniComboBox Style is csSimple ??? with CB do ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {'+ ' config.listConfig = {'+ ' tpl: new Ext.XTemplate('+ ' ''<tpl for="."><div class="x-boundlist-item" style="'+ Font.ToStyleString(True) +'">{val}</div></tpl>'', {'+ ' disableFormats: true'+ ' }'+ ' )'+ ' };'+ '}'; end; begin AdjustDropDownFont(UniComboBoxZahlart); AdjustDropDownFont(UniComboBoxPrintTicket); end;
-
Sorry, but I was too busy to care about the test case, but will do that as soon as I can... Nevertheless my issue #2 - the full screen mode problem - is solved! I found out that the full screen mode will be left only if an application does not run on a SSL connection. After I published my application on my web server (which uses SSL) the described problem #2 is gone.
-
Hi Marlon, Very nice idea! I will probably use it in one of my next projects - Thank you! https://www.w3schools.com/code/tryit.asp?filename=GFL1T4YGPANV
-
Hi Sherzod, I am using a P20 Pro running Android 9 and Chrome as shown above for my tests but also saw same behavior on the Apple iPhone from a friend. I will make tomorrow a test cause fore the Google Font issue.
-
Hi, Directly put on the form where you want to use fontawsome a UniHTMLFrame with the following HTML content: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> </head> <body> </body> </html> At least that worked fine for all of my projects.
-
Hi again, I recently started with my first Web-Application for mobile devices using the special mobile Components of Unigui. In general everything works fine, but I am facing two problems: I am not able to get use of Google Fonts in mobile applications - I tried all the tricks that worked for standard UniGui applications, but for whatever reason I cannot get the Google Fonts working under mobile environment. Full Screen Mode - After putting a link of my App on the home screen of my mobile it starts in full screen mode - so this works as expected. But whenever using UnimEdit, i.e. entering some text in this control it will leave full screen mode immediately , what is likely a bug. You can test this behavior quite easy with http://prime.fmsoft.net/demo/touch/mdemo65.dll/m. Just add it to your home screen of your smartphone and explore the Edit Components after starting in full screen mode.You will probably see the same problem. I hope that somebody knows a trick to avoid this? Best regards, Kattes
-
Although it was a lot of work to change everything to FireDAC, it seems to have been worth the effort! All problems I described before are gone! So I would like to warn everyone to use ZEOS in their uniGui projects. Something seems to be incompatible and can cause problems that are extremely difficult to understand. Once again, a big thank you to all of you who joined me on the bug search. Kind regards, Carsten - aka Kattes
-
Okay, I just found another important piece of the puzzle. The problem only occurs if the visual application is also running and accessing the same database. In this case the access of the second application is extremely slowed down. We are not talking about a lot of traffic. This happens already when only one visual and one non-visual application connects to the same database at the same time, but I have no idea how to prevent this. Perhaps I will try to change to Firedac instead of using ZEOS - what do you think?
-
@Jean Marc, I followed your advice and changed the complete server code to make it even more thread-safe (although I thought ZEOS was already thread-safe). I also tested the other solution I mentioned before overnight, which already helped to make it more stable, but that ended up with another strange effect. Everything worked fine overnight, but the response times (time between API calls and JSON's response to the PHP server) became extremely high - about 10 seconds! So let's see what will be the outcome of changing the complete code and giving each API request its own DB connection. Whatever the outcome will be, I really appreciate your help JM. @mierlp, I also want to thank you for this additional inspiration. If my last changes do not solve my problem, I will investigate in the direction you suggest.
