Hide and show the Toolbar according to the scrolling - codenameone

This question is referring to Codename One only.
I need to make the Toolbar of a Codename One Form moving as shown in this video:
https://www.informatica-libera.net/videoLavoro/hideShowToolbarOnScrolling.mp4
As you can see, the scroll up causes the Toolbar to gradually disappear, while the scroll down causes the Toolbar to gradually reappear.
A solution like https://stackoverflow.com/a/55856590 is not applicable because I don't need to change the UIID of the Toolbar, but I need to move the Toolbar up and down during the scroll, to get the same effect shown in the video.

This is the approach we took in the whatsapp clone application for toolbar as that's the exact behavior of whatsapp. There is more to it but this block contains most of the logic that implements this:
private void bindFolding(Container titleArea, int titleHeight,
Container... scrollables) {
addPointerReleasedListener(e -> {
if(titleArea.getHeight() != titleHeight &&
titleArea.getHeight() != 0) {
if(titleHeight - titleArea.getHeight() > titleHeight / 2) {
titleArea.setPreferredSize(null);
} else {
titleArea.setPreferredH(0);
}
titleArea.getParent().animateLayout(100);
}
});
for(Container c : scrollables) {
c.addScrollListener((scrollX, scrollY, oldscrollX,
oldscrollY) -> {
// special case for tensile drag
if(scrollY <= 10) {
titleArea.setPreferredSize(null);
return;
}
int diff = oldscrollY - scrollY;
if(diff > 0) {
if(titleArea.getHeight() < titleHeight) {
titleArea.setPreferredH(Math.min(titleHeight,
titleArea.getPreferredH() + diff));
titleArea.setHeight(titleArea.getPreferredH());
titleArea.getParent().revalidate();
}
} else {
if(diff < 0) {
if(titleArea.getHeight() > 0) {
titleArea.setPreferredH(Math.max(0,
titleArea.getPreferredH() + diff));
titleArea.setHeight(titleArea.getPreferredH());
titleArea.getParent().revalidate();
}
}
}
});
}
}

Related

how to set max resolution for each features in openlayers3

Hello i am trying to do different styles for different features and i got and working fine,now i want to set different resolution for different features.I tried doing this way but not working.Can u please Help this?
style: function (feature, resolution) {
//var test = (resolution >= 200) ? (feature.get('class') === 'xx') : '';
//resolution: test;
if (feature.get('class') === '---') {
max Resolution: 100;
return style1;
}
else if (feature.get('class') === 'xx')
{
return Style2;
}
else if (feature.get('class') === '---')
{
return style3;
}
else if(feature.get('class')==='ii')
{
return style4;
}
else if(feature.get('class')==='mm')
{
return style5;
}
},
You should be able to resolve this with simple boolean logic. Something like this:
style: function(feature, resolution) {
var class = feature.get('class');
if (resolution >= 200) {
if (class == 'xx') {
return style200xx;
} else if (class == 'xy') {
return style200xy;
}
} else if (resolution < 200) {
if (class == 'xx') {
return style0xx;
} else if (class == 'xy') {
return style0xy;
}
}
}
If you have many different cases, it might make sense to define a separate ol.layer.Vector for each resolution range, and use the same source for all layers. Inside the style functions, you will then only have to handle the feature class.

resizing of main content and left navigation automatically

I am trying to implement resizing functionality of main content and left navigation automatically from existing application.. I have copied their html's and js's/css's... but while trying to render I am getting this issue.. any idea?
My code below, I am getting error in ,
$("#history").css("left",$("#header-item-history").position().left-80);
error is,
Uncaught TypeError: Cannot read property 'left' of undefined
function resizeHandler() {
$("#history").css("left",$("#header-item-history").position().left-80);
$("#history").css("height","auto");
if($("#history").height()>($(document).height()-100)) {
$("#history").css("height",$(document).height()-100);
}
$("#content").css("height",$(window).height()-50);
$("#content-scroll").css("height",$("#content-scroll").parent().height()-50);
$("#header-right").width($(document).width() - $("#header-item-history").position().left - 50);
if($("#header-right").width()<300) {
$("#header-logged-in-name").css("display","none");
} else {
$("#header-logged-in-name").css("display","inline-block");
}
/* PROCESS BOX POSITIONING */
$(".process-wrapper").each(function() {
$(this).css("width",$(this).parent().width()-0);
});
// find best fit for width
var processWrapperWidth = $(".process-wrapper").parent().width();
if(processWrapperWidth<1200) {
processBoxesVisible = 3;
} else if(processWrapperWidth<1500) {
processBoxesVisible = 4;
} else if(processWrapperWidth>=1500) {
processBoxesVisible = 5;
}
processWidth = ($(".process-wrapper").width()/processBoxesVisible)-3;
$(".process").css("width",processWidth);
$(".process-scroll").css("margin-left",0-((processWidth+5) * (processPosition - 1)));
pushEnoughBoxesToFitWidth();
updateProcessBoxTracker();
/***************************/
contentScroll.reinitialise();
}

