Search the Community
Showing results for tags 'web'.
Found 4 results
In the past I've produced some commercial websites using SMS and the full rtl But just now published the first multi-page fully responsive SMS generated website using the ribbon philosophy (see previous post) For demo see partial copy here (anonymised, home page and first product page only) The funny thing is that looking at the code, it's all very parametrised Typical ribbon-code looks like var rev01 := TElement.Create('div', rev00, 'div', props['review-title']); rev01.setProperty('color', '#8c7500'); rev01.setProperty('font', 'italic 43px "Old Standard TT", sans-serif'); rev01.setProperty('margin-bottom', '35px'); rev01.setProperty('text-align', 'center'); etc... with invocation code like props['review-title'] := 'Reviews'; TReview.Create(nil, props); and no other logic. All of these parameters could easily be stored in a (cloud based) sql database The database design would be very simple indeed : a table for the elements (type, parent, class, content and position) and a linked table for attributes and properties To display an informational webpage, only the simplest of smart programs would be needed : read database, create elements, set attributes without even the need for local unit code like the above snippet - the data has become the logic and of course no pascal layout coding necessary, this has been farmed out to the browser .
This is an addendum to my previous post The Smart visual components system is based on absolute positioning. Which is great in many cases for pixel perfect rendering under program control. This post is about relying on browser capabilities, which means the positioning default is not 'absolute' but 'static' (or 'absolute', or 'fixed') and the browser determines element positioning depending on context. So to have a certain degree of control, something else is needed. There are some great css frameworks available based on the flex-box element and I particularly like 'Frow', hosted on github and available for free just substitute the frow css file for the app.css file Frow is a css framework and features basic element positioning on pages. Works great and contains among other components a grid system as well Below program (that's all there is to it !) positions a grid and a button The grid is populated from a database and the button is custom styled uses W3C.HTML5, W3C.DOM, W3C.CSS, W3C.Console, JElement, W3C.XMLHttpRequest, ECMA.JSON; //Frow 3 column grid var h0 := TElement.Create('div', nil, 'frow-container'); //grid container var h01 := TElement.Create('div', h0, 'frow centered'); //rows // columns h011 - h013 created from database //column elements var sql_statement : String; var encodedstr : String; var FHttp := JXMLHttpRequest.Create; FHttp.open("POST","http://www.xxxxxxxxxxxxxx/smsdbmysql.php"); FHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); asm @encodedstr = encodeURIComponent('SELECT * FROM testtable limit 5'); end; sql_statement := "sql_statement="+encodedstr; FHttp.send(sql_statement); var smscursor : Variant; var DBRows : Integer; JGlobalEventHandlers(FHttp).onLoad := lambda(e:JEvent) Console.Log('SQL statement executed and cursor ' + e.type + 'ed !'); smscursor := JSON.parse(FHttp.ResponseText); DBRows := smscursor.smsrows.length; //create 100*5=500 rows For var j := 0 to 100 do begin For var i := 0 to DBRows - 1 do begin var r01 := TElement.Create('div', h01, 'col-md-2-12', smscursor.smsrows[i].user); TElement.Create('div', h01, 'col-md-1-12', '<br><br>'); var r02 := TElement.Create('div', h01, 'col-md-2-12', smscursor.smsrows[i].password); TElement.Create('div', h01, 'col-md-1-12'); var r03 := TElement.Create('div', h01, 'col-md-2-4', smscursor.smsrows[i].pwhint); r01.SetProperty('background', 'lightblue'); r02.SetProperty('background', 'lightgrey'); r03.SetProperty('background', 'lightgreen'); r03.SetProperty('border','1px solid lightseagreen'); end; end; //add a blank line and a nicely styled button var p01 := TElement.Create('p', nil, 'p', ' '); var d01 := TElement.Create('div', nil, 'div'); var d011 := TElement.Create('div', d01, 'frow'); var d0111 := TElement.Create('button', d011, 'button', 'Submit'); d0111.SetProperty('background','none'); d0111.SetProperty('border','2px solid lightseagreen'); d0111.SetProperty('color', 'lightseagreen'); end; it comes out of the box with responsive styling, so this demo changes layout depending on screen size. Scrolls nicely on mobile too In some cases may be a good alternative for the standard grid component