node-addon/examples/flex-container.js

   1  var window = {
   2            x:0,
   3            y:0,
   4            width:1920,
   5            height:1080,
   6            transparent: false,
   7            name:'Flexbox Demo'
   8  };
   9
  10  var options = {
  11     'window': window
  12  }
  13
  14 try {
  15   // target
  16   var dali = require('dali')( options );
  17 }
  18 catch(err) {
  19   // desktop
  20   var dali = require('../build/Release/dali')( options );
  21 }
  22
  23 var imageDir = "./images/";
  24
  25 var imageView;
  26 var currentImageIndex = 0;
  27 var imageNames = ["image-1.jpg", "image-2.jpg", "image-3.jpg"];
  28
  29 var daliApp = {};
  30
  31 daliApp.init = function() {
  32
  33   // Create the main flex container
  34   var flexContainer = new dali.Control("FlexContainer");
  35   flexContainer.parentOrigin = dali.TOP_LEFT;
  36   flexContainer.anchorPoint = dali.TOP_LEFT;
  37   flexContainer.widthResizePolicy = "FILL_TO_PARENT";
  38   flexContainer.heightResizePolicy = "FILL_TO_PARENT";
  39   flexContainer.backgroundColor = dali.COLOR_WHITE;
  40   flexContainer.flexDirection = "column"; // display toolbar and content vertically
  41
  42   dali.stage.add( flexContainer );
  43
  44   // Create the toolbar area
  45   var toolBar = new dali.Control("FlexContainer");
  46   toolBar.parentOrigin = dali.TOP_LEFT;
  47   toolBar.anchorPoint = dali.TOP_LEFT;
  48   toolBar.backgroundColor = dali.COLOR_CYAN;
  49   toolBar.flexDirection = "row"; // display toolbar items horizontally
  50   toolBar.alignItems = "center"; // align toolbar items vertically center
  51   toolBar.flex = 0.1; // 10 percent of available space in the cross axis
  52
  53   flexContainer.add(toolBar);
  54
  55   // Create the content area
  56   var content = new dali.Control("FlexContainer");
  57   content.parentOrigin = dali.TOP_LEFT;
  58   content.anchorPoint = dali.TOP_LEFT;
  59   content.flexDirection = "row";
  60   content.alignItems = "center"; // align items vertically center
  61   content.justifyContent = "center"; // align items horizontally center
  62   content.flex = 0.9; // 90 percent of available space in the cross axis
  63
  64   flexContainer.add(content);
  65
  66   // Add a button to the left of the toolbar
  67   var prevButton = new dali.Control("PushButton");
  68   prevButton.name = "Prev";
  69   prevButton.parentOrigin = dali.TOP_LEFT;
  70   prevButton.anchorPoint = dali.TOP_LEFT;
  71   prevButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
  72   prevButton.labelText = "Prev";
  73   prevButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
  74
  75   toolBar.add( prevButton );
  76
  77   // Add a title to the center of the toolbar
  78   var title = new dali.Control("TextLabel");
  79   title.parentOrigin = dali.TOP_LEFT;
  80   title.anchorPoint = dali.TOP_LEFT;
  81   title.widthResizePolicy = "USE_NATURAL_SIZE";
  82   title.heightResizePolicy = "USE_NATURAL_SIZE";
  83   title.horizontalAlignment = "CENTER";
  84   title.verticalAlignment = "CENTER";
  85   title.text = "Gallery";
  86   title.pointSize = 28;
  87   title.flex = 1.0; // take all the available space left apart from the two buttons
  88   title.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the title
  89
  90   toolBar.add( title );
  91
  92   // Add a button to the right of the toolbar
  93   var nextButton = new dali.Control("PushButton");
  94   nextButton.name = "Next";
  95   nextButton.parentOrigin = dali.TOP_LEFT;
  96   nextButton.anchorPoint = dali.TOP_LEFT;
  97   nextButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
  98   nextButton.labelText = "Next";
  99   nextButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
 100
 101   toolBar.add( nextButton );
 102
 103   // Add an image to the center of the content area
 104   imageView = new dali.Control("ImageView");
 105   imageView.image = imageDir + imageNames[currentImageIndex];
 106   imageView.parentOrigin = dali.TOP_LEFT;
 107   imageView.anchorPoint = dali.TOP_LEFT;
 108   content.add( imageView );
 109
 110   // Connect signal callback to button pressed signal
 111   prevButton.on("pressed", daliApp.buttonPressedEvent);
 112   nextButton.on("pressed", daliApp.buttonPressedEvent);
 113 }
 114
 115 daliApp.buttonPressedEvent = function( button ) {
 116
 117   // Set the size of image view to its natural size
 118   imageView.widthResizePolicy = "USE_NATURAL_SIZE";
 119   imageView.heightResizePolicy = "USE_NATURAL_SIZE";
 120
 121   // Work out the index of the new image
 122   if (button.name == "Prev") {
 123     currentImageIndex--;
 124   }
 125   else {
 126     currentImageIndex++;
 127   }
 128   currentImageIndex %= imageNames.length;
 129
 130   // Display the new image
 131   imageView.image = imageDir + imageNames[Math.abs(currentImageIndex)];
 132 }
 133
 134 function startup() {
 135
 136   daliApp.init();
 137 }
 138
 139 startup();
 140