Discussion of Weblog: ABAP Look and Feel Service

[former_member181879]

<a href="/people/brian.mckellar/blog/2005/06/12/bsp-in-depth-abap-look-and-feel-service In-Depth: ABAP Look and Feel Service</a>

<i>The three minutes routine to change any SAP-blue theme to the new theme that is required for you next demo!</i>

If there should be any questions, comments, etc on this weblog, please post it here, so that it is easier to handle the traffic. We are also interested to see if anyone does actually use the tool.

[Former Member]

FORGET IT!!! I didn't read the whole thread

excuses,

David R.

Hi all,

I'm trying to setup my ides system to test this utility but I have an issue when trying to activate the class.

It's complaining about a missing class method : CLUR_D2=>VERSION_PROPERTIES( ). I have tried to comment this to see if it can run without it but others errors raise (on the same way... interface attributes missing and so on)

My question is : any minimum SP needed? I'm trying on WAS 6.20 SP38

regards,

David R.

Message was edited by: David Rodríguez

[thomas_jung]

That problem was already discussed in this thread. Look at posting 3 and 4. You simply need to comment out those parts of the code.

[Former Member]

Yes... I realize my mistake a few seconds after sending the message...

thanks for your feedback

David R

> That problem was already discussed in this thread.

> Look at posting 3 and 4. You simply need to comment

> t out those parts of the code.

[maximilian_schaufler]

On my Netweaver 04 ABAP Preview Edition I upgraded to 640SP13 and tried to run the ALFS editor.

There are no mime files cached (as seen in ICM), and so the displayed it05 page is without any styles or images.

After 12 hours of work I don't seem to be able to think in a constructive way anymore, maybe one of you has any hints for me on this ...

Thx

Max

[thomas_jung]

I have an ECC 5.0 system that was just upgraded. It is at 640SP13 and has not yet had any additional OSS notes applied to it.

ALFS works perfectly fine in this system.

Had you implemented the early version of ALFS before the upgrade to SP13 (it comes standard in SP13)?

I wonder if it has anything to do with the following statement from the original weblog:

>Only with 620SP54 and 640SP13 will the caching automatically be updated to 7 days.

I assume you have tried clearing the ICM cache and restarting the ICM.

[maximilian_schaufler]

I wanted to implement it first (on SP11) but then thought why not do the upgrade anyway ...

The parameter to control server_cache doesn't make a difference, it was on 86400 before (1 day).

ICM restarting didn't help, I did couple of restarts on ICM as well as the instance, but no difference whatsoever.

Problem is also that I can't debug into cl_http_ext_alfs when it is triggered by the service node (or at least I don't know how to enable this early debugging, maybe web debugging only gets activated by another handler somewhere else at a later time).

[thomas_jung]

I can't debug either (although I know I have in other service handlers). I suspect that is because the ALFS node does not require authentication (and therefore the name matching for debugging isn't working).

Have you tried just cutting and pasting the generated Theme Root from the ALFS editor and using it? Also do you see entries in your ICM cache from other applications? In other words - do you know you don't have a problem with the ICM Cache.

Another thing you might try is right mouse clicking on the IT05 page and getting the complete URL. You can decode it using program BSP_DECODE_URL. That will at least let you know ALFS is building the themeroot correctly.

[maximilian_schaufler]

When I call other apps, for example sbspext_*, then I get entries in my cache, just as normal.

I did also copy the URL from the images that are tried to be displayed, compared them to the image URLs that I get on my 6.20 SP54 system, where it works. The URL is the same (except host:port).

Decoding the URL also just gave me the right themeroot.

[Former Member]

Hiya,

I saw this blog posted a while back and have only now had a chance to use it - very cool work there Brian and Steffan!

The only thing is I'm having what looks like the same problem as Maximilian!

We're on 620 sp45.

Everything installed fine, I tweaked the mime version code for 620 (me->ifur_d2_system~css_version) and the left hand side of the screen, the editor itself, looks and works fine - but the preview screen doesn't work, the BSP is displayed with no theme at all.

I opened the BSP in a new page with default theme and set the theme manually with paramters and this doesn't work either.

i.e.

http://<host>:<port>/sap/bc/bsp/sap/it05/entrypoint.htm?sap-themeRoot=%2fsap%2fpublic%2fbc%2fur%2fde..._alfs1000202FFE4C43B2D1B7D674EDAA520565656

But if I try with an SAP standard theme everything works fine and the new theme is picked up correctly

i.e.

http://<host>:<port>/sap/bc/bsp/sap/it05/entrypoint.htm?sap-themeRoot=%2fsap%2fpublic%2fbc%2fur%2fde...

I've checked the URL encoding (using program BSP_DECODE_URL) and with the alfs theme this looks fine.

In the source code the stylesheets are referenced using the correct themeRoot i.e.

<link id="urstyle" rel="stylesheet" type="text/css" href="/sap/public/bc/ur/design2002/themes/_alfs1000202FFE4C43B2D1B7D674EDAA520565656/ur/ur_ie6.css">

When I set a break point in the ALFS HTTP handler this is not picked up.

BUT the one really puzzling thing about all this is that whilst I've been trying to fix this and work out what is going wrong I've made small changes to the ALFS class, i.e. to change the default BSP application used in the editor, and sometimes after generating the class code, refereshing both browser and system caches, everything worked fine - even the debugging of the HTTP handler - for some generated themes - and then stopped working again!

Now I know how this reads - and I've worked with enough users in my time to know you must be thinking - well she must have changed something! But I really can't work out what it could have been.

I've been round and round trying to reproduce what ever it was to get this working.

I've tried all the following in various combinations:

- restarting ICM

- removing ALFS HTTP handler from ICF service

- starting with a completely new copy of the class

- adding alert statements to the ALFS editor page to track themeRoot values

- changing the code relating to me->ifur_d2_system_{css_version and me->ifur_d2_system}ur_version so that there is a version number (tried 'urversion=DAT<date>' and plain 'DAT<date>'), changed the code so there is no version number used at all.

