Jump to content

Search the Community

Showing results for tags 'web'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


There are no results to display.


  • Welcome to Smart Mobile Studio
    • News and Information
    • Pre-Sales Questions
    • Smart In the Media
    • Smart Contests
    • Meta
  • Smart Mobile Studio Discussion
    • General
    • IDE
    • RTL
    • Code
    • Client Server
    • Platform
    • Graphics
    • Deployment
    • Suggestion box
  • Smart Mobile Studio support
    • Support
    • Bug report
  • General Discussion
    • Pascal
    • Delphi
    • Javascript
    • HTML/HTML5
    • CSS
  • Resources
    • Website
    • Download Smart Mobile Studio

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL



Company name


Found 5 results

  1. Reading up a bit on web design systems Basically web design systems are a collection of rules, components, tools etc helping developers to create a consistent look and feel for the websites or apps they are developing. This link links to the design system of the us gov. Whether or not one likes this system, it is certainly comprehensive. As an example I quite like f.i this site which conforms to these rules.

    TMS Web Core

    Anyone seen the new TMS Delphi to html/ JavaScript components? http://tmssoftware.com/site/tmswebcore.asp I think this product is still in closed beta, to launch in a few weeks.
  3. 43,550 choices to make The underlying motivation to start this thread was the realisation that there is a massive amount of functionality built into the modern browser. Play video, calculate font-size depending on viewport dimensions using vanilla css, automatically add amounts in table cells without using javascript, store user-data in elements - the list is almost endless. Much of this functionality is not natively exposed in smart pascal. So somewhat belatedly I had a bit of a better look at the web development basics. The 3 basic pillars are of course html, css and javascript. Html describes the structure of a page/web-app, css is used for styling and js defines the business logic. HTML There is a large number of HTML elements specified: <a>, <input>, <header> etc. All in all there are currently 108 elements defined by the W3C, not including 26 depreciated ones which may still be supported. Each element can have a modifying attribute, like <a> has the 'href' attribute. Some attributes are valid for only one element, but most can be used on more than one. 'Height' for instance is an attribute which relates to <canvas>, <embed>, <iframe>, <img>, <input>, <object> and <video> while 'href' relates to <a>, <area>, <base> and <link>. Etc. Currently there are 115 attributes. On average each attribute relates to some 3 html-elements, which gives 3 * 115 = say 350 possible element / attribute combinations. CSS To make life even more complicated, there are some 400+ css properties, like 'background-color', 'border-width' etc. And more are coming on a frequent basis. The latest addition is the css-grid with lots of new properties, The css-grid was implemented in FireFox last week and apparently comes to Chrome this week. The w3c specs state that in theory each and every css-property is applicable to all html-elements. That gives by my reckoning a maximum of 350 + (108 * 400) = 43,550 permutations Quite a bit to choose from In practice it is not as bad as that of course. Some combinations are just not valid, are ignored by browsers and should never be used. Also the W3C has specified default values for html-elements and browsers have an internal style-sheet with default property values. Nevertheless there still is a dizzying array of choices to be made in vanilla web-development. So the question is if life can be made a bit easier. 1) Combine the most sensible properties and attributes in discrete components Sort of producing a mini lightweight rtl. Lets say we want to have a TPanel with a white background and a black 1px border. The code for this could be a variation on the TElement class : Constructor TPanel.Create(parent: TElement); begin FElement := JHTMLElement(Document.createElement('div')); SetProperty('background-color','white'); SetProperty('border','1px solid black'); ... or alternatively this TPanel class can be derived from TElement with setters and getters for defined properties type TPanel = class(TElement) private procedure SetMyinnerHTML(Value : String); procedure SetMyColor(Value: String); public constructor Create(parent: TElement); virtual; published property Text : string write SetMyinnerHTML; property Color : String write SetMyColor; end; It would certainly be doable to do produce enough light-weight components for normal webpage or form development. 2) Abolish CSS style sheets Style sheets define style properties per element type or per attribute or even for all elements (*) I find them hard to read. I like to abolish them altogether and instead define styles per element. Styles of course can be set by using SetProperty (see previous posts), whuich works perfectly. However it fails miserably in the case of css pseudo-classes. A pseudo class is a state which gives rise to a different behaviour. A classic example (hover) which speaks for itself is a:hover { color: green; } There is just no way this can be generated using smart or js, it only works in a stylesheet. If that is the case, the solution then is to dynamically insert these rules into a stylesheet. The snippet below checks to see whether there is a stylesheet at all and if not creates an empty one. and then inserts the specific rule Procedure TElement.SetCSS(pseudo, prop, value: string); begin //sheet.addRule('#OBJ5:hover','background-color: #4CAF50;'); //sheet.insertRule('#OBJ5:hover { color: green }', 0); var s = browserapi.document.styleSheets; if s.length = 0 then begin var style := browserapi.document.createElement("STYLE"); browserapi.document.head.appendChild(style); end; var s0,s1 : string; s0 := '#' + FElement.id; //'#OBJ5'; s1 := prop + ': ' + value; // sheet.addRule(s0+':'+ pseudo,s1); browserapi.document.styleSheets[0].insertRule(s0 + ':' + pseudo + ' { ' + s1 +'}', 0); end; Note :all browsers are fine with using addRule, except FireFox Luckily insertRule is an alternative which works in all browsers (FireFox, Chrome, Edge and even IE) And now we can abolish SetProperty completely and use this method to dynamically set css rules for any element. So what do we have now Basically this enables the creation of a very lightweight rtl based on TElement rather then TObject. The project here features just two of such components : TPanel and TButton For fun I've added the ability to size text (font-size) dynamically according to screen-width. Resize your screen and you'll see it happen. Not bad for just a single css statement. I've also added a couple of ways to bind events to these elements So creating and styling elements can be done by leveraging native browser functionality, by using html and css only - no pascal necessary for these purposes. Which leaves js to where it belongs - business logic. code here, by the way
  4. 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 .
  5. 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
  • Create New...