All Discussions - joApp Support Forums

Screen Layout: joScreen->joContainer->joFlexrow???

jpsheridan — Wed, 16 May 2012 05:09:16 -0400

Hello all,

I'm trying to figure out what layout to use. The flow of my app will go something like this:

Splash (Full Screen)

Main App (Navbar+View+Toolbar)

The main app will generally have Container (or the contents within) replaced with a View loaded determined by what button in Toolbar is pressed (standard enough stuff). When navigating between main views no Back button appears on the Navbar.

Sometimes a main View (linked to a button in Toolbar) will have more than one "Page" - this is common as well. In this case, where I would be navigating to pages with in a View, the Toolbar would disappear and the Navbar would add a Back button.

So I've seen a few examples where a person will use Screen->Container->Flexcol, and some other different ways. If a Flexcol IS A Container why would I have Flexcol within another Container. Should I just use Flexcol around my "View" to stretch it down the screen, or should it surround my Navbar+View+Toolbar, even though Navbar will always be at the top and Toolbar will always be at the bottom?

I hope my questions make sense.

(A little off topic but I'm developing a basic MVC architecture specific to my application. The Views (V in MVC) will be wrapping jo code. Really I'm looking for a way to compile my views into one view that will be displayed on the screen. I actually have my scenario above working in straight Jo code, even if it's a little messy, but I'm looking to abstract it into MVC. Anyway...)

Thanks,

Binding a joList to a sql query

MikeC — Tue, 30 Aug 2011 17:08:10 -0400

I have sucessfully used joDatabase and joSQLDataSource to set up a SQL table and add entries. I would now like to bind a SQL query to a joList to view and select database entries.

Looking at the documentation, joSQLDataSource does not return the data from a query directly but fires a change event which from jo.js seems to return self.data. However, binding this to the list is proving problematical.

In prototype form I have a list "list = joList()". When the card containing the list activates I have "card.activate = function () {ds.execute("select * from books;"};" with ds being the joSQLDataSource.

I am assuming that I need to have a ds.changeEvent.subscribe(function() {}); to pass the data returned from the query to the list but cannot get this to work correctly. Any pointers to correct form of binding the ds results to the joList would be gratefully received. The closest I have obtained is passing an array of objects the list using "data" as the parameter in the subscribe function!

Please Vote ClustApp !

smontiu — Fri, 11 May 2012 17:38:10 -0400

Hi all! Today I presented my project based ClustApp JoApp, although it is still a project, could stay afloat if everyone you vote. With the award, I can continue with it. I hope to publish the code on GitHub so you can enjoy and even implanted in your city.

I leave the link http://congresoweb.es/emprende-cw/clustapp/ You must do tweet, Like and Google. The more votes the more likely. You can vote in the three social networks. Greetings to all and thank you very much.

Site Link: http://clustapp.com

joTabBar vs. joToolbar

jpsheridan — Tue, 08 May 2012 12:24:51 -0400

Hello,

I'm unsure of the differences between these items. I know joToolbar will lock to the bottom of the container that joToolbar is put in to. I get that. joTabBar appears to allow me to put items into it, I get that. Though there's no mention of joTabBar in jo2.css, but joToolbar is in there.

So can anyone give me examples of where to use them, that is different scenarios for both widgets?

Thanks,

HTML-Objects in joList

martinMB — Wed, 09 May 2012 04:45:23 -0400

Hey again

is it also possible to include some HtML elements into a joList? And if not which alternatives do I have to put a picture and some structured text into a list element?

thanks
Martin

Insert SQL-Database

martinMB — Wed, 02 May 2012 04:35:42 -0400

hey another question,

can you explain me, how I am using an external SQL-Database with JO?

Martin

Add navigation arrow to joList?

kevinwalzer — Tue, 01 May 2012 06:36:29 -0400

Any idea how I can add a navigation arrow to a joList item (to indicate that a new card will slide in when that list item is chosen)? I think it should be handled via CSS, but I can't find any good examples. Advice is appreciated.

joImage

martinMB — Mon, 30 Apr 2012 05:48:04 -0400

Hey All

I have a question, in the doc there is also a joImage function explained, I looked it up in the jo.js and wasn't able to find it... can some explain how its working?

Thanks

Recommended methods of customizing/skinning an app??

jpsheridan — Fri, 27 Apr 2012 05:54:11 -0400

Hello all,

This is my first post so please go easy on me ;)

