(→Views) |
|||
(16 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== Introduction == | == Introduction == | ||
LivingCampus is an interactive flash web page for an university in Brandenburg. In this course, this interactive web page will be "convert" to a native iPad application. The aim is, that the iPad app looks as close as possible like the interactive flash web page. | [http://www.living-campus.de.com LivingCampus] is an interactive flash web page for an university in Brandenburg. In this course, this interactive web page will be "convert" to a native iPad application. The aim is, that the iPad app looks as close as possible like the interactive flash web page. | ||
LivingCampus has a start point and five menu points. Every menu points has a day version from 7 am to 7 pm, a night version from 7pm to 7am and some animations. For example people, who moves from left to right, birds flying in the air, cars moving and a clock is visible. | |||
Possible contents for LivingCampus are text, images, a link list and a download list. For a special offline-version are movies also ok. All contents for one menu item are stored in a content container, which exists for every possible language. At the moment only Germans is supported. All Contents is stored on the web server, which hosts also the Flash web page. So a internet connection is needed to start this app. Which content is available depends on the data, which is stored in xml files. There is one init xml file, which stores some general data, possible languages, the menu points and their menu items. For every menu point in a language exists a xml file, which stored the possible contents for all its menu items. | |||
== Views == | == Views == | ||
=== Start and menu points === | |||
Views show the initial loader view and all menu point in day and night version | |||
<gallery widths="150px" perrow="5"> | |||
File:Init.jpg|Screenshot Initial App Loading | |||
File:LivingCampus_Start_Day.jpg|Screenshot menu point Start at day | |||
File:LivingCampus_Start_Night.jpg|Screenshot menu point Start at night | |||
File:LivingCampus_Campus_Day.jpg|Screenshot menu point Campus at day | |||
File:LivingCampus_Campus_Night.jpg|Screenshot menu point Campus at night | |||
File:LivingCampus_Study_Day.jpg|Screenshot menu point Studium (Study) at day | |||
File:LivingCampus_Study_Night.jpg|Screenshot menu point Studium (Study) at night | |||
File:LivingCampus_Town_Day.jpg|Screenshot menu point Stadt (Town) at day | |||
File:LivingCampus_Town_Night.jpg|Screenshot menu point Stadt (Town) at night | |||
File:LivingCampus_Freetime_Day.jpg|Screenshot menu point Freizeit (Freetime) at day | |||
File:LivingCampus_Freetime_Night.jpg|Screenshot menu point Freizeit (Freetime) at night | |||
File:LivingCampus_Media_Day.jpg|Screenshot menu point Mediathek (Town) at day | |||
File:LivingCampus_Media_Night.jpg|Screenshot menu point Mediathek (Media) at night | |||
</gallery> | |||
=== Contents === | |||
Views show all content specific views | |||
==== Standard content ==== | |||
Views, which can be visible in all menu items | |||
<gallery widths="150px" perrow="5"> | |||
File:LivingCampus_Container_Top.jpg|Top view of the content container | |||
File:LivingCampus_Container_Top_Over.jpg|Top view of the content container, if the user tapps on the image | |||
File:LivingCampus_Container_Txt.jpg|Text view for the content container | |||
File:LivingCampus_Container_BIlder.jpg|Image List view for the content container | |||
File:LivingCampus_Media_Bilder.jpg|Special image list view for the content container for the menu point Mediathek (Media), to show all images in the Living Campus app | |||
File:LivingCampus_Container_Links.jpg|Link list view for the content container | |||
</gallery> | |||
==== Special contents ==== | |||
Views, which are small applications in the flash web page | |||
<gallery widths="150px" perrow="5"> | |||
File:LivingCampus_CampusMap.jpg|A Campus map | |||
File:LivingCampus_CampusMap_Over.jpg|The Campus map, if the user tapps on a building | |||
File:LivingCampus_Media_Pinnwand.jpg|View, which shows some interest links e.g. links to the university on some social media networks | |||
File:LivingCampus_Media_Projects.jpg|View, which shows some links to student projects | |||
</gallery> | |||
== Classes == | == Classes == | ||
=== Model === | === TBXML === | ||
This application reads xml date through the [http://www.tbxml.co.uk/TBXML/TBXML_Free.html tbxml] framework. | |||
=== Main group === | |||
''LivingCampusAppDelegate'' is the application delegate class. It has a reference to the LivingCampusViewController | |||
''LivingCampusViewController'' is the root controller for the Living Campus app. It controls the main things, like intro, outro animation, displaying the menu points and menu items for every menu point. It has also a reference to the basic model class named LivingCampusModel. | |||
=== Controller group === | |||
''InitLoaderController class'' controls the init loader for the app. This means the movement of the red filled logo and also the animation with a pencil, that writes text to complete the logo of the university. | |||
==== Content group ==== | |||
This group contains all content specific controllers. | |||
''ContentContainerController'' controls a contentContainer, which can have a TxtContentController, an ImgContentController, a DownloadContentController and the TopContentController, or subclasses of it. | |||
It controls also the movement from one content (e.g. text) to an other content (e.g. the image list). | |||
''ImpressumContainerController'' is a subclass of the ContentContainerController to show only the site notice (Impressum) of this app, which comes from the web server. | |||
''TopContentController'' is the controller class, which shows the first view of the ContentContainerController. It controls the display of the big images, the navigation between them and an overlay, which shows the title and the description, if the user taps on this image. | |||
''CampusMapTopController'' is a subclass of the TopContentController to show the map of the Campus. For every building is a description, which is visible, if the user taps on the building. | |||
''PinwallTopController'' is a subclass of the TopContentController in the menu point Mediathek (Media), to show some links to interesting web pages, which contains information about the university, e.g. links to social medie networks. | |||
''ProjectTopController'' is a subclass of the TopContentController in the menu point Mediathek (Media), to show some links to student projects. | |||
''ContentController'' is the base class for all contents, except the TopContent. Initialized the views with a background, a title, a close button and a button for the content. The screenshot called "Text view for the content container" shows three of them on the right of the ContentContainer. | |||
''TxtContentController'' shows rich formatted text in a UIWebView. This can be text, with some links inside, or the link list of this application. If a link is taped it will inform its webDelegate to show the link in the TopWebView (see the section view for detail). | |||
''ImgContentController'' shows a list of images in a table view. This class controls the tableView and is also the dataSource of the UiTableView. If the user taps on an item, this item will be visible in bog on the TopContentController. | |||
''DownloadContentController'' is a subclass of the ImgContentController, but it shows different text and also selecting of an image does not rotate to the TopContentController. Instead it shows the content in the TopWebView. | |||
=== View group === | |||
''ClockView'' shows the clock for some menu points and controls the minute and the hour hand. | |||
''LoaderView'' shows the progress loader for menu items, if their content is not loaded and will be loaded. | |||
''MenuItemView'' shows the red circle with the I in it and controls the tapping on this circle. If the user taps on one circle, the title of the menu item come visible. If the user taps on a menuItemView a second time, the root controller will be informed and the specific ContentContainerController will become visible. | |||
''MenuItemDescriptionView'' shows only the title of the menu item. | |||
''StartBtnView'' is the view for one image button, which is visible on the start point. Every StartBtnView shows a menu point for the app. If the user taps once on it, a description will be visible and if the user taps a second time on it, the rootController will be informed and will show the specific menu point. | |||
''StarView'' shows the stars for some menu point at night. The stars have a small alpha animation, which is changing over the time. | |||
''TopWebView'' shows almost every link inside the app in an UIWebView. It does not allow the user to get to a specific web page. You can only see pages and subpages of the specific link. | |||
==== Animation group ==== | |||
Contains all views, which are menu point animations | |||
''LivingCampusAnimationView'' shows basic animation, which are left to right or right to left animations. It gets the data for the animation from the model class LivingCampusAnimation. | |||
''LivingCampusCarAnimationView'' is a subclass of LivingCampusAnimationView. If a car reached 3/4 of the movement animation, this view will post a notification, which is not supported in the base class. The animation of a car must be started via a controller, because the feature to automatic animate the car after a random time is not supported. | |||
''LivingCampusMultipleAnimationView'' shows a animation, which is divided in some smaller parts. E.g. a persons holds his hand to the top is one part, the persons moves one meter to the right is the second part and then the person moves one meter back to the left is the third part. Between every part is a random time, which is given by the LivingCampusMultipleAnimation. | |||
''LivingCampusPathAnimationView'' shows an animation, which has a start, a middle and an end point, like the plane in the menu point Studium (Study), or the bird in the menu points Campus, Stadt (Town) and Freizeit (Freetime). | |||
==== Content group ==== | |||
''CampusMapBtnView'' is the button, which is visible in the campusMap. It stores the title and the description of the special campus map button. It is a subclass of UIButton, but the hit area is not limited to rectangles. The alpha value of the image for the button state works as the hit area. | |||
''ContentBtnView'' is the button, which is visible on the right side of every content (controller). It has a background and a label. | |||
''ImgTableViewCell'' is the tableViewCelll for the UITableView, which is visible in the imgContent. It has a image on the left and text on the right. The text consists of a title and a description. | |||
''SpecialTopBtnView'' is the button, which is visible in the project and notice board menu item. It is a subclass of UIButton, but the hit area is not limited to rectangles. The alpha value of the image for the button state works as the hit area. | |||
=== Model group === | |||
This group contains all model classes. | |||
''LivingCampusModel'' is the base model for the app. The rootController talks to this class to get the model for the views. It knows, what languages are available and how many menuPoints the app has. | |||
''MenuItemModel'' stores the data for one menu item. It stores the position of the red circles, the id of the item and has a reference to its own ContentContainer. | |||
''StartBtnModel'' is the model for the StartBtnView, which is visible on the start menu point. It stores the image, the frame of the image adn the title of the button. | |||
''Language'' stores all data, which belongs to the languages. This information are stored in a xml file, which will be load at the start of the app. Language stores the localized description of contact, no content available, FH Brandenburg, image, movie, link and link description. | |||
==== Animation group ==== | |||
This group contains the models to the corresponding AnimationsViews, except of the LivingCampusCarAnimation, which has no own model class. It uses the LivingCampusAnimation model. | |||
''LivingCampusAnimation'' stores the data, which is needed for an basic left to right animation. The object, which moves, can be a single image or an image sequence. Between every animation is a random time, which is given by a min and maxTime. Every LivingCampusAnimation can have sound and the sound path is stored in this model. | |||
''LivingCampusMultipleAnimation'' is a subclass of LivingCampusAnimation and support multiple part animations. Every animation part can have its own sound. E.g. a persons holds his hand to the top is one part, the persons moves one meter to the right is the second part and then the person moves one meter back to the left is the third part. Between every part is a random time, which is given by a min and maxTime. | |||
''LivingCampusPathAnimation'' is a subclass of LivingCampusAnimation and supports basic animations, which has a start point, a middle point and an end point. | |||
==== ContentContainer group ==== | |||
This group contains all models, which belongs to the contents. | |||
''ContentContainerModel'' is the model for the ContentContainerController and own all possible contents for this menu container. Every menu item has at least one contentContainerModel. | |||
Possible contents are one TxtModel, one ImgList for images, one ImgList for movies, one ImgList for download files and an array of LinkModels. | |||
''ContentModel'' is the base class for all contents and defines some protocols. Direct subclasses are TxtModel, ImgListModel, ImgModel and LinkModel. | |||
''TxtModel" is a the model for the TxtContentController. It stores a text with an css file, to format the text. | |||
''ImgListModel'' is the model, which holds a list of images, movies and downloads. The list can contains sections and the ImgListModel knows the section and the corresponding titles. | |||
''ImgModel'' represents one image with an image, thumb image, the title and the description of the image. | |||
''MovModel'' is a subclass of ImgModel and represents the same data, except the image The image is in the MovModel a reference to an movie. Additionally it stores the width and the height of the movie. | |||
''DownloadModel'' is also a subclass of ImgModel and and represents the same data, except the image, which is only a url to a download file. Additionally it stores the size of the download file. | |||
''LinkModel'' represents a link with a title ad the corresponding url | |||
==== MenuPoint group ==== | |||
In this group are all menu points with their data stored. | |||
''MenuPoint'' is the base class of all menu points and stores the data and functions, which are relevant to every menu point. It stores all menu items for the menu point, the urls to the intro, the outro animation for the day and night version, the image and animations for both versions. | |||
''StartPointModel'' is the model for the start menu point. Animations are the smoke in the daytime and at night and a window light animation at night. | |||
''CampusPointModel'' is the model for the Campus menu point. Night animations are the peoples, which moves from left to right and right to left, the peoples, which stand in front of the Mensa and the audimax, the bat in the sky and the stars. Day animations are the peoples, which moves from left to right and right to left, the peoples, which stand in front of the Mensa and the audimax, the bird in the sky and clouds. | |||
''StudyPointModel'' is the model for the Studium (Study) menu point. Night animations are the two students, the professor, the clock, the beamer animation and the clouds. Day animations are the two students, the professor, the clock, the beamer animation and the stars. | |||
''TownPointModel'' is the model for the Stadt (Town) menu point. Night animations are the person on the balcony, the person, which stands roadside, the person, which moves in the background from left to right, a bat, some cars and the stars. Day animations are the person on the balcony, three people, which stands roadside, the person, which moves in the background from left to right, a bird, some cars and the clouds. | |||
''FreetimePointModel'' is the model for the Freizeit (Freetime) menu point. Night animations are the person on the boat, the person on the bridge, the two people on the stage, the water animation, the bat and the stars. Day animations are the person on the boat, the two people on the stage, the water animation, the bird and the clouds. | |||
''MediaPointModel'' is the model for the Mediathek (Media library) menu point. It is a special menu point, because it has also a reference to all images and movies in this app. There are two special menu items. One shows all images in this app and the other shows all movies in the app on one place. Night animations are the movie on the screen, the person on the door, a clock and the stars. Day animations are the movie on the screen, the person on the door, the person on the sofa, a clock and the clouds. |
Latest revision as of 09:00, 23 July 2011
Introduction
LivingCampus is an interactive flash web page for an university in Brandenburg. In this course, this interactive web page will be "convert" to a native iPad application. The aim is, that the iPad app looks as close as possible like the interactive flash web page.
LivingCampus has a start point and five menu points. Every menu points has a day version from 7 am to 7 pm, a night version from 7pm to 7am and some animations. For example people, who moves from left to right, birds flying in the air, cars moving and a clock is visible.
Possible contents for LivingCampus are text, images, a link list and a download list. For a special offline-version are movies also ok. All contents for one menu item are stored in a content container, which exists for every possible language. At the moment only Germans is supported. All Contents is stored on the web server, which hosts also the Flash web page. So a internet connection is needed to start this app. Which content is available depends on the data, which is stored in xml files. There is one init xml file, which stores some general data, possible languages, the menu points and their menu items. For every menu point in a language exists a xml file, which stored the possible contents for all its menu items.
Views
Views show the initial loader view and all menu point in day and night version
Contents
Views show all content specific views
Standard content
Views, which can be visible in all menu items
Special contents
Views, which are small applications in the flash web page
Classes
TBXML
This application reads xml date through the tbxml framework.
Main group
LivingCampusAppDelegate is the application delegate class. It has a reference to the LivingCampusViewController
LivingCampusViewController is the root controller for the Living Campus app. It controls the main things, like intro, outro animation, displaying the menu points and menu items for every menu point. It has also a reference to the basic model class named LivingCampusModel.
Controller group
InitLoaderController class controls the init loader for the app. This means the movement of the red filled logo and also the animation with a pencil, that writes text to complete the logo of the university.
Content group
This group contains all content specific controllers.
ContentContainerController controls a contentContainer, which can have a TxtContentController, an ImgContentController, a DownloadContentController and the TopContentController, or subclasses of it. It controls also the movement from one content (e.g. text) to an other content (e.g. the image list).
ImpressumContainerController is a subclass of the ContentContainerController to show only the site notice (Impressum) of this app, which comes from the web server.
TopContentController is the controller class, which shows the first view of the ContentContainerController. It controls the display of the big images, the navigation between them and an overlay, which shows the title and the description, if the user taps on this image.
CampusMapTopController is a subclass of the TopContentController to show the map of the Campus. For every building is a description, which is visible, if the user taps on the building.
PinwallTopController is a subclass of the TopContentController in the menu point Mediathek (Media), to show some links to interesting web pages, which contains information about the university, e.g. links to social medie networks.
ProjectTopController is a subclass of the TopContentController in the menu point Mediathek (Media), to show some links to student projects.
ContentController is the base class for all contents, except the TopContent. Initialized the views with a background, a title, a close button and a button for the content. The screenshot called "Text view for the content container" shows three of them on the right of the ContentContainer.
TxtContentController shows rich formatted text in a UIWebView. This can be text, with some links inside, or the link list of this application. If a link is taped it will inform its webDelegate to show the link in the TopWebView (see the section view for detail).
ImgContentController shows a list of images in a table view. This class controls the tableView and is also the dataSource of the UiTableView. If the user taps on an item, this item will be visible in bog on the TopContentController.
DownloadContentController is a subclass of the ImgContentController, but it shows different text and also selecting of an image does not rotate to the TopContentController. Instead it shows the content in the TopWebView.
View group
ClockView shows the clock for some menu points and controls the minute and the hour hand.
LoaderView shows the progress loader for menu items, if their content is not loaded and will be loaded.
MenuItemView shows the red circle with the I in it and controls the tapping on this circle. If the user taps on one circle, the title of the menu item come visible. If the user taps on a menuItemView a second time, the root controller will be informed and the specific ContentContainerController will become visible.
MenuItemDescriptionView shows only the title of the menu item.
StartBtnView is the view for one image button, which is visible on the start point. Every StartBtnView shows a menu point for the app. If the user taps once on it, a description will be visible and if the user taps a second time on it, the rootController will be informed and will show the specific menu point.
StarView shows the stars for some menu point at night. The stars have a small alpha animation, which is changing over the time.
TopWebView shows almost every link inside the app in an UIWebView. It does not allow the user to get to a specific web page. You can only see pages and subpages of the specific link.
Animation group
Contains all views, which are menu point animations
LivingCampusAnimationView shows basic animation, which are left to right or right to left animations. It gets the data for the animation from the model class LivingCampusAnimation.
LivingCampusCarAnimationView is a subclass of LivingCampusAnimationView. If a car reached 3/4 of the movement animation, this view will post a notification, which is not supported in the base class. The animation of a car must be started via a controller, because the feature to automatic animate the car after a random time is not supported.
LivingCampusMultipleAnimationView shows a animation, which is divided in some smaller parts. E.g. a persons holds his hand to the top is one part, the persons moves one meter to the right is the second part and then the person moves one meter back to the left is the third part. Between every part is a random time, which is given by the LivingCampusMultipleAnimation.
LivingCampusPathAnimationView shows an animation, which has a start, a middle and an end point, like the plane in the menu point Studium (Study), or the bird in the menu points Campus, Stadt (Town) and Freizeit (Freetime).
Content group
CampusMapBtnView is the button, which is visible in the campusMap. It stores the title and the description of the special campus map button. It is a subclass of UIButton, but the hit area is not limited to rectangles. The alpha value of the image for the button state works as the hit area.
ContentBtnView is the button, which is visible on the right side of every content (controller). It has a background and a label.
ImgTableViewCell is the tableViewCelll for the UITableView, which is visible in the imgContent. It has a image on the left and text on the right. The text consists of a title and a description.
SpecialTopBtnView is the button, which is visible in the project and notice board menu item. It is a subclass of UIButton, but the hit area is not limited to rectangles. The alpha value of the image for the button state works as the hit area.
Model group
This group contains all model classes.
LivingCampusModel is the base model for the app. The rootController talks to this class to get the model for the views. It knows, what languages are available and how many menuPoints the app has.
MenuItemModel stores the data for one menu item. It stores the position of the red circles, the id of the item and has a reference to its own ContentContainer.
StartBtnModel is the model for the StartBtnView, which is visible on the start menu point. It stores the image, the frame of the image adn the title of the button.
Language stores all data, which belongs to the languages. This information are stored in a xml file, which will be load at the start of the app. Language stores the localized description of contact, no content available, FH Brandenburg, image, movie, link and link description.
Animation group
This group contains the models to the corresponding AnimationsViews, except of the LivingCampusCarAnimation, which has no own model class. It uses the LivingCampusAnimation model.
LivingCampusAnimation stores the data, which is needed for an basic left to right animation. The object, which moves, can be a single image or an image sequence. Between every animation is a random time, which is given by a min and maxTime. Every LivingCampusAnimation can have sound and the sound path is stored in this model.
LivingCampusMultipleAnimation is a subclass of LivingCampusAnimation and support multiple part animations. Every animation part can have its own sound. E.g. a persons holds his hand to the top is one part, the persons moves one meter to the right is the second part and then the person moves one meter back to the left is the third part. Between every part is a random time, which is given by a min and maxTime.
LivingCampusPathAnimation is a subclass of LivingCampusAnimation and supports basic animations, which has a start point, a middle point and an end point.
ContentContainer group
This group contains all models, which belongs to the contents.
ContentContainerModel is the model for the ContentContainerController and own all possible contents for this menu container. Every menu item has at least one contentContainerModel. Possible contents are one TxtModel, one ImgList for images, one ImgList for movies, one ImgList for download files and an array of LinkModels.
ContentModel is the base class for all contents and defines some protocols. Direct subclasses are TxtModel, ImgListModel, ImgModel and LinkModel.
TxtModel" is a the model for the TxtContentController. It stores a text with an css file, to format the text.
ImgListModel is the model, which holds a list of images, movies and downloads. The list can contains sections and the ImgListModel knows the section and the corresponding titles.
ImgModel represents one image with an image, thumb image, the title and the description of the image.
MovModel is a subclass of ImgModel and represents the same data, except the image The image is in the MovModel a reference to an movie. Additionally it stores the width and the height of the movie.
DownloadModel is also a subclass of ImgModel and and represents the same data, except the image, which is only a url to a download file. Additionally it stores the size of the download file.
LinkModel represents a link with a title ad the corresponding url
MenuPoint group
In this group are all menu points with their data stored.
MenuPoint is the base class of all menu points and stores the data and functions, which are relevant to every menu point. It stores all menu items for the menu point, the urls to the intro, the outro animation for the day and night version, the image and animations for both versions.
StartPointModel is the model for the start menu point. Animations are the smoke in the daytime and at night and a window light animation at night.
CampusPointModel is the model for the Campus menu point. Night animations are the peoples, which moves from left to right and right to left, the peoples, which stand in front of the Mensa and the audimax, the bat in the sky and the stars. Day animations are the peoples, which moves from left to right and right to left, the peoples, which stand in front of the Mensa and the audimax, the bird in the sky and clouds.
StudyPointModel is the model for the Studium (Study) menu point. Night animations are the two students, the professor, the clock, the beamer animation and the clouds. Day animations are the two students, the professor, the clock, the beamer animation and the stars.
TownPointModel is the model for the Stadt (Town) menu point. Night animations are the person on the balcony, the person, which stands roadside, the person, which moves in the background from left to right, a bat, some cars and the stars. Day animations are the person on the balcony, three people, which stands roadside, the person, which moves in the background from left to right, a bird, some cars and the clouds.
FreetimePointModel is the model for the Freizeit (Freetime) menu point. Night animations are the person on the boat, the person on the bridge, the two people on the stage, the water animation, the bat and the stars. Day animations are the person on the boat, the two people on the stage, the water animation, the bird and the clouds.
MediaPointModel is the model for the Mediathek (Media library) menu point. It is a special menu point, because it has also a reference to all images and movies in this app. There are two special menu items. One shows all images in this app and the other shows all movies in the app on one place. Night animations are the movie on the screen, the person on the door, a clock and the stars. Day animations are the movie on the screen, the person on the door, the person on the sofa, a clock and the clouds.