Jump to content
jarto

New Visual Designer for Smart Mobile Studio

Recommended Posts

Hi all,

as you have probably noticed, we've been a bit quiet lately. That's because we've been hard at work on exciting new changes and features to Smart Mobile Studio. I'd like to share with you, what we're doing to the Visual Designer.

image.png

We're rewriting the Visual Designer from scratch. This new one is completely WYSIWYG as it's actually a Smart Mobile Studio app itself, running inside the IDE in Embedded Chrome. This lets us accurately show what components look like, instead of the dull old boxes in the old designer. You can set Align, Anchors, Angle and any other property and they are accurately reflected in the component in the Designer - like the blue panel (Align Top) or the rotated List box.

The new designer also lets us support non-visual components, which will add a number of new components into our component palette. TW3Timer was the first one to be added and it already works just like in Delphi.

We'll also be able to expand the concept into a full featured Multi Device Designer, so you could design forms for multiple devices, multiple screen sizes and multiple themes.

The Designer also has support for Wizards and Component specific designers, so you'll be able to design popup menus in a Menu Designer and all the tabs in the Tab Control.

Share this post


Link to post
Share on other sites

My most significant challenge, I find, is making a webpage/app properly responsive. The tlayout is not inuitiove and has weird side effects. Will the new designer make it easier to create responsive programs?

 

Also, side thought, the css is pretty extensive but also difficult and resistant to reskinning for a different look/feel.

Share this post


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

My most significant challenge, I find, is making a webpage/app properly responsive. The tlayout is not inuitiove and has weird side effects. Will the new designer make it easier to create responsive programs?

 

Also, side thought, the css is pretty extensive but also difficult and resistant to reskinning for a different look/feel.

The new designer does automatically support Align and Anchor, which makes creating responsive apps easy. On top of that, you'll be able to tweak the form for different screen sizes.

 

Share this post


Link to post
Share on other sites
On 9/18/2019 at 5:29 PM, jarto said:

We're rewriting the Visual Designer from scratch. This new one is completely WYSIWYG as it's actually a Smart Mobile Studio app itself, running inside the IDE in Embedded Chrome. This lets us accurately show what components look like, instead of the dull old boxes in the old designer. You can set Align, Anchors, Angle and any other property and they are accurately reflected in the component in the Designer - like the blue panel (Align Top) or the rotated List box.

 

Interesting decision to move away from Delphi, you'll probably loose something in the process but it has great potential. When can we expect a preview?

BTW would it then be possible to make SMS an online application?

Share this post


Link to post
Share on other sites
11 hours ago, IgorSavkic said:

 

Interesting decision to move away from Delphi, you'll probably loose something in the process but it has great potential. When can we expect a preview?

BTW would it then be possible to make SMS an online application?

Technically, we are not moving away from Delphi. We are just creating one component (the designer) as an html5 app. The rest of the IDE will still be Delphi code. Eventually it could be possible to rewrite the whole IDE as an online application (+server) but that's not something we are attempting to do right now.

When it comes to the new designer as an SMS app, we actually don't lose anything. As far as I can see, there are only advantages. There were many disadvantages in having the designer as a Delphi component. Getting the look right even with standard components was very hard. Supporting anything more complicated was impossible. When the Designer is an SMS app, we only have to create the component and it automatically looks right, no matter what theme is used or how complicated the component is or what properties it happens to have.

The hard part is only the communication between the IDE and the new designer. That's done using Websockets and it already works well. So I can add a component in the new designer and it shows up in the IDE's component list and the Object Inspector. I can move the component and see the coordinates changing in the Object Inspector. I can change properties and they are reflected in the new Designer. And if I compile and run the app I drew in the new designer, well, it works.

I can't tell yet, when I can push out the first alpha. There are still some things that need to be taken care of. For example, we need to finish updating the IDE to use a newer Chrome component. Also, I want to write a few editors to make sure that the new designer has propert support for more complicated controls.

Share this post


Link to post
Share on other sites

Let me also write about the progress I'm making with the designer. I got it running inside embedded Chrome in the IDE last night. I'm very excited with everything you can do with this new designer and what it lets us do in the future.

Let's start with a small geeky detail. Look at those dots in the form. They are the standard 8px grid that Delphi and Lazarus also have. Two for-loops plotting dots on an html5-canvas? No, no, no, this is made with pure CSS and you can use this same code in your own apps as well:

  DesignerForm.Handle.style['background'] := 'linear-gradient(90deg, #EFEBE7 7px, transparent 1%), linear-gradient(#EFEBE7 7px, transparent 1%), #000000';
  DesignerForm.Handle.style['background-size'] := '8px 8px';
  DesignerForm.Handle.style['background-position'] := '1px 1px';

