PDA

View Full Version : JAM component installation issues



gkatz
12 Feb 2013, 8:21 AM
HI;
I am trying to use and get acquainted with JAM https://github.com/toorshia/jam
I (https://github.com/toorshia/jam) am having some install problems from the get go. I went to the github rep and downloaded the project from the master branch and installed it on my webserver.
trying to load the app yielded the following problems:
1. the sencha libraries were missing - that's ok. I droped them and passed this obsticle.
2. cordova.js was missing - went ahead and downloaded cordova-2.1.0.js (what is it anyway and why do I need it) and skipped that obsticle also.

now everything seem to load (looking at the network tab of the inspector does not show any problems) and there are no errors in the console but the app I see is some kind of a half baked app that does not work. its not the one I see on the JAM example page (https://dl.dropbox.com/u/6211055/PROJECTS/JAM/build/package/index.html)

can anyone help?
thanks.

chrisubick
12 Feb 2013, 9:57 AM
I'm having the same problem getting JAM to load in the browser. I can't see the items on the side when you slide out, and the toolbar at the top is just the one button. all I'm trying to use it for is the side out capability, I tried some others first, but this one seems like the code makes the most sense. Only, I can't get it to work...

chrisubick
12 Feb 2013, 11:50 AM
I've gotten things to show up finally. it looks like there is a problem with the setItems( ) method. To get the menu to show up I deleted the userBar from the setItems in Menu.js. And to get the home screen to show up you can delete the header from the setItems in Home.js, but this makes the header disappear.. If anyone else is trying to implement this functionality and has had more success, please let me know what I'm missing. thanks!

toorshia
12 Feb 2013, 1:32 PM
Guys, thanks for your interest in JAM.

I am just writing to tell you I care :)
Regarding your questions - I am in a vicious circle right know, working round the clock like a maniac.

I'll be back Saturday/Sunday with some help/answers.

Cheers!

gkatz
12 Feb 2013, 1:49 PM
sure thing
thanks

ingo.hefti
13 Feb 2013, 12:16 AM
I am trying to use and get acquainted with JAM https://github.com/toorshia/jam
Just for my own curiosity: I know you have been playing around with the sidemenu from wnielsen. And everybody seems to love this component. So I'm wondering what is the reason for checking out JAM now? Are there problems with the sidemenu? Thanks.

gkatz
13 Feb 2013, 12:27 AM
Actually;
there is no "real" reason. from my point of view these are the things:
- back in the day, the original component had problems in android (ICS), the sliding door had many glitches that prevented me from thinking about it as something I can take to production. in all honesty, I re-checked it a few day ago and it seems that the problem was solved :)
- JAM just seems easier to understand, its small and to the point so the learning curve is a bit better.
- in general, I have to say I did not give the original one another try recently. I am sure its good enough for my needs now and probably good docs.

ingo.hefti
13 Feb 2013, 12:43 AM
Ok. Thank you for sharing your thoughts.

chrisubick
13 Feb 2013, 11:15 AM
I'm still trying to implement JAM. My current issue is getting different panels to load in the main container. seems like it should be an easy thing, but I'm banging my head on the wall.

gkatz
18 Feb 2013, 9:09 AM
@toorshia
I (http://www.sencha.com/forum/member.php?408749-toorshia) think what we mostly need is a working github that we can DL and play with the component order to learn what you did. currently it does not seem to be the case.
many thanks.

coolfish
24 Feb 2013, 2:23 AM
I'm going to be working on this soon as well. gkatz have you tried just scraping the source offa the demo page? It works fine on there, I reckon he just forgot to push his last changes to git?

No disrespect to wneilson, but JAM is a much cleaner implementation of a sliding side menu. Plus it sounds delicious.. jam.. mmmmm.

edit - damn, looks like the live demo is offline.

gkatz
24 Feb 2013, 2:55 AM
If I recall the live demo had a minified and concatenated version so I could not get it from there. I also tried to figure out what was wrong with the code in the github myself but I just could not fix it.
I hope the author will update his github soon as I like JAM and would want to start using it as soon as i can...

coolfish
24 Feb 2013, 3:21 AM
Pitty. Will start working on it soon. Can't wait to pump up the jam.

toorshia
2 Mar 2013, 8:52 AM
Demo is back online, sorry guys.

I have this thing with changing folder names in my public dropbox from time to time, and then forgetting to update links :D

toorshia
2 Mar 2013, 9:08 AM
OK, since I see there's real trouble setting up even a basic app using just barebones I provided through GIT, I'll prepare the whole deal - small demo app that will show you how to integrate and use the menu plugin, along with changing views from menu.

Please, don't ask me questions like "how do I make app remember the last view I was on before I exited...".
This is not the goal of this plugin. You will have to code in your own logic for specific features you need, or else this plugin will end up being too complicated and not "just" app menu :)