I've been tasked with creating web app (possibly to be a phonegap project but at first it'll be a webapp) targeting IOS first, then Android. Preferably the two. So I've been looking around at the various HTML5 cross platform frameworks. Frameworks like Sencha, the-m-project and wink but I feel there a little heavy for what I need. Basically it's a webapp/phoneapp version of a customer account (doesn't matter what type of customer). Basically I need a branded app with the following:

1. Branded splash

2. Login Screen

3. A few static details screens

4. Transactions Screen that will need scrolling as it will be a long table of data.

I've drawn some screens on paper and have narrowed my needs to xui or joapp (I think).

I like the way joapp is a "programmers" framework, xui is more traditional like jQuery but I wonder can it be more surgical because I will have to create alot of the HTML and boiler plate code myself thus (although more difficult to conceive and produce) making the job more custom.

Anyway what is the best practice for skinning an app. From what I can see there are a few methods:

1. Override joapp's styles in the javascript code. E.g.

// joInput.prototype.tagName = "input";
// joInput.prototype.className = "stuff";

2. Completely customize jo2.css and change styles in there

3. Add a custom css after linking jo2.css which will contain overriding styles for jo components.

I'm a novice and I'm a little uncertain how to go about all this. Any help would be appreciated.

Thanks,

$.data

tupak_golqm — Fri, 13 Apr 2012 06:09:17 -0400

Hello,

Is there a technique using Jo which could do something like the .data method in jQuery.

Example: Constructing dynamically a table or a list, showing the labels and keeping the ids somewhere ( in the DOM (!?) ).

Thanks in advance.

joSelect - Bug on data binding?

Karsten — Sat, 14 Apr 2012 10:44:40 -0400

I want your opinion on the following problem.
I created a joSelect control and bind both dataSource and valueSource to a record:

var rec = new joRecord({
elements: ["Apple", "Banana", "Meat"],
element: undefined
});
var select = new joSelect(rec.link("elements"), rec.link("element"));

If the value of the select control changes, the list of the selectable entries is replaced by a one element list with the index of the selected value (i.e. "1").

If I create the select controll without dataSource binding, the selectbox keeps its list of data after selection:

var select = new joSelect(["Apple", "Banana", "Meat"], rec.link("element"));

Can somebody confirm that the first behaviour is a bug, or am I using the data binding in a wrong way?

Scrolling/Bounce physics in Joapp

jpsheridan — Fri, 27 Apr 2012 06:23:19 -0400

Hello again,

I've got the latest version from gitub. I'm not sure I like the screen scrolling/bounce physics on IOS, it's kinda funky acting. First it sort of jumps a little when I lift my finger after drag scrolling. Second when at the top or bottom of a screen it seems to stretch down, pause for sometimes what seems like a second and then bounces up but it's not very smooth and not particularly like IOS mechanics BTW I'm using an iPhone 4s, so it's running IOS5.

If my research serves me doesn't IOS5 now support proper native scrolling even with fixed width containers? Is this implemented in Jo?

Is it possible to turn off Jo scrolling behavior and integrate iScroll or Scrollability?

Not nit picking here, I like what I see in the framework.

Thanks,

How to get joPasswordInput value click button

pdr_rm — Thu, 26 Apr 2012 00:18:07 -0400

hi How to get joPasswordInput value click by button. help me :D

Input tags for joInput

kevinwalzer — Sat, 14 Apr 2012 23:14:18 -0400

I'd like to add some iPhone/Safari/HTML5 tags to joInput, specifically the type, autocorrect, autocapitalize, and placeholder tags, something that looks like this in HTML:

How can I add these tags to joInput? I don't see how in the API.

Singleton doc

puppetMaster3 — Sat, 14 Apr 2012 23:23:52 -0400

(So I'm using Jo for IOS/Phonegap)

Question on docs: I see how you declare a singleton, but how would I use it/create/reference the class?

tia,

Vic

Continued support

puppetMaster3 — Sat, 14 Apr 2012 18:02:47 -0400

This tool looks great, I looked at lots, ex: Wink. I plan to use it w/ PhoneGap only.... is this boing to be supported further? Not much activity in source, etc.
Comments?

(and it does look amazing, I'm leaning towards using it, don't want to seem not grateful)

joScreen.alert on android

Habel — Sat, 14 Apr 2012 12:40:20 -0400

I am creating an app with both jo and phonegap, however I have run into some problems with screen alerts. Whenever I build the project and put it on my phone or an emulator, this error is given whenever I call screen.alert:

Uncaught TypeError: Object # has no method 'alert

This works in my browser (chrome). Does anyone know why this is happening?

AJAX

tupak_golqm — Thu, 12 Apr 2012 05:57:49 -0400

Hello,

It really isn't clear to me (noob), how to make AJAX calls and create/update dynamically components (like a joList). I have seen here, that one should use jScript/joFile, but all this callbacks mess is not clear to me. Is there a tutorial somewhere that explains this?

Any help is welcome.

Thanks in advance.

How do I refresh the view?

Anky — Sun, 08 Apr 2012 22:12:10 -0400

I have a joCache that contains joCard that has several joLabel within joFlexcol and joFlewrow.

Now I run a function that updates joLabels and joLabel's update doesn't appear as it happens. How do I force it to refresh display on joLabel.SetData?

I figure .refresh is it but refresh didn't work as I expected.

How to create new element

smontiu — Wed, 11 Apr 2012 14:57:54 -0400

Hi,

I want to create a new element, joMyElement for example, I try this, but I don´t achieve anything. The new element is not displayed on the screen.

Thanks

Event Rotate

smontiu — Mon, 12 Mar 2012 14:34:49 -0400

Hello,

I wonder how to capture the event rotate of the screen. Was improving the example of theleft side panel, a menu mode. And depending on the resolution and the orientation of theside menu that is displayed or not.

http://js-html5.com/post/3087648159/device-orientation-with-javascript

Accessing my data with yql

fergus4 — Thu, 10 Feb 2011 11:55:46 -0500

yql seems cool but I don't get how I can get my data via yql. Why not just access it via my own server? I looked at the yql example and I don;t see how it extracts the data from that url.

Alert on Opera Mobile 12 NOT Centered

smontiu — Tue, 03 Apr 2012 14:55:58 -0400

Hi everyone, I ´m trying Opera Mobile 12 on my tablet (Samsung Galaxy Tab 10.1) and I have seen that the alert in the joScreen() doesn´t centered. I attach a screencapture of my screen tablet.

S.O Android 3.2

Resolution -> 1280x800 WXGA

Tanks

Problem joStackScroller

smontiu — Wed, 28 Mar 2012 10:32:54 -0400

http://s2.subirimagenes.com/privadas/previo/thump_1799680cap3.png

I have a simply view like that, but when I scroll down the view, the bottom of the view are inaccessible, the button or the item on the leftSide menu, are out of my tap. I have try a lot of things, bottom: -52px , marginBottom ,... anything works !

Some help, thanks

Size of icon in joMenu

smontiu — Mon, 19 Mar 2012 21:08:47 -0400

Hi,

These days I have been reviewing the issue of lists and menus. I have seen the option to add an icon to each list item, and I added a svg.

The problem is how set icon size.

Menu = new joMenu ([

{Title: "Menu of the day / Charter", id: "HomeCard", icon: 'images / home.svg "}, <---- SIZE!

{Title: "Call Bartender / a", id: "joHTMLCard"},

.....

exit app if stack is empty

zofe — Sat, 24 Mar 2012 18:42:32 -0400

i've this function as "backbutton" event callback:

function back_keydown()

{

App.stack.pop();

}

It's possible to exit app if stack is empty ?

How can adapt this function? (I tried using stack.setLocked(false) without success)

thnks

Scroll to top

bubfowkes — Tue, 20 Mar 2012 11:48:06 -0400

How do I scroll to top, I have searched within documentation for this functionality, and there is minimal advice on this subject.

my code:

http://pastebin.com/T0QNivPf

joToolBar over click back button on IOS

kscott — Sun, 11 Mar 2012 17:44:29 -0400

This only looks to be an issue when running inside IOS using phonegap

I have an app that pushes two JoCards onto a joStackScroller. If the user over touches the back button on the JoToolbar it will pop off the main menu leaving the screen blank and IOS has no way to get back to the main menu without restarting the phone.

I can provide code if you need it, but, the kitchen sink app should have the same problem.

Here is my screen structure:

+-Main Menu
+----trail List
+----Feed Viewer
To recreate you must go all the way to the Feed viewer over touch the back button till the main menu slides off leaving a blank screen.
.
Any suggestion one how to fix it? I guess the back button needs to be disabled till the new screen is finished loading. So that it does not allow the silly user to click on the back button while the screen is transitioning.

This only looks to be a problem when running on IOS. Though one of my users claims to have created it on Windows 7 Chrome. I can only re create it under IOS while running in PhoneGap.

Is there a JavaScript event that fires when the screen is done loading and all CSS3 transitions are done?

SplashScreen

smontiu — Thu, 08 Mar 2012 10:40:03 -0500

Hi all, am new to the forum, but I hope to bring all my concerns and progress with everyone. Today I started with the most basic aspect of a native app, the splash screen. I used the following script, I know what you think. Operate, it works, though as ho has something out there, and do not know.

Content.push(SplashCard);

setTimeout("Content.push(HomeCard);",2000);

What do you think ?

SplashCard it´s a joView