Codename One: Strange toolbar animation on form change - codenameone

Since adding a global Toolbar to the forms there is a strange animation bug (?) when changing forms. At hitting a Button at FormA that will invoke FormB.show() the title has an animation the lets the new form stutter in the toolbar area from the right to the left. After googling I found this:
This is pretty much the problem I face at the toolbar, only difference is the toolbar Logo I added to the center is stuttering from the right to the left to its place. After the animation is done, the form looks just like it should.
In the main I do this:
Toolbar.setGlobalToolbar(true);
In every Form I do something like this in the constructor:
menuForm = new Form(" ", new BorderLayout());
logo = res_theme.getImage("Logo_Gema_vertikal.png");
menuForm.getToolbar().getTitleComponent().setUIID("toolbar_image");
((Label)menuForm.getToolbar().getTitleComponent()).setIcon(logo);
menuForm.getToolbar().addCommandToSideMenu(homeCommand);
menuForm.getToolbar().getMenuBar().addCommand(homeCommand);
If I leave out adding the logo to the toolbar, only the Command Icons are flying from the right to the left. What is causing this? Am I using the toolbar wrong?

From your question, it's due to using the default animation which is createSlideFadeTitle. You can solve this by changing the animation of the current form and the destination form to either createCover or createSlide:
In the current form:
currentForm.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 300));
nextForm.show();
And in the destination form:
nextForm.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 300));
currentForm.showBack();

Related

How to cover two overlapping components with a mask in Sencha ExtJS?

In Sencha, I'm able to mask a background component and bring up a dialog component nicely by calling this.view.mask() on the background component.
Then when I press "Submit" on the top dialog, I want to have a mask cover the dialog and background component all together instead of just masking the smaller dialog box. I don't want to just mask the dialog box, because even though the background is masked too, the dialog box's border is still obviously bright.
How can I mask both components all together?
On the dialog box I tried this.view.mask("Loading..."), but only the small dialog box is masked. Its border is still clearly bright so it's clear we're just putting a mask on the small dialog box rather than on the whole page.
I tried querying the background component via view=Ext.ComponentQuery.query('MyComponent')[0] and then using view.mask("Loading"), but this only adds the mask to that background component.
This is an ugly solution, but it worked for me. Tested on 7.0.0
var wnd = Ext.getCmp('window'), // just an example - Ext.getCmp() use is frowned upon :)
wndSize = wnd.getSize(),
myMask;
myMask = new Ext.LoadMask({
msg : 'Please wait...',
target : wnd,
height: wndSize.height,
width: wndSize.width
});
myMask.show().setXY(wnd.getXY());

Codename One: Style Toolbar with Image

In my app, I can't figure out how to properly style the toolbar with my logo image.
What I want to make it look like is pretty much like the Toolbar from the "Sport1" App.
Example
So I need the back Command on the left side of the toolbar, my logo in the middle from a MultiImage out of the resource and on the right another command.
Also, I'd like to let the Toolbar get smaller with scrolling.
What I have tried so far:
res_theme = r;
Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
logo = res_theme.getImage("Logo_Gema_vertikal.png");
f.getToolbar().getTitleComponent().setUIID("toolbar_image");
Style stitle = f.getToolbar().getStyle();
stitle.setBgTransparency(0);
stitle.setBgImage(logo);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(5);
So, this looks good the way it is. I dont actually need a Title, thats why I do
Form f = (" ", ...);
If I don't add a title to the form, the toolbar gets very small and squeezes the background Image from the toolbar. The centered logo from the toolbar is just for styling reasons there, it does not need to have a command. Is there a way to leave out the Title? I now have set it to completely transparent, but for me this is just a work-around.
Also, I guess rather than setting the logo as background with a centered alignment, I think it would be better to add it to the title section as Image, but I don't know if this is better or how to do it.
Now, I also want to make the Toolbar get smaller when scrolling down. I found kind of a example code in the Codename One Toolbar Documentation, but it does not work out for me, since the background Image gets removed.
This was the code for the scrolling Animation:
ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
f.getAnimationManager().onTitleScrollAnimation(title);
In the example, it worked. With my toolbar it does not, I have no clue why. I also can't see, where the size of the "after scrolling toolbar" is set.
Can I add there an Image as well? Kinda like one toolbar before scrolling with my logo, then while scrolling it transforms into a smaller one with only a textlogo image?
Here is my whole code what I have tried to make it work:
Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
logo = res_theme.getImage("Logo_Gema_vertikal.png");
f.getToolbar().getTitleComponent().setUIID("toolbar_image");
Style stitle = f.getToolbar().getStyle();
stitle.setBgTransparency(0);
stitle.setBgImage(logo);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(5);
f.add(new SpanLabel("asdasdasdasd");
ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
f.getAnimationManager().onTitleScrollAnimation(title);
f.show();
From the example above if looks like you just want to use the image as the title instead of styling the toolbar with a background image.
Just use ((Label)toolbar.getTitleComponent()).setIcon(myImage);.

How to use slide transition for images on the same form in codename one

Pls how can i use slide transition for Images on the same Form?
I used this code, but it shows and error
Label lab = new Label();
lab.setUIID("IMAGE");
lab.setTransitionOutAnimator(CommonTransitions.createSlideFadeTitle(true,duration.getAsInt(3000)));
pls how do I go about this. Thanks
You need to use slide. Slide fade is a special transition designed for forms and is used in iOS to fade the title while sliding.
The way to animate a components entrance/exit is to replace it e.g.:
parentContainer.replace(currentComponent, newComponent, CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, true, 400);

How can I rebuild Form Component in Codename One

I'm trying to create Custom Form configuration with scrollable TitleArea. The Form (black) has a BoxLayout.Y_AXIS Layout in BorderLayout.CENTER (blue). StatusBar (green) stays in BorderLayout.NORTH (green), when rest of the TitleArea (cyan) is in the first position in BoxLayout.
removeComponentFromForm function is unavailable for using in extended class. How can I remove components from Form to removing titleArea from BorderLayout.NORTH?
Why use the title area at all? Why not just add a component to the top of the box layout Y and style it as a Title that way you can scroll it out?
You can also use the new Toolbar API that includes many abilities to fade out the title as you scroll etc. See:
http://www.codenameone.com/blog/toolbar.html
http://www.codenameone.com/blog/cats-in-toolbars.html

Combined Draggable, Resizeable and Aloha Editor ExtJS component

I am trying to create an Ext.Component, that I can use with Draggable, Resizable, Float and Aloha Editor.
Currently I have tried:
afterRender: function(me) {
Aloha.jQuery('#' + me.myId).aloha();
document.getElementById(me.myId).setAttribute("draggable", true);
}
This one doesn't allow it to be draggable, but edit works.
Aloha.jQuery('#' + me.myId).aloha();
draggable: true,
resizeable: true,
float: true
This one allows it to be re-sized and dragged around, however it aloha doesn't work, therefor it is not editable.
Aloha.jQuery('#' + me.myId).draggable();
Aloha.jQuery('#' + me.myId).aloha();
Again this one allows for editing but not dragging.
It seems like the moment the handles come on for a resize or drag event the aloha editor stops working, however if there are no handles the drag and resize stop working. Is there any advice, or has anyone encountered this before?
To Solve this, I did a Move Handler, HTML5 Style:
http://www.w3schools.com/html/html5_draganddrop.asp
And made my main canvas the drop area.
Next I added a small div inside the component which is editable.
and was able to make that div aloha. Then the default resizer works as long as you make the edges transparent.

Resources