Journal of Software Engineering and Applications
Vol.6 No.1(2013), Article ID:27482,5 pages DOI:10.4236/jsea.2013.61006

An Web Client System Design and Implementation for IOS Platform*

Haixia Peng, Hai Zhao, Chuan Lin

Science & Engineering, Northeastern University, Shenyang, China.


Received November 25th, 2012; revised December 27th, 2012; accepted January 5th, 2013

Keywords: Web Client Systems; IOS; Medical Institutions; C/S Mode; ASIHTTPRequest


For current physical examination and medical institutions, the majority of Medical projects need a long time to get the result, this wastes user too much time. In order to solve this problem, this paper presents a program to achieve viewing the results of examination anytime or anywhere with the help of cell phone applications software. The program proposed to solve the problem that user have to wait for the medical test results for a long time and cause the time waste, compared to the programs which using e-mail, SMS and mailing report card to inform the user the results, this one is to be more efficient, while also better meet user and medical institutions’ requirements. In addition, in order to test the practicality and feasibility of the program, with IOS devices as the material basis, this paper constructs a Web client system, based on the GPRS technology, we can realize the data communications between the Web server and a client which is the workbench IOS devices. Through testing, we can proof this Web client system has certain practical and development value, with the physical examination institutions become popular gradually, I believe that this design ideas of the system will be used extensively in the medical system, and also will bring a person more convenient.

1. Introduction

According to the appointment of the national medical network, after 2007, more and more enterprises focus on their workers’ health care and require more and more workers to make physical examination. This also makes the medical institutions develop rapidly among the medical industries, and various physical indicators of examination become popular gradually. However, everyone knows that, in medical projects, many items need to check the results for a long time, people who is taking medical examination have to spent a lot of time on waiting for the results. For users, this was not only brought to waste time, the bored of waiting is also not conducive to their physical and mental health. For this problem, we designed a new solution, that need the medical institutions full use their own Web site, and spread the user’s personal information and examination results to the site database in time. Then the medical institutions should provide to users (the person who makes health check in the medical institutions) a available WebApi interface, through this interface, users can register on the medical institutions website, then the people who has got Registered can use the user name and password by opening the application software on the phone to view the test results anywhere or anytime.

In order to test the program’s feasibility and practicality, this paper build out a web client system, which is a mobile phone application software essentially, and supported by means of GPRS technology, have achieved the data communications between the client (the IOS devices) and the server side, and will make the examination results that saved in the server shown on the IOS device’s screen.

2. The Principles Analysis and Value of System Design

IOS and the iPhone, just as the old Steve Jobs’ unique charm what can not put into words, as quickly became popular in the world. From the iPhone’s fourth generation products’ firm market price, we are enough to find how successful mobile phone system the IOS is [1]. It is the same case that the development of its corresponding application software will have a certain amount of research value for such a successful phone system, more and better applications will enhance the mobile phone function and usability greatly.

Looking at the existing software of smart phone, its broad range of application is very obvious. However, the thought that combine the phone software functionality with the medical examination has not been applied in reality. The promotion of this idea, both for mobile developers, or medical institutions, the impact is extremely significant.

In the two big calculation model, B/S and C/S have their advantages and disadvantages, how to mix and improve their development technology together, and integrate their respective performance advantages, is the research hot spot to the application of systems development. In the previous studies, in order to improve the B/S system’s ability of handling complex question, most of them is considered how to make the object technology and component technology be applied to the Web development [2]. But this does not completely solve the problems that the server of B/S system overloaded and the client’s performance is not strong and lack of personalized service, etc. But, if we can make the B/S structure’s successful HTTP protocol and Web server technology be applied in the C/S system, we will develop an application system what is customer feature-rich, open system and high operating efficiency. Based on this principle, this paper build a Web client system for IOS platform, this system make the convenience of mobile devices be used into the medical institutions, and provide a platform to the medical users to view the examination results anytime or anywhere, for the medical institutions, compared to using of mobile phones, SMS, e-mail and courier mail to notify the users of examination results, the using of this design is more convenience and efficient, not only with low cost, but also easy to manage and run. What the work personnel need to do is just to upload the examination results into the site database in a timely, and save the physical examination data in the corresponding database. And relative to the user itself, the program provide a platform to view the examination results anytime or anywhere, while avoiding much trouble, such as spending a lot of time in the hospital on waiting for the test results, or multiple trips to the hospital only for medical laboratory orders.

3. Web Client System Interface Design and Implementation

The system’s user interface consists of three major components, namely the login screen, the user information display interface, and new user registration link interface. The following will make a brief introduction for each parts design and implementation principle.

3.1. The Design of Login Screen

Login screen is the first interface window when we open the application software. For the design of login interface, what we should first take into account is the simple of the interface, so give the user a comfortable feeling, at the same time, we must to ensure that its functions and effects realized, that require the contents displayed on the interface should not be too many, and for color selection, should be refreshing, can not have too many colors.

Before elaborating on the interface design process, what we should understand firstly is that interface is called view more professionally in Xcode. In the view’s design process, their skills and flexibility are particularly high. In one view, there is only one parent view, we can add multiple child views into the parent view, and in the display process, the child view joined into the parent view first will be in the bottom, and the top view is the one which last joined [3]. The following will introduce the various parts of the login screen’s design process briefly.

Firstly, we should join a full size “UIScrollView” into the view as a child view. This View is belong a Data View which can roll, and in its rolling process, the essence is modifying the origin of the view coordinates, when a finger touch the screen, the Scroll View will intercept the touch events temporarily, using a timer, if there is no finger movement event after the timer reaching the setting point, then, “Scroll View” will send “Tracking Events” to the “Subview” which was clicked; if the movement event occurred before the timer reaching the setting point, then the “scroll View” will cancel “Tracking”, and place their own scroll.

In the various types of IOS equipment, there is unreal keyboard, when users need to input something, the device will automatically pop up a virtual keyboard, the user input their own content by striking the virtual keyboard. The emergence of the virtual keyboard is the reason why to join a UIScrollView. In this login screen, based on the requirements from the appearance and function, the user name and password inputting box was placed in the bottom of the interface. When the user clicking on the input field, the virtual keyboard will pop up and block the input box. After adding a UIScrollView, the program can handle to be detecting automatically whether the virtual keyboard pops up or not, and through accessing to the size of the keyboard to determine the size of the UIScrollView sliding, so as to achieve the effect that make the inputting box pop up with the keyboard, the results shown in Figure 1.

There are two UIImageViews joined, and one is as the system’s identification icon, for the sake of appearance, this icon was placed below the middle of the login screen, and the other one is for the interface background, as far as possible to achieve the effect of decency, here is a selection of floral diagram with cool color as the background.

Finally, we use a UITableView to design the login box. UITableView is a “being called catalog view or table

Figure 1. Effects after the UIScrollView entering.

view” (the English name is table view), this table shows or edits the information with the form of a list view, which consists of one or more lines. Through the vertical scroll way, users can navigate to arbitrary line of the table view, and you can customize the displaying way of each row’s data. In this login screen, the login box includes four lines, such as the user name input line, the password input line, the log line, and the new user registration line. In order to realize the effect that when the user clicks on the login line or the new user registration’s line the interface will automatically switch to a new interface, we added a button to these two lines, and designed their own controlling events [4].

It is worth noting that when join each view into the View, the relationship between layers should be handled properly, in order to achieve the desired effect of design, here is adding a UIScrollView into the parent view firstly, and then add a UIImageView which stored a background image into the view, to make the background image place in the bottom of this view. When we loaded the identifies icon and login box into the view, due to the location of this two do not overlap, therefore, when added them to load into the ScrollView, there is no requirement on the order, but we must make sure that they were loaded over the background map, this is the only way to make sure the icon and the input box are placed in the top of the background image, rather than being overlapped by the background image [5]. The simulation of the login screen shown in Figure 2.

3.2. The Design of Information Display Interface

From the above contents, we already know that when the user clicking on the login button after entering a user name and password in the login screen, the interface will switch to the user information display interface, in this interface, it will appear the user’s personal information, such as name, gender and age, these information can make users check their own information to confirm the information shown is their own easily. The following will make a brief description on the process of the information display interface design.

Figure 2. Login screen.

Different from the login screen, in this interface, we need not to input anything, so there do not exist the problem that the virtual keyboard will block the input box, which means that, in this view, we do not need to join a UIScrollView, in designing this interface, firstly, we need add a background image, and the color of this background image should be based on cool colors primarily. It is clear that the UIImageView which stored the background image should be loaded into the view firstly, and to make it be on the bottom of the view [6].

Taking into account that we have many items of information to display, and they can not display in one screen, so we selected of a UITableView to design the information display box. This is because this View is a subclass of UIScrollView which has the scrolling function, when the View has more cells, it allows for the user to realize scrolling or paging effects, so there is no need to worry about that it can not show too many projects in a single view.

In the design of the information display box, as each line’s content is different, and whether can be selected are not setting same, so we choose to set the UITable View by setting each cell. In the information display box, the first four lines are displaying the user’s personal information, and the back 11 lines are showing the behavior test results. For the personal information, users need not make any treatment, therefore, this four lines and the line shown as “results show” are set to be not selected. But for the various of test parameters display lines [7], we added buttons, when taking into account the aesthetic problems after adding buttons, the buttons’ formats were set to be hidden, so that each line added button though, the view is not change, what has been changed is only that when clicking on the row, the button will trigger the corresponding event.

In this view design, added the UITableView’s header, and it displays the contents of “Welcome to the health monitoring system”. As tail, it displays as “Embedded Laboratory of Northeastern University.” Taking into account the aesthetic factor, in the design of each cell, the cell’s background was set as a picture whose color gradients, this can give the user a sense of depth. At the same time, every detection parameter line is loaded of a corresponding icon. Figure 3 is the information display interface’s simulation diagram.

From the previous section, we know that in the information display screen, each detection parameter’s cell is added a button, and each cell’s button will trigger their events to switch to a same view, in this view, we added two UIImageViews, one is for displaying the parameters waveform, the other is for displaying a UITextField which is provided by the medical institutions, this Field is from the server side, it stored the detailed explanations of various test parameters what provided by medical institutions, of course, if there are abnormal results of the user’s test items, medical institutions can give comments or suggestions in the Field to user, and the contents inside will be shown in another view after the user clicking on the corresponding cell.

What should be put forward is that, for different views, their respective parameters can not be mutual used, if one view want to use the data of another view, you need to first complete the problem that the parameters passing on between two different views. In this design, we use a NSUserDefault data to solve this problem. That is, we first defined a NSUserDefault in one interface and inside the data which need to pass on, and then again, in another interface, we just need to pick up the data from the NSUserDefault directly.

4. The Achievement of Data Connectivity between the Web Client System and Server

The system need to complete a key feature is reading the data what you want from the server. This means that the system needs to achieve data connectivity with the server. In the existing technology, we can achieve the data connectivity between the client and the server through a variety of ways, such as using the UDP layer, or we can also be based on the HTTP layer protocol to achieve it. In this design, we selected the HTTP protocol layer to achieve the effect, the server provides a WebApi to the

Figure 3. Information display interface design.

user interface. Through this interface, the user can achieve data connectivity with the server, and get the data content that you want from the server [8].

We designed the system with the help of a third-party open source components—ASIHTTPRequest, it is an open source project that done directly in the CFNetwork, it provides a more convenient and powerful HTTP package than the official network. It is easy to use, and also encapsulates the CFNetwork API, which makes the communication with the Web server become easier. In addition, it is written in Objective-C, and can be used in the MAC OS X and iPhone applications, also suit for performing the basic HTTP requests and interaction (or a feedback).

As a very strong open source project for HTTP visiting, ASIHTTPRequest allows a simple API to complete some complex functions, such as asynchronous requests, queue requests, GZIP compression, caching, HTTP, progress tracking, upload files, HTTP authentication and so on. In the new version, it also joined the support from the Block that the closure of Objective-C, this lets our code become more simple and flexible.

In the project, after adding the ASIHTTPRequest package, users can call the various methods and functions directly to achieve client-server data communications. For example, the user can call the post method directly, to loaded the login username and password information what is from the user interface to the server, and the server received the user name and password, then it will traverse all the files in its database, and based on the consultation content with the client to determine the data that need to return to the client, as is using the HTTP-layer protocol, the data files that the server returned to the client can only be xml or JSON format, which means that the data what the client receives from the server can not be used directly, they need to be resolved first. Only when the analysis is completed, the client can use the data content what returned from the server [9].

There is no doubt that, or the IOS device is connecting WIFI, otherwise, it needs the support of GPRS technology, then you can finally achieve the data communication between Web client system and the server [10]. After adding this feature, in the information display interface, when the user clicks on the login button, the system will automatically jump into the information displayed interface, and achieve the process of data communication with the server in the simultaneously, and eventually get their own desired data content from the server. Shown in the Figure 4, rotation of the white circle above the simulator is a identification for the iPhone is networking. After the data acquisition being successful, the information interface in Figure 3 shown will become like Figure 5 shows.

Figure 4. IPhone status of networking.

Figure 5. Data access to the information display interface.

5. Conclusions

Currently, the Web client system has not been put into practice, but the test has shown that the system is stability, and with a strong practical. With the help of this system, mobile phone users can view the test results at anytime or anywhere, at the same time, the system can achieve the data communication between the client (the IOS device) and web server with the support of GPRS technology, which have solved the inconvenience that led by the current narrow WIFI coverage of China. In addition, another design feature is that it applied the successful HTTP protocol of B/S structure and the Web server technology into the C/S system. Then we developed a application system that has feature-rich client, open feature and a high efficiency of operating efficiency.

We can imagine, if we put this system into medical institutions, then the medical users need not to spend a lot of time on waiting for the test results, and when the test results came out, what the hospital medical staff need to do is to take the results of testing and health advice for medical users passed into the hospital’s server site in the first time, this facilitates the mobile phone users view their own examination results through this system software. In addition, the system also takes the privacy issues into account, and guarantees the right to medical privacy of users by setting login screen. Although, so far, the application software that this paper designed has not been applied into market, but I believe that with the development of physical examination and medical institutions, this design will be widely used in the near future, and bring convenience to people.


  1. D.-H. Kwak and K. Ramamurthy, “IOS Resources, Electronic Cooperation and Performance: A Conceptual Model,” 44th Hawaii International Conference on System Sciences, Kauai, 4-7 January 2011, pp. 1-10.
  2. J. P. Zhang, X. D. Zhu and X. Liang, “C/S and B/S Mixed Style and the Application,” 1st International Workshop on Education Technology and Computer Science, Wuhan, 7-8 March 2009, pp. 682-686.
  3. D. Brateris, D. Bedford and D. Calhoun, “IOS Hardware as a Sensor Platform: DMM Case Study,” IEEE Sensors Applications Symposium, San Antonio, 22-24 February 2011, pp. 308-311.
  4. B. A. Brady, A. K. Jones and I. S. Kourtev, “Efficient CAD Development for Emerging Technologies Using Objective-C and Cocoa,” Proceedings of the 11th IEEE International Electronics, Circuits and Systems, Tel Aviv, 13-15 December 2004, pp. 369-372.
  5. G. Licea, L. Aguilar and R. Juarez-Ramirez, “iPECH: A Framework for Generating Views in iPhone/iPod Touch Applications,” LA-WEB, Latin American Web Congress, Merida, 9-11 November 2009, pp. 22-25.
  6. R. Rawlings, “Objective-C: An Object-Oriented Language for Pragmatists,” IEE Colloquium on Applications of Object-Oriented Programming, London, 16 November 2002, pp. 2/1-2/3.
  7. T. Schwotzer, “A Mobile Spontaneous Semantic P2P System,” IEEE International Conference on Communications Technology and Applications, Beijing, 16-18 October 2009, pp. 977-981.
  8. S. Aljawarneh, M. Dababneh, H. Hosseny and E. Alwadi, “A Web Client Authentication System Using Smart Card for e-Systems: Initial Testing and Evaluation,” 4th International Conference on Digital Society, St. Maarten, 10-16 February 2010, pp. 192-197.
  9. H. W. Zhang and X. J. Yuan, “Schemas Extraction for XML Documents by XML Element Sequence Patterns,” 1st International Conference on Information Science and Engineering, Nanjing, 26-28 December 2009, pp. 5096- 5099.
  10. W. Ali and S. M. Shamsuddin, “Neuro-Fuzzy System in Web Client-Side Caching,” IEEE/ACS International Conference on Computer Systems and Applications, Rabat, 10-13 May 2009, pp. 888-895.


*Foundation Item: Northeastern University basic scientific research projects business expenses (N100304002).