SlideView - Revealing Backpanels

[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 811 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

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 (10.55 KiB) Viewed 23085 times

s2.jpg (10.25 KiB) Viewed 23085 times

Best,

~ Ender Nafi

[MarcVanCauwenberghe]

Great stuff!

Thank you very much.

Marc

[lgoin]

Hey Ender... Thanks for the post and sharing! I'm inspired to try this out!!
Laura

[monikadhingra]

Hi Eder,
Please confirm we are able to use same code for android also ?

[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 669 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 874 times

Best,

~ Ender Nafi

[Jellicle]

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

[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

[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.

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.

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

[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

[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

[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

Best,

~ Ender

[Klaus]

AHA!

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

[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

[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

[dandun]

Ender, that is great!, thank you for the help!!

Dan