SlideShare a Scribd company logo

HowTo_CSS

1 of 6
Download to read offline
Using CSS with Corvid
Servlet Runtime Templates
  A system demonstrating this “How To” can be run under the
  “Using CSS with Corvid Servlet Runtime Templates” section of:
         http://www.exsys.com/support/howto
  The code for the sample system can be downloaded from the
  same page.



The Exsys Corvid Servlet Runtime uses templates to ask questions and show the results. The templates are
created using HTML to define the look and feel. There are special Corvid commands embedded in the
templates that tell Corvid what sections to use and in what way, but these commands are inserted as HTML
comments. Corvid does not require anything beyond simple HTML, but anything that is supported in an
HTML page can be used. Cascading Style Sheets (CSS) is a good example of something that is not
required, but which can be used to make pages look better, and make them more functional.

CSS makes it possible to easily separate the details of the look-and-feel of a template from the content of
the template. The template only needs to have the bare structure of asking the question. An associated
CSS file can control appearance (fonts, colors, sizes, layout, etc). By simply changing the CSS file, the
look-and-feel of a system can be completely changed. CSS also allows the appearance of the system to
change depending on how it is being viewed. One design many be used for full size monitors and another
for PDAs.

The advantages of CSS are:
    1.   It allows the '.html' of the template to be very simple. The templates contain only content
         placeholders for the actual question content (most of which comes from the KB), and only simple
         formatting to specify the type of control to use to ask questions (radio button, checkbox, etc.) and
         some simple arrangement information.
    2.   To change the look-and-feel, only the '.css' file needs to be changed.
    3.   When the '.css' file is changed, the look-and-feel changes consistently in all templates if they all
         use the same '.css' file to control the look-and-feel.
    4.   The size of the .html files are much smaller so they download faster. (The CSS file is only
         downloaded once and cached by the browser.)
    5.   It is possible for the user to switch between '.css' files. The user can select the look-and-feel of the
         page for special situations. (When using the sample templates, click on the 'High Contrast' link and
         the whole look-and-feel of the web page will change.)
    6.   A '.css' file can automatically adjust the design for specific hardware such as PDA’s, printers or
         projectors.


Corvid Servlet Runtime Templates that Use Cascading Style Sheets                                                1
Remember, that while CSS is very widely supported in modern browsers, some users may be using an old
browser that does not support CSS. This is rapidly becoming increasingly rare, and for many user
communities you can count on the browser supporting CSS. The percentage that may not have a current
browser will depend on the intended audience for your system. It is also possible that some users may have
CSS support turned off. Because of this, the templates should be designed so that they will still function
without CSS – although without the desired appearance.

NOTE: These instructions assume some knowledge of CSS. They cover the issues in using CSS in
Corvid templates, but this is not a CSS tutorial. For more information on CSS, see one of the many
books on it.
To see the effect of using CSS, run the demo system at http://www.exsys.com/support/howto.
After the title screen, the first question allows you to select the CSS style sheet used for the other questions
in the system.




Each of the CSS options will make the system look quite different, but the only change to the system is the
CSS style sheet used. The “How To” style looks like the other Corvid “How To” samples, while the “PDA”
style emulates a PDA and uses a layout appropriate for the smaller screen.




Corvid Servlet Runtime Templates that Use Cascading Style Sheets                                               2
The “High Contrast” style makes the screen easier to read for people with visual impairment. “Trace”
displays the trace of the run. “Card” is a different design. There are limitless ways the screen can be
designed using CSS.

In this demo, the CSS style used is selected by the system user. In a fielded system, there would usually be
only a single style for the browser, with the design selected by the system developer. Other styles needed
for special situations such as running on a PDA or printing, would be selected automatically.

Moving the Demo System Files to a Server
The demo runs using the Corvid Servlet Runtime, so you will need a servlet server. As with many of the
other HowTo’s, this HowTo will give the instructions for Tomcat.
       Download the CSS demo files from the link above, and unzip the file. It has two folders.
       Put the folder in ‘KB’ into Tomcat’s ‘webapps’ folder in a subfolder named ‘HowTo’.
       Put the folder in ‘base’ into Tomcat’s ‘webapps/ROOT/HowTo’ folder.
       Open the .CVD file in Corvid editor.
       In the Properties window under the Servlet tab, change the host and port to match your server.