- even (don't laugh!) put the ALFS HTTP handler on node SAP/BS/BSP just to make sure the external debugger was still working (it was). At this point I could see each time it was called, and since each call did not have the _alfs string in it, all the internal class processing was correctly skipped.

All of the above in combination with cache refreshing on both server and brower side and logging on/off.... and still feel no closer to resolving this.

From what I understand, the ALFS HTTP handler is called everytime a MIME or theme object is requested from the theme root - as this is the only time that a request would pass via SAP/PUBLIC/BC/UR. And I understand that if the requested object is already cached, there will be no request passing via this node, so the ALFS HTTP handler won't be called - but think that there must be some important point relating to caching that I must have missed ...

So that's my first question... help!

Also, Brian, what you have mentioned before, this patch you have to take a theme, patch it with ALFS then import it into the theme editor - this sounds like exactly what we need to do ... I couldn't see any weblogs relating to this - so could you point me in the right direction??

We have no portal so I'll be trying the standalong theme editor plug in for Eclipse.

Thanks in advance,

Cathy

[former_member181879]

Hallo Cathy,

You ask many interested questions in one append. Let me answer some, and see if it puts you back on track again.

First the debugging problem. When you set a break-point, you set the break-point in your name and in the client you are running. For example, I would set a break-point for MCKELLAR/500 in some system. However, any URL that is of the form /sap/public/... runs by default (always) as a user SAPSYS in client 000. Which means my break-points do not work for SAPSYS/000.

So the first trick would be look at the HTML rendered source of a BSP page. Find the stylesheet, image, etc that you are interested in. Paste this specific URL into the browser and extend it with authentication information. So you URL should be http://host.../sap/public/....xyz.css?sap-user=yourName&sap-password=yourPassowrd&sap-client=123&abc....

The last abc=123 is just each time to get a unique URL. Replace the 123 with every roundtrip with any random new number. This way you bypass both browser and server caches, and are sure that you are actually downloading the file again.

Now that we can debug, we come to something interesting. I had exactly the same problem that you described in some releases. Running as SAPSYS/000 it failed, running (in the debugger) as MCKELLAR/500 it worked! The reason was tied to some authentication problem. For this, I did change the ALFS code at a later stage.

*   Load Mime. Keep in mind to replace ALFS signature with correct start theme
    DATA: mr_api TYPE REF TO IF_MR_API.
    REPLACE lcl_alfs=>co_signature IN path WITH config-source.
    mr_api = cl_mime_repository_api=>if_mr_api~get_api( ).
    mr_api->get( EXPORTING   i_url             = path
                             <b>i_check_authority = SPACE</b>
                 IMPORTING   e_content         = content
                             e_mime_type       = mime_type ).

Check in your source whether the line <b>i_check_authority = SPACE</b> is available or not. This was the crucial change that I required. Change was done in middle June 2005, and went out in 620SP54.

<i> ...I've made small changes to the ALFS class</i>

Excellent! Those are the times one learns a lot and have fun.

<i> ... and then stopped working again! </i>

See explaination above why things works in the debugger, and then it fills the different caches. Thereafter, after the cache has been filled, those parts will work correctly.

<i>Now I know how this reads - and I've worked with enough users in my time to know you must be thinking - well she must have changed something! But I really can't work out what it could have been.</i>

No, that one line change about took me two days and an extra handler to find. I could not debug it, I had to generate trace code into shared memory and analyze with print

<i>Also, Brian, what you have mentioned before, this patch you have to take a theme, patch it with ALFS then import it into the theme editor - this sounds like exactly what we need to do ... I couldn't see any weblogs relating to this - so could you point me in the right direction? </i>

We never did build this, as there was no real "demand" for it. In principle, no 100 people screamed gime!

bye, brian

[Former Member]

Hiya, thanks first for such a speedy and complete reply - I knew it was something to do with caching but just couldn't put my finger on it - everything you recommended worked perfectly and I'm now right back on track - cheers!

I'd half found the answer to the debugging problem and was passing client explicitly - just not user name/password.

You're spot on tho - tweaking things, especially complex things like ALFS - is the best way to learn how things work.

I had found a problem in the code for this version that prevented me from loggng on - unless the client number was always entered explicitly in the URL:

in METHOD build_page__javascript

...

crlf `function showPopup()`

crlf `{`

crlf ` var url=document.forms[0].previewUrl.value;`

crlf ` url+="?sap-client=` sy-mandt `";`

...

at this point SY-MANDT = 000, just as you pointed out, so basic authentication always failed when I attempted to log on to the preview BSP appliation.

Thanks again, now all I have to do is find a good combination of colours to use!

Cathy

Message was edited by: Cathy Thomas

If I can award points to you Brian pls let me know how - as your time and quick response is much appreciated ...

[Former Member]

Hi Brian,

I'm very glad to read your last post - we fight the problems of missing stylesheets, gifs, etc. some weeks now and even opened a message in OSS, not knowing that ALFS went wrong.

We are on 6.40SP13 and had to implement the i_check_authority = SPACE while now everything is working fine (for user who do not have sap_all). I think the little code snippet should go online as oss-hint?!?

A small thing: If the colours in alfs-string are not in upper case the rendering fails. A translation to upper case would solve problem.

bye,

sebastian

Message was edited by: Sebastian Behne

[Former Member]

Hi Brian.

I'm trying to make a little BSP.

I need to <TABLE>. I decided to use a max. of htmlb (but maybe is it a bad choice ???), so, in this case , the GRIDLAYOUT extension.

One of these table must have a transparent background and the other must have a white background.

I use the "design2003" because the BSP is working on Firefox.

Question:

- Is it really necessary to use the THEME to simply modify the backgrouond ??? This seems to be a little bit complicated for a such basic task...

- If not, what's the other way to do ?

- If yes, how can you manage two different backgroung for the same BSP extension (gridlayout) ???

- If yes, wich CSS must be modified for this (I'm completely lost under the "pak" of files ".css" linked to a theme..) ???

Global comment: there is really a lack in the documentation about that (I have two books about BSP and the standard doc, but I don't find nothing about this basic task...).

Cheers.

Pierre

[thomas_jung]

YOur requirement seems rather easy. If you just want transparent or white; you should be able to use the style property of the <htmlb:gridLayout>. The possible values of Alternating, Transparent, Standard, and White are documented in the on-line help for the element.

To modify the background further, you would have to take one of several approaches (theme editor, ALFS, portal themeing, or modifying the CSS files directly, etc).

>there is really a lack in the documentation about that

By "that", what do you mean - ALFS or the changing the background on a gridLayout?

[Former Member]

Hi Thomas.

1) Thanks for the answer.

2) No, I cannot use the style property because I use the "design2003" and this property is not supported by this design (this info is not in the on-line help, I find it in a sap-press book, wich is a first lack of documentation...). That's my problem.

Or am I wrong ?

3) I can imagine to modify .CSS direcly but wich .css file ? I find no documentation about that (another lack of documentation). In a "standard" theme, I can find a lot of .css file but wich to modify ?