Will be back soon, stay tuned.

coolfish
2 Mar 2013, 9:15 AM
Awesome, thanks! I've got a basic side menu going now that lets me punch through different nav views, but your implementation is much nicer. Looking forward to your next demo!

toorshia
2 Mar 2013, 6:49 PM
Well, "I've been busy" is somewhat weak term :)

It's almost 4am, I have a frog eyes, and I'm gonna crash any minute now :D

But, I have some news for all of you JAM lovers. Checkout GitHub repo. I am sure you'll find couple of sweets (apk file amongst others). Yummmmy :)

Now, make sure you copy contents of your downloaded sdk 2.0.1 to the designated folder - it is clearly marked, you won't miss it.

I've tried 2.1.1, it works, but there are some mask issues (guessing it's css related) - I'll tend to this as soon as I get some shut-eye.

Nighty.

gkatz
3 Mar 2013, 12:47 AM
well, still unusable.
the index.html points to 2.1.1 and not 2.0.1. trying to work with 2.1.1 yielded the same results as before the latest check-in (cramped components on the upper left side). I think the majority needs 2.1.1 support.
thanks for the re-factoring and putting the time to fix this but I will wait until this thing is stable enough.

toorshia
3 Mar 2013, 3:40 AM
Fixed path to SDK in index.html. This is really not a biggie man, you just needed to drop the SDK and fix this path, cmon :) Have you actually tried it with 2.0.1?

Cramped components on the upper left side - this is what I saw when trying to use old css build, from 2.0.1 sdk. I think this is solved by rebuilding scss files using defaults from 2.1.1.
I'll check this css issue once more, and try to get it right for 2.1.1 with mask and all.

Boy, you're talking like 2.1.1 is Holy Grail compared to 2.0.1 :)
I've been out of the game for a month or two - can you tell me what are the real improvements in 2.1.1?
I remember reading topic about upcoming release/ongoing issues a while back, bad scroll performance on Androids, for example, and it didn't sound they were going to fix it in 2.1.1....

gkatz
3 Mar 2013, 3:54 AM
hi;
listen, I have changed what ever I could (inc. the path to the SDK) but it did not work with 2.1.1.
I personally appreciate your work and help. however, if you put a component out and expect others to fix it up I think you are taking the wrong path.
also, it does not really matter what benefits 2.1.1 has over 2.0.1. its the principle of being able to use whatever build we developers choose and have the component work, not to mention that fact that 2.2 is just around the corner and I am aiming to use it.
just my 2 cents.
thanks.

toorshia
3 Mar 2013, 4:00 AM
Yep, the cramming issue goes away if you recompile sass files using new SDK.
That's not actually backwards-compatible, but that's Sencha's fault, not mine :D

Gonna dig into mask issue now...

gkatz
3 Mar 2013, 4:02 AM
thanks man;
I am sure everyone will appreciate it...

toorshia
3 Mar 2013, 4:19 AM
hi;
....if you put a component out and expect others to fix it up I think you are taking the wrong path.
also, it does not really matter what benefits 2.1.1 has over 2.0.1. its the principle of being able to use whatever build we developers choose...
just my 2 cents.
thanks.

First, speak for yourself, don't say "we developers" :)