If your server is ‘localhost’ on port 8080, it is already configured and you can skip ahead to running the
demo. Otherwise, change ‘localhost:8080’ to your server’s host name and port in the CORVID_SERVLET
and CORVID_LINK_BASE and also the Specific URL under the Test Run tab.

Start Tomcat if it is not already running and click on the Run button in Corvid (the blue triangle). Remember,
localhost is just a synonym for the same IP as the local computer. This means the computer running the
browser must also be the server. If the system is installed correctly, it will run the same as the sample
system link above.

How it Works
CSS can be a complex subject. For its use in Corvid templates just remember that essentially anything you
can do with CSS can be done in the template. The Corvid template does not require CSS, but it also does
not prevent any use of CSS.
Basically a CSS file defines named “classes”. The various classes can describe fonts, sizes, positioning,
color, layout, etc. These class names can then be applied to sections of the template. This makes the
template content very simple, since the CSS style sheet provides all the detailed “look-and-feel” information.

For example in the simple question template that could be used to ask a Numeric variable:

         <html>
         <head>
            <link rel="stylesheet" href="CorvidKB.css">
         </head>
         <body>
         <div class=questions>
         <form method="post" action="CORVID_SERVLET">
            <div class=question>
                        <span class="prompt"> VARIABLE_PROMPT </span>
                        <span class="editbox">
                                    <input type="text" name="[VARIABLE_NAME]">
                        </span>
            </div>

            <input type="submit" value="OK">


Corvid Servlet Runtime Templates that Use Cascading Style Sheets                                             3
</form>
         </div>


         <p class=trace>
         CORVID_TRACE
         </p>
         </body>
         </html>

The VARIABLE_PROMPT is surrounded by <span class=”prompt”> ... </span> tags. The desired
appearance (markup) can be specified using CSS. If you want the prompt text in red and bold, put this
"selector" in the '.css' file.

    .prompt {
         color: red;
         font-weight: bold;
    }

The period (.) in front of “prompt” means this selector will be applied to tags with a “class” of “prompt”. It tells
the browser to display the text between those tags in red and bold. The key to CSS is to use the "class"
attribute to identify the tags that mark up text of a specific meaning. Notice the <span> tag includes a class
name. This is just a name by which you can identify the <span> tags that markup the prompt text.

The <div> tag is used to mark large sections of the web page (divisions), in this case, the question section.
Different sections of the web page will have <div> tags with different class names. For example, the
template above has these divisions:

     “questions”            This marks the entire section that includes the question or, if more than one
                             question, all the questions.
     “question”             This marks an individual question. It includes the prompt text and the controls
                             (radio buttons, edit box, drop down list) used to ask the question.

     “trace”                This is the section that contains the Trace text. Run with Trace on only for
                             testing. Use CSS to hide it from the beta user but if a beta tester encounters a
                             problem, you can have the beta tester pull down View and select Source and
                             send you the Trace.

The <div class=question> tag does nothing by default until you specify its markup in the '.css' file. (Actually,
it displays that section on a new line.)

The sample 'CorvidKB.css' has comments to help you determine which CSS selector specifies the look-and-
feel of the section or tag you want to customize. To change the background image, replace 'background.jpg'
with your desired background file. You can comment out lines in the '.css' file by putting /* ... */ around the
line(s) as long as they do not also contain the comment markers.

When the user prints the web page, the browser will determine if the web page specified a ‘.css’ file to be
used for printing. If so, it gets the ‘.css’ file and uses it to format the printed web page. People browsing
using their PDA or cell phone will automatically use the file ‘PDA.css’. This automatically occurs when your
template has:

         <link rel="stylesheet" type="text/css" href="print.css" media="print">
         <link rel="stylesheet" type="text/css" href="PDA.css" media="handheld">