4) lack of documentation: yes, about changing the background. But, in fact, I don't find a lot of things about BSP in standard documentation, sorry. I already bought 2 books at sap-press and it seems that it's not enough...

Pierre

[thomas_jung]

>I cannot use the style property because I use the "design2003" and this property is not supported by this design (this info is not in the on-line help, I find it in a sap-press book, wich is a first lack of documentation...).

Really which book? I checked the coding of the element itself and it doesn't have any depreciated warnings for that attribute. I was able to get it to work if I set the <gridLayoutCell style = "WHITE">. However it is true that it may not actually turn out to be the color White based upon the theme used. Here is the rendering coding:

if mc_content->design2003 is not initial.
    if me->style eq 'ALTERNATING'.
      me->style = 'BORDER'.
    elseif me->style eq 'STANDARD'.
      me->style = 'PLAIN'.
    elseif me->style eq 'WHITE'.
      me->style = 'PLAIN'.
    elseif me->style eq 'NEGATIVE'.
      me->style = 'FILL1'.
    elseif me->style eq 'POSITIVE'.
      me->style = 'FILL2'.
    elseif me->style eq 'SUBTOTAL'.
      me->style = 'FILL3'.
    elseif me->style eq 'TOTAL'.
      me->style = 'HEADER'.
    endif.

So it is really just setting it to plain. Perhaps that is what the book was refering to.

Now I am not try to argue the point about the state of document. My question was just asked because there is tons of good information about BSP on SDN that often can fill in the gaps. I was trying to probe to see if a particular weblog might be in order.

More specifically to to the question of documentation on changing the background, I think there is a valid reason for this. You have to think about the inner rendering (html, javascript and CSS) of the delivered BSP extensions as a form of APIs. The inner coding isn't meant to be exposed or touched by customers. It is designed to do certain things automatically for you (like take on portal themes). In the example of the portal themes - perhaps you have used a special High Contrast theme for the visually impared. In that case you wouldn't want to force your background to a particular color - that might throw off the theme.

So by the same token SAP doesn't really want you to change their CSS files in their themes (also because your changes would be overlayed by each hotpackage/upgrade potentially) directly. However you are welcome to export and import them into your own theme (using the program BSP_UPDATE_MIMEREPOS). However you are correct that the CSS organization is far too complicated to lightly mess around with. Therefore SAP has the standalone theme editor that runs in the Netweaver Developer's studio that helps to make changes without needing to get into the details of the actuall CSS files. Likewise if your application runs in the Portal, you can use the Portal Theme editor to do the same.

Documentation is available on SDN for both the Portal and the Standalone theme editor. The standalone editor has step-by-step instructions to its installation. There are also a few weblogs on the subject in the BSP are on SDN. I take it that you really don't want to buy another book on BSP, but in the book Advanced BSP Programming there is a chapter (Chapter 17) that covers all of these tools as well.

Of course with the openness of BSP, you are always free to use your own CSS files and use a standard HTML table instead of the <htmlb:gridLayout>.

[Former Member]

Hi Thomas.

1) The book is "BSP Extensions: How to master web reporting with HTMLB" (Sap-Press).

Appendix - table 5.3 (page 78):