How To Make Scroll In Unity Game?

I am working on a game. I want a pop up Having 12 Buttons. When the Pop Up is appeared it has 6 GUI buttons and 6 buttons (down) in scroll. How Should I do that In Same Pop up with out NGUI Plugin?
I used this logic for that
if(Input.touchCount>0)
{
if(Input.GetTouch(0).phase==TouchPhase.Began)
{
dist=0f;
tm=0f;
speed=0f;
}
if(Input.GetTouch(0).phase==TouchPhase.Moved)
{
scrollPosition.y+=Input.GetTouch(0).deltaPosition.y;
dist+=Input.GetTouch(0).deltaPosition.y;
tm+=Time.deltaTime;
}
if(Input.GetTouch(0).phase==TouchPhase.Stationary)
{
dist=0f;
tm=0f;
}
if(Input.GetTouch(0).phase==TouchPhase.Ended)
{
if(tm>0)
speed=dist*0.01f/tm;
else
speed=0f;
}
}
else
{
if(speed>0)
{
speed-=moveValue;
}
else if(speed<0)
{
speed+=moveValue;
}
if(speed>-moveValue && speed<moveValue)
speed=0f;
scrollPosition.y+=speed;
}
And inside OnGUI ()
scrollPosition = GUI.BeginScrollView (new Rect (0f,150f,800f,480f),scrollPosition, new Rect (0f, 0f, 800f, 400f));
Use your own Rect coordinates. Also refer docs

How to detect if the surface keyboard is attached?

I need to implement certain functions only when the keyboard is attached to the surface. Is there a way I can detect when the surface keyboard is attached or removed ?
I tried this code on Surface:
function getKeyboardCapabilities()
{
var keyboardCapabilities = new Windows.Devices.Input.KeyboardCapabilities();
console.log(keyboardCapabilities.keyboardPresent);
}
The result was always '1' even when the keyboard was not connected.
I used this code to identify when a keyboard is connected to a Surface:
var keyboardWatcher = (function () {
// private
var keyboardState = false;
var watcher = Windows.Devices.Enumeration.DeviceInformation.createWatcher();
watcher.addEventListener("added", function (devUpdate) {
// GUID_DEVINTERFACE_KEYBOARD
if ((devUpdate.id.indexOf('{884b96c3-56ef-11d1-bc8c-00a0c91405dd}') != -1) && (devUpdate.id.indexOf('MSHW0007') == -1) ) {
if (devUpdate.properties['System.Devices.InterfaceEnabled'] == true) {
// keyboard is connected
keyboardState = true;
}
}
});
watcher.addEventListener("updated", function (devUpdate) {
if (devUpdate.id.indexOf('{884b96c3-56ef-11d1-bc8c-00a0c91405dd}') != -1) {
if (devUpdate.properties['System.Devices.InterfaceEnabled']) {
// keyboard is connected
keyboardState = true;
}
else {
// keyboard disconnected
keyboardState = false;
}
}
});
watcher.start();
// public
return {
isAttached: function () {
return keyboardState;
}
}
})();
Then call KeyboardWatcher.isAttached() whenever you need to check the status of the keyboard.
I could not find a good way to detect if a keyboard is attached so instead I detect if I am in tablet mode or desktop mode.
bool bIsDesktop = false;
var uiMode = UIViewSettings.GetForCurrentView().UserInteractionMode;
if (uiMode == Windows.UI.ViewManagement.UserInteractionMode.Mouse) // Typical of Desktop
bIsDesktop = true;
Note the other possible value of uiMode is Windows.UI.ViewManagement.UserInteractionMode.Touch.

Toggling a boolean, i just dont get it

Im trying to create a menu. When i click on home, i want my home_text to fade in and when i click portfolio i want my home text to fadeout and my portfolio text to fade in:
var home:Boolean = false;
home.addEventListener(MouseEvent.MOUSE_DOWN, homeButton_ON);
function homeButton_ON(event: MouseEvent):void
{
home = true;
display();
}
function display(event: MouseEvent):void
{
if (home = true)
{
TweenLite.to(home_text, 1, {alpha:1});
TweenLite.to(portfolio_text, 1, {alpha:0});
}
else if (portfolio = true)
{
TweenLite.to(home_text, 1, {alpha:0});
TweenLite.to(portfolio_text, 1, {alpha:1});
}
}
Actionscript (like most, if not every, other language) requires a comparison to be == so your code is actually assigning.
Instead do:
else if (portfolio == true)

Resources