Famo.us Menu - Click - Is there another way? - menu

I have been going over the examples and demos of Famo.us, in particular the menus. In the examples such as taasky, timbre etc. the side menu is made up of MenuItemViews. Each MenuItemView comprises of a background, icon and title - each one a surface.
In order to make each menu item 'clickable' do I have to add an .click to each of the 3 surfaces that make up the MenuItemView and emit an event handler?
Or is there an easier way to make each menu item 'clickable'?
Thanks for your help in advance :)

Yes, what you want to do is pipe your surface events to the Views _eventOutput handler. This way the click event only needs to be defined on the view itself.
In this example there are two surfaces that each pipe all events to _eventOutput of view. When we click either surface, the views click event is triggered
Hope this helps!
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');
var context = Engine.createContext();
var view = new View();
var surface1 = new Surface({
size:[400,400],
properties:{
backgroundColor:'green'
}
});
surface1.pipe(view._eventOutput);
view.add(surface1);
var surface2 = new Surface({
size:[200,200],
properties:{
backgroundColor:'red'
}
});
surface2.pipe(view._eventOutput);
view.add(surface2);
view.on('click',function(evt){
console.log("View Clicked!");
})
context.add(view);

Related

How to add an absolute element in a NativeScript page

I want to be able to just place a View component (plugin) into the page through code and have it appear at some X\Y on the page... but I'm a bit stumped.
Any attempt to add via page.content kinda adds it to the layout\render pass so it occupies space.
So this would get injected into "any" page at "any" time, I have no control over the markup this would be used in (know what I mean?) There is no XML for it and unfortunately the answer can't just be wrap everything in an AbsoluteLayout because one can't mandate that on users apps\layouts.
Thoughts, even possible?
Basically the simplest way to do this is to dynamically and be fully cross platform compatible is to create a AbsoluteLayout item in your JavaScript code, and dynamically insert your item and the AL into the page container.
Code would be something like this:
var AbsoluteLayout = require('ui/layouts/absolute-layout').AbsoluteLayout;
var myAL = new AbsoluteLayout();
var myItem = new myPluginItem();
// Set you left, right, top, bottom coords.
myItem.top = x;
// Add our item to the AbsoluteItem
myAL.addChild(myItem);
var frame = require('ui/frame');
var page = frame.topmost().currentPage;
var LayoutBase = require('ui/layouts/layout-base').LayoutBase;
page._eachChildView(function(view) {
if (view instanceof LayoutBase) {
view.addChild(myAL);
return false;
}
return true;
});
However, if you don't want to do this the really simple way; the only other way is to actually go a bit lower level. You can natively access the iOS view controller (page._ios.view) and the android view (page._nativeView), and then manually add it to the view by using things like addView (https://developer.android.com/reference/android/view/ViewManager.html) or addSubview (https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/).
I would like to add you can set the Top and Left properties in TypeScript by importing AbsoluteLayout like so
import {AbsoluteLayout} from 'ui/layouts/absolute-layout';
and then using the exposed functions setLeft or setTop
AbsoluteLayout.setLeft(YourItem, LeftValue);
or
AbsoluteLayout.setTop(YourItem, TopValue);

xna how to setup controls in game

I want to be able to go to options menu in the game I am developing and set up my controls.
It is a simple game of pong (for now) and the controls for each player are just up and down.
This is how I want the process to look like: I click SETUP CONTROLS, game displays the name of the control I am supposed to change and it waits, I click the button on keyboard that i want it to be changed to, game reads it and displays the next control I am supposed to change and so on until i change all controls.
I have found a way how to do that here and my code now looks basicly like this:
if (optionsBList.IsButtonClicked("SETUP CONTROLS")) //when i click the
//SETUP CONTROLS button
//in the options menu
{
KeyboardState currentKeyboardState = new KeyboardState();
waitingForKey = true;
while (waitingForKey)
{
if(currentKeyboardState.GetPressedKeys().Count() > 0)
{
player1.upkey = currentKeyboardState.GetPressedKeys()[0];
//the path for the key isn't player1.upkey, but lets say it is.
waitingForKey = false;
}
}
}
In this short code my goal is to change just one key. If I can make it change 1 key, changing more wont be a problem.
The problem is, I don't see why does my game stop responding when i click the SETUP CONTROLS button. I don't see an infinite loop here nor a memory leak.
Why is my game crashing and is there a better way to load controls in options menu?
If you saw the answer from the link you placed in your question, you would have noticed that he actually deleted the while loop and he made it an if statement.
Like Nico Schertler said : "while(waitingForKey) is your infinite loop. That loop blocks the game thread, so no further input is recognized."
Link to the answer from your link: https://stackoverflow.com/a/15935732/3239917
if (optionsBList.IsButtonClicked("SETUP CONTROLS")) //when i click the
//SETUP CONTROLS button
//in the options menu
{
KeyboardState currentKeyboardState = new KeyboardState();
waitingForKey = true;
if (waitingForKey )
{
if(currentKeyboardState.GetPressedKeys().Count() > 0)
{
player1.upkey = currentKeyboardState.GetPressedKeys()[0];
//the path for the key isn't player1.upkey, but lets say it is.
waitingForKey = false;
}
}
}

