Dart Code: SliderMenu

Slider is a simple web application showcasing the use of both the SliderMenu view and DOM queries.

Read me file:

Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.

Very simple sample app showing use of the [SliderMenu] view.

Building and running:

1. go to the top-level directory of the project:
  $ cd dart/

2. build the dartc compiler:
  $ ./tools/build.py --arch=ia32

3. run the htmlconverter tool, that converts the dart code to javascript:
  $ cd client/
  $ python ./tools/htmlconverter.py \
    samples/slider/slider_sample.html -o out/

4. open the generated file in a browser:
  $ google-chrome out/client/samples/slider/slider_sample-js.html

Dart Code (SliderSample.dart):


// Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

/**
 * Very simple sample app showing use of the [SliderMenu] view.
 */
class SliderSample  {

  SliderMenu sliderMenu;
  final List menuItems;

  SliderSample() : menuItems = const["Apple", "Banana", "Cherry", "Durian"] {}

  void ready() {
    document.query("#status").innerHTML = "Slider Menu Sample App";
    sliderMenu = new SliderMenu(menuItems, (selectedText) {
      document.query("#message").innerHTML = "Selected '${selectedText}'";
    });
    document.query("#menu").nodes.add(sliderMenu.node);

    document.query('#next').on.click.add((e) {
      sliderMenu.selectNext(true);
    });

    document.query('#prev').on.click.add((e) {
      sliderMenu.selectPrevious(true);
    });

    sliderMenu.enterDocument();
  }

  static void main() {
    Dom.ready( () { new SliderSample().ready();} );
  }
}

 


// Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

#library('slider_sample');

#import('../../base/base.dart');
#import('dart:html');
#import('../../view/view.dart');

#source('SliderSample.dart');

main() {
  SliderSample.main();
}

HTML Code (slider_sample.html):

<!-- Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
     for details. All rights reserved. Use of this source code is governed by a
     BSD-style license that can be found in the LICENSE file. -->

<!DOCTYPE HTML>
<html>
  <head>
<link rel="stylesheet" type="text/css" href="../../view/resources/view.css"/>
<link rel="stylesheet" type="text/css" href="slider_sample.css"/>

    <script type="application/dart" src="slider_sample.dart"></script>
  </head>
  <body>
<h2 id="status">
      dart is not running
    </h2>
<div id="menu"></div>
<div id="message"></div>
<div id="next">Next</div>
<div id="prev">Prev</div>

  </body>
</html>

Try out this Dart Code or create your own: clic

:: Link

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s