How to create a storyboard and link it to an existing UIViewController? - uiviewcontroller

I'm quite new to the Xamarin.iOS platform.
I created an empty Xamarin.iOS project then create my main UIViewController, which is UIViewController1 and then set it up in the AppDelegate.cs:
// If you have defined a root view controller, set it here:
var view1 = new UIViewController1();
Window.RootViewController = view1;
// make the window visible
Window.MakeKeyAndVisible();
In the UIViewController1 I hard-code all the labels and buttons and stuff. Like this:
var frame = new CGRect(10, 10, 300, 30);
var Label = new UILabel(frame);
View.AddSubView(Label);
But now when everything is confirmed to be working correctly, I want to create a storyboard for my UIViewController1 and move all of the elements onto it for future maintenance, so after creating an Empty Storyboard how can I link it to my current UIViewController1?
The other solutions that I found just don't work. All I got is a blank white screen.

Open your empty Storyboard, on the left window you will see the Toolbox(if you didn't see it, Ctrl + Alt + X to open it). Select a ViewController then put it on the Storyboard.
Here you will see a Storyboard with only one ViewController in it like:
Click the yellow button at left bottom of the ViewController. In the Property window we can choose its Class, click the down arrow to select:
In this way, we have bound the ViewController to the UIViewController1. But we also need to create a initial method in this class:
public UIViewController1 (IntPtr handle) : base(handle)
{
}
If you want to use the Storyboard as your initial Window, open your info.plist, select the Main Interface to your Storyboard. Then in the FinishedLaunching() remove all your code about initializing the Window:
//var view1 = new UIViewController1();
//Window.RootViewController = view1;
// make the window visible
//Window.MakeKeyAndVisible();
Moreover instead of constructing the ViewController with var view1 = new UIViewController1();, we should use UIStoryboard.FromName("StoryboardName", null).InstantiateViewController("ViewControllerID");. This ViewControllerID can be set in the property window I post above called Storyboard ID;

Related

Libgdx stage 'frozen"

In my game there is a menu, in this menu, there are 4 tabs and each tab have its own stage with tables scrollpanes and buttons (is it a good idea ?)
My problem is that every stage seems "frozen", buttons are not responding and scrollpanes don't scroll
My menu structure :
Menu class
-> render a tab (render selectedTab, selectedTab is a Tab object (custom class) that is asigned with a specific tab (Ex: sele shopTab (extend tab class))
// menu class
private Tab selectedTab;
private Tab RecipeTab, SellTab, UpgradeTab, ShopTab;
// menu constructor
RecipeTab = new RecipeTab(viewport, sb, itemsdata);
SellTab = new SellTab(viewport, sb, hud);
UpgradeTab = new UpgradeTab(viewport, sb, itemsdata);
ShopTab = new ShopTab(viewport, sb);
selectedTab = RecipeTab;
// render
selectedTab.render(sr, delta);
// on tab change
public void setSelectedTab(Tab newTab) {selectedTab = newTab;}
setSelectedTab(ShopTab);
-> menu contain a navbar to switch tabs (the selected tab is asigned with another tab object)
I don't know if the issue comes from the stages or the actors. even a simple textbutton doesn't work
// how my stages are made
// constructor
this.stage = new Stage(viewport, sb); // ExtendViewport (same everywhere), Spritebatch
Gdx.input.setInputProcessor(this.stage);
// render
this.stage.draw();
this.stage.act(delta);
I figured it out.
The answer was simple, there was a conflict with the inputProcessor
i was seting the inputProcessoron each tabs
so i added a setInputProcessor() method to the tabs a called it on tab change

Optimize ItemRenderer For Flex Mobile Application

I made this class, which is an ItemRenderer class, used in a DataGroup ( mobile application ),
and I am not entirely sure if I did the right thing or not, my issues are :
Is there a better way to show the image, which is 80x80 and directly loaded from the server;
How to make the height of the row dynamic, I mean, depending on the height of the 3 StyleableTextFeild
Is this the right way to add the listener on the image, that will trigger a simple HTTPService,
Here is the functions from the class, Any help would be much appreciated !!
Image
Declared it as a simple image :
var logo:Image;
On override createChildren
logo = new Image();
addChild(logo);
And I added on set Data
logo.source = "http://192.168.0.15:3000/"+value.logo_thumb_url;
Size
override protected function measure():void {
measuredWidth = measuredMinWidth = stage.fullScreenWidth;
measuredHeight = measuredMinHeight = 100;
}
Listener
override public function set data(value:Object):void {
tel.text = String(value.Tel);
description.text = String(value.Descricao);
nome.text = String(value.Nome);
logo.addEventListener(MouseEvent.CLICK, function():void{
var service:HTTPService = new HTTPService();
service.url = value.targer;
service.method = "GET";
// setting headers and other variables ...
service.send();
});
}
You can use URLLoader or Loader for loading the image if you are planning to cache the image on the client side, if you cache the image, it wil help you not load the image again when the users scrolls through the list. (What you have done is Ok, but you will hit performance issues)
For variable row height, if Datagroup does not work, use List. find it here Flex 4: Setting Spark List height to its content height
There should be a buttonMode property for some items, make it buttonMode for the logo, for variable row height, find something related to wordWrap and variableRowHeight properties on the datagroup.
There are a few suggestions, what you have coded is good, but, instead of adding the listeners on set data, add it in creation complete, as it is more appropriate. Also, the event listeners has to be weak referenced, http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/EventDispatcher.html#addEventListener()

Convert longitude/latitude to pixels in Appcelerator Titanium

I'm searching for a way to convert longitude/latitude to pixels relative to a Map view. Basically, I'm looking for something similar to Projection.toPixels(), as described here.
What I want to do is the following: I need to add annotations with background images and texts on them, and since such a feature is not possible with the default annotations, I have to somehow calculate their position in the Map view and add labels (as children views), instead.
I've spent almost a week working on it, without any result.
There is a property on an annotation to set its image and a title that will displayed when clicked (hover over it). see here:
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.Map.Annotation-object
Is this not exactly what your looking for?
I don't have a way to convert lat/lng to pixels, but I do have a way to get images and text on annotations. It is kind of a "hackish" way to do it, but it works. Basically, all you do is create a custom view with whatever you want in it. After you have your view setup, then for the image property of the annotation, you set it to yourCustomView.toImage().
Here is an example:
//Setup device size variables
var deviceWidth = Ti.Platform.displayCaps.platformWidth;
var deviceHeight = Ti.Platform.displayCaps.platformHeight;
//Create a new window
var w = Ti.UI.createWindow({
width:deviceWidth,
height:deviceHeight
})
//Create view for annotation
var annotationView = Ti.UI.createView({
width:50,
height:50,
backgroundImage:'http://www.insanedonkey.com/images/bubble.png',
})
//Add text to the annotation view
var annotationText = Ti.UI.createLabel({
width:'auto',
height:'auto',
text:'785k',
font:{fontSize:12,fontWeight:'bold'},
color:'#fff',
})
annotationView.add(annotationText);
//Create a new annotation
var newAnnotation = Titanium.Map.createAnnotation({
latitude:36.134513,
longitude:-80.659690,
animate:true,
image:annotationView.toImage() //Convert the annotationView to an image blob
});
var mapview = Titanium.Map.createView({
region:{latitude:36.134513, longitude:-80.659690, latitudeDelta:0.0009, longitudeDelta:0.0009},
animate:true,
regionFit:true,
userLocation:true,
annotations:[newAnnotation],
mapType:Titanium.Map.STANDARD_TYPE,
width:2000,
height:2000
});
//Add the mapview to the window
w.add(mapview);
//Open the window
w.open();
I hope this helps out.

Flash: Stage.FullscreenInteractive -> Difference if class or 1st frame

example 1: 1st frame of my app
var screenBounds = Screen.mainScreen.bounds; //Bounds of current screen
var full:Sprite = new Sprite(); //Sprite Fullscreen
//Enter Fullscreen
function goFullScreen(e:Event = null) {
//myClass.goFullscreen();
full.graphics.clear();
full.graphics.beginFill(0xccff00);
full.graphics.drawRect(0,0,screenBounds.width, screenBounds.height);
full.graphics.endFill();
addChild(full);
this.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
example 2: a normal as class package
private var full:Sprite = new Sprite(); //Sprite to show fullscreen
private var screenBounds = Screen.mainScreen.bounds; //Bounds of current screen
public function favoritesFullscreen():void {
full.graphics.clear();
full.graphics.beginFill(0xccff00);
full.graphics.drawRect(0,0,screenBounds.width, screenBounds.height);
full.graphics.endFill();
addChild(full);
this.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
So, tell me WHERE IS THE DIFFERENCE?
I'm a macuser, you know, at the top the menubar and in my case the dock is aligned left
It's weird but example 1 does exactly what it should. It creates a fullscreen rectangle across the ENTIRE screen (from 0,0 to the right bottom)
However, example 2 kind of calculates the width of the top-menubar and the dock and starts the fullscreen rectangle a approx 40px from the left edge of the screen (dock) and 20px from the top (menubar)... i don't get why a external class acts different than as on the first frame.
??? thank you for your help!
I'm guessing it has to do with when the Screen.mainScreen.bounds are retrieved. On compile time, flash internally moves all frame code within functions in the DocumentClass and calls them after the stage has completly initialized. So, in the 1st example, you are retrieving the screenBounds after everything is initializated, but in the 2nd example you are doing it much earlier.
I guess waiting for the ADDED_TO_STAGE event would be enough. If it's not, the first ENTER_FRAME event dispatched should definitely work.

Flex DRAG_DROP Event - Is it possible to access the Image Being Dragged?

When you start a Flex drag action, you pass in a proxy image to be displayed when you drag across the screen. When the drop occurs, I want to be able to grab this proxy but I can't find a way to from the DragEvent object.
Is it possible? What I want is to actually drop the dragged image when the mouse button is released... Flex automatically does a nice shrinking animation on the proxy but I don't want that.
The Flex examples show what I don't want - the proxy is removed and a new image added but not in exactly the right place...
More info: I tried adding my Proxy Image as a data item to the DragSource. I was able to access this when the drop occurred and saw there is a class mx.managers.dragClasses.DragProxy which seems to have all the info I need... but this class is not documented?
So there's two questions really... how to get the proxy and find out the position of the mouse cursor within the proxy, and how to disable the Flex drop animation.
The dragProxy is a static getter on the DragManager and is scoped to mx_internal. So to reference it, you'd have to do something like this:
import mx_internal;
And in a drag event handler:
var p:* = DragManager.mx_internal::dragProxy;
I'm not sure how you could prevent the animation. If I find out, I'll let you know.
For disabling the animation in the s:List, in a dragCompleteHandler override, you can 'hack' into the DragManager to get the dragProxy and hide it.
override protected function dragCompleteHandler(e:DragEvent):void
{
DragManager.mx_internal::dragProxy.visible = false; // <- MAGIC!
super.dragCompleteHandler(e);
}
Probably applicable in other situations.
Only way to prevent the animation:
-You have to monkey patch the DragProxy class (i.e. create a new class with identical name, code, and package structure), and remove the effects code from the mouseUpHandler().
No other way to override it as far as I know, though the issue was been submitted as a bug to Adobe over a year ago.
As far as getting the mouse coords for the proxy to drop it in the correct location try this:
assuming you are initiating the drag on mouseDown get the coords using e.currentTarget.contentMouseX and e.currentTarget.contentMouseY in your handler. then add these to the dragSource ( I did it as an object ) like:
var drgSrc:DragSource = new DragSource();
drgSrc.addData( { x:e.currentTarget.contentMouseX, y:e.currentTarget.contentMouseY }, 'drgXY' );
then in your drop handler ( assuming you are dropping it into a Canvas named drpCvs ):
var newImg:Image = new Image();
newImg.x = drpCvs.contentMouseX - e.dragSource.dataForFormat( 'drgXY' ).x;
newImg.y = drpCvs.contentMouseY - e.dragSource.dataForFormat( 'drgXY' ).y;
I found this while looking for a way to get rid of the shrink animation, so thanks for that. Thought I'd RTF.
If you just want to prevent the animation, the easiest (hackiest) way is this: create you're own proxy and add a MOUSE_UP handler to the stage that when triggered sets the visible property of your proxy to false. It won't actually stop the animation, it will just hide the proxy while the animation is happening. Something like this:
var proxy:UIComponent = new UIComponent();
proxy.graphics.lineStyle(1);
proxy.graphics.beginFill(0xccddff);
proxy.graphics.drawRect(0, 0, main.width, main.height);
stage.addEventListener(MouseEvent.MOUSE_UP, function (e:MouseEvent):void {
proxy.visible = false;
});
#ykessler: Thank you, the monkey patch worked like a charm. SDK: DragProxy.as
#Alvaro: I believe this approach results in a race condition. I tried it, and it only worked sometimes.
Setting
event.dragInitiator.visible = false;
in the drag drop handler works for me!
My solution to turn off the animation, was to set visible=0 onMouseUp in my custom ListItemDragProxy component.
My solution is to remove the MouseUp-Handler on SandboxRoot and attach an own MouseUp-Handler in dragEnterHandler of the target like this:
protected function dragEnterHandler(event:DragEvent):void{
DragManager.acceptDragDrop(this);
this.dragProxy = DragManager.mx_internal::dragProxy;// get drag proxy
var sm:ISystemManager = event.dragInitiator.systemManager.topLevelSystemManager as ISystemManager;
var ed:IEventDispatcher = sm.getSandboxRoot();
this.sandboxRoot = sm.getSandboxRoot();
//remove
ed.removeEventListener(MouseEvent.MOUSE_UP, dragProxy.mouseUpHandler, true);
//attach own
ed.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);
ed.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
this.dragInitiator = event.dragInitiator;}
In mouseUpHandler I've implemented the copy of function mouseUpHandler from original DragProxy.as and removed the Drop-Effect.