neat UI trick with XML

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

neat UI trick with XML

Judson, Ross
I thought I'd share a neat UI trick for Swing with the list.  Have a
look at this screenshot:

http://www.soletta.com/sbaz/clip.PNG

[Lex -- this just wraps and calls the sbaz classes you have now]

Nice looking HTML-type UIs can be generated -- Scala's XML handling
makes it easy.  Swing's HTML handling is a little primitive so the Scala
stylesheets aren't followed as carefully as they should be.  The Clicker
expressions could use a little polish, too -- I struggled a bit with the
syntax.  

Because an XML expression is part of a formal scope, generating complex
details about domain info and so forth is quite simple...here's a little
clip from the code:

class MDFrame(private var md: ManagedDirectory) extends SFrame {

    val html = new SEditorPane;
    html.contentType = "text/html";
    html.editable = false;
    html.text =
      <html>
        <head>
          <link rel="stylesheet" type="text/css" media="print"
href="http://scala.epfl.ch/css/screen.css"/>        
          <link rel="stylesheet" type="text/css" media="screen"
href="http://scala.epfl.ch/css/print.css"/>
        </head>
        <body bgcolor="#ebb85c"><div id="body-area"><div
id="body-content">
          <div id="menu-area"><div id="menu-content">
          </div></div>
          <div id="main-area"><div id="main-content">
            <h1><img alt="Scala"
src="http://scala.epfl.ch//images/scala_logo.png"/></h1>
            <p/><b>SBaz</b> is a <i>package manager</i> for <a
href="http://scala.epfl.ch">Scala</a>.  
            Below you can see listings
            of the packages that are <i>available</i> and the packages
that you have
            already <i>installed</i>.  <b>Click</b> on an available
package to install it,
            or <b>click</b> on a package that is already installed to
remove it
            (you will be asked to confirm removal).  
            If a newer version of a package is available the newer
version is
            highlighted.
            <p/>Your base sbaz directory is currently: <b>{
md.directory.toString }</b>.  
              { Clicker("Change the base", cmd => changeBase).html }.
            <p/>You can also
              { Clicker("Update the list", cmd => updateList).html } of
what's available (downloads the latest package list);
              { Clicker("Upgrade", cmd => upgrade).html } your installed
packages to the latest versions;
              { Clicker("Compact", cmd => compact).html } the download
cache (saves space by removing downloaded archives);
            <h1>Available</h1>
            {availableHTML(md.available.packages)}
            <h1>Installed</h1>
            {installedHTML(md.installed.packages)}
          </div></div>
        </div></div></body>
      </html> ;
     
    build;
   
    case class Clicker(command: String, body: String => unit) {
      def html = {
        // TODO: Add listener
        <a href={"#" + command.replace(' ', '_')}>{command}</a>;
      }
    }
   
    def changeBase: unit = {
    }
   
    def updateList: unit = {
    }
   
    def upgrade: unit = {
    }
   
    def compact: unit = {
    }

    private def availableHTML(lst: List[AvailablePackage]):
List[xml.Elem] = lst match {
      case Nil => Nil
      case h :: t => apHTML(h) :: availableHTML(t)
    }
   
    // Generate HTML for an available package.
    private def apHTML(ap: AvailablePackage) =
      <span>
        { Clicker("Install " + ap.toString(),
            cmd => { Console.println("Install of " + ap) }).html}
        <br/>
      </span> ;
   
    private def installedHTML(lst: List[InstalledEntry]): List[xml.Elem]
= lst match {
      case Nil => Nil
      case h :: t =>      
        <span>
          {Clicker("Remove " + h.name + '/' + h.version, cmd => {
            Console.println("Remove of " + h);
          }).html}
          <br/>
        </span> :: installedHTML(t)
    }
   
Reply | Threaded
Open this post in threaded view
|

Re: neat UI trick with XML

Lex Spoon
"Judson, Ross" <[hidden email]> writes:
> I thought I'd share a neat UI trick for Swing with the list.  Have a
> look at this screenshot:
>
> http://www.soletta.com/sbaz/clip.PNG

Hey, that looks great!  It is funny how strong instinct is.  I found
myself stupidly reaching to click some of the links even though I knew
it was just a PNG.



> [Lex -- this just wraps and calls the sbaz classes you have now]

Great!  I was hoping they would be reusable, so that other UI's could
be developed.


-Lex