Wanna provide your Web Application users a unique experience?

Hire a Web designer to enhance your FoxInCloud Application’s look and feel!

This post explains how you can collaborate with a Web Designer and finally integrate his/her work into your FoxInCloud Application.

1. Let your Web Designer be creative

Once your application is ‘conventionnally’ adapted, you can just install a Test Version on your production server that you can showcase to the designer:

  • purpose of the Application,
  • target audience,
  • key forms and controls,
  • key steps requiring user’s attention,
  • graphic patterns in the industry (symbols, colors, etc.),
  • competition apps,
  • etc.

The designer will work and present you a mockup showing his/her ideas on how your application can graphically improve; this mockup can either be a slide show or a video showing some typical operation on the Application.

Once you validate this mockup 1, the designer will create the HTML/CSS/JS templates that you’ll later inject into your application.

Here is a video showing this whole Web Design process on a live FoxInCloud application 2:

2. Integrate the Web Design into your Web Application

Let’s see how we can change this button named designation:

sample button - original

into this web design:

sample button - designed

a- Add the Designer’s CSS and JS to your Web Application

If your Web designer has written his/her own CSS and/or JS files, and/or has used some specific CSS/JS library ,3 you can either:

  • copy and paste into your application’s standard xxx.css and xxx.js 4
  • copy the designer’s file into your application’s site folders 5 and implement the xxxProcess.cawCSSinc() and/or xxxProcess.cawJSinc() method like in the example below:
* ------------------------------------------------------------
PROTECTED FUNCTION cawCSSinc && <link rel="stylesheet" /> {en} for additional CSS files {fr} des CSSs FoxInCloud, des CSS de l'application et des Fichier CSS additionnels
LPARAMETERS ;
  tcCSSadd; && [''] {fr} Fichier CSS additionnels
, toForm as awFrm of aw.vcx; && {en} Reference to form && {fr} Référence au formulaire
, tcForm; && {en} form.Name {fr} Nom du formulaire

return DoDefault(;
     'css/animate.min.css, css/hover.min.css, ' + m.tcCSSadd; && {en} add custom CSS before standard CSS
    , m.toForm;
    , m.tcForm;
    )

This method adds these HTML directive to every page of your application 6:

<link type="text/css" rel="stylesheet" href="/css/animate.min.css">
<link type="text/css" rel="stylesheet" href="/css/hover.min.css">
<link type="text/css" rel="stylesheet" href="/xxx.css">

b- Generate HTML matching what the Designer wrote

In VFP, this designation button is in fact based on a container class named boutonlarge_png, holding several images around the button itself:

sample button - VFP

FoxInCloud generates HTML accordingly 7:

<div id="dooxi_scx-pageframe1-pagbien-designation" class="container awcnt vhccnt bouton_png boutonlarge_png dooxi_scx-pageframe1-pagbien-designation">
    <img id="dooxi_scx-pageframe1-pagbien-designation-image" class="awimg vhcimg image dooxi_scx-pageframe1-pagbien-designation-image" src="Images/bp_designation.png" style="display:none;">
    <img id="dooxi_scx-pageframe1-pagbien-designation-image_d" class="awimg vhcimg image dooxi_scx-pageframe1-pagbien-designation-image_d" src="" style="display:none;">
    <button type="button" id="dooxi_scx-pageframe1-pagbien-designation-bouton" class="commandbutton awcmd vhccmd dooxi_scx-pageframe1-pagbien-designation-bouton ecrire" tabindex="18">DÉTAIL</button>
    <img id="dooxi_scx-pageframe1-pagbien-designation-ok" class="image awimg vhcimg dooxi_scx-pageframe1-pagbien-designation-ok" src="Images/ok_b.png" alt="ok_b" style="display:none;">
</div>

However the designer has come up with a pretty different (and much more simple) HTML markup 8:

<button class="doo-btn-icon hvr-radial-out hvr-shadow diagnostiqueur">
    <span></span><div></div>DÉTAIL
</button>

Using the boutonlarge_png.wcHMTLgen() method, we then replace the whole HTML that FoxInCloud would have generated by custom HTML 9:

LPARAMETERS toHTMLgen AS awHTMLgen OF awHTML.prg, tlInnerHTML && {en} doc in Parent Code {fr} doc dans le code parent

if thisForm.wBSlHTMLgen && Generating HTML in Bootstrap mode
  this.wcHTML = '';
   + '<button';
   + ' id="' + this.wcID + '"';
   + m.toHTMLgen.cClass(); && class="" attribute generated by FoxInCloud
   + m.toHTMLgen.cStyle('display'); && style="" attribute generated by FoxInCloud
   + m.toHTMLgen.cEvents(); && Let FoxInCloud generate the event handlers in JS
   + '><span></span><div></div>'; && here is the Web designer's trick...
   + Upper(Alltrim(Strtran(this.Caption, '\<')));
   + '</button>'
endif

The HTML stored into the .wcHTML property replaces whatever HTML FoxInCloud would have normally generated for any object instance of this class or any of its sub-class.

Of course you can overwrite this method in any sub-class or instance of this class to keep by exception the default HTML, or further customize the custom HTML.

This video shows how the application behaves with all design enhancements implemented:

  1. Better change now than later, when the whole process is finished… take some time to think with fresh ideas, and do give all the necessary feedback to the designer… always in a positive manner of course. ↩

  2. Courtesy from the graphic designer for this Application: Mr. Eric Valcke, Trait Creatif ↩

  3. other than the libraries already included in FoxInCloud like jQuery, Bootstrap, etc. ↩

  4. where xxx is the 2-4 character code that you’ve chosen during FAA step 3-Publish ↩

  5. site/xxxTest and site/xxxProd beneath your application folder ↩

  6. Using m.toForm and m.tcForm, you can load libraries only for the forms that need them ↩

  7. <div> is the FoxInCloud standard HTML markup to render a VFP container. ↩

  8. Designer uses embedded <div> and <span> to easily add a background image using a simple CSS rules such as button.diagnostiqueur div {backgound-image: ...} or button.diagnostiqueur span {backgound-image: ...}; this markup allows having several images ‘behind’ the same button, that one can only do in VFP using the ‘contained images’ technique. ↩

  9. We just copy and paste the HTML from the designer and let FoxInCloud compute some critical attributes such as id= class=, style=, and the event handlers ↩

tags: user experience  design  HTML  CSS 

Watch FoxInCloud Marketing Videos :: Watch FoxInCloud Technical Videos :: Stay tuned on FoxInCloud Roadmap :: Learn how to use FoxInCloud :: Download FoxInCloud Adaptation Assistant for free :: Download FoxInCloud Web Application Studio for free