What is lovely is that you can see what every property does. Like you can see in the image above, I changed the ThemeBorder for the label to flat. So, you can change the theme border and background for every control and see what it looks like. Set AlphaBlend to True and adjust Opacity and you'll see the result. All the other properties are also supported: Color, Angle, BorderRadius, you name it. And it's really cool that you can change functional properties and see what the control did. Fill in the Items of a ListBox and you can see how they are drawn.

This one will also unlock the secrets of TW3EditBox. Look at the picture below. The slider down there is just a TW3EditBox with itRange as InputType. The panel with the angle has three sub panels and are using Align-properties to position themselves. Inside the middle panel is a TW3ListBox where the background Opacity is adjusted. Hence, you see the blue color from the background getting through. If the background had been an image, you'd see it as well.

I've been testing and drawing forms for a while now and it's really great fun. I hope I can get this finished soon so I can share the fun with you guys too.

image.png

 

Share this post


Link to post
Share on other sites

You know the feeling when everything makes sense and everything is easy and you get a lot done? That's where I've been today.

I cleaned up the IDE code and removed the old designer and the live preview-code, which never worked. Then Snap to grid and export to code and XML. The old designer's popup menu had many functions, but apparently half of them were never finished. So, while there is an undo there, it never worked. Same thing with aligns.

Now I'm working on cut/copy/paste. While testing, I noticed that the old designer does not check for duplicate names, if you paste a component with child components. Also, you can't paste into another child component, like another panel. Weird thing is also, that the clipboard is cleaned after every paste. And even weirder is, that the old IDE is not using a global clipboard. Wonder why?

So I ended up fixing those bugs in the old designer, as I get to use most of the underlying functionality with the new designer as well. Also wrote a static TW3URL-class for nice handling of url parameters.

Life is so good in the zone 🙂

Share this post


Link to post
Share on other sites

Still going strong!

Today and yesterday I finished cut/copy/paste. It uses the system clipboard, so copy/paste between two running IDEs is now also possible. Also registered TW3Timer in the Component Palette and made sure that non-visual components are properly supported. There's s little issue about how to show these best in the designer as non-visual components don't have Left- and Top-properties. I could automatically stack them or then try to hack some support for pseudo coordinates.

Undo is next.

Share this post


Link to post
Share on other sites

This designer looks nice. One other missing thing, that I think very frustating is the Object Inpector, just because lacks some basic features, such as support for some custom properties. That could use to make the controls look realistic. A new refactoring Objector Inspector is welcomed to this designer.

Share this post


Link to post
Share on other sites
19 hours ago, warleyalex said:

This designer looks nice. One other missing thing, that I think very frustating is the Object Inpector, just because lacks some basic features, such as support for some custom properties. That could use to make the controls look realistic. A new refactoring Objector Inspector is welcomed to this designer.

Yes, that was very frustrating in the old designer. The development-channel already contains a version that supports custom properties, but they are not that nice to use as you can't see the result in the designer. In the new one you can just change any property and see what visual changes it makes.

Got Undo&redo ready today. Also found a nice solution for the non-visual components. Basically, I just create virtual properties for those if the class itself does not have them. As they are virtual, I get to ignore them when I produce the Form impl-code (the code that creates the controls and sets the properties and events)

Share this post


Link to post
Share on other sites

Time for my (almost) daily update on how the work with the new Designer is progressing. Today I started changing TW3TabControl, so I could use it in the Designer. New tabs can be added by selecting "New tab" in Designer's popup-menu. Then you can change properties in the Property Inspector and add child components into the tabs. This was one of my original big goals with the new designer and I'm really happy to see it become reality 🙂

image.png

Share this post


Link to post
Share on other sites

Time to make a small update. I've now been working on small but tricky issues that are related to Anchors and Align. It all started from the fact that Smart Mobile Studio has not saved the form size anywhere and hence, it hasn't sent any form size in the compiled application either. That's been handled by the RTL, which has set the form size based on device/browser size.

However, that also means that you can not handle Anchors inside an aligned panel right.

I've decided to fix this all by actually introducing form size in the designer as well. So you can set the form to for example iPhone vertical and design the form based on that. When the app then starts, it will build the form using this "design form size" and resize it then later according to the device/browser window size.

Share this post


Link to post
Share on other sites

Well, I found a better solution: There will be two new properties that relate to the Anchors:

  • AnchorGapRight
  • AnchorGapBottom

These are calculated and set by the Designer when Anchors are set. They represent the distance from bottom right corner of the component to the parent's bottom right corner. This is used by the RTL to resize the child component properly when Anchors are used.

The great thing is that this makes handling Anchors a lot more simple and elegant. It will also work even if the form size happens to change while the form is being built.

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

×