Jump to content

lynkfs

Moderators
  • Content Count

    743
  • Joined

  • Last visited

  • Days Won

    146

Everything posted by lynkfs

  1. Having a look at what a simple Vue control involves : the first part of this article describes how to make a vue button Apparently a new SMS Vue button customcontrol needs to define the component in vue terms (the 'Vue.component' bit in the article) emit html that vue can hook in to (the 'div id="components-demo" bit) get styling done through class based css and then needs to be run under Vue control (the 'new Vue({ el: '#components-demo' }) bit) Ad 1 : this is completely different from present component coding practices. Ad 2 : this is much the
  2. and two-way binding (v-model) var window external 'window': variant; var console external 'console': variant; implementation { TForm1 } procedure TForm1.W3Button1Click(Sender: TObject); begin var Script := document.createElement('script'); Script.src := 'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js'; document.head.appendChild(Script); Script.onload := procedure begin console.log('Vue loaded'); //two way binding (v-model) var el := '#Component1'; //'#' + W3Panel1.handle.id; W3EditBox1.handle.setAttribute('v-model','message'); var data := class
  3. I guess I'm personally a bit of an anti-frameworker. I find that every new framework has a (steep) learning curve and unexpected behaviours which needs to be dealt with. Besides, it usually is virtually impossible to change third-party frameworks/libraries to your own needs. So I tend to go back to basics as much as possible. As to Vue, I can't really comment on the +'s or -'s. It certainly is a large framework which goes way beyond simply providing a collection of visual components. In the end it will be feasible I guess to integrate Vue in SMS. Almost everything is possible.
  4. lynkfs

    wysiwyg

    something like this (with more commands) would be possible procedure TForm1.InitializeObject; begin inherited; {$I 'Form1:impl'} W3IFrameHtmlElement1.src := 'https://www.lynkfs.com/Experiments/wysiwyg/'; end;
  5. lynkfs

    wysiwyg

    Was looking for an easy to make wysiwyg editor. This one is based on 'document.designMode'. Mozilla: "When an HTML document has been switched to designMode, its document object exposes an execCommand method to run commands that manipulate the current editable region" IFrame's have an innate document element which can be used for that purpose. Have a form with an IFrameHtmlElement and 2 buttons ('bold' and 'italic') : procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize components W3IframeHtmlElement1.handle.contentDocument.designMode
  6. lynkfs

    lighthouse

    Google has implemented a new service : web.dev Basically this measures some indicators of any url using their LightHouse tool. These indicators are grouped into Performance, Accessibility, Best Practices and SEO I created a minimal SMS project with only a single image on a form and run the test : https://web.dev/measure and url : https://www.lynkfs.com/Experiments/lighthouse/www/ This gives scores of 95 / 27 / 77 / 89 for Performance, Accessibility, Best Practices and SEO respectively There are a couple of really simple things which will up these sco
  7. lynkfs

    console override

    This mechanism can be used to redefine more built-in functions. Funny. The code below redefines 'ShowMessage' to redirect its contents to a Memo : procedure TForm1.InitializeObject; begin inherited; {$I 'Form1:impl'} W3Memo1.Text := 'ShowMessage : ' + #10; browserapi.window.alert := procedure(text:variant) begin W3Memo1.Text := W3Memo1.Text + #10 + text; end; ShowMessage('ccc'); browserapi.window.alert('ddd'); end; or combine the two and redefine 'ShowMessage' to redirect its contents to the 'Writeln' function, which in its turn is redirected to the M
  8. redirecting 'console.log' or 'writeln' output proves to be very simple : have a form with a Memo component : procedure TForm1.InitializeObject; begin inherited; {$I 'Form1:impl'} W3Memo1.Text := 'Console.log : ' + #10; browserapi.console.log := procedure(text:variant) begin W3Memo1.Text := W3Memo1.Text + #10 + text; end; writeln('aaa'); browserapi.console.log('bbb'); end; all subsequent calls to writeln and/or console.log are now redirected to the Memo component.
  9. lynkfs

    no-code

    Part of the nocode-locode framework is that it features general purpose functions where coding is replaced by neural network based supervised learning (training by example). To test this out I selected 4 neural network frameworks : Brain.js Synaptic TensorFlow the neural network component in my own shoestring/native framework The next code fragments implement these neural networks and train them to produce output similar to the XOR function below : function TForm1.&XOR(a,b: integer): integer; begin result := (a xor b); end; //test XOR console.log(
  10. warning : "The -webkit-canvas CSS feature is deprecated. Please use a positioned <canvas> element instead." -webkit-canvas is used in both SmartCL.spinner and SmartCL.graphics
  11. if you do this then it works fine procedure TForm2.InitializeObject; begin inherited; {$I 'Form2:impl'} .... Handle.ReadyExecute( procedure () begin resize; end); end;
  12. Thanks @jarto So a good boilerplate for visual components would be something like this function TSwitch.MakeElementTagObj: THandle; //1 begin result := w3_createHtmlElement('div'); //or any other html element end; procedure TSwitch.StyleTagObject; //2 begin inherited; {$IFDEF THEME_AUTOSTYLE} ThemeBorder := btDecorativeBorder; //or whatever is appropriate {$ENDIF} .... //optionally add styles end; procedure TSwitch.InitializeObject; //3 begin inh
  13. Unless @jarto has a better solution, I still think it is better to reset all styles for these type of components by setting '-webkit-appearance' to 'none' and from there style everything yourself. See previous post for examples
  14. I did notice that too. Must be a (unwanted) rtl-warning generated by using TW3StyleSheet.Add(...) @jarto could you have a look at that too ? edited : line 884 in SmartCL.Css.Stylesheet should be xSheet.insertRule(RuleName + ' {' + RuleValues + '}',0);
  15. 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 fo
  16. I saw that SmartCL.RegEx is moved to System.RegEx. This reminded me of VerbalExpressions, which I came across a while ago VerbalExpressions is basically a library which creates regex strings using functional programming /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/ The above regular expression string checks for correctly formatted url's, and in 'regular english' would be something like the url must start with either http or https followed by :// and optionally www. and then anything but a space This can be replaced by a set of function calls : // Create a
  17. The multiple calls to ReSize have been a 'feature' from the beginning, but I don't know exactly why this happens. The Smart Mobile Studio release page (https://smartmobilestudio.com/category/news/) says : 28.9.2017 : Improvements to Resizing: – Minimize number of resizes during form create. – Trigger only one resize during device flip. so obviously there can be multiple resize events on startup. Not sure what your business case is here, but personally I use ReSize mainly for device flip purposes. If your purpose is to DoSomething after an element or a form h
  18. lynkfs

    forum login

    partly solved : login in with member name rather than email account works
  19. Wondering if these posts would help at all : These posts cover a couple of node-usage scenarios. These scenarios start with vanilla js which is then transformed into object pascal I'm not a node expert but this approach did work for me
  20. lynkfs

    forum login

    Lately having some problems with the forum login Basically every time I log in to the forum it doesn't recognise my password, so have to get a new one As long as I keep the session open, there's no problem - until I try to log in again. Annoying
  21. lynkfs

    double tap

    I needed to catch mobile double-tap events. There is no such thing as a double-tap event, therefore I used the code below to translate double taps (rapid consecutive touchstarts) into double-clicks. Which works fine. var window external 'window': variant; var Twice : boolean := false; procedure tapHandler(e: variant); implementation procedure tapHandler(e: variant); begin //replaces double taps (consecutive touchstart events) into dblclicks if not Twice then begin Twice := true; Window.setTimeout( procedure() begin Twice := false; end, 300 ); end else begin e.prev
  22. sometimes (always ?) when copying / pasting code from a forum post into the ide, some invisible and unwanted characters are transferred as well. The compiler doesn't like that and gives weird error messages. The only way to rectify is to delete and retype offending lines. That is probably what happened when you got "***** Syntax Error: Unexpected Statement"
  23. custom template : right-click somewhere in the Project Manager pane and select 'add template', go to your SMS 'Templates' directory and select 'default.html' this will add a 'custom template' unit in the Project Manager pane then add the 3 jquery lines to that unit : <!DOCTYPE html> <html<?pas if Project.Options.Linker.GenerateAppCacheManifest then Print(' manifest="app.manifest"');?>> <head> <?pas=Project.MetaData.AsTags?> <?pas=Compiler.ManifestTag?> <?pas=Compiler.IconLinkTags?> <?pas=Project.WebFonts?>
  24. I suppose marrying third-party controls means living with it (up to a point) In this case jQuery offers themeRoller, which generates a theme. The resulting css spec can then be included Otherwise individual control classes can be overridden. JQuery style : jQueryExternal(browserapi.Document.getElementById("ui-datepicker-div")).addClass( "my-ui-widget-header" ); or RTL style TW3TagStyle.AddClassToControl(browserapi.Document.getElementById("ui-datepicker-div"), "my-ui-widget-header"); or browserapi.Document.getElementById("ui-datepicker-div").setAttribute("style",
  25. a quicky calendar : function jQuery(aTagObj: TW3TagObj): Variant; function jQueryExternal(v: Variant): Variant; external '$'; implementation { TForm1 } function jQuery(aTagObj: TW3TagObj): Variant; begin result := jQueryExternal(aTagObj.handle); end; procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize components MyBox := TW3EditBox.Create(self); MyBox.Text := 'Date'; MyBox.SetBounds(20,20,200,40); var props : Variant := TVariant.Create; props['dateFormat'] := 'dd/mm/yy'; jQuery( MyBox ).datepicker(props); // or alternatively //
×
×
  • Create New...