Corvid Servlet Runtime Templates that Use Cascading Style Sheets                                                  4
Using the Templates in Your Expert System
The CSS demo includes templates and a style sheet that you can use in your KB. They will get you started
but you will want to customize them. Unzip 'GoesWithCVR.zip' and put the files in the same folder as the
'.cvR' file. Unzip 'GoesInCorvidLinkBase.zip' and put the files in the folder pointed to by
CORVID_LINK_BASE (which is specified under the 'Servlet' tab in the 'Properties' window). Under the
'Servlet' tab in the 'Properties' window, put 'QuestionTemplate.html' for the Default Question template. Put
'FinalTemplate.html' for the 'Final template'.




In the Command Block, edit your 'RESULTS' command and put 'ResultsTemplate.html' for the 'Servlet
template'. (Notice there are two 'Servlet template' edit boxes. Make sure you use the correct one.)




Corvid Servlet Runtime Templates that Use Cascading Style Sheets                                           5
The expert system can now be run using the Corvid Servlet Runtime. All questions will be asked using the
'QuestionTemplate.html' file. Other templates can be used to customize individual questions as needed by
selecting the variable in the 'Variables' window and browsing to the desired template under the 'Servlet' tab.




CSS For Formatting
CSS classes can also be used to format content on a page. CSS classes can have specific sizes, borders,
colors and positions. Every class or tag can have a specified background color, image, audio (to help the
blind who use screen readers), bullets (for lists), fonts, and cursor image. This can be used to create a
complex design with CSS that is used to format simple content generated in a Corvid report page.

CSS can be used to simplify building WINK (What I Need to Know) pages. (For more on WINK systems see
the “WINK What I Need to Know Website Systems How To” or the Exsys Covid manual.

CSS can also be used to create pages that appear one way on the screen, but use a more “Printer Friendly”
layout for printing.
                                                                                                  ®
Corvid templates using CSS can be edited in an HTML editor that supports CSS, such as Adobe
             ®
Dreamweaver . However, care must be taken to make sure the Corvid commands, which are HTML
comments, remain in the correct position relative to other code. Since HTML editors view these as
comments, they may put other tags around them incorrectly.




© Exsys Inc. www.exsys.com



Corvid Servlet Runtime Templates that Use Cascading Style Sheets                                             6

More Related Content

What's hot (17)

INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
Dreamweaver CS3
Dreamweaver CS3Dreamweaver CS3
Dreamweaver CS3
 
Slicing the web
Slicing the webSlicing the web
Slicing the web
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
 
Bootstrap [part 2]
Bootstrap [part 2]Bootstrap [part 2]
Bootstrap [part 2]
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Html goodies
Html goodiesHtml goodies
Html goodies
 
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)
 
Designing for magento
Designing for magentoDesigning for magento
Designing for magento
 
Html - By Auroskkil
Html - By AuroskkilHtml - By Auroskkil
Html - By Auroskkil
 
Html basics-auro skills
Html basics-auro skillsHtml basics-auro skills
Html basics-auro skills
 

Viewers also liked

Viewers also liked (7)

March2004-CPerlRun
March2004-CPerlRunMarch2004-CPerlRun
March2004-CPerlRun
 
09J1_ACG_Prospect
09J1_ACG_Prospect09J1_ACG_Prospect
09J1_ACG_Prospect
 
resume_eric_tachibana
resume_eric_tachibanaresume_eric_tachibana
resume_eric_tachibana
 
bestpractices
bestpracticesbestpractices
bestpractices
 
tut0000021-hevery
tut0000021-heverytut0000021-hevery
tut0000021-hevery
 
CombustionREFlexMorphing
CombustionREFlexMorphingCombustionREFlexMorphing
CombustionREFlexMorphing
 
Adweek and Neustar
Adweek and NeustarAdweek and Neustar
Adweek and Neustar
 

Similar to HowTo_CSS

Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer NotesVskills
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsQA TrainingHub
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbookjackchenvlo
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAPJeanie Arnoco
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptRadheshyam Kori
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS FrameworksMike Crabb
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Designmlincol2
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 
Programming languages asp.net
Programming languages asp.netProgramming languages asp.net
Programming languages asp.netVasilios Kuznos
 
Super billing asp.net
Super billing   asp.netSuper billing   asp.net
Super billing asp.netsuperb11b
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrapMind IT Systems
 