Style -> "style of background color for table cells (not supported in DESIGN2003)".

So you can see, info is quiet different...

Anyway, because this WHITE doesn't work, it cannnot help me a lot.

2) I work on a 4.7 release (620). I use SE80. What SAP call a "theme editor" in SE80 seems to be just a way to copy files in a theme. Usefull but... wich files???

Of course, I don't want to modify a SAP theme (in our company, we don't make repair of the standard). What I want to do is to copy a standard theme on my Harddisk (it's done), modify it and integrate it in a new personal theme.

So, my problem is to choose the right .css to modify (for gridlayout). You talk about netweaver developer studio (again, I'm on a 4.7...). Well, fine, but I don't have this tool. Is it possible to download it somewhere ?

3) Pending question: is it possible to have on the SAME BSP application different gridlayout with DIFFERENT layout ?

If not, I suppose that I have to use the old classic <TABLE> tag.

Right ?

Pierre

[Former Member]

Thomas,

I forgot one point:

- I already bought the book "advanced BSP programming". Now, I'am waiting for it from 2 weeks.

Cheers.

Pierre

[thomas_jung]

I thought I might share how we are using ALFS at my company. A while back we created a BSP Extension Element for a Common Page header that is included on all of our applications. This element has functionality to set the language, theme, and other settings (sort of a poor man's portal personalization). If the user changes their theme, it is writting into an ABAP table and defaulted back into every application that uses this element.

We are now able to create our own themes with ALFS and add them to this extension quite easily. The following is screen shot of this element and a new theme created in ALFS:

https://weblogs.sdn.sap.com/weblogs/images/1918/ALF_GCS1.JPG

We simply created a maintenance view and used standard SAP Generated Table Maintenance to allow us to quickly add new themes to this drop down. In fact you just have to cut and paste the theme root from ALFS into this table maintenance.

https://weblogs.sdn.sap.com/weblogs/images/1918/ALFS_Table_Maintenance.gif

As a side note, I just love the name of this tool - ALFS. There was a TV show in America a good number of years back (1986) called ALF (Alien Life Form). It was about an alien (actually a hand puppet) that lives with an American Family. Since I was only 12 years old when this TV show was on the air, I was a fairly big fan.

As I imported Brian's code for the Service Handler, I couldn't help and modify it a little to include the fuzzy little TV star that the tool shares a name with.

https://weblogs.sdn.sap.com/weblogs/images/1918/ALF1_Fuzzy_Little_Guy.jpg

[Ulli_Hoffmann]

Hi Brian,

during reading the weblog my thoughts were: well really cool.

Then, when I looked closer into the methods, I really started scratching my head, especially about the way you hack ("patch") the color code of the gif's. Amazing! How did you come up with that idea?

It's almost worth a patent, isn't it?

Ulli

[former_member181879]

> It's almost worth a patent, isn't it?

Yes, we considered it, but came to the conclusion that it is more just state of the art programming. We are full of funny ideas. (You should know:)

[former_member181879]

Here the information about the theme editor that Sergio has collected. Keep in mind that the BSP rendering libraries (including PHTMLB) are based on a (unified rendering) framework which is the same as used in EP6 and WD. As such, the same theme editor can used, as we use the same stylesheets.

<b><u>Documentation</u></b>

https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/webas/webdynpro/ho... to edit web dynpro themes.pdf

<u><b>A from Timo:</b></u>

The Eclipse Theme Editor currently available in SDN can only be used together with the SP9 Themes package for Web Dynpro SP9.

An SP11 or SP12 Theme Editor and the corresponding SP11 and SP12 will be available on SDN soon.

In meantime you can download the SP11 Theme Editor and Themes from

http://sapmats-de.sap-ag.de/download/download.cgi?id=8Z6FOZ0O8OU04KYDBLFFEA6EAUP3GGUF6RPRMC4LF4A3BVH...

and the SP12 Theme Editor and Themes from

http://sapmats-de.sap-ag.de/download/download.cgi?id=1979MBH6BK6113CFUVAGAIS67J11E6DI8N5KOZ9UWARJ3RY...

These archive both contain an upgrade description of how to upgrade already created SP9 themes.

The recommended upgrade procedure is to first export all themes from the SP9 Theme Editor and import them into e.g. the SP11 Theme Editor residing inside a second Eclipse installation.

Regards,

Timo

[SergioFerrari]

Everything is clear.

Thanks so much.

Sergio

[SergioFerrari]

I’m implementing it.

Before giving any comment I have to ask your assistance.

The statement:

props = CLUR_D2=>VERSION_PROPERTIES( ) (in METHOD initialize_ur)

gives a syntax check because class CLUR_D2 does not contain method VERSION_PROPERTIES.

I’m trying with SAP Web AS 6.40 SP11 and I read that even if the code will be shipped with 640SP13 it “can be manually installed on any system”.

Thanks in advance, I was wainting for something like this since 2 years...

[former_member181879]

Hallo Sergio,

You are right! I missed this bit of code. This UR version stuff is part of the new coding we added in the last SP cycle to get a 7 day mime caching complete. It is not available in the older SP levels. (I did remember to manually set the cache tiome to 1 hour.)

I have already updated the sources attached to the note.

Or you just delete these parts. You need to delete the only block that reads CLUR_D2=>GET_VERSION and sets the system->_version fields. Also delete all the cases where "?_version" is used (3 lines). Just load the MIME objects with a version number.

regards, brian

[SergioFerrari]

I had allocate the HTTP HANDLER the SAP namespace and to allocate it to a SAP Developer Class using an SSCR key because SICF does not allow to use customer classes.

A part this problem little trouble, everything works fine and it is very fast.

OK, with 640SP11 also the BSPTHEMEROOT customization table is missing but no error occurs.

I'm using the Standalone theme editor (here is how to download last versions )

and now it would be very nice to get the best of both approaches.

If Brian will write a new Weblog I will appreciated so much. The case could be:

1. changing the font globally from Arial to Verdana

2. changing the tableView rendering in order to hide cell borders

3. substitute paging icons in the tableView

I like so much the idea to use a new specialized HTTP Handler...

[former_member181879]

Keep in mind that our approach is NOT a replacement of the standard SAP Theme Editor that is available in EP6 (and also available as standalone Eclipse plugin).

However, we wanted a tool that will take us from 0 to 100 in 3 minutes. We did not feel like manually updating each GIF or for setting the same set of colours for each control, etc. Our quest: how to get a green theme that match the home page of a company X one hour before a demo. We wanted ease of use and blazing speed. Not flexibility.

Our current recommendation (and approach!) is to actually have an integration path to the current theme editor. What we do is to export a theme from the theme editor, use our ALFS to patch it quickly from blue to green, and then to import the modified ZIP back into the theme editor. This is what I allured to before, we have a rough prototype of this running. If there is a market driven "requirement" (from people hanging out in this forum!), we can complete it as well.

Sergio, to your three specific questions:

<i>1. changing the font globally from Arial to Verdana</i>

With our approach you can do this relatively easy. If you wish for a theme editor approach, we must complete the integration bits and pieces.

<i>2. changing the tableView rendering in order to hide cell borders</i>

This is a typical example where you would use the theme editor.

<i>3. substitute paging icons in the tableView</i>

The correct approach for this would be to generate a new complete theme you require into either the portal or directly into a new place in the MIME repository, and then patch the GIF files that you require. Keep in mind with each new SP to redo this work.

If I had to do it, I would write a simple handler that sits in the ICF tree and sniffs all requests. Should someone ask for "treeIconX.gif", change the URL to point to some new location in the mime repos and pull the image from there. This way, your code is upgrade secure and you only pull a few images from another source. Ahh, these especialized HTTP handlers...

[maximilian_schaufler]

Now I can't wait to try that - got a lot of other work to do (including playing around with my new work laptop , but this one ranks high in my priority list.

For our upcoming WebAS plans I wanted to create a simple company-based theme, now it looks like this will be done within minutes, saving me lots of time!

Don't know when I get to test it, but I will definitely come back here to share my experience.

Great work!

Max