HowTo_CSS

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

Recommandé

HTML and CSS Coding Standards par
HTML and CSS Coding StandardsHTML and CSS Coding Standards
HTML and CSS Coding StandardsSaajan Maharjan
1.1K vues12 diapositives
Css par
CssCss
CssJahid Blackrose
392 vues8 diapositives
CSS_tutorial_2 par
CSS_tutorial_2CSS_tutorial_2
CSS_tutorial_2tutorialsruby
262 vues9 diapositives
Full par
FullFull
Fullsanjaykhan33
542 vues35 diapositives
Tags par
TagsTags
TagsZecran Francis
707 vues16 diapositives
Pfnp slides par
Pfnp slidesPfnp slides
Pfnp slidesWilliam Myers
483 vues70 diapositives

Contenu connexe

Tendances

INTRODUCTIONS OF CSS par
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSSURYANARAYANBISWAL1
18 vues69 diapositives
Unit 1wt par
Unit 1wtUnit 1wt
Unit 1wtvamsi krishna
603 vues54 diapositives
Dreamweaver CS3 par
Dreamweaver CS3Dreamweaver CS3
Dreamweaver CS3University of Washington, Bothell
6.6K vues50 diapositives
Slicing the web par
Slicing the webSlicing the web
Slicing the webMohamad Hemmat
479 vues38 diapositives
Roadmap 01 par
Roadmap 01Roadmap 01
Roadmap 01quangnv17071980
178 vues4 diapositives
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4 par
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 4Erin M. Kidwell
799 vues51 diapositives

Tendances(17)

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4 par Erin M. Kidwell
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
Erin M. Kidwell799 vues
CSS - OOCSS, SMACSS and more par Russ Weakley
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley113.7K vues
Html goodies par Ali Hasan
Html goodiesHtml goodies
Html goodies
Ali Hasan1.2K vues

En vedette

March2004-CPerlRun par
March2004-CPerlRunMarch2004-CPerlRun
March2004-CPerlRuntutorialsruby
391 vues29 diapositives
09J1_ACG_Prospect par
09J1_ACG_Prospect09J1_ACG_Prospect
09J1_ACG_Prospecttutorialsruby
3.7K vues135 diapositives
resume_eric_tachibana par
resume_eric_tachibanaresume_eric_tachibana
resume_eric_tachibanatutorialsruby
552 vues5 diapositives
bestpractices par
bestpracticesbestpractices
bestpracticestutorialsruby
188 vues3 diapositives
tut0000021-hevery par
tut0000021-heverytut0000021-hevery
tut0000021-heverytutorialsruby
192 vues11 diapositives
CombustionREFlexMorphing par
CombustionREFlexMorphingCombustionREFlexMorphing
CombustionREFlexMorphingtutorialsruby
228 vues9 diapositives

Similaire à HowTo_CSS

Web technologies part-2 par
Web technologies part-2Web technologies part-2
Web technologies part-2Michael Anthony
167 vues21 diapositives
Introduction to css par
Introduction to cssIntroduction to css
Introduction to cssnikhilsh66131
372 vues22 diapositives
Vskills certified css designer Notes par
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer NotesVskills
305 vues8 diapositives
CSS Methodology par
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
964 vues37 diapositives
Css training tutorial css3 &amp; css4 essentials par
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsQA TrainingHub
216 vues30 diapositives
Introduction to BOOTSTRAP par
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAPJeanie Arnoco
1.1K vues48 diapositives

Similaire à HowTo_CSS(20)

Vskills certified css designer Notes par Vskills
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
Vskills305 vues
Css training tutorial css3 &amp; css4 essentials par QA TrainingHub
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub216 vues
Twitter bootstrap training_session_ppt par Radheshyam Kori
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
Radheshyam Kori132 vues
Intermediate Web Design.doc par butest
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest377 vues
Intermediate Web Design.doc par butest
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest521 vues
Structuring your CSS for maintainability: rules and guile lines to write CSS par Sanjoy Kr. Paul
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
Sanjoy Kr. Paul77 vues
Intermediate Web Design par mlincol2
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
mlincol2516 vues
Organize Your Website With Advanced CSS Tricks par Andolasoft Inc
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
Andolasoft Inc87 vues
Super billing asp.net par superb11b
Super billing   asp.netSuper billing   asp.net
Super billing asp.net
superb11b286 vues
Introduction to whats new in css3 par Usman Mehmood
Introduction to whats new in css3Introduction to whats new in css3
Introduction to whats new in css3
Usman Mehmood891 vues