Similar to HowTo_CSS (20)

Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
Css
CssCss
Css
 
6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
Programming languages asp.net
Programming languages asp.netProgramming languages asp.net
Programming languages asp.net
 
Super billing asp.net
Super billing   asp.netSuper billing   asp.net
Super billing asp.net
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 

More from tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascripttutorialsruby
 

More from tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
 

Recently uploaded

security-in-computing question paper 2023
security-in-computing question paper 2023security-in-computing question paper 2023
security-in-computing question paper 2023RohanMistry15
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyMustafa Kuğu
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...BookNet Canada
 
Communities, networking and developer culture
Communities, networking and developer cultureCommunities, networking and developer culture
Communities, networking and developer cultureRavi Sanghani
 
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubHow We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubShapeBlue
 
AI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxAI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxUdaiappa Ramachandran
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationAppsthentic Technology
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsScyllaDB
 
Large Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareLarge Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareAsma Ben Abacha
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Jay Zhao
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfMostafa Higazy
 
Trailblazer Community - Flows Workshop (Session 1)
Trailblazer Community - Flows Workshop (Session 1)Trailblazer Community - Flows Workshop (Session 1)
Trailblazer Community - Flows Workshop (Session 1)Muhammad Tiham Siddiqui
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingerssuser9354ce
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 
Gemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
Gemini AI Ft. Dr. Mithun Patil Sir GDSC FacultyGemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
Gemini AI Ft. Dr. Mithun Patil Sir GDSC FacultySamarthRamakantSarva
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Cprime
 
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureMuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureManik S Magar
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...James Anderson
 
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...ShapeBlue
 

Recently uploaded (20)

security-in-computing question paper 2023
security-in-computing question paper 2023security-in-computing question paper 2023
security-in-computing question paper 2023
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5Company
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
 
Communities, networking and developer culture
Communities, networking and developer cultureCommunities, networking and developer culture
Communities, networking and developer culture
 
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubHow We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
 
AI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxAI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptx
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and Optimization
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & Pitfalls
 
Large Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareLarge Language Models and Applications in Healthcare
Large Language Models and Applications in Healthcare
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdf
 
Trailblazer Community - Flows Workshop (Session 1)
Trailblazer Community - Flows Workshop (Session 1)Trailblazer Community - Flows Workshop (Session 1)
Trailblazer Community - Flows Workshop (Session 1)
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostinger
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 
Gemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
Gemini AI Ft. Dr. Mithun Patil Sir GDSC FacultyGemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
Gemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
 
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureMuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
 
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
 

