Leaderboard

Hello Friends, Finally, a big thx to Hayri ASLAN, who corrected my code. Thank you to everyone who participated in this topic : Paul, Sherzod and Hayri For those who are interested //********************************************************************** // METHODE without define (JavaScript Code) on Main > Script // Big Thx to Hayri ASLAN [Unigui Forum 24/04/2019] // Benefict to Use LocalStorage instead of Cookies : // 10 Mo Persistent data on Client Side (even with Refresh browser) // Only strings are store //********************************************************************** //1. To Set the Key 'K1' procedure TMainForm.UniButton1Click(Sender: TObject); var st:string; begin st:=UniEdit1.Text; UniButton1.JSInterface.JSCallGlobal('localStorage.setItem', ['K1', st] ); // Key , Value (always string) end; //2. To retreive Value of 'K1' on UniEdit2 procedure TMainForm.UniButton2Click(Sender: TObject); begin with UniEdit2.JSInterface do JSCall('setValue', [jsstatement('localStorage.getItem("K1")')]); // important : Key must be Quoted " " end; //3. To remove Key 'K1' procedure TMainForm.UniButton3Click(Sender: TObject); begin UniButton3.JSInterface.JSCallGlobal('localStorage.removeItem', ['K1']); end; All the Best LocalStorage2.zip

