SlideView - Revealing Backpanels

Getting into LiveCode for iOS? Ask your questions here.

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

endernafi
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 296
Joined: Wed May 02, 2012 12:23 pm
Location: New York
Contact:

SlideView - Revealing Backpanels

Post by endernafi » Thu Sep 05, 2013 12:04 am

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 381 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 11682 times
s2.jpg
s2.jpg (10.25 KiB) Viewed 11682 times

Best,

~ Ender Nafi
Last edited by endernafi on Sat Feb 01, 2014 4:26 pm, edited 2 times in total.
~... together, we're smarter ...~
__________________________________________

macOS Sierra • LiveCode 7 & xCode 8

MarcVanCauwenberghe
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 142
Joined: Thu Feb 21, 2013 8:47 am

Re: SlideView - Revealing Backpanels

Post by MarcVanCauwenberghe » Thu Sep 05, 2013 11:34 am

Great stuff!

Thank you very much.

Marc

lgoin
Posts: 26
Joined: Mon May 09, 2011 3:01 pm

Re: SlideView - Revealing Backpanels

Post by lgoin » Sun Sep 08, 2013 4:52 pm

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

monikadhingra
Posts: 19
Joined: Fri Dec 13, 2013 6:15 am

Re: SlideView - Revealing Backpanels

Post by monikadhingra » Sat Feb 01, 2014 12:00 pm

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

endernafi
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 296
Joined: Wed May 02, 2012 12:23 pm
Location: New York
Contact:

Re: SlideView - Revealing Backpanels

Post by endernafi » Sat Feb 01, 2014 4:08 pm

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 273 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 422 times

Best,

~ Ender Nafi
Last edited by endernafi on Sun Feb 02, 2014 8:13 pm, edited 1 time in total.
~... together, we're smarter ...~
__________________________________________

macOS Sierra • LiveCode 7 & xCode 8

Jellicle
Posts: 448
Joined: Thu Feb 24, 2011 11:07 am

Re: SlideView - Revealing Backpanels

Post by Jellicle » Sun Feb 02, 2014 12:08 pm

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
27" iMac, 27" Cinema Display, OS X Mavericks
iPhone 5 (plus a bunch of older devices for testing)
LiveCode Commercial license. Developer Program member.

jmburnod
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2395
Joined: Sat Dec 22, 2007 5:35 pm
Location: Genève
Contact:

Re: SlideView - Revealing Backpanels

Post by jmburnod » Sun Feb 02, 2014 2:20 pm

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
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 296
Joined: Wed May 02, 2012 12:23 pm
Location: New York
Contact:

Re: SlideView - Revealing Backpanels

Post by endernafi » Sun Feb 02, 2014 8:08 pm

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
~... together, we're smarter ...~
__________________________________________

macOS Sierra • LiveCode 7 & xCode 8

dandun
Posts: 24
Joined: Thu Apr 10, 2014 3:41 pm

Re: SlideView - Revealing Backpanels

Post by dandun » Tue Jul 08, 2014 4:29 pm

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
Posts: 11274
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: SlideView - Revealing Backpanels

Post by Klaus » Tue Jul 08, 2014 4:40 pm

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
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 296
Joined: Wed May 02, 2012 12:23 pm
Location: New York
Contact:

Re: SlideView - Revealing Backpanels

Post by endernafi » Tue Jul 08, 2014 8:35 pm

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
~... together, we're smarter ...~
__________________________________________

macOS Sierra • LiveCode 7 & xCode 8

Klaus
Posts: 11274
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: SlideView - Revealing Backpanels

Post by Klaus » Tue Jul 08, 2014 8:49 pm

AHA! :D

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

dandun
Posts: 24
Joined: Thu Apr 10, 2014 3:41 pm

Re: SlideView - Revealing Backpanels

Post by dandun » Tue Sep 16, 2014 2:08 am

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
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 296
Joined: Wed May 02, 2012 12:23 pm
Location: New York
Contact:

Re: SlideView - Revealing Backpanels

Post by endernafi » Tue Sep 16, 2014 8:14 am

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
~... together, we're smarter ...~
__________________________________________

macOS Sierra • LiveCode 7 & xCode 8

dandun
Posts: 24
Joined: Thu Apr 10, 2014 3:41 pm

Re: SlideView - Revealing Backpanels

Post by dandun » Tue Sep 16, 2014 2:40 pm

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

Dan

Post Reply

Return to “iOS Deployment”