Page 1 of 3

SlideView - Revealing Backpanels

Posted: Thu Sep 05, 2013 12:04 am
by endernafi
Hello Dear LiveCoders,

As you know, some paradigms get wide-spread attention regarding mobile app design.
One of them is slide view concept as seen in many apps like Path or Huffington Post.
You're familiar with it, swipe sideways and a panel reveals as it's underneath the main content.
It's very useful to overcome the limitations of a handheld device's restricted screen-estate.

For an in-depth review of the concept, please check out Ken's post:
http://kenyarmosh.com/ios-pattern-slide-out-navigation/

I don't know if anybody here has already developed an app using this style.
Anyways, I was coveting this for a long time and decided to roll up my sleeves.

Here is the result:
slideView.zip
(67.9 KiB) Downloaded 375 times
As always, it's totally free to use in commercial or non-commercial projects;
free as in freedom and free as in free beer 8)

EDIT:
~~~
Folks; this is an old, messy and buggy code.
Don't bother with downloading it.
Try the newer one, a couple of posts later below.
I can't claim that it's bug-free but it should work better compared to this.
~~~
s1.jpg
s1.jpg (10.55 KiB) Viewed 11463 times
s2.jpg
s2.jpg (10.25 KiB) Viewed 11463 times

Best,

~ Ender Nafi

Re: SlideView - Revealing Backpanels

Posted: Thu Sep 05, 2013 11:34 am
by MarcVanCauwenberghe
Great stuff!

Thank you very much.

Marc

Re: SlideView - Revealing Backpanels

Posted: Sun Sep 08, 2013 4:52 pm
by lgoin
Hey Ender... Thanks for the post and sharing! I'm inspired to try this out!!
Laura

Re: SlideView - Revealing Backpanels

Posted: Sat Feb 01, 2014 12:00 pm
by monikadhingra
Hi Eder,
Please confirm we are able to use same code for android also ?

Re: SlideView - Revealing Backpanels

Posted: Sat Feb 01, 2014 4:08 pm
by endernafi
Laura, Marc; thank you for your kind words.

Monika;
There isn't any iOS-specific code in it.
So, it should work in Android, too.
But I didn't test.

Btw, that was a messy script and had many bugs.
Try this one instead:
slideView.zip
(85.54 KiB) Downloaded 268 times
This has considerably less lines of code {700+ vs. 200+}
and it's far more simple.
That means you can adopt it into your own project more easily.

Edit:
Some improvements, see the changes in the stack script's comment or in this post.
slideView__14_2_2.zip
(234.77 KiB) Downloaded 414 times

Best,

~ Ender Nafi

Re: SlideView - Revealing Backpanels

Posted: Sun Feb 02, 2014 12:08 pm
by Jellicle
endernafi wrote: Try this one instead:
Elegant work, Ender, as usual. One comment - I imagine most use cases for this would call for only one direction (left to right), not both directions. Can you make a version (or have a flag set by the developer) to restrict this to one direction only?

Gerry

Re: SlideView - Revealing Backpanels

Posted: Sun Feb 02, 2014 2:20 pm
by jmburnod
hi Ender,

I played with slideView. Simple and elegant.
I feel strange when I do a mouserelease with a btn "GoPage"

All the best
Jean-Marc

Re: SlideView - Revealing Backpanels

Posted: Sun Feb 02, 2014 8:08 pm
by endernafi
I've made some changes to the stack and added it into the original post to keep the different versions together.
If you find any bugs or have ideas for improvement, feel free to tell me; I'll do my best.
Here are the major changes:

1.
Jellicle wrote:Can you make a version (or have a flag set by the developer) to restrict this to one direction only?
Thanks for the suggestion Gerry.
I've added 2 variables to determine the active status of the panels.
The developer can now alter their values in the flow of the app, at start or using custom properties; whichever suits the needs of the particular project.

2.
jmburnod wrote:I feel strange when I do a mouserelease with a btn "GoPage"
Thanks for reminding that Jean-Marc.
mouseRelease was triggering mouseUp just to be fail-safe;
but it didn't occurred to me that this behavior will rise a confusion and it's bad design when dealing with active controls.
So, I excluded the panels' controls.
In an actual project, other controls {new buttons, switches, ...} should be excluded, too.

3.
Adding a drop shadow to the sliding view was dropping the performance significantly, even causing crashes on older devices.
So, I removed the effects and replaced the background images with newer ones.
Those have static shadows added via Photoshop.
But, that complicated the calculations and the code is less simple now, sorry for that.


Best,

~ Ender

Re: SlideView - Revealing Backpanels

Posted: Tue Jul 08, 2014 4:29 pm
by dandun
Just wanted to bring to your attention that when I downloaded the latest version of this; when I opened this in LiveCode I received the following error:

_compiling at 11:13:35 AM
Type_Expression: missing ')' before factor
Object_slideView
Line_put (the left of pageContent _ -(glowOffset)) into isPanelVisible
Hint__


this script is the one referenced

put (the left of pageContent _ -(glowOffset)) into isPanelVisible
put false into slidePermission
put the mouseH,the left of pageContent,the milliseconds into slideParams
end mouseDown

Re: SlideView - Revealing Backpanels

Posted: Tue Jul 08, 2014 4:40 pm
by Klaus
HI dandun,

Code: Select all

put (the left of pageContent _ -(glowOffset)) into isPanelVisible
Remoe the orphaned underscore and try again:

Code: Select all

put (the left of pageContent - (glowOffset)) into isPanelVisible

Best

Klaus

Re: SlideView - Revealing Backpanels

Posted: Tue Jul 08, 2014 8:35 pm
by endernafi
Hi dandun,

The original script is as follows:
put (the left of pageContent ≠ -(glowOffset)) into isPanelVisible
But that *notEqual* sign might be not recognized by some systems and/or configurations.

Please replace it with this: <>,
then the whole line will look as follows:

Code: Select all

put (the left of pageContent <> -(glowOffset)) into isPanelVisible
P.S.: Klaus, nice guess 8)

Best,

~ Ender

Re: SlideView - Revealing Backpanels

Posted: Tue Jul 08, 2014 8:49 pm
by Klaus
AHA! :D

Your message contains 7 characters. The minimum number of characters you need to enter is 10.

Re: SlideView - Revealing Backpanels

Posted: Tue Sep 16, 2014 2:08 am
by dandun
Hi Ender,

Thank you again for the slideview template, Even though I am still a newbie, I find this works great for my project.

I have what I think (hope) is a simple question, but can’t figure out the solution on my own.
In the few cases where I want a card on the main stack or utilizing a one from a substack (i.e modal card) that does not have the slider, I get the following error when opening the card:

stack "slideView": execution error at line 52 (Chunk: no such object) near "theSettings", char 20

Is there script I can add to the preopen card to remove this error?

Thanks in advance!
Dan

Re: SlideView - Revealing Backpanels

Posted: Tue Sep 16, 2014 8:14 am
by endernafi
Hi Dan,

Thanks for your kind words.

Since, this is merely a sample and I wanted to keep things as simple as I can, I didn't put control statements to deal with errors like that.
There are a couple of things you can do:

* Check every and each line of script if that particular control which I'd refer does exist:

Code: Select all

if exists(button "theSettings") then put the width of button "theSettings" - screenWidth into anchorLeft
* Update the names of controls to fit to your project.
For example, do you use "theSettings" as the name for your topRight hand button? If not, fix it.


* Create a custom property for your card to check whether it uses the panels or not:

Code: Select all

on preOpenCard

    if the cShouldUsePanels of this card is "NO" then exit preOpenCard

    ...
    ..
    .
end preOpenCard

* Remove all size references from buttons.
Change this:

Code: Select all

put the width of button "theSettings" - screenWidth into anchorLeft
put screenWidth - the width of button "thePageNav" into anchorRight
To something like this:

Code: Select all

put round(screenWidth / 16) into anchorLeft
put anchorLeft into anchorRight


Hope it helps...

Best,

~ Ender

Re: SlideView - Revealing Backpanels

Posted: Tue Sep 16, 2014 2:40 pm
by dandun
Ender, that is great!, thank you for the help!!

Dan