Second, this doesn't sound like it's coming from a developer. I don't know you, all right.
But it sounds like it's coming from WYSIWYG user. Someone who simply wants turn-key solution.

This is open source community. I expect from you to make something better from whatever building blocks I gave you. And vice versa.

Just my 2 cents.


Now, let's not take this down the wrong path, OK?

Tell me, when you say "It doesn't work" what do you exactly mean by it?
Because it worked for me unpacked, packed, packaged into APK, and now it works on 2.1.1 with only a single css issue (active component becomes transparent when menu is open).

The only way for me to help you further is to include the goddamn 100MB sdk in the github repo to show you it works :D

I'll include 2.1.1 release soon enough.
If you decide to use it and it proves useful, then you can buy me a coffee, OK? :)

Peace.

gkatz
3 Mar 2013, 4:40 AM
sure man;
well; you can @#[email protected]#$# $%##
$%^$#@$% ...
#$#$%#$%...
[content removed cause I trashed toorshia for not being nice and helpful]

toorshia
3 Mar 2013, 5:04 AM
Wooooow, there goes the bomb :D
Man, you tipped over so fast :) Why?

Look, I've got no use of thinking whatever you think I am thinking.
I am just a regular guy, you know.

So pull yourself together, and let's get some s#it done, okay?

I've fixed the transparency issue. It's Sencha's fault, again. They changed quite a lot of things. So my mask class was not working the way it should.

If you want a quick fix, just open mainContainer.js (controller), and comment out line 90.

I am struggling to make new Sencha CMD work with existing app structure, but it seems to me I'll have to rearrange everything from scratch according to 2.1 standards.

Can you help me with this, please?

toorshia
3 Mar 2013, 8:41 AM
SDK-2.1.1 version is pushed to Github repo.
Drop sdk contents into "touch" folder to get it working.

Please report issues, if any.
Ask away if you have trouble starting it up.

Cheers.

gkatz
3 Mar 2013, 10:06 AM
thanks man.
still it seems like something small is missing?
I get a http://localhost:8080/jam/touch/src/List.js 404 (Not Found)
wierd thing is List.js is actually not under src, its under stc/dataview so i am not sure why the framework looks for it.
thanks

toorshia
3 Mar 2013, 12:45 PM
Well, that's really weird :)

I just tested again. Made a test folder, dropped source from git, and sdk to touch folder.
No sign of 404.

I am using sdk extracted from sencha-touch-2.1.1-gpl.zip

Maybe you should try to generate fresh app using CMD, and then copy files there and try.

In the end, here's zipped sdk straight from the project that works on my machine, so you can test that to http://bit.ly/100oVG3

gkatz
6 Mar 2013, 6:00 AM
Hi;
maybe I am missing something but I am having trouble only with your component.
here's what I am experiencing: I still get the 404 code I talked about above.
If I use your touch folder everything works. however, if I use a 2.1.1 download and just drop it it does not work.
the 2.1.1 GPL version folder content looks different than yours, file sizes are sometimes also different (is this because you build it?)
so the question remains, why can't I just DL 2.1.1 GPL and drop its contents to make your app work?
thanks.
attached are screen shots of the differences in folders between your touch and 2.1.1 'stock' touch:
stock touch:

42226

your touch:
42227

toorshia
7 Mar 2013, 12:17 AM
Hi,

I didn't do custom build, just unzipped GPL version.
I'm gonna try to repeat your scenario (download fresh 2.1.1 and try with it) and see what happens...

Thanks for patience.

liondev4
16 May 2013, 4:49 AM
Hi Toorshia,

Did you finally build a version working with sencha touch 2.2.0 ?

I have a lot of CSS issues when compiling with compass or sencha cmd

Thks

liondev4
16 May 2013, 5:20 AM
It's OK
Got it working well with touch 2.2.0
Just adding a z-index !

toorshia
17 May 2013, 1:46 AM
Hi,

I actually didn't have time to take a second look at this.

Can you tell me how you fixed issue?
So I can just c/p it to the github code :)

I'm so lazy these days :D

Thanks!

