Jump to content
EWB

5-minute with SMS 3.1.0.75 overview

Recommended Posts

It is known that Smart Mobile Studio applications start big, but don't grow very fast once functionality is added.
In my sick project, we have 50 Forms; each form = 50 buttons, I just wanted to indicated that size is not necessarily an obstacle to 
writing a good web application, but using SMS 3.1.0.75 a little big file size, we've got a Index.html around 632KB (minified & obfuscated enabled). 
On the previous 2.2.2 version we've got similar 305KB. I remember on older versions, when I re-size the browser window, 
I get two successive on Resize firing all the time to all forms.

I remember on previous versions (2.2) we've got two sucessive Resize event firing all the time to "all forms", and this will reduce the browser's workload. 
In the actual version 3.1.0.75, SMS has reduzed the bottleneck coming from the Resize event. Resize is firing multiple times yet,
three times for the activate form, at least, but this is great. 

SmartMS.exe 3.1.0.75 has greatly increased the file size, from 7MB to 15MB, a lot of resources have been added... I don't have time
to see all the features...

How can I create a simple property of type String that will show a combo box in the object inspector with a predefined 
set of values the user could choose inside SMS IDE. I know it is possible in this version. I just don't know how! 

type
   TCustomStyle = array[1..3] of string;

const
   CustomStyle : TCustomStyle = ('iOS','Android','Material');

type
  TMystyle  = (cssIOS, cssAndroid, cssMaterial);

TToggleComponent = class(TW3CustomControl)
  private
    fMyStyle: TMystyle;
    fCustomStyle : TCustomStyle;
  published
    property Mystyle: TMystyle Read fMyStyle Write fMyStyle default cssAndroid;
    property CustomStyle: TCustomStyle Read fCustomStyle Write fCustomStyle;

How can I implement my own custom property editor for of a certain object type and see in the Object Inspector?

I really appreciate the smartms community we have here.

SMS 3.1.0.75 has its strenghts and limits. It does wonders for the the Controller part. Some areas, SMS is so rudimentary that, 
in practice, that RTL alone *.CL - does no provide a sufficient framework for development.

I would like SmartMS should focus on the IDE and the compiler. When it comes to writing smart components, interesting components, 
like page swiper, searchBar, scrolling, reactive components, etc. I believe the correct approach should be based NOT using 
"pure smart pascal" approach, it seems everybody ends up rewriting another ball, it's seems, likely waste a lot of time solving 
problems others have already solved. 

I think a good alternative to go is SMS with vue. Using wrapper class around the even old vue you can create reactive components with small 
footprint with only 58KB, the core components in SMS should be based in this optimized vue library with minimal processing and
memory overhead, then you have high level methods (based on external interfaces) to call such methods. That's not necessarily a bad thing 
using a vue Framework with SmartMS. I think you can achieve the same functionality used in the *.CL framework. 

I Like the SMS designer, but I can't seem to find anyway how to get the live preview on the smart components. One thing it's ugly to drag n' drop
visual/non visual components and you see that retangle on the designer that represents the component.

The leadership, Jon Lennart Aasenden, has quit his baby. Some ideas from Jon sounds like FUD to me, like Smart Desktop/Raspberry PI, 
the unfinished book, etc. It seems to be running too many races at once a bad idea. 

I'd prefer focusing on a "single target", for instance, mobile apps with a decent UI (not the current RAD approach, 
which is difficult to work with on real projects with a lot of screens) would be a good start.

We do not need stories about SMS potential and implementation wishes, but real working features. We do not need to know what SMS "can do", 
but what SMS "does". It seems like there is a better future for SMS. I will open a bottle of wine here. 

Share this post


Link to post
Share on other sites

Of course, the only way to really use published properties is to register your control with the IDE and be able to drag and drop it on the form, select it, and have its properties show in the Object Inspector.

I haven't visited the custom controls and the IDE palette in a while. Last time I tried, there were issues with creating and building Packages (creating them from the IDE) and then trying to get the custom control to show on the IDE pallete.

I even tried editing creating the three files by hand (e.f. MyCustomComponent.spk, TMyCustomComponent.png, MyCustomComponent.pas)

 

Share this post


Link to post
Share on other sites

@EWB Muito obrigado

If you create a package and register your component in the component palette, the published properties will work automatically in the Object Inspector. When looking at your example,

16 hours ago, EWB said:

property CustomStyle: TCustomStyle Read fCustomStyle Write fCustomStyle;

This would not show up as the OI does not understand TCustomStyle, but TStrArray does work and show up. Also sets like TMyStyle do work.

Live preview did not work at all, so it was disabled. In 3.0 I did fix many bad bugs in the designer. So now the designer works, but it's not pretty.

16 hours ago, EWB said:

The leadership, Jon Lennart Aasenden, has quit his baby. Some ideas from Jon sounds like FUD to me, like Smart Desktop/Raspberry PI, 
the unfinished book, etc. It seems to be running too many races at once a bad idea. 

