Jump to content

sobakava

Members
  • Posts

    77
  • Joined

  • Last visited

  • Days Won

    7

Everything posted by sobakava

  1. I already did that. As I mentioned, the glow CSS code works if I set it to default, the problem it is not working with "focus" state. CustomCSS.Strings = ( '.glowing-border {' '/* round the corners */' 'border-radius: 4px;' '-moz-border-radius: 4px;' '-webkit-border-radius: 4px;' '}' '.glowing-borders {' 'outline:none;' 'border: 1px solid #4195fc;' '/* create a BIG glow */' 'box-shadow: 0px 0px 20px #41c5fc;' '-moz-box-shadow: 0px 0px 20px #41c5fc;' '-webkit-box-shadow: 0px 0px 20px #41c5fc;' '}' )
  2. If it is a TFrame on a PageControl, you can simply hide it with myframe.visible := false.
  3. I have tried to add glow effect (made by box shadow) but I couldn't get it work then the editbox becomes active. This is the CSS in my CustomCSS.strings array. glowing { /* round the corners */ border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } glowing:focus { outline:none; border: 1px solid #4195fc; /* create a BIG glow */ box-shadow: 0px 0px 14px #4195fc; -moz-box-shadow: 0px 0px 14px #4195fc; -webkit-box-shadow: 0px 0px 14px #4195fc; }​ and this is the EditBox's ExtEvents: function added(sender, container, pos, eOpts) { sender.addCls('glowing'); } when I click in the editbox and even after start typing, nothing happens. I have tried to play with focus event in Extevents but still couldn't manage it to work. It seems the ":focus" is not working. Because I have tried to put glowing state CSS code directly into glowing class as following and the editbox appears as glowing effect as expected. glowing { /*glowing!*/ outline:none; border: 1px solid #4195fc; /* create a BIG glow */ box-shadow: 0px 0px 14px #4195fc; -moz-box-shadow: 0px 0px 14px #4195fc; -webkit-box-shadow: 0px 0px 14px #4195fc; } glowing:focus { /*same as above*/ outline:none; border: 1px solid #4195fc; /* create a BIG glow */ box-shadow: 0px 0px 14px #4195fc; -moz-box-shadow: 0px 0px 14px #4195fc; -webkit-box-shadow: 0px 0px 14px #4195fc; }​ So, how could I implement this glowing effect when the editbox receives focus? Ps. I have also tried to Uniedit1.setfocus; at onenter event desperately. the :active state seems working but only while the mouse key is kept pressed down on the Editbox. '.glowing-border:active {' 'outline:none;' 'border: 1px solid #4195fc;' '/* create a BIG glow */' 'box-shadow: 0px 0px 20px #41c5fc;' '-moz-box-shadow: 0px 0px 20px #41c5fc;' '-webkit-box-shadow: 0px 0px 20px #41c5fc;' '}' Isn't an Edixbox implemented as "input" element in Unigui?
  4. I'm trying to place UniGmap component to a dynamically created frame but I always get white blank map. This is frame with UniGmap on it: unit frm_alarms; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, uniGUITypes, uniGUIAbstractClasses, uniGUIClasses, uniGUIFrame, uniGUIBaseClasses, uniPanel, uniHTMLFrame, UniGMap; type Tfrm_alarms = class(TUniFrame) UniGMap1: TUniGMap; private { Private declarations } public { Public declarations } end; implementation {$R *.dfm} end. For testing I have created a TFrame on the main form: (frame_alarm) At main form's onshow event, the map is initialized. And it works fine. frame_alarm.UniGMap1.InitializeMap; But the thing is I want to create this frame at runtime and place it a defined position at main form's onshow event. Frame5 := Tfrm_alarms.Create( pnl_main ); Frame5.Visible := true; Frame5.Parent := pnl_main; Frame5.Left := 206; Frame5.Top := 94; frame5.UniGMap1.InitializeMap; // ??? Seems this has no effect ?? Well when I run it, I can see both runtime created and design time created frames on main form. But the map on the runtime created frame does not work. The picture below shows (runtime) what happens when I create an instance of pre-defined Frame runtime: I have added a Refresh button on the frame. When I click this button to trigger UniGmap1.initializemap after the map frame has been displayed, the map appears. How should I initialize the map without an user interaction to do it manually?
  5. reply to myself: this did the trick: '.mypanelstyle { ' ' background: #52616d; ' ' border-color: #ff00E8; ' ' color: black; ' ' border-width: 0px; <<-- set width' ' border-style: solid;' ' };'
  6. I want to use TUniPageControl 'secretly' on my form. I'll change pages by the code so I also want to hide tab-bar at the top of the control. I found how to do this in the forum: procedure HideUniPageControlHeader(PC: TUniPageControl); begin //hide UniPageControl header UniSession.AddJS(Format('%s.items.getAt(0).tabBar.hide();', [PC.JSName])); end; Well, this is working fine but still, there is border and gray bar at the bottom: I have tried to add many CSS params : CustomCSS.Strings = ( '.pagecontrol { background-color: #52616d;'+ ' color: #52616d !important;'+ ' padding: 0px 0px 0px;'+ ' width: 0px'+ ' frame: false'+ ' border: false'+ ' bodyPadding: 0'+ ' plain: true'+ ' bodyBorder: false'+ ' line-height: 0; }'.... I've tried to apply this to both TUniPageControl and even its childs (TUniTabSheet) but nothing changes. Only thing that worked is placing a TUnilabel on each TUnitabsheet with "pagecontrol" CSS string to change background color: function added(sender, container, pos, eOpts) { sender.addCls('pagecontrol'); } But I really want to get rid of the border. Any ideas? By the way, function added(sender, container, pos, eOpts) { sender.addCls('myglow'); } works for TUniPageControl. '.glowfilter { -webkit-filter: drop-shadow(0px 0px 7px rgba(0,210,220,0.5));' #9'filter: url(shadow.svg#drop-shadow); }' I can see glow effect. So I just don't know what to do in customcss string to remove the border and bottom bar. Thanks a lot.
  7. take a look at this post: http://forums.unigui.com/index.php?/topic/5222-centered-panels-once-again/
  8. You will be connecting thru a remote desktop connection client (like Windows Remode Desktop Connection) and using the remote server (which is actually a PC like you are using at your home/office). You can use your remote desktop client's file transfer tools or you can email the files to yourself at worse. Once you get in there, you'll figure out. Its just a remote Windows PC that you can see its desktop thru your local PC. Please note that if you are not familiar with Linux, you might want to get a Windows server. You can still run Unigui under Linux using Wine but if you are a newbie with Windows expericence, this could help.
  9. I have added a boolean variable to keep track of if the subform is already created. As unigui recommends, I have added this variable to mainmodue. In mainmodule.pas : public { Public declarations } subform1_created : boolean; end; Subform's OnCreate and OnClose events update this boolean variable : procedure TsubForm1.UniFormClose(Sender: TObject; var Action: TCloseAction); begin mainmodule.UniMainModule.subform1_created := false; end; procedure TsubForm1.UniFormCreate(Sender: TObject); begin mainmodule.UniMainModule.subform1_created := true; end; And this is how MainForm's OnScreenResize event looks like: procedure TMainForm.UniFormScreenResize(Sender: TObject; AWidth, AHeight: Integer); begin mainform.UniContainerPanel1.Left := (AWidth - mainform.UniContainerPanel1.Width) div 2; mainform.UniContainerPanel1.Top := (AHeight - mainform.UniContainerPanel1.Height) div 2; // Check if we have already created the subform1 if mainmodule.UniMainModule.subform1_created = true then if ( subForm1.visible ) then begin // Update the size of the subform1 with the new window dimensions subForm1.Width := Awidth; subForm1.Height := AHeight; // Adjust containerpanel's position to the center of the window subForm1.UniContainerPanel1.Left := (AWidth - mainform.UniContainerPanel1.Width) div 2; subForm1.UniContainerPanel1.Top := (AHeight - mainform.UniContainerPanel1.Height) div 2; end; end; This is working fine except, when we create subForm with subForm.Showmodal, the ContainerPanel will appear at designated position. Then if we rezise the browser window, it'll be placed at calculated location. So I'm updating subForm's dimensions and ContainerPanel's coordinates using the mainform's dimensions. procedure TsubForm1.UniFormShow(Sender: TObject); begin subForm1.Width := mainform.width; subForm1.Height := mainform.height; subForm1.UniContainerPanel1.Left := (subForm1.Width - mainform.UniContainerPanel1.Width) div 2; subForm1.UniContainerPanel1.Top := (subForm1.Height - mainform.UniContainerPanel1.Height) div 2; end; This is the updated project. Hope it helps someone out there. centered_forms_v2.zip
  10. Hello, As I have seen, the centered panel topic is being discussed many times in the forum but it is still a confusion, at least for me. Let me place this screenshot to show what I'm talking about first: This is probably the most common Web layout nowadays. A panel at the centers which keeps its central position even if the browser window resizes. How do we do this: - Let's start with the Main Form: This is the MainForm WindowState : wsMaximized BorderStyle : bsNone In the server module, we should have this line: MainFormDisplayMode = mfPage I have placed an UniContainerPanel on the form. There is something we need to do with this panel first. We should clear all Anchors : akTop: false akLeft: false akBottom: false akRight: false And there is a an UniImage in the ContainerPanel with the following properties: Alignment : alClient Autosize : true Center : true Stretch : false (we don't want to distort the image) And as a visual control example, I have placed a button in the ContainerPanel. There is nothing special with its properties. Just place it as you like. This button will show another form: procedure TMainForm.UniBitBtn1Click(Sender: TObject); begin subForm1.showmodal; end; Ok, these are enough to place our image which is going to be the background of our panel at the center of the form. But what happens if the browser window resizes? Well, we need to dynamically adjust the ContainerPanel's position. Luckly Unigui has an event which triggers whenever the browser window resizes. It even reports the last width and height values. We will use this event to move the ContainerPanel to the window center. Calculation is simple. For the left value, just subtract panel's half width from window's half width. Then calculate the top value similarly. procedure TMainForm.UniFormScreenResize(Sender: TObject; AWidth, AHeight: Integer); begin mainform.UniContainerPanel1.Left := (AWidth - mainform.UniContainerPanel1.Width) div 2; mainform.UniContainerPanel1.Top := (AHeight - mainform.UniContainerPanel1.Height) div 2; end; Everything is nice and clean so far. This works as we wish. - Secondary Form: But what if we have more than one Form in our application? The UniFormScreenResize event is being fired for only MainForm. Secondary forms in the application will not receive this event. So even if we do everything explained above exactly the same for the secondary forms, the ContainerPanel won't keep it's central position. There are some other tricks to do for secondary forms as well. First of all, "MainFormDisplayMode = mfPage" this is just for the MainForm. So, if you want your secondary forms to be displayed borderless, you should change following properties and add following code to extEvents to remove border and rounded corners: WindowState : wsMaximized BorderStyle : bsNone //Removes border and round edges extEvents - windows.afterRender: Ext.get(sender.id).el.setStyle("padding", 0); Ext.get(sender.id).el.setStyle("border-width", 0); Ext.get(sender.id).el.setStyle("margin", 0); We will replicate the same procedures for ContainerPanel and UniImage for the second page too. And when we click the button on the MainForm, we'll see the secondary form as we planned to see. This could be a login form, information form, control panel etc. But the ContainerPanel on this form will not stay at the center of the window when we resize the browser window. It is probably because of the intent of the application form's is totally different by philosophy. Well I have tried to implement some tricks to fix this. For instance I thought, even if the secondary form is shown as Modal, the main form should be receiving ScreenResize events and since they are in the same window, I have tried to use main form's event for secondary form too. procedure TMainForm.UniFormScreenResize(Sender: TObject; AWidth, AHeight: Integer); begin mainform.UniContainerPanel1.Left := (AWidth - mainform.UniContainerPanel1.Width) div 2; mainform.UniContainerPanel1.Top := (AHeight - mainform.UniContainerPanel1.Height) div 2; if ( subForm1.visible ) then begin subForm1.UniContainerPanel1.Left := (AWidth - mainform.UniContainerPanel1.Width) div 2; subForm1.UniContainerPanel1.Top := (AHeight - mainform.UniContainerPanel1.Height) div 2; end; end; well, actuall this works. But of course since we try to access subForm1 even before it is being created, it raises exceptions at the startup then it looks like working. I have tried to use an if condition like this: if Assigned( subForm1 ) then begin end; but this Assigned( TUniform) test raises and error: [dcc32 Error] Main.pas(51): E2036 Variable required Anyway, I'll update this post when I learn how to do this correctly. In the attachment you can find the sample project (Unigui 0.99.0 + XE6) I have added TUnimemos to the forms as a reminder of properties to change. centered_forms_.zip Best
  11. http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots
  12. Hello, I'm relatively new to Unigui. As a long run Delphi user, I must say that it is one of the most exciting packages ever written for Delphi I've seen so far. I have designed a test application using standalone server mode over default port 8077. Now I have decided to move it to a test server using port 80. But when I try to change port value to 80 under XE6 Object Inspector, it just turns back to 8077. Actually I have tried many random numbers too but they did not work eighter. I thought it is probably because of IIS/Apache but after IIS has been shut down, it is still the same. Just tried to telnet 127.0.0.1 80 to make sure there is no other app listening port 80. And no, there was no response on port 80. Telnet just can't connect. I have also tried to netstat -a to see if there is a hook to port 80, again, port 80 wasn't listed. Similarly, I can't change Title property from "New Application" to anything else. Why is that? I'm using Unigui 0.99.0 and RAD Studio XE6 on Windows 8.1 OS. Best Sobak
×
×
  • Create New...