Hover on SmartGWT FormItem title - hover

How to hover on or how to control hover on exactly the FormItem title in SmartGWT?
I am trying to show text on hovering on FormItem title, but the hover is starting in the blank spaces of the formitem rather than on the title. Clueless about as to how to hover exactly on the formitem title.
Thanks a lot for the response, below is the code I am working on :
String fieldDesc = detailsRecord.getAttribute("ATTR_LANG_DESC");
String example = detailsRecord.getAttribute("ATTR_LANG_EX_CNT");
String network = detailsRecord.getAttribute("PUBLICATION_TYPE");
String gdsnName = detailsRecord.getAttribute("ATTR_GDSN_NAME");
String INFOTEXT = "";
INFOTEXT = "<span><b>Definition: </b>"+fieldDesc+"</span>"+
"<span><br/><br><b>GDSN Tag: </b>"+gdsnName+"</span>"+
"<span><br/><br><b>Example: </b>"+example+"</span>";
//if network is not empty
if(network!=null && !network.equals(EMPTY_STRING)){
INFOTEXT= INFOTEXT+"<span><br/><br/><b>Network: </b>"+network+"</span>";
}
formItem.setHoverWidth(450);
formItem.setHoverHeight(50);
final String INFOTEXT_FINAL = INFOTEXT;
formItem.setItemTitleHoverFormatter(new FormItemHoverFormatter() {
public String getHoverHTML(FormItem item, DynamicForm form) {
// TODO Auto-generated method stub
return INFOTEXT_FINAL;
}
});
Here I am trying to hover just on Item title but this is not working. Please find the screen shot to get a better idea as to what I mean to convey.
As you can see from the picture the hover is occurs in the empty spaces of the InfoProvider field. I need to make it exactly on the FormItem title, please let me know if I am clear. Thank you.

I think what the problem is that the FormItem canvas is much bigger than it looks. So when you create formItem for infoProvider and add it to the overlay, the canvas extends the entire width of the overlay, with the title using the first space.
If you really only want to see the 'hover' over the title text, I think one solution would be to use a Label that is exactly as wide as the title text and to turn the formItem's title off(setShowTitle(false)). You could then use SpacerItems or tweak the layout so that it still looks the same.

Related

scala.swing: Trying to scale images to window size, but size returns 0

It should probably go without saying, but I'm fairly new to swing.
I'm trying to make a simple little thing which will display two images side by side, as large as the window will allow.
In theory what happening is:
We get an imageIcon, in this case 001.jpg.
We figure out the ratio of width/height of the imageIcon.
We turn the imageIcon into an image.
We turn that image into a new correctly sized image.
We turn that image back into an image icon.
This all breaks down because the only way I've found to get the window size is size, but that keeps returning 0s.
This is the code I have right now:
class UI extends MainFrame {
title = "Matt's window header"
preferredSize = new Dimension(1920, 1080)
var imageIcon = new ImageIcon("001.jpg")
val imgRatio = imageIcon.getIconWidth.toDouble / imageIcon.getIconHeight.toDouble
println(size)
pack()
println(imgRatio)
val image = imageIcon.getImage()
val newimg = image.getScaledInstance(size.width, (size.width * imgRatio.toInt), java.awt.Image.SCALE_SMOOTH)
imageIcon = new ImageIcon(newimg)
contents = new Label {
icon = imageIcon
}
}
As an aside, it would be great if someone could give me info about how to load a different image, instead of just 001.jpg.
sizeis not determined at the point you are accessing it.
However, preferredSizeis. If you add println(preferredSize) you will get the Dimensions you just set.

The best method to create typewriter effect?

Hey everyone so I am creating a game that focuses on character to character interactivity. So when you interact with a character a chat box opens and the characters start talking to one another. I have the text setup like an old school typewriter effect one letter at a time. As of now I create it by typing each letter on separate frames and have them play through. When it gets to then end of the sentence in order for the user to go on to the next sentence I have a button that they tap Here is the code:
private function nextConvo(e:MouseEvent):void
{
nNext += 1;
trace(nNext);
if (nNext == 1)
{
conversation.gotoAndPlay(1);
}else
if (nNext == 2)
{
conversation.gotoAndPlay(117);
}
}
As you can see i set it up to play the next frame with the new conversation so on and so on. I have a lot more text to do I realized it will be really time consuming and wonder if there is a easier way.
A method to where it types the string in the text box and I can still use my button so when the user wants to see the next conversation they can press the next button.
I saw a video here of someone showing the code way of doing it but Not sure how I would implement the button without having to add a lot of new mouse listeners and timers. Code Method
Please any help would be appreciated.
Omg, yes, you will go nuts if you show one character per frame :)
The idea is to have a function to handle this for you that you have ONCE somewhere (for example, on your main timeline). Then you can call it from everywhere and just pass the text, textfield to type into and a button.
private var _myText:String;
private var _myTextField:TextField;
private var _myButton:Button;
private var _currentCharacterPosition:int;
public function typeText(text:String, myTextField:TextField myButton:Button):void
{
_myText = text;
_myTextField = myTextField;
_myButton = myButton;
_myButton.visible = false;
_currentCharacterPosition = 1;
typeNextCharacter();
}
private function typeNextCharacter():void
{
_myTextField.text = _myText.substr(0, _currentCharacterPosition);
if (_currentCharacterPosition == _myText.length)
{
// all text is typed out, show your button
myButton.visible = true;
}
else
{
// type next character. 0.2 is the delay between letters (200 ms)
_currentCharacterPosition++;
setTimeout(typeNextCharacter, 0.2);
}
}
Assuming you have the textfield and button in the same place (same frame), you could then do this in that frame:
_root.typeText("This is my text to type out", myTextField, myButton);