Plus de tutorialsruby

&lt;img src="../i/r_14.png" /> par
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
237 vues46 diapositives
TopStyle Help &amp; &lt;b>Tutorial&lt;/b> par
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
3.5K vues46 diapositives
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b> par
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
3.9K vues12 diapositives
&lt;img src="../i/r_14.png" /> par
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
10 vues12 diapositives
&lt;img src="../i/r_14.png" /> par
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
5 vues3 diapositives
Standardization and Knowledge Transfer – INS0 par
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
2.8K vues3 diapositives

Plus de tutorialsruby(20)

&lt;img src="../i/r_14.png" /> par tutorialsruby
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
tutorialsruby237 vues
TopStyle Help &amp; &lt;b>Tutorial&lt;/b> par 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>
tutorialsruby3.5K vues
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b> par 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>
tutorialsruby3.9K vues
Standardization and Knowledge Transfer – INS0 par tutorialsruby
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
tutorialsruby2.8K vues
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269 par tutorialsruby
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby5.3K vues
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269 par tutorialsruby
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby1.3K vues
Winter%200405%20-%20Advanced%20Javascript par tutorialsruby
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
tutorialsruby719 vues

Dernier

Kyo - Functional Scala 2023.pdf par
Kyo - Functional Scala 2023.pdfKyo - Functional Scala 2023.pdf
Kyo - Functional Scala 2023.pdfFlavio W. Brasil
165 vues92 diapositives
Lilypad @ Labweek, Istanbul, 2023.pdf par
Lilypad @ Labweek, Istanbul, 2023.pdfLilypad @ Labweek, Istanbul, 2023.pdf
Lilypad @ Labweek, Istanbul, 2023.pdfAlly339821
9 vues45 diapositives
AMAZON PRODUCT RESEARCH.pdf par
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdfJerikkLaureta
15 vues13 diapositives
Empathic Computing: Delivering the Potential of the Metaverse par
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the MetaverseMark Billinghurst
470 vues80 diapositives
Igniting Next Level Productivity with AI-Infused Data Integration Workflows par
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Safe Software
225 vues86 diapositives
PharoJS - Zürich Smalltalk Group Meetup November 2023 par
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023Noury Bouraqadi
120 vues17 diapositives

Dernier(20)

Lilypad @ Labweek, Istanbul, 2023.pdf par Ally339821
Lilypad @ Labweek, Istanbul, 2023.pdfLilypad @ Labweek, Istanbul, 2023.pdf
Lilypad @ Labweek, Istanbul, 2023.pdf
Ally3398219 vues
Empathic Computing: Delivering the Potential of the Metaverse par Mark Billinghurst
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
Igniting Next Level Productivity with AI-Infused Data Integration Workflows par Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software225 vues
PharoJS - Zürich Smalltalk Group Meetup November 2023 par Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi120 vues
handbook for web 3 adoption.pdf par Liveplex
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdf
Liveplex19 vues
Black and White Modern Science Presentation.pptx par maryamkhalid2916
Black and White Modern Science Presentation.pptxBlack and White Modern Science Presentation.pptx
Black and White Modern Science Presentation.pptx
1st parposal presentation.pptx par i238212
1st parposal presentation.pptx1st parposal presentation.pptx
1st parposal presentation.pptx
i2382129 vues
Unit 1_Lecture 2_Physical Design of IoT.pdf par StephenTec
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdf
StephenTec11 vues
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 par IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
Business Analyst Series 2023 - Week 3 Session 5 par DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10209 vues
Special_edition_innovator_2023.pdf par WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies2216 vues
HTTP headers that make your website go faster - devs.gent November 2023 par Thijs Feryn
HTTP headers that make your website go faster - devs.gent November 2023HTTP headers that make your website go faster - devs.gent November 2023
HTTP headers that make your website go faster - devs.gent November 2023
Thijs Feryn19 vues
STPI OctaNE CoE Brochure.pdf par madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb12 vues
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors par sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab15 vues

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