Jump to content

Recommended Posts

  • Moderators

Some concluding remarks of my foray into using SMS for webpage building

 

1) going back to positioning : the current rtl is based on absolute positioning, which gives pixel perfect rendering in the browser. The default positioning for websites though is usually 'static', which means the browser flows all elements according to its inbuilt rules and element css values.

 

Sometimes it might be advantageous to combine these methods (see #3 below) and I found it is certainly feasable to do so.

 

The following snippet generates a handful of paragraphs, stacked underneath each other, where the fourth one is absolute-positioned on left 300, top 20

The constructor of the generic element i'm using optionally takes a positioning TRect (left, top, width, height) :

//some paragraphs, one of them (4th) absolutely positioned
  for var i := 1 to 8 do begin
    If i = 4 then begin
      Position := Absolute(300, 20, 200, 50);
      TElement.Create('p', nil, 'p', 'paragraph 4, absolutely positioned', Position);
    end else begin
      TElement.Create('p', nil, 'p', 'paragraph '+inttostr(i));
    end;
  end;

see effect here and code here

 

 

2) Generating simple html-elements this way is fine for static webpages etc, but sometimes more intelligence is needed.

Which means writing proprietary code. Or alternatively hijacking some functionality from an opensource library.

Warleyalex showed recently how he elevates Framework7 elements into native components 

 

Building on a previous post, and work done by Markus_ja, find here a couple of ui-components extracted from jQuery-ui : a draggable panel, some variations of a resizable panel and the DatePicker component, now derived from TElement

see kitchen sink here and code here

 

 

3) back to webpage building : usually webpages are composed of areas or sections stacked on top of each other. For instance a header section followed by another section underneath which displays maybe product info, followed by another section with contact details, a footer etc.

I call them ribbons and they are easy to produce and utilise.

 

For instance a composite header-ribbon for a home page where the ribbon features a background image, a business title and sub-title and a call to action button could be simply invoked as 

//THeader
  props['header-img'] := 'assets/img/HomeHero.jpg';
  props['header-title'] := 'Peace Corp Limited';
  props['header-subtitle'] := 'innovation products';
  THeader.Create(nil, props);

A full-fledged web-page would be composed of maybe 5 or 6 different ribbons, depending on functionality.

 

A demo web-page composed of just 3 of these ribbons (a header-ribbon,  a review-ribbon ('What others say') and a footer ribbon) can be found here with all code here

which compiles to a main.js file of only 31k, pretty good

 

what I like about this approach is that there is no css-file at all.

and surprisingly this approach generates a responsive page on the fly - only a couple of things to fiddle with

 

Conceptually a drag and drop design interface could be included as well, drag selected ribbons from a collection of available ribbons onto a design canvas and generate the above invokation code from there.

 

After all this I find it is quite feasable to generate webpages this way

 

 

Looking forward to the Next Generation RTL soon

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...