Jump to content

Recommended Posts

  • Moderators

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.

Link to post
Share on other sites
  • Moderators

Proof of concept of the above : 4 components written in 100% smart pascal, no external dependencies on any framework and style injection by code

 

Material Design Button              http://www.lynkfs.com/components/styled/button

 

Material Design TextField          http://www.lynkfs.com/components/styled/textfield

 

Material Design CheckBox        http://www.lynkfs.com/components/styled/checkbox

 

Material Design Slider               http://www.lynkfs.com/components/styled/slider

Link to post
Share on other sites
  • Moderators

and some more

 

Material Design RadioPanel               http://www.lynkfs.com/components/styled/radiopanel

 

Material Design ToggleSwitch           http://www.lynkfs.com/components/styled/switch

 

Material Design Menu                         http://www.lynkfs.com/components/styled/menu

 

Material Design Header                      http://www.lynkfs.com/components/styled/header

 

Menu + Header                                      http://www.lynkfs.com/components/styled/headermenu

 

Material Design SliderPanel               http://www.lynkfs.com/components/styled/sliderpanel

 

Header + SliderPanel                            http://www.lynkfs.com/components/styled/headersliderpanel

 

Material Design SnackBar                   http://www.lynkfs.com/components/styled/snackbar

 

Material Design TreeView                  http://www.lynkfs.com/components/styled/treeview

 

Bare bones Carousel                            http://www.lynkfs.com/components/styled/carousel

 

Bare bones Tab Control                       http://www.lynkfs.com/components/styled/tabcontrol

 

Bare bones Accordeon                        http://www.lynkfs.com/components/styled/accordeon

Link to post
Share on other sites

Thanks for the components LynkFS. I have found this insertRule a useful technique, especially in prototyping. I just grab LynkFS SMS_MDL_Components and wrapped this set of MDL components and ended up put them on  SmartMobileStudio IDE, and looks nice indeed.

 

MDL_Toolbar.PNG
 
I've created a very simple projMDL with a set of MDL components.

 

I’m a little skeptical of the claim that adding rules to the stylesheet is more efficient rather than CSS lazy loading by inserting it in the DOM nodes.  I didn't tested a lot. I think using this approach it will create some kinda penalties like browser reflows issue and is difficult to debug injected styles.

 

I prefer implementing insertCSS procedure into the initialization scope instead of the ObjectReady scope, for instance, if we drop two TButtons into designer, I suspect on form load, will inject the same CSS twice (rerunning) on the entire document. I don't know if injecting dynamically styles is faster in some specific cases, in particular mobile environments.

Link to post
Share on other sites
  • Moderators

Thanks for the kitchen sink, hadn't come around to that yet

 

In the coming week or so I'll add a MD'ed treeview and tabcontrol and maybe a carousel and accordeon

That will be it for the time being

 

I'll look into your initialization comment

 

Source code is available, I'll post a download link soon

Or send me an email (lynkfs@gmail.com) 

In return I'm asking for usability feedback on this component suite

Link to post
Share on other sites

Source code is available, I'll post a download link soon

Or send me an email (lynkfs@gmail.com) 

In return I'm asking for usability feedback on this component suite

lynkfs, the MDL components was wrapped using your sources!

 

BTW, I found out an issue using the MDL_components in multi-forms project, this a 3-form project, the main form (all components are displayed), but when you navigate to another form f.i., the components are just invisible!

 

In my tests, using the prototyping SMS Component generator, I can not reproduce the issue, it's working just fine using multi-forms, then I think the problem is not related to the procedure InsertCSS that inject styles!

 

I have noticed when I put the insertCSS into the initialization scope, I can not reproduce the browser reflows anymore, when we initiate the 3-multiform project, before forms are showed,  the following methods are called in a row: TForm1.InitializeObject, TForm2.InitializeObject, TForm3.InitializeObject. Those methods initiate all components, inject all styles in the first load, when we navigate, it's cached.

Link to post
Share on other sites
  • Moderators

hmmm ....

 

the problem lies with handle.ReadyExecute  

 

for example the following snippet from the button component :

procedure TButton.InitializeObject;
begin
  inherited;
  ....
 
  Handle.ReadyExecute( procedure ()
  begin
    ...
    InsertCSS;
    ShowButton;
  end);

in multi-form projects this works fine on the first form but components don't show up on subsequent forms (see previous post)

I've seen that they do end up in the DOM but some sub-elements are rendered with width/height of zero, therefore invisible

 

Not sure why that is. 

This behavior is not influenced by moving InsertCSS to unit initialization

 

However a solution is to transfer ShowButton as in :

procedure TButton.ReSize;
begin
  inherited;
  self.Handle.ReadyExecute( procedure ()
  begin
    if (csReady in ComponentState) then
    begin
    w3_callback( procedure ()
    begin
      ShowButton;
    end,50);
    end;
  end);
end;

Cipher Diaz explained this is due to a sync issue in the current rtl, which makes a workaround like this necessary.

 

This will be fixed in the next rtl release 

 

I've updated all components accordingly

Link to post
Share on other sites

your TButton visual component uses children sub-elements that inherits from the TW3CustomControl which brings in a more heavy infrastructure, they are rendered with width/height of zero when using in multi-forms project.

 

I created a similar component MDButton - a lightweight alternative, and it's working fine in multi-form project.

 

DEMO

 

TMDButton Visual Component

Link to post
Share on other sites
  • Moderators

yes, my visual components use sub-elements that inherit from TW3CustomControl.

Most of them are simple divs generated through tw3panels, which inherit straight and unaltered from the customcontrol class

 

no, using the approach outlined previously in this thread they do render correctly in multi-form projects

 

I do like your button alternative

I was using color-tweening to get the ripple effect

your css solution is quite effective too

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...