Blinking Caret Not Showing up in Input Text Field

I want one of my input text boxes to be the stage focus as well as have the blinking caret without the user needing to click inside the text field. I've been searching around frantically for an answer to this question, and everyone's answer boils down to this code: (the instance name of the text field being "input")
stage.focus = input;
input.setSelection(0, input.text.length);
But for some reason this code isn't working for me. Anyone have any idea why?
Update
For some reason this works:
stage.addEventListener(MouseEvent.CLICK,update);
function update(e:MouseEvent){
stage.focus = input;
}
And this does as well but the caret doesn't blink:
var counter:int=0;
stage.addEventListener(Event.ENTER_FRAME,update);
function update(e:Event){
counter++;
if(counter>30){
stage.focus = input;
}
}
This still doesn't satisfy my question though, why do you need a mouse click of some type in order to make my desired action work properly?
1.. How about if you set focus to happen inside a mouseClick function?
2.. Try this
stage.focus = input;
input.text = " "; //with a space (for blank but not empty);
input.setSelection(0, input.text.length);
3.. Bail out scenario then this utility might help or at least you'll learn something from its code Link here

FLVPlaybackCaptioning + Custom position

Using FLVPlayback Captioning component I would like to move the subtitle text at certain parts in y-position. Is this possible in AS3?
All of my own custom arguments are ignored when subtitles are parsed and wrapping the specific part with some sort of character won't do it either as I cannot change the text during runtime.
The reason is that in my videostreams there is boxes with text content that I don't want the subtitle on top of, and rather above for reading purposes.
I was thinking of either doing an own manual subtitle function or custom flash cuepoints that I can access but want to know if anyone has done this before.
Something like this will do it. I found out that autoLayout was over overridden by the subtitle xml so I forced it to false every "change".
public function Init() : void
{
// captions
_captions = new FLVPlaybackCaptioning();
_captions.autoLayout = false;
_captions.flvPlayback = _video;
_captions.addEventListener(CaptionChangeEvent.CAPTION_CHANGE, onCaptionChange);
_captions.source = "mySubs.xml";
addChild(_captions);
}
private function onCaptionChange(pEvent : CaptionChangeEvent) : void
{
if(!_captions.captionTarget)
return;
_captions.autoLayout = false; // force autoLayout
_captions.captionTarget.y = 666; // position of choice
}

Is there a way to keep an object always at the top of the display list?

Is there a way to make a display object always be at the top of the display list?
For example, I know you can set the childIndex, i.e:
setChildIndex(myDisplayObject, numChildren-1);
But is there a way that an object has sensed that something else has been added to the display list and restack themselves accordingly?
You can listen to the Event.ADDED event on the container. This event will bubble up, so you'll get called whenever a display object is added to the container or any of its children.
Here's an example of how you could do this. You'll see the black box always stays on top.
var container:DisplayObjectContainer = this; // this is a frame script but just change this line as necessary
container.addEventListener(Event.ADDED,handleAdded,true);
function handleAdded(e:Event):void {
// this if tries to cover some edge cases, unlikely to happen in your code, from your description
if(container == topElement.parent && container.numChildren > 0 && container.getChildIndex(topElement) != container.numChildren - 1) {
container.setChildIndex(topElement,numChildren - 1);
}
}
function getSprite(c:uint):Sprite {
var sp:Sprite = new Sprite();
sp.graphics.beginFill(c);
sp.graphics.drawRect(0,0,100,100);
sp.graphics.endFill();
return sp;
}
var topElement:Sprite = getSprite(0);
container.addChild(topElement);
var sp:Sprite = getSprite(0xff0000);
container.addChild(sp);
sp.addChild(getSprite(0xff00));
var sp2:Sprite = getSprite(0xff);
container.addChild(sp2);
However, I think it's much simpler and cleaner just to have 2 containers, say, top and bottom, kind of like layers. In top you'd add the element that always must be on top (or this could be your element as you probably don't need to have this extra container). In bottom you'd add and remove whatever you want. Then you can forget about manually restacking stuff (at least to keep the top element atop).
You can override the addChild() method in the parent object. In that method you can move your child to the top using
setChildIndex(myDisplayObject, numChildren-1);
In this way everytime an object is added to the parent, the parent moves your object to the top.