Kattes
-
Content Count
95 -
Joined
-
Last visited
-
Days Won
8
Recent Profile Visitors
546 profile views
-
This still is working perfectly (at least for mobile applications),
-
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