How to use Maki svg icons with Snap.svg?

I'm experimenting with Snap in order to use svg and need to be able to use the Maki icons defined in https://github.com/mapbox/maki.
My plan is to load the svg's I need, and then instantiate them for particular icons on a piece of Snap paper. But in order for this to work, I need to place the icon at a particular place on the paper, but I can't get translation to work. Neither one of the translation techniques below works; the code works as is, but always places the icon at the top left.
What am I missing? There's not enough documentation on Snap, and I don't know if the problem is with the way the Maki icon svg is defined, or my use of Snap.
var icon = Snap.load("maki/bicycle-24.svg", function(f) {
var g = f.select("g").clone();
// var g = f.select("#layer1").clone(); // also works
// g.transform("t120,120");
// var t = new Snap.Matrix();
// t.translate(120,120);
// g.transform(t);
paper.append(g);
});
The cloning needs to happen after the append, as when loading an svg in Snap its just a fragment.
So you will need to do something like...
paper.append(f);
var element = paper.select('#someId').clone();
element.transform( myTransform );
Thank you! That did the trick! And since Snap is so poorly documented, I'm going to insert the code here that allows a general solution.
// Base set from which markers are constructed
var iconSet = paper.group();
iconSet.attr({ class: 'hide' });
// Instantiations of icons
var markers = paper.g();
// Now, create SVG shape
var icon = Snap.load("maki/bicycle-24.svg", function(icon) {
// Add it to the icon set
iconSet.append(icon);
// Instantiate it and remove from main view
var element = paper.select('#svg4460'); // Copies it!
// var element = paper.select('#base'); // Selects something but doesn't work
// var element = paper.select('#layer1'); // Selects something but doesn't work
// var element = paper.select('#bicycle-24'); // Silent fail
element = element.clone();
element.remove();
// Clone this icon and move it
var t = new Snap.Matrix();
t.translate(10,120);
element.transform(t);
// Insert into main document view (markers)
markers.add(element);
});

Highlighting or Bolding the Borders of a kml Polygon

Hey after loading a kml file to google earth I was trying to have when a user clicks a certain polygon from the kml, to have that polygon highlighted.
So far I can record the click event, get the event type (KmlPlacemark) and grab its kml markup.
I tried doing something similar to this example where they add a placemark to the getFeatures of the kmlObject but both target and type don't seem to have 'getFeatures'. After looking around the documentation I think I might either want setOutline from Kml Polystyle class or setWidth() from KmlLineStyle class but am not sure. Also when I try something like target.setOutline(true); it doesn't work.
Can anyone tell me if I'm on the right track, hints to what I'm doing wrong, and if there's a better way to do this?
function recordEvent(event) {
var target = event.getTarget();
var type = target.getType();
if(type == "KmlPolygon") {
alert("KMLPolygon ");
}else if(type == "KmlPlacemark") {
// // get the data you want from the target.
var description = target.getDescription();
var balloon = target.getBalloonHtml();
var outputKml = target.getKml();
if ('getFeatures' in event) {
console.log("test");
event.getFeatures().appendChild(placemark);
}
console.log("hello?")
// target.setOutline(true);
console.log(outputKml);
}
};
google.earth.addEventListener(ge.getGlobe(), 'click', recordEvent);
Thanks!
I find the best way to do what you are asking is to:
Detect click events like you currently do
If clicked, create a new Style, then assign it to the target
var newStyle = ge.createStyle('');
// Assign your Style's attributes such as LabelStyle and IconStyle
// eg to set the scale of your label
newStyle.getLabelStyle().setScale(2.5);
// Set the Style
target.setStyleSelector(newStyle);
Edit to add in this link of a Google example showing it more in depth
https://code.google.com/apis/ajax/playground/#styling_placemarks_using_style_maps

Getting the dijit for a typeAhead in XPages

I want to be able to add an onBlur/onkeypress/onChange events to all TypeAhead fields on the form rather than have a developer select every one in the Designer client. The only thing I cannot get a handle on is the onChange event.
When the user selects something in the TypeAhead the onChange event is triggered when adding the code directly to the event in the Domino Designer - so I should be able to replicate that capability with code.
If my typeAhead field is called inputText2 I thought I would be able to do the following
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onChange', function (){
alert('1')
});
However this doesn't appear to work...
I tried lowercase onchange
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onchange', function (){
alert('1')
});
no luck there either
I tried
var widget = dijit.byId("#{id:inputText2}");
but that failed to event select the element entirely
So what do I need to do to trigger the onchange event when selecting an option in the typeAhead?
I found a solution.....not ideal but it worked for the moment - not generic though, but a start
Copying the way XPages does it....add this to the page
function view__id1__id2__id31__id50_clientSide_onchange(thisEvent) {
alert('me')
}
and then
dojo.addOnLoad(function(){
XSP.addOnLoad(function() {
XSP.attachEvent("X1","view:_id1:_id2:_id31:inputText2", "onchange", view__id1__id2__id31__id50_clientSide_onchange, false, 2);
});
});
});
X1 must be unique but everything else can be calculated
Thanks to Serdar Basegmez

Resources