Are you an ABAP veteran, too? If anyone needs a function module or a new report, you quickly turn to the SE37 or SE80 and feel at home? No matter which module, you know every table? And now the management has agreed to go new ways and convert some of your applications to the new SAP Development Toolkit SAPUI5 and it’s your job to take over the development. However, you haven’t really heard anything about SAPUI5 before? Then this post is for you!
After years of working with the Workbench, ABAP and SAP GUI it can be difficult to look forward to new tools and IDEs.
Switching to new technologies and programming languages is not always easy, because the syntax can be radically different. But be honest: companies often use old versions of the workbench without features such as auto completion. Only few ABAP developers have access to the newest versions. That is the reality in the SAP consultant business. SAP UI5 (and web development in generela) can be developed with modern IDEs, such as Eclipse.
In this blog series I want to show you the basics of SAP UI5 development. If you want to dive into the world of the SAP Netweaver UI Development Toolkit for HTML5, short SAPUI5, you should take a look at the open web standards HTML5, CSS, jQuery and Javascript. This post is the first part of the series which contains three parts. The parts contain a short entry into the following technologies:
  1. HTML5
  2. CSS
  3. JavaScript (DOM tree)

HTML

HTML stands for Hypertext Markup Language and I am sure that most of you have already heard of it. It is used the describe websites. It structures content, let it be text, images and so on. Version 5, the newest version, allows you to insert video, audio and several other interesting features like 3D graphics.
To develop a webpage with HTML5 all you need is a texteditor and a modern browser (Chrome, Safari, Firefox, IE). It is important for you to know that it makes a difference which browser you use. They contain different rendering engines and therefore the output is not always the same. You should always test your website on the most popular browsers to make sure that your website will be presented correctly to most of the users. A lot of companies still use old versions of browsers. Therefore it is always a good idea to test your site on old browsers like IE6.HTML is a markup language that consists of HTML elements, like the element p, which represents a paragraph. These elements are called ‘Tags’. The h1-tag represents a header. It could look like this:


<h1> I am a header</h1>


An opening tag looks like this “<tag>” and a closing tag looks like this “</tag>”. This syntax tells the browser, that the text between “<h1>” and “</h1>” is a header. The HTML tags are inserted into fixed parts of a HTML website. These parts are called the “head” and the “body” of the page. A standard HTML5 page is declared as follows:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ http://www.w3.org/TR/html4/loose.dtd>

<html xmlns=http://www.w3.org/1999/xhtml“>
     
<head>
          
<meta http-equiv=„Content-Type“ content=„text/html; charset=utf-8″ />
          
<title>New Web Project</title>
     
</head>
     
<body>
          
<h1>New Web Project Page</h1>
     
</body>

</html>


A lot of IDEs will generate this basic HTML frame for you. In general it is enough to define a html document like this:


<!DOCTYPE html>


Your website is defined by the <html>-tag. The <head>-tag contains the header of the page. It contains meta information like the charset. This is important if you use certain special symbols.
The <body>-tag contains the content of your website.To increase the readability of your HTML-code you can insert spaces or tabs between your tags. You should always try to use indentation and blank lines to make your code readable.

I will now present the most common tags:

I already mentioned the headers <h1> to <h6>. The higher the number the smaller is the header font size. This correlates to the headers in Microsoft Word.

The tag <p> is a paragraph in which you can add text.

<ol> is a sorted list, <ul> a list, <li> is a list entry, <br> is a carriage return and another often used element is <div>. <div> can be used as a frame for neary every other element.

A very simple page could look like this:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“

http://www.w3.org/TR/html4/loose.dtd>

<html xmlns=http://www.w3.org/1999/xhtml“>
    <head>
           
<meta http-equiv=„Content-Type“ content=„text/html“; charset=“utf-8″ />
           
<title>New Web Project</title>
     
</head>
     
<body>
          
<h1>SAP UI5 Basics</h1>
          
<h2>SAP NetWeaver UI Development Toolkit for HTML5</h2>
          
<div>
               
<p>On the website of our <i>  department</i>
                    
<a href=http://www.example.com”> Mission Mobile</a>

                you can find interesting news and articles <br>

                covering current topics in the field of <b>mobile applications</b>.
              
</p>
          
</div>
     
</body>

</html>

Insert this snippet into a common texteditor and save the file with the ending “.html”. If you double click on the file your browser should open and display the following content:

1.PNG

The tags <i> and <b> format the text. <i> stands for italic and <b> for bold. The element <a> is a link. The attribute href of the tag defines the destination of the link. In this case it is the homepage of my company.

Let’s wrap it up

HTML is used to structure content on a webpage. I hope, that you could get a little glimpse into the world of web development und understand the core concept of it. I can only recommend using the internet, books and forums to strengthen your knowledge in this field.

Maybe you have already noticed that the standard elements a far away from looking fresh and modern. How can you implement a corporate design? This brings me to the second part of this series: CSS or cascading style sheets. This technology is used to format your html website.
If you have any question feel free to ask me in the comment section.

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply