Jump to content

Search the Community

Showing results for tags 'component'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

There are no results to display.

Forums

  • Welcome to Smart Mobile Studio
    • News and Information
    • Pre-Sales Questions
    • Smart In the Media
    • Smart Contests
    • Meta
  • Smart Mobile Studio Discussion
    • General
    • IDE
    • RTL
    • Code
    • Client Server
    • Platform
    • Graphics
    • Deployment
    • Suggestion box
  • Smart Mobile Studio support
    • Support
    • Bug report
  • General Discussion
    • Pascal
    • Delphi
    • Javascript
    • HTML/HTML5
    • CSS
  • Resources
    • Website
    • Download Smart Mobile Studio

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Location


Interests


Company name


Position

Found 9 results

  1. lynkfs

    window component

    Just in case anyone has a need for a window component. (multiple windows, movable, resizable, bringtofront, minimise, close, maximise) project
  2. lynkfs

    component creation

    Question : is this article still the preferred way to develop visual components ? I developed some Material Design components some years ago (here and here) but they need to be ported to the latest rtl as they don't compile anymore. Hence this question. As an example I ported a simple component (switch) using the recipe in Jon's article and it works ok, see below Just a bit elaborate. unit Switch; /****************************************************************************** LynkFS / 20 - 11 - 2018 The Switch component consists of - a W3Panel as the main container for the Switch - a W3Panel for the Switch - a W3Panel for the sliderline - a W3Panel as the highlighter The component is by default styled according to the css theme of the project. Styling can be modified by overriding the following css classes : The Switch CSS classes in BEM notation are .TSwitch .TSwitch__Panel .TSwitch__Panel__Line .TSwitch__Panel__Line--StateOn .TSwitch__Panel__Line--StateOff .TSwitch__Panel__Knob .TSwitch__Panel__Knob--StateOn .TSwitch__Panel__Knob--StateOff .TSwitch__Panel__HighLight .TSwitch__Panel__HighLight--Active .TSwitch__Panel__HighLight--InActive */ interface uses W3C.DOM, System.Types, System.Time, System.Colors, System.Events, {$IFDEF THEME_AUTOSTYLE} SmartCL.Theme, {$ENDIF} SmartCL.System, SmartCL.Touch, SmartCL.Effects, SmartCL.borders, SmartCL.Components, SmartCL.Controls.Panel, SmartCl.Css.StyleSheet; type TSwitch = class(TW3CustomControl) private Panel0 : TW3Panel; //background Panel1 : TW3Panel; //sliderline Panel2 : TW3Panel; //indicator Panel3 : TW3Panel; //Switch knob procedure SetStateOn(StateOn: Boolean); function GetStateOn: Boolean; IsStateOn: Boolean := false; protected // see https://jonlennartaasenden.wordpress.com/2018/05/07/ function MakeElementTagObj: THandle; override; //1 procedure StyleTagObject; override; //2 procedure ObjectReady; override; //3 procedure InitializeObject; override; //4 procedure Resize; override; //5 procedure FinalizeObject; override; Procedure ShowSwitch; //included in 5 Procedure InsertCSS; //included in 2 public property StateOn: Boolean read getStateOn write setStateOn; end; implementation { TSwitch } function TSwitch.MakeElementTagObj: THandle; //1 begin result := w3_createHtmlElement('div'); //div = default, so could be omitted end; procedure TSwitch.StyleTagObject; //2 begin inherited; {$IFDEF THEME_AUTOSTYLE} ThemeBorder := btDecorativeBorder; {$ENDIF} InsertCSS; //insert all styling in stylesheet end; procedure TSwitch.ObjectReady; //3 begin inherited; //set some initial properties Panel0.SetBounds(0,0,self.width,self.height); //background Panel1.SetBounds(round(self.height/2), //slider line round(self.height/2)-round(self.height*0.2), self.Width-self.height, round(self.height*0.4)); Panel2.SetBounds(0,0,self.height,self.height); //highlight circle var x : integer := round(self.height/5); //switch knob Panel3.SetBounds(x,x,Panel2.width-2*x,Panel2.height-2*x); TW3Dispatch.WaitFor([Panel0, Panel1, Panel2, Panel3], 5, procedure (Success: boolean) begin if Success then begin // set some initial properties If IsStateOn then begin Panel2.Left := self.Width - Panel2.Width; Panel3.Left := self.Width - Panel2.Width + round((Panel2.Width-Panel3.Width)/2); end; // Do an immediate resize Resize(); end; end); end; procedure TSwitch.InitializeObject; //4 begin inherited; //creating sub-components Self.TagStyle.Add('TSwitch'); //superfluous, will be auto generated Panel0 := TW3Panel.Create(self); Panel0.TagStyle.Clear; //dont inherit css from TW3Panel Panel0.TagStyle.Add('TSwitch__Panel'); Panel1 := TW3Panel.Create(Panel0); Panel1.TagStyle.Clear; //dont inherit css from TW3Panel Panel1.TagStyle.Add('TSwitch__Panel__Line TSwitch__Panel__Line--StateOff'); Panel2 := TW3Panel.Create(Panel0); Panel2.TagStyle.Clear; //dont inherit css from TW3Panel Panel2.TagStyle.Add('TSwitch__Panel__HighLight TSwitch__Panel__HighLight--InActive'); Panel3 := TW3Panel.Create(Panel0); Panel3.TagStyle.Clear; //dont inherit css from TW3Panel self.SimulateMouseEvents := True; //touch enable self.handle.addEventListener("click", procedure() begin IsStateOn := not IsStateOn; If IsStateOn then begin Panel3.fxMoveBy(self.width - self.height, 0, 0.5); Panel2.fxMoveBy(self.width - self.height, 0, 0.5); end else begin Panel3.fxMoveBy(-self.width + self.height, 0, 0.5); Panel2.fxMoveBy(-self.width + self.height, 0, 0.5); end; Panel2.TagStyle.Clear; //dont inherit css from TW3Panel Panel2.TagStyle.Add('TSwitch__Panel__HighLight TSwitch__Panel__HighLight--Active'); TW3Dispatch.Execute (Procedure() begin Panel2.TagStyle.Clear; //dont inherit css from TW3Panel Panel2.TagStyle.Add('TSwitch__Panel__HighLight TSwitch__Panel__HighLight--InActive'); end, 80); ReSize; end); end; procedure TSwitch.Resize; begin inherited; if not (csDestroying in ComponentState) then begin // Make sure we have ready state if (csReady in ComponentState) then begin // Check that child elements are all assigned // and that they have their csReady flag set in // ComponentState. This can be taxing. A more lightweight // version is TW3Dispatch.Assigned() that doesnt check // the ready state (see class declaration for more info) if TW3Dispatch.AssignedAndReady([Panel0, Panel1, Panel2, Panel3]) then begin // Finally: layout the controls. ShowSwitch; end; end; end; end; Procedure TSwitch.ShowSwitch; begin // Panel1.TagStyle.Clear; Panel3.TagStyle.Clear; If IsStateOn then begin Panel3.TagStyle.Add('TSwitch__Panel__Knob TSwitch__Panel__Knob--StateOn'); Panel1.TagStyle.Add('TSwitch__Panel__Line TSwitch__Panel__Line--StateOn'); end else begin Panel3.TagStyle.Add('TSwitch__Panel__Knob TSwitch__Panel__Knob--StateOff'); Panel1.TagStyle.Add('TSwitch__Panel__Line TSwitch__Panel__Line--StateOff'); end; // end; procedure TSwitch.InsertCSS; var cssProperties : string; begin //make stylesheet var styleSheet : TW3StyleSheet := TW3StyleSheet.Create; styleSheet.Add(".TSwitch", ''); styleSheet.Add(".TSwitch__Panel", ''); cssProperties := 'cursor: pointer; border: 0px; border-radius: 6px;'; styleSheet.Add(".TSwitch__Panel__Line", cssProperties); cssProperties := 'background-color: rgba(164,114,234,.50);'; styleSheet.Add(".TSwitch__Panel__Line--StateOn", cssProperties); cssProperties := 'background-color: rgba(0,0,0,.26);'; styleSheet.Add(".TSwitch__Panel__Line--StateOff", cssProperties); cssProperties := 'cursor: pointer; border: 0px; border-radius: 50%;'; styleSheet.Add(".TSwitch__Panel__HighLight", cssProperties); cssProperties := 'background-color: rgba(164,114,234,.50);'; styleSheet.Add(".TSwitch__Panel__HighLight--Active", cssProperties); cssProperties := 'background-color: transparent;'; styleSheet.Add(".TSwitch__Panel__HighLight--InActive", cssProperties); cssProperties := 'cursor: pointer; border-radius: 50%; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);'; styleSheet.Add(".TSwitch__Panel__Knob", cssProperties); cssProperties := 'background-color: rgba(164,114,234,.90);'; styleSheet.Add(".TSwitch__Panel__Knob--StateOn", cssProperties); cssProperties := 'background-color: white;'; styleSheet.Add(".TSwitch__Panel__Knob--StateOff", cssProperties); /* Alternatively add this to a custom stylesheet : .TSwitch { } .TSwitch__Panel { } .TSwitch__Panel__Line { cursor: pointer; border: 0px; border-radius: 6px; } .TSwitch__Panel__Line--StateOn { background-color: rgba(164,114,234,.50); } .TSwitch__Panel__Line--StateOff { background-color: rgba(0,0,0,.26); } .TSwitch__Panel__HighLight { cursor: pointer; border: 0px; border-radius: 12px; } .TSwitch__Panel__HighLight--Active { background-color: rgba(164,114,234,.50); } .TSwitch__Panel__HighLight--InActive { background-color: transparent; } .TSwitch__Panel__Knob { cursor: pointer; border-radius: 10px; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); } .TSwitch__Panel__Knob--StateOn { background-color: rgba(164,114,234,.90); } .TSwitch__Panel__Knob--StateOff { background-color: white; } */ end; procedure TSwitch.FinalizeObject; begin Panel0.Free; Panel0 := nil; inherited; end; procedure TSwitch.SetStateOn(StateOn: Boolean); begin IsStateOn := StateOn; end; function TSwitch.GetStateOn: Boolean; begin Result := IsStateOn; end; end. usage procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize components Switch1 := TSwitch.Create(self); // Switch1.StateOn := true; //default false Switch1.SetBounds(50,50,60,35); end;
  3. lynkfs

    Do we need a TSplitter

    Do we need a TSplitter. Obviously I had a need for one, so for me the answer is yes. I found a JSFiddle here (http://jsfiddle.net/kxr96dzg/1/) which does what I wanted. It is a standard front-end javascript/html/css fiddle where dom-layout, styling and positioning and logic is divided into 3 separate files. I find it always a bit hard to have to look in 3 different places to understand some piece of code, but luckily in Smart this can be centralised. This post is about converting this fiddle in a standard Smart new-alpha component, without making any major changes. Converting Html : The splitter consists of a background, a left-side panel, a right-side panel and a 'dragger' to drag the splitter around. Splitter := TW3Panel.Create(self); PanelLeft := TW3Panel.Create(Splitter); PanelRight := TW3Panel.Create(Splitter); ReSizer := TW3Panel.Create(PanelRight); Converting CSS. Styling and positioning Splitter.SetBounds(30,30,400,250); PanelLeft.SetBounds (0, 0, Splitter.width, Splitter.Height); PanelLeft.handle.style.backgroundColor := 'whitesmoke'; PanelRight.SetBounds(trunc(Splitter.width/2), 0, trunc(Splitter.width/2), Splitter.Height); ReSizer.handle.style.backgroundColor := '#ccc'; ReSizer.handle.style.cursor := 'w-resize'; ReSizer.SetBounds (0, 0, 3, Splitter.Height); Converting JavaScript logic. This can be greatly simplified from the javascript in this fiddle : ReSizer.handle.onmousedown := procedure(e: variant) begin Splitter.handle.onmousemove := procedure(e: variant) begin PanelRight.left := e.clientX - 30; PanelRight.width := self.Width - PanelRight.Left; PanelLeft.handle.style.cursor := 'w-resize'; PanelRight.handle.style.cursor := 'w-resize'; end; end; Splitter.handle.onmouseup := procedure begin PanelLeft.handle.style.cursor := 'default'; PanelRight.handle.style.cursor := 'default'; Splitter.handle.onmousemove := procedure begin end; //nullify mousemove end; end); When the 'mousedown' event fires on the dragger, a 'mousemove' eventhandler takes care of changing the 'left' and 'width' parameters of the right-hand panel. This handler is cancelled on 'mouseup'. (sort of, would be more elegant to re-code this in calls to addEventListener and removeEventListener, but hey - this works well enough). A bit different from how visual components are usually created. Anyway, this works for me and the total of about 40 lines in the jsfiddle has even been reduced to about 30 Smart statements. Here is the code, which compiles fine in the latest alpha. unit Form1; interface uses //System.Types, //System.Types.Convert, //System.Objects, //System.Time, SmartCL.System, //SmartCL.Time, //SmartCL.Graphics, //SmartCL.Components, //SmartCL.FileUtils, SmartCL.Forms, //SmartCL.Fonts, //SmartCL.Theme, //SmartCL.Borders, SmartCL.Application, SmartCL.Controls.Panel, SmartCL.Controls.Label; type TForm1 = class(TW3Form) private {$I 'Form1:intf'} protected procedure InitializeForm; override; procedure InitializeObject; override; procedure Resize; override; Splitter, PanelLeft, PanelRight, ReSizer: TW3Panel; Label: TW3Label; end; implementation { TForm1 } procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize components end; procedure TForm1.InitializeObject; begin inherited; {$I 'Form1:impl'} Splitter := TW3Panel.Create(self); PanelLeft := TW3Panel.Create(Splitter); PanelRight := TW3Panel.Create(Splitter); ReSizer := TW3Panel.Create(PanelRight); Label := TW3Label.Create(PanelLeft); Splitter.handle.ReadyExecute( procedure () begin Splitter.SetBounds(30,30,400,250); PanelLeft.SetBounds (0, 0, Splitter.width, Splitter.Height); PanelLeft.handle.style.backgroundColor := 'whitesmoke'; PanelRight.SetBounds(trunc(Splitter.width/2), 0, trunc(Splitter.width/2), Splitter.Height); ReSizer.handle.style.backgroundColor := '#ccc'; ReSizer.handle.style.cursor := 'w-resize'; ReSizer.SetBounds (0, 0, 3, Splitter.Height); Label.SetBounds(20,20,80,25); Label.Caption := 'Some text'; // // event handling splitter movement // ReSizer.handle.onmousedown := procedure(e: variant) begin Splitter.handle.onmousemove := procedure(e: variant) begin PanelRight.left := e.clientX - 30; PanelRight.width := self.Width - PanelRight.Left; PanelLeft.handle.style.cursor := 'w-resize'; PanelRight.handle.style.cursor := 'w-resize'; end; end; Splitter.handle.onmouseup := procedure begin PanelLeft.handle.style.cursor := 'default'; PanelRight.handle.style.cursor := 'default'; Splitter.handle.onmousemove := procedure begin end; //nullify mousemove end; end); end; procedure TForm1.Resize; begin inherited; end; initialization Forms.RegisterForm({$I %FILE%}, TForm1); end. (Note that optionally most of the standard Smart units are not needed here.) .
  4. lynkfs

    HTML Components

    I've built a suite of new HTML Components, targeted for quick and easy building of websites To test, I re-built the main pages of my own website using these components See www.lynkfs.com The good thing about these components is that they do not use the visual RTL objects at all, so are nice and light. The home page (index.html) for instance compiles to just 11K Most if not all of these components are composite, they are built up of multiple elements which means that page creation is a breeze The home page f.i. consists of just 5 components : a menu, a header, a product section in 3 columns, a contact form and a footer Doesn't take long to string these together There are no external dependencies, no additional js or css files (with the exception of Frow, which is a light weight css framework built around flex, and temporarily the menu component. The idea is to eliminate these in possible future updates). At the moment I've created the following components JNxHero A header featuring a hero image which fills 80% of the available screen-height with a title or business name, a sub-title and a call-to-action button. JNxHeaderTID A header featuring a title, a single image and a description. JNxFooter A footer featuring a title or business name, a sub-title and 5 social media buttons. JNxDivider A simple divider which can be used to visually separate other sections JNxMenu A fully responsive menu from desktop to mobile hamburger. Based on the lux-bar project. JNxSlider An image slider. Current element has the repeat set to once and takes 3-5 images. JNxProduct2 This ribbon features 2 columns where each column is an image and a description. JNxProduct3 This ribbon features a title, an image and 3 columns where each column features a description. JNxContact This ribbon is a contact form with a name, email and question section to grow contact list. JNxReviews This ribbon is a section to display product reviews or quotes with a description and author. JNxBlog This ribbon is a section to display blog entries - coming. JNxBuyNow This ribbon is a component to buy products. Paypal, debit and credit cards supported. JNxDonate This ribbon is a component to donate money. Paypal, debit and credit cards supported. with some more in the pipeline.
  5. IElite

    TLabelEdit

    I needed a component that made it easier to place a lot of labels and TEdit controls on a form. So, I wrote this simple version of a TLabelEdit component it has the following public properties: property Label: TW3Label read fLabel; property Edit: TW3EditBox read fEdit; property Spacing: Integer read fSpacing write fSpacing; property Margins: Integer read fMargins write fMargins; Spacing - space between the Label and edit control only Margins - space on outside boundary of both the label and edit controls (i.e. space on left, right of both Label and Edit, as well as top of label and bottom of edit). example run-time creation code: fLabelEdit:= TLabelEdit.Create(self); fLabelEdit.Handle.style.setProperty('background-color', 'white'); fLabelEdit.Label.Handle.style.setProperty('background-color', 'Red'); fLabelEdit.Edit.Handle.style.setProperty('color', 'red'); fLabelEdit.Left:= 10; fLabelEdit.Top:= 10; fLabelEdit.Width:= 128; fLabelEdit.Height:= 64; fLabelEdit.Margins:= 2; fLabelEdit.Spacing:= 2; Full unit code below. Let me know if you see anything that can be improved. Shane unit LabelEdit; interface uses SmartCL.System, System.Colors, SmartCL.Components, SmartCL.Controls; type TLabelEdit = class(TW3CustomControl) private fLabel: TW3Label; fEdit: TW3EditBox; fSpacing: Integer; fMargins: Integer; protected procedure Resize; override; procedure InitializeObject; override; procedure FinalizeObject; override; public property Label: TW3Label read fLabel; property Edit: TW3EditBox read fEdit; property Spacing: Integer read fSpacing write fSpacing; property Margins: Integer read fMargins write fMargins; end; implementation procedure TLabelEdit.InitializeObject; begin inherited; Height:= 64; Width:= 128; Spacing:= 0; Margins:= 0; FLabel := TW3Label.Create(Self); FLabel.Font.Name := 'verdana'; FLabel.Font.Color := RGBToColor($FF, $FF, $FF); FLabel.Font.Weight := 'bold'; FLabel.Font.Size := 18; FLabel.Caption := ClassName; FLabel.AlignText := taLeft; FEdit := TW3EditBox.Create(Self); end; procedure TLabelEdit.FinalizeObject; begin FLabel.Free; FEdit.Free; inherited; end; procedure TLabelEdit.Resize; begin inherited; fLabel.SetBounds(fMargins, fMargins, clientWidth-(fMargins * 2), (clientHeight Div 2)-(fMargins * 2)); fEdit.SetBounds(fMargins, (fLabel.Top + fLabel.Height) + fSpacing + fMargins, clientwidth-(fMargins * 2), (clientHeight Div 2) - (fMargins * 2) - (fSpacing)); end; end.
  6. IElite

    Default control sizes ?

    When you drop a control (e,g, TW3EditBox) on a form in design-time, there is a default control size. In the case of a TW3EditBox, it is (128X32). When you create the same control at runtime the size by default is (171X17) If I review the source code for the control, there is no default size set in (SmartCL.Controls.EditBox) or any of its ancestors Where do these default values some from?
  7. lynkfs

    Component styling

    For myself I've adopted the following recipe for component styling 1) Compose new components using any of the standard components, like w3Panel, w3Label, w3Button etc. The uptake is that this way new components auto-style according to the project theme and switching themes changes component styling automatically. Overriding properties where necessary of course. 2) Avoid themes outside the ones provided in SMS. I find external css files hard to read and comprehend, and I tend to steer away from them. The uptake is no external dependencies and also styling can be done in BEM format, which I find really helpful. 3) Component styling has to be added in code (standard smart pascal) rather than manually extending the projects css-file.
  8. lynkfs

    Some more simple components

    A couple of more links for people interested in some bare-bones but functional SMS components : 1) www.lynkfs.com/components/Carousel/Carousel.pas An image carousel with choice of effects Example of use in ..../Carousel/Carousel.sproj Preview : ..../Carousel/www/index.html 2) www.lynkfs.com/components/PageControl/PageControl.pas A tabbed page component. Example of use in ..../PageControl/PageControl.sproj Preview : ..../PageControl/www/index.html 3) www.lynkfs.com/components/PopUpMenu/PopUpMenu.pas A simple pop-up menu Example of use of this component in ..../PopUpMenu/PopUpMenu.sproj Preview : ..../PopUpMenu/www/index.html 4) www.lynkfs.com/components/TreeView/TreeView.pas A treeview Example of use in ..../TreeView/TreeView.sproj Preview : ..../TreeView/www/index.html
  9. A couple of links for whoever is interested in some simple SMS components : 1) www.lynkfs.com/components/MySQLDB/MySQLDB.pas A cross domain component which takes a SQL query on any existing MySQL database and returns the cursor in both a local Variant and an on the fly generated TDataSet. Superfluous to have both ways implemented, but just for fun Example of use of this component in ..../MySQLDB/TestMySQLDB.sproj How to make a standard memo data-aware : just drag this component and a Memo on a form and connect them as in .../MemoDB/TestMemoDB.sproj Preview in .../MemoDB/www/index.html 2) www.lynkfs.com/components/Accordeon/Accordion.pas A collapsible panel component. Example of use in .../Accordeon/TestAccordeon.sproj Preview in .../Accordeon/www/index.html How to make this component data aware : put this component and the previous one on a form as in .../AccordeonDB/TestAccordeonDB.sproj Preview in .../AccordeonDB/www/index.html Components have been built with the latest beta. The MySQL test database used has just 1 table with some data of just 5 customers. 3) For a next post : TTreeView, TCarousel, TPageControl and TPopUpMenu
×