HowTo_CSS

  • 1. Using CSS with Corvid Servlet Runtime Templates A system demonstrating this “How To” can be run under the “Using CSS with Corvid Servlet Runtime Templates” section of: http://www.exsys.com/support/howto The code for the sample system can be downloaded from the same page. The Exsys Corvid Servlet Runtime uses templates to ask questions and show the results. The templates are created using HTML to define the look and feel. There are special Corvid commands embedded in the templates that tell Corvid what sections to use and in what way, but these commands are inserted as HTML comments. Corvid does not require anything beyond simple HTML, but anything that is supported in an HTML page can be used. Cascading Style Sheets (CSS) is a good example of something that is not required, but which can be used to make pages look better, and make them more functional. CSS makes it possible to easily separate the details of the look-and-feel of a template from the content of the template. The template only needs to have the bare structure of asking the question. An associated CSS file can control appearance (fonts, colors, sizes, layout, etc). By simply changing the CSS file, the look-and-feel of a system can be completely changed. CSS also allows the appearance of the system to change depending on how it is being viewed. One design many be used for full size monitors and another for PDAs. The advantages of CSS are: 1. It allows the '.html' of the template to be very simple. The templates contain only content placeholders for the actual question content (most of which comes from the KB), and only simple formatting to specify the type of control to use to ask questions (radio button, checkbox, etc.) and some simple arrangement information. 2. To change the look-and-feel, only the '.css' file needs to be changed. 3. When the '.css' file is changed, the look-and-feel changes consistently in all templates if they all use the same '.css' file to control the look-and-feel. 4. The size of the .html files are much smaller so they download faster. (The CSS file is only downloaded once and cached by the browser.) 5. It is possible for the user to switch between '.css' files. The user can select the look-and-feel of the page for special situations. (When using the sample templates, click on the 'High Contrast' link and the whole look-and-feel of the web page will change.) 6. A '.css' file can automatically adjust the design for specific hardware such as PDA’s, printers or projectors. Corvid Servlet Runtime Templates that Use Cascading Style Sheets 1
  • 2. Remember, that while CSS is very widely supported in modern browsers, some users may be using an old browser that does not support CSS. This is rapidly becoming increasingly rare, and for many user communities you can count on the browser supporting CSS. The percentage that may not have a current browser will depend on the intended audience for your system. It is also possible that some users may have CSS support turned off. Because of this, the templates should be designed so that they will still function without CSS – although without the desired appearance. NOTE: These instructions assume some knowledge of CSS. They cover the issues in using CSS in Corvid templates, but this is not a CSS tutorial. For more information on CSS, see one of the many books on it. To see the effect of using CSS, run the demo system at http://www.exsys.com/support/howto. After the title screen, the first question allows you to select the CSS style sheet used for the other questions in the system. Each of the CSS options will make the system look quite different, but the only change to the system is the CSS style sheet used. The “How To” style looks like the other Corvid “How To” samples, while the “PDA” style emulates a PDA and uses a layout appropriate for the smaller screen. Corvid Servlet Runtime Templates that Use Cascading Style Sheets 2
  • 3. The “High Contrast” style makes the screen easier to read for people with visual impairment. “Trace” displays the trace of the run. “Card” is a different design. There are limitless ways the screen can be designed using CSS. In this demo, the CSS style used is selected by the system user. In a fielded system, there would usually be only a single style for the browser, with the design selected by the system developer. Other styles needed for special situations such as running on a PDA or printing, would be selected automatically. Moving the Demo System Files to a Server The demo runs using the Corvid Servlet Runtime, so you will need a servlet server. As with many of the other HowTo’s, this HowTo will give the instructions for Tomcat.  Download the CSS demo files from the link above, and unzip the file. It has two folders.  Put the folder in ‘KB’ into Tomcat’s ‘webapps’ folder in a subfolder named ‘HowTo’.  Put the folder in ‘base’ into Tomcat’s ‘webapps/ROOT/HowTo’ folder.  Open the .CVD file in Corvid editor.  In the Properties window under the Servlet tab, change the host and port to match your server. If your server is ‘localhost’ on port 8080, it is already configured and you can skip ahead to running the demo. Otherwise, change ‘localhost:8080’ to your server’s host name and port in the CORVID_SERVLET and CORVID_LINK_BASE and also the Specific URL under the Test Run tab. Start Tomcat if it is not already running and click on the Run button in Corvid (the blue triangle). Remember, localhost is just a synonym for the same IP as the local computer. This means the computer running the browser must also be the server. If the system is installed correctly, it will run the same as the sample system link above. How it Works CSS can be a complex subject. For its use in Corvid templates just remember that essentially anything you can do with CSS can be done in the template. The Corvid template does not require CSS, but it also does not prevent any use of CSS. Basically a CSS file defines named “classes”. The various classes can describe fonts, sizes, positioning, color, layout, etc. These class names can then be applied to sections of the template. This makes the template content very simple, since the CSS style sheet provides all the detailed “look-and-feel” information. For example in the simple question template that could be used to ask a Numeric variable: <html> <head> <link rel="stylesheet" href="CorvidKB.css"> </head> <body> <div class=questions> <form method="post" action="CORVID_SERVLET"> <div class=question> <span class="prompt"> VARIABLE_PROMPT </span> <span class="editbox"> <input type="text" name="[VARIABLE_NAME]"> </span> </div> <input type="submit" value="OK"> Corvid Servlet Runtime Templates that Use Cascading Style Sheets 3
  • 4. </form> </div> <p class=trace> CORVID_TRACE </p> </body> </html> The VARIABLE_PROMPT is surrounded by <span class=”prompt”> ... </span> tags. The desired appearance (markup) can be specified using CSS. If you want the prompt text in red and bold, put this "selector" in the '.css' file. .prompt { color: red; font-weight: bold; } The period (.) in front of “prompt” means this selector will be applied to tags with a “class” of “prompt”. It tells the browser to display the text between those tags in red and bold. The key to CSS is to use the "class" attribute to identify the tags that mark up text of a specific meaning. Notice the <span> tag includes a class name. This is just a name by which you can identify the <span> tags that markup the prompt text. The <div> tag is used to mark large sections of the web page (divisions), in this case, the question section. Different sections of the web page will have <div> tags with different class names. For example, the template above has these divisions:  “questions” This marks the entire section that includes the question or, if more than one question, all the questions.  “question” This marks an individual question. It includes the prompt text and the controls (radio buttons, edit box, drop down list) used to ask the question.  “trace” This is the section that contains the Trace text. Run with Trace on only for testing. Use CSS to hide it from the beta user but if a beta tester encounters a problem, you can have the beta tester pull down View and select Source and send you the Trace. The <div class=question> tag does nothing by default until you specify its markup in the '.css' file. (Actually, it displays that section on a new line.) The sample 'CorvidKB.css' has comments to help you determine which CSS selector specifies the look-and- feel of the section or tag you want to customize. To change the background image, replace 'background.jpg' with your desired background file. You can comment out lines in the '.css' file by putting /* ... */ around the line(s) as long as they do not also contain the comment markers. When the user prints the web page, the browser will determine if the web page specified a ‘.css’ file to be used for printing. If so, it gets the ‘.css’ file and uses it to format the printed web page. People browsing using their PDA or cell phone will automatically use the file ‘PDA.css’. This automatically occurs when your template has: <link rel="stylesheet" type="text/css" href="print.css" media="print"> <link rel="stylesheet" type="text/css" href="PDA.css" media="handheld"> Corvid Servlet Runtime Templates that Use Cascading Style Sheets 4
  • 5. Using the Templates in Your Expert System The CSS demo includes templates and a style sheet that you can use in your KB. They will get you started but you will want to customize them. Unzip 'GoesWithCVR.zip' and put the files in the same folder as the '.cvR' file. Unzip 'GoesInCorvidLinkBase.zip' and put the files in the folder pointed to by CORVID_LINK_BASE (which is specified under the 'Servlet' tab in the 'Properties' window). Under the 'Servlet' tab in the 'Properties' window, put 'QuestionTemplate.html' for the Default Question template. Put 'FinalTemplate.html' for the 'Final template'. In the Command Block, edit your 'RESULTS' command and put 'ResultsTemplate.html' for the 'Servlet template'. (Notice there are two 'Servlet template' edit boxes. Make sure you use the correct one.) Corvid Servlet Runtime Templates that Use Cascading Style Sheets 5
  • 6. The expert system can now be run using the Corvid Servlet Runtime. All questions will be asked using the 'QuestionTemplate.html' file. Other templates can be used to customize individual questions as needed by selecting the variable in the 'Variables' window and browsing to the desired template under the 'Servlet' tab. CSS For Formatting CSS classes can also be used to format content on a page. CSS classes can have specific sizes, borders, colors and positions. Every class or tag can have a specified background color, image, audio (to help the blind who use screen readers), bullets (for lists), fonts, and cursor image. This can be used to create a complex design with CSS that is used to format simple content generated in a Corvid report page. CSS can be used to simplify building WINK (What I Need to Know) pages. (For more on WINK systems see the “WINK What I Need to Know Website Systems How To” or the Exsys Covid manual. CSS can also be used to create pages that appear one way on the screen, but use a more “Printer Friendly” layout for printing. ® Corvid templates using CSS can be edited in an HTML editor that supports CSS, such as Adobe ® Dreamweaver . However, care must be taken to make sure the Corvid commands, which are HTML comments, remain in the correct position relative to other code. Since HTML editors view these as comments, they may put other tags around them incorrectly. © Exsys Inc. www.exsys.com Corvid Servlet Runtime Templates that Use Cascading Style Sheets 6