You're right that he was running too many races at once. When it came to posts he did, Smart Desktop actually does work very well and if you try running it with some dirt cheap Raspberry PI, it delivers very nice performance. So yes, it can be used as a basis for a kiosk or embedded system where costs per device can be extremely low.

Jon also had a habit of writing blog posts of something he was working on or what will be released in the future. I tried to get him to stop that as it's annoying to not be able to test it yourself.

Share this post


Link to post
Share on other sites
7 hours ago, IElite said:

Of course, the only way to really use published properties is to register your control with the IDE and be able to drag and drop it on the form, select it, and have its properties show in the Object Inspector.

I haven't visited the custom controls and the IDE palette in a while. Last time I tried, there were issues with creating and building Packages (creating them from the IDE) and then trying to get the custom control to show on the IDE pallete.

I even tried editing creating the three files by hand (e.f. MyCustomComponent.spk, TMyCustomComponent.png, MyCustomComponent.pas)

 

Yeah, there are issues here. This approach works at the moment:

  • Create a new unit in any project and add your component there
  • Select "Build package"
  • Add the unit you created
  • Do NOT check Include files in package
  • Build and save the package in the same folder where your component unit is
  • Copy the package file to Bin\Packages and the unit file to RTL\MyControls (or some other folder like that)
  • Edit the spk file:
    • Add the missing Name on line 3.
    • Change Category (default: Sample) to the tab name you want to use
  • Restart IDE

Share this post


Link to post
Share on other sites

@jarto

as in my statement above, I could not get it to work for me. see attached image.

this is what I originally had

<Files>
        <File>
          <Name>testcomp</Name>
          <MediaType>text/pascal</MediaType>
          <External>C:\Users\shane\Downloads\Smart\Projects\test6\testcomp.pas</External>
        </File>
      </Files>
    </Code>
    <Components>
      <Component>
        <Name>TMyComponent</Name>
        <Category>Sample</Category>
        <Glyph>
          <Name>TMyComponent</Name>
          <MediaType>image/png</MediaType>
          <External>Glyphs\TMyComponent.png</External>
        </Glyph>
      </Component>
    </Components>

if I follow your steps and put my *.pas file in RTL

 <External>RTL\MyControls\testcomp.pas</External>

It works!

Why wouldn't a full path to my file work?  Why does my file have to be in the RTL (It is not part of the RTL) :)

Anyways, its nice to know after all this time what the problem was!  Thanks!!!!

 

 

screenhot.png

Share this post


Link to post
Share on other sites
1 hour ago, IElite said:

Why wouldn't a full path to my file work?  Why does my file have to be in the RTL (It is not part of the RTL)

Your guess is as good as mine. I had not had a look at those packages before today.

Share this post


Link to post
Share on other sites

On the Vue matter, I think including it (or some similiar GUI solution) would be great addition to SMS. Right now lot of time when adding new  page/form goes to setting UI, aligning etc. if that could be reduced it would be great.

BTW any example of how to import and start using Vue now?

Share this post


Link to post
Share on other sites

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.

A minimal proof of concept
 

var document external 'document': 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');

    var el := '#' + W3Button1.handle.id;
    var template := '<div>Hello World</div>';
    asm var vm = new Vue({@el, @template}); end;

end;

or with one-way binding :

    var el := '#' + W3Button1.handle.id;
    W3Button1.handle.innerHTML := '{{ message }}';
    var data := class message = 'Hello Vue'; end;
    asm var vm = new Vue({el: @el, data: @data}); end;

//which is equivalent to : 
//   W3Button1.Caption := 'Hello Vue';

(project, demo)

does it serve a purpose ? the question is 'does it solve a problem'. 

Not convinced.
 

 

Share this post


Link to post
Share on other sites

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 message = 'Hello Vue'; end;
    asm var vm = new Vue({el: @el, data: @data}); end;

  end;
end;

(project, demo)  (do a browser refresh)

This changes the text of a TW3EditBox in a TW3Panel

 

Share this post


Link to post
Share on other sites

How would this work in a real app, first create controls in SMS and then connect to Vue? In that case having Vue controls native to SMS would help, since you would do that in SMS designer from the start. I believe having some of well known JS libraries supported on a low level in SMS would open up a new markets since after all pascal is much easier to work with than JS.

Share this post


Link to post
Share on other sites

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

  1. define the component in vue terms    (the 'Vue.component' bit in the article)
  2. emit html that vue can hook in to       (the 'div id="components-demo" bit)
  3. 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 same as coding a new SMS customcontrol.

Ad 3 : this is exactly the same as current styling is done in SMS.

From this example it looks like it would be technically feasible to make up a bunch of hybrid SMS/Vue components

Organising them in an application under Vue control does deviate from current SMS development though.

 

Still struggling with the question of what problem this approach is a solution for

edited :

model-view data binding which is offered by Vue is a good thing of course, but can be done in other ways as well 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites
On 12/4/2018 at 5:45 AM, lynkfs said:

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.

Same with me. I also try to use few outside component packs in Delphi as it makes upgrading to a newer Delphi version harder.

With Smart Mobile Studio you can use external js components and it's easy to include them as @lynkfs has shown.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×