liondev4
17 May 2013, 5:51 AM
OK here what I did :

1- In jam.scss, you have to change import and include components :

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//COMPONENTS USED
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

@import 'sencha-touch/base';
@import 'sencha-touch/base/all';
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

// @include sencha-panel;
//@include sencha-buttons;
//@include sencha-toolbar;
//@include sencha-list;
//@include sencha-layout;

2- You have to change Icon mask that is no longer supported by sencha touch 2.2.0. You need to convert your png icons into svg/font icon in the website http://icomoon.io/app for exemple like it is explained in the following post :
http://extdesenv.com.br/theming/adding-custom-font-icons-to-sencha-touch-2-2/?lang=pt

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//ICONS USED
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

@include icon-font('Pictos', inline-font-files(
'pictos/pictos-web.woff', woff,
'pictos/pictos-web.ttf', truetype,
'pictos/pictos-web.svg', svg
));
@include icon-font('JamIcon', inline-font-files(
'JamIcon.woff', woff,
'JamIcon.ttf', truetype,
'JamIcon.svg', svg
));

@include icon('download','\e000','JamIcon');
@include icon('cloud_black','\e001','JamIcon');
@include icon('check_black1','\e002','JamIcon');
@include icon('settings9','\e003','JamIcon');
@include icon('help_black','\e004','JamIcon');
@include icon('power_on','\e005','JamIcon');

3- Change also the iconCls of the menu.js file to fit with the tag given to icon fonts model :
iconCls : 'download',

4- Add in the strawberry.scss file, the z-index line at .x-JAM-slidenav-container :
// JAM MENU
.x-JAM-slidenav-container {
box-shadow: -5px 0px 10px 2px rgba(black, .3);
z-index: 2;
}
.x-JAM-slidenav-menu {
background-color: $JAM-grey;
z-index: 1;
.x-list {
background-color: $JAM-grey;
}
}

And that's it :) !

senchaguardiola
11 Oct 2013, 9:21 AM
Hey Man! Thanks for your help!
The menu works more or less now.
Unfortunately I could not get the icons to work, and the menu fades out onMouseUp when I try to swipe it.

If you could send me a working version, that would be great!! :)
thanks man! :):)


OK here what I did :

1- In jam.scss, you have to change import and include components :

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//COMPONENTS USED
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

@import 'sencha-touch/base';
@import 'sencha-touch/base/all';
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

// @include sencha-panel;
//@include sencha-buttons;
//@include sencha-toolbar;
//@include sencha-list;
//@include sencha-layout;

2- You have to change Icon mask that is no longer supported by sencha touch 2.2.0. You need to convert your png icons into svg/font icon in the website http://icomoon.io/app for exemple like it is explained in the following post :
http://extdesenv.com.br/theming/adding-custom-font-icons-to-sencha-touch-2-2/?lang=pt

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//ICONS USED
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

@include icon-font('Pictos', inline-font-files(
'pictos/pictos-web.woff', woff,
'pictos/pictos-web.ttf', truetype,
'pictos/pictos-web.svg', svg
));
@include icon-font('JamIcon', inline-font-files(
'JamIcon.woff', woff,
'JamIcon.ttf', truetype,
'JamIcon.svg', svg
));

@include icon('download','\e000','JamIcon');
@include icon('cloud_black','\e001','JamIcon');
@include icon('check_black1','\e002','JamIcon');
@include icon('settings9','\e003','JamIcon');
@include icon('help_black','\e004','JamIcon');
@include icon('power_on','\e005','JamIcon');

3- Change also the iconCls of the menu.js file to fit with the tag given to icon fonts model :
iconCls : 'download',

4- Add in the strawberry.scss file, the z-index line at .x-JAM-slidenav-container :
// JAM MENU
.x-JAM-slidenav-container {
box-shadow: -5px 0px 10px 2px rgba(black, .3);
z-index: 2;
}
.x-JAM-slidenav-menu {
background-color: $JAM-grey;
z-index: 1;
.x-list {
background-color: $JAM-grey;
}
}

And that's it :) !