To add client side validation on a UniEdit with the error provider icon/red underline simply add the following code: 1) For an Email validation UniEdit1 -> ClientEvents -> UniEvents add the following beforeinit code: function beforeInit(sender, config) { Ext.apply(sender,{allowBlank:false,vtype:'email',msgTarget : 'side'}); } 2) For a custom Time validation on a UniEdit control add the following beforeinit code: function beforeInit(sender, config) { var timeTest = /^([1-9]|1[0-9])[0-5][0-9])(\s[a|p]m)$/i; Ext.apply(Ext.form.field.VTypes, { // vtype validation function time: function(val, field) { return timeTest.test(val); }, // vtype Text property: The error text to display when the validation function returns false timeText: 'Not a valid time. Must be in the format "12:34 PM".', // vtype Mask property: The keystroke filter mask timeMask: /[\d\s:amp]/i }); Ext.apply(sender,{ name: 'departureTime', vtype: 'time', msgTarget : 'side' }); } 3) For client side IPAddress validation on a UniEdit do the following: function beforeInit(sender, config) { // custom Vtype for vtype:'IPAddress' Ext.apply(Ext.form.field.VTypes, { IPAddress: function(v) { return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v); }, IPAddressText: 'Must be a numeric IP address', IPAddressMask: /[\d\.]/i }); Ext.apply(sender,{ name: 'IPAddress', vtype: 'IPAddress', msgTarget : 'side' }); } 4) For clientside AlphaNum validation on a UniEdit do the following: function beforeInit(sender, config) { // custom Vtype for vtype:'AlphaNum' Ext.apply(Ext.form.field.VTypes, { AlphaNum: function(v) { return /^[a-zA-Z0-9_]+$/i.test(v); }, AlphaNumText: 'Must be an alphanumeric word', // This mask filter invalid keystrokes AlphaNumMask: /[a-z0-9]/i }); Ext.apply(sender,{ vtype: 'AlphaNum', msgTarget : 'side' }); } 5) For clientside URL validation on a UniEdit do the following: function beforeInit(sender, config) { var url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@`~=%!]*)(\.\w{2,})?)*\/?)/i; // custom Vtype for vtype:'url' Ext.apply(Ext.form.field.VTypes, { url: function(v) { return url.test(v); }, urlText: 'Must be a valid URL (ie. http, https or ftp)' }); Ext.apply(sender,{ vtype: 'url', msgTarget : 'side' }); } ***Note*** msgTarget: 'side' shows the round red icon with the white exclamation mark in it. Next step.. A UniEdit control with validation type = 'Email' or 'Time' or 'Date' or etc etc.. or 'Custom' with Regular expression. Min/Max length etc etc.

Estou deixando o link do meu primeiro Video de um Mini ERP que estou desenvolvendo, o sistema é feito com Unigui e ACBR.

OK, now i whant that example too...

Hi! For those who are still in the first steps of UniGui, just like me. Here is the implementation of the Jquery plugin to measure the strength of the password in your projects. PassMeter.rar

ShowProgress('Please Wait...'); UniSession.AddJS('Ext.WindowManager.getActive().el.down(".x-progress").hide();'); ...

I have created some UniGUI components for my project, in that way I can re-use the visual objects that I have implemented at ease. I just wanted to share my way of doing this with you guys. Any comments, technical critiques are welcome. 1. Creating the Component Package Since I have more than one custom components, I prefer to keep them in a Deplhi Package instead of individual self registering Delphi units. So we start with creating a component package in Delphi. File > New > Other > Delphi Projects > Package 2. Adding a TUNIFrame to The Package As the base of the components, I'm using TUNIFrame. We are going to add a TUNIFrame first. File > New > Other > Delphi Projects > uniGUI for Delphi > Frame 3. Adding Child Components Decorate your new TUNIFrame with existing UniGUI components as you wish. In this example, my frame looks like the picture below. I'm also renaming the frame. In this case the name is 'frame_myunipanel'. Don't forget to save unit files to disk. I named the files as unit_myunipanel. The visual object tree is shown below: And this is how the project tree looks like. I saved package with the name 'package_myunipanel'. I have only one unit; unit_myunipanel in the project tree. Our package has some dependencies: Right click on package_myunipanel.bpl > View Source from the pop-up menu. requires rtl, vcl, vclimg, dbrtl, soaprtl, vcldb, uIndy22, uniTools22, uniGUI22Core, uniGUI22, designide, uniGUI22Chart; contains unit_reg in 'unit_reg.pas', unit_myunipanel in 'unit_myunipanel.pas' {frame_myunipanel: TUniFrame}; 4. Adding The Registrar Unit To The Project At some point, we should tell Delphi to register our new component. We can do this in a plain Delphi unit. File > New > Other > Delphi Projects > Delphi Files > Unit Now we have a new unit in the package. I'm saving this unit as 'unit_reg.pas'. This is the final appearance of our package tree: Here is the tricky part, the registration. This is the unit_reg.pas. unit unit_reg; interface uses uniGUIFrame; procedure Register; implementation uses Classes, TreeIntf, unit_myunipanel; type TFrameClass = class of TUniFrame; procedure RegisterFramesAsComponents(const Page: string; const FrameClasses: array of TFrameClass); var FrameClass: TFrameClass; begin for FrameClass in FrameClasses do begin RegisterComponents(Page, [FrameClass]); RegisterSprigType(FrameClass, TComponentSprig); end; end; procedure Register; begin RegisterFramesAsComponents('UniGUI 3rd Party', [Tframe_myunipanel]); end; end. I did not add any published properties or methods to my panel yet. This is how the unit_myunipanel looks like. You can add properties and methods to your component just like you do with VCL units. unit unit_myunipanel; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, uniGUITypes, uniGUIAbstractClasses, uniGUIClasses, uniGUIFrame, uniTrackBar, uniLabel, uniEdit, uniGUIBaseClasses, uniPanel; type Tframe_myunipanel = class(TUniFrame) UniContainerPanel1: TUniContainerPanel; UniEdit1: TUniEdit; UniLabel1: TUniLabel; UniTrackBar1: TUniTrackBar; private { Private declarations } public { Public declarations } end; implementation {$R *.dfm} end. 4. Installing the Component Right click on package_myunipanel.bpl > Install Voila! We are good to go. Now you can add this component to your UniGUI projects. PS: TreeIntf.pas is located in here: "c:\Program Files (x86)\Embarcadero\Studio\16.0\source\ToolsAPI\TreeIntf.pas" If your IDE can't find it, you might need to add it to your search path.

I want to know what to do, too. But I don't have JS.

Hello, I'm trying to setup the following lay-out. I have frame, alignment client, layout: border. It contains a header (region: top), body panel (unicontainerpanel - region center) that hosts a unidbgrid. Below the 2 is a unipanel with region south, it is collapsible. This all works fine, but I would like to add a splitter betwee the body panel and the panel at the bottom so that when the panel is not collapsed the user can make it bigger or smaller. I can't get it to work, the splitter first showed at the wrong position, I've been able to fix this using the createorder but it behaves completely wrong. Does anybody have an idea? Thx, Dominique

Olá, Você pode alterar o tamanho da fonte com CSS personalizado, tipo: .x-treelist-nav .x-treelist-item-text { font-size: 13px; }

hi this is great and working fine but I have 2 questions 1 - where I can find validitychange Event in UniDbEdit. 2- how can i check if it is valid or not in (Pascal Code) before posting the data to database? Regards

I would also like to see an example

Can you test this with WebForm, JSInterface do begin JSCallGlobal('Ext.util.CSS.createStyleSheet',['#'+WebForm.JSName+'_id .x-css-shadow { box-shadow: none !important;}']); end;

Thx Sherzod, solves the issue. If there would be another solution that does not affect other forms except the login screen that would be great. But I can go forward anyway, the shadow does not have a big impact on the visual part. Dominique

Let me create an example.

Difference Between Local Storage, Session Storage And Cookies

You can use ViewerJS library to view more files than PDF, like Open Office documents, look at this thread for sample

Спасибо!

To set item in local storage JSCallGlobal('localStorage.setItem', ["lastname", "Smith"]); Then you can use it in client side var lastname = localStorage.getItem("lastname"); to remove item JSCallGlobal('localStorage.removeItem', ["lastname"]);

@Volk65 Global variable per session. Here is my kitchen : Create an UniDataModule specially dedicated to theese variables. for example name it Tmp (a temporary Unit) : unit Tmp; interface uses SysUtils, Classes; type TDM_tmp = class(TDataModule) //********* private // variables shared by all units example : // Periode fD1:TDate; fD2:TDate; // Printing fPrintLine:boolean; // somme set errors ferror:boolean; etc... //********* published // Periode property D1:TDate read fD1 write fD1; property D2:TDate read fD2 write fD2; // Printing property PrintLine:boolean read fPrintLine write fPrintLine; // somme set errors property error:boolean read ferror write ferror; end; function DM_tmp: TDM_tmp; implementation {$R *.dfm} uses UniGUIVars, uniGUIMainModule, MainModule; function DM_tmp: TDM_tmp; begin Result := TDM_tmp(UniMainModule.GetModuleInstance(TDM_tmp)); end; initialization RegisterModuleClass(TDM_tmp); end. And after, on your others Units, you can get them or set them like : tmp.DM_tmp.D1 :=dtpMyDateN.dateTime; if tmp.DM_tmp.error then .... if tmp.DM_tmp.PrintLine then... It is important to use properties to never have overlap variables on different sessions see : http://www.unigui.com/doc/online_help/general-design-concept.htm Regards.

Hello, There are many ways to do this. Try this one UniServerModule -> CustomFiles: http://assets.freshdesk.com/widget/freshwidget.js MainForm -> Script: FreshWidget.init("", {"queryString": "&widgetType=popup", "utf8": "✓", "widgetType": "popup", "buttonType": "text", "buttonText": "Support", "buttonColor": "white", "buttonBg": "#006063", "alignment": "1", "offset": "100px", "formHeight": "500px", "url": "https://adm-concept.freshdesk.com"} );

An example showing how to incorporate Leaflet and OpenStreetMaps into UniGUI. The following lines must be added to the ServerModule | CustomFiles: https://unpkg.com/leaflet@1.3.4/dist/leaflet.css https://unpkg.com/leaflet@1.3.4/dist/leaflet.js See the Mapbox Tab in the application for more details. P.S. I am no expert with Leaflet - please see the following for more details: Getting started with Leaflet OpenStreetMap Mapbox - the accessToken used for this is a public one...you can register to receive your own. Leaflet Maps Example.zip

Used: UniEdit1 UniButton1 UniNativeImageList1 CustomCSS 1. CustomCSS: .customTrgCls { border-radius: 0; border-left: 0; } 2. UniButton1: Caption = ''; iConAlign = iaCenter Images->UniNativeImageList1 ImageIndex = 0 LayoutConfig->Cls = customTrgCls 3. UniNativeImageList1 Add camera-retro IconCls

Hi, Maybe like this ?: var grid = MainForm.UniDBGrid1; var edPlugin = grid.editingPlugin; edPlugin.startEditByPosition({ row: 0, column: 1 }); edPlugin.getActiveEditor().field.setValue("newValue"); edPlugin.completeEdit(); Best regards,

Remove with radius border on the corners use code below function window.afterrender(sender, eOpts) { Ext.get(sender.id).el.setStyle("padding", 0); Ext.get(sender.id).el.setStyle("border-width", 0); Ext.get(sender.id).el.setStyle("-webkit-border-radius", 0); Ext.get(sender.id).el.setStyle("-moz-border-radius", 0); Ext.get(sender.id).el.setStyle("border-radius", 0); }