![]() You will note when you run the app, a toast gets show notifiying the user that the record was saved. ![]() Going back to the previous screen, one can just click Cancel. I decided to improve navigation here and have these buttons at the bottom of the screen as its easier for users like that. This screen does not have header buttons, but as it is defined in a splitview, one is able to CR-eate, U-pdate and D-elete comic books form the same screen. My Comic Books > Add Comic Book Your Comic Books You have no comic books Title * Issue Number * Grade * Select Grade Book Type * Select Book Type Publication Date * Book Value * Price * Signed * Bagged * Save Comic Book Delete Comic Book Cancel The method below is called from app.ComicBookBindings Before this screen is loaded, available grades and book types are loaded from any captured to this screen. This screen has been created as a split screen to show a listview and details for each comic book. This is depicted as Figure 1 above.ĭesigning the Comic Books Entry Screen: Figure 2 The springboard is actually a listview and was cloned from this example from the jquery mobile website. My Comic Books Comic Books Maintain Comic Books Book Types Maintain Book Types Grades Maintain Grades Reports Access Reports Powered by JQM.Show © Anele Mbanga 2015 You can refer to the source html and javascripts in the files attached.ĭesigning the SpringBoard: html definition - Figure 1 Starting to design this app you follow the normal boilerplate prototypes to create HTML5 applications. These however will be exported to Excel when Export to Excel is clicked even if they are hidden on the table.Īs soon as you click Export to Excel, an Excel report will be generated from the table contents named ComicBook.xls.įigure 8.1: Book Types Excel Report, from Export to Excel from this screen Clicking Columns to Display provides one with an option to toggle the columns to display on the report. ![]() When a user selects Reports, the various types of reports are available from the application. It could be fine, fair, good, mint condition etc.įigure 6: Reports (on another blackberry) Grades define the grade that you can allocate to your comic book. When adding a comic book, the book types will be read from this file and loaded to the dropdown list. There can be graphic novel, serial, trade and other types that you can define. Before a comic book gets captured, the grades and book types should be defined.īook types define the type of Comic Book your book is. This has been defined as a splitview screen where users can select from a listview and also search from it for a comic book they want. The Comic Books is the main screen where the comic book details will be added to the collection. The SpringBoard provides a user with 4 options, to access the Comics Books screen, the Book Types, the book Grades and Reports. The following 8 figures depics how the Comic Books Collection app will look like.įigure 1: The SpringBoard (on a black berry device) These grades and book types get loaded into the comic book screen as they are dynamic, displaying the relational comboboxes mentioned above. With this application we have two 'files' that store grades and book types. When these apps are compiled with PhoneGap Build, these can be installed on mobile devices just like native apps. With JQuery Mobile, one is able to create HTML5 mobile apps that can run on any device. ListViews - title, description and count bubble In summary, the following sections of JQuery Mobile are explored with this article's content code.ģ. I'm assuming you know a little bit of JQuery Mobile and some PhoneGap knowledge for this exercise. At the end the app will be compiled with PhoneGap to make it a hybrid app. The approach with this app will be following a SplitView approach, showing relationships between tables by loading Dropdown Lists with content from other 'files', how the ListView is used, Tables to add a report life feauture and how this report can be exported to Excel using javascript. The purpose of this Comic Book CRUD JQuery Mobile Application is to demonstrate how one can build a database app to store details of their comic books collectionand then compile it with PhoneGap Build to make it a